Criar e projetar um site profissional para WordPress - Otimize seu site para melhor SEO | Parte 5

1. Introdução - UI vs UX vs CX: Oi e bem-vindo à seção de otimização fora do curso. Agora, esta é uma seção super importante onde vamos falar sobre coisas como velocidade de carregamento de páginas . Agora, se a velocidade de carregamento da página for muito lenta, seus visitantes nem vão ficar por perto para experimentar seu site. Então não importa o quão bem você decidiu. E agora, mesma forma, se você tem uma velocidade de carregamento muito rápida, mas você tem um design terrível, os visitantes não vão ficar de qualquer maneira. Então, a parte importante é otimizar tudo e encontrar esse equilíbrio maravilhoso para garantir que tudo funcione. Então, nesta palestra, vamos seguir em frente e passar por alguns acrônimos realmente importantes, o que eles são, como usá-los e como se relacionar com essas expressões e mantê-los em mente enquanto você está projetando seu site geral, à direita, Até agora temos feito a página inicial. Agora vamos otimizá-lo e essas estações de otimização, vamos ter em mente durante todo o resto do curso. Então, sempre sabemos o que é importante e no que nos concentrar. Então vamos começar agora, Uma expressão que você vai ouvir ah, muito como você faz sua pesquisa e como você continua a desenvolver seu site e seu site edição e design habilidades é algo chamado você. Eu também conhecido como interface de usuário. Então interface de usuário é basicamente o que temos feito. É o desenho. Então, se tivermos uma olhada em nosso site agora, uma parte da interface do usuário é tudo isso que estamos olhando, como o fundo aqui, por exemplo, como a fonte que reutiliza as cores que estavam usando o fato de que fizemos estes menu pegajoso e deu-lhe uma sombra. As cores aqui, o fato de que fomos pensados em ter essa escuridão ter essa luz e então fazer isso Ah, um pouco escuro. Você está fazendo isso um pouco mais leve. Isso tudo faz parte do design, como ele vai parecer e como ele é experimentado com as diferentes cores. E isso é uma parte fora da interface do usuário. Assim, poderíamos resumir a interface do usuário como parte da estética. Certo? Como o site se parece. Mas também há outra coisa. Há algo que é chamado usado, experimentado como usual acrônimo que você x certo. Podemos vê-los em negrito. Então a experiência do usuário é basicamente como seu site funciona, certo? Então, uma parte da experiência do usuário é, por exemplo, o que acontece quando eles vêm para a página inicial. Qual é o próximo passo? Que eles vão fazer o assunto que temos que aprender mais botão que vai levá-los para o início aqui, página a ordem dessas páginas, o fato de que temos um menu pegajoso. Assim, sempre que eles estão rolando para baixo, eles podem acessar instantaneamente essas páginas. Isso é tudo uma parte do usado para experimentar, como o site funciona e como eles podem acessar diferentes coisas. Basicamente, como o site se sente, e também parte da experiência do usuário é o seu site preencher Aggie? Carrega devagar? Por exemplo, se eu rolar para cima, as coisas ficam embaçadas? Não demora muito para que esta cor apareça. Tudo isso faz parte de sua experiência. Agora, se isso sentir clunk, por exemplo, ou Laghi que realmente vai minimizar a experiência fora do site, certo? Se tivermos uma velocidade de carregamento lenta que vai minimizar uma grande parte da experiência do usuário deste site para que possamos resumir a experiência do usuário como o site funciona, como as páginas são dispostas, por que elas estão dispostas dessa maneira. A função de busca, a forma como foram colocadas as seções, por que colocamos as seções dessa maneira. Então percebemos que a interface do usuário e a experiência do usuário eles meio que se misturam, mas eles não são os mesmos. Então, onde estão as interfaces do usuário sobre o próprio design? experiência do usuário também tem uma parte do design, mas é mais sobre como ele também opera para que ele funcione rapidamente, sem esforço e de uma maneira pensada, por exemplo, que temos a parte inferior do aprendizado que ele leva-os para a página inicial que temos um menu colando, etcetera. Isso é tudo uma parte da forma como o site funciona e, portanto, uma parte da experiência do usuário . E então também temos algo que é a sigla S C X, também conhecida como experiência do cliente, e a experiência do cliente que é muito mais sobre o seu negócio, como as pessoas estão percebendo o seu negócio, certo? Então, por exemplo, se você tem tais coisas, como você tem em e-mail, aberto ou você tem uma geração de leads, ou talvez você está oferecendo coisas gratuitas em seu site. Eles estão recebendo uma sensação muito boa de toda a experiência em seu site de seu negócio que Issa parte fora da experiência do cliente. Agora, podemos resumir isso como sendo alguns fora da interface do usuário, a experiência do usuário junto com o seu negócio. Certo. Então, se você tem um site realmente bonito, você tem uma ótima experiência de usuário nesse site e seu negócio está oferecendo uma ótima solução para o problema deles. Então você vai ter uma experiência muito alta para o cliente, certo? Assim, poderíamos resumir que como a experiência geral de negócios que seus clientes que seus visitantes estão tendo fora de seu negócio e que seu negócio é, naturalmente, representado por seu site. Agora vamos em frente e nos concentrar na interface do usuário e na experiência do usuário, porque este é um curso de masterclass WordPress, certo? A experiência do cliente virá naturalmente como o seu começo a desenvolver o seu negócio porque o negócio diferente vai ter ferramentas diferentes, necessidades diferentes. Mas vamos nos certificar de que o site cumpre tudo com o design e tudo com a experiência do usuário, da maneira que temos e continuaremos a fazê-lo agora. O resultado da otimização de tudo será, por exemplo, que nós vamos ter melhorado S E O. Então, quando nossas páginas estão carregando mais rápido, isso também significa que os motores de busca vão ficar felizes que você vai classificar mais alto. Isso também significa que os clientes vão permanecer em seu site. Agora isso é chamado de retenção. E quando você tem uma alta retenção, em outras palavras, cliente sustentado por um longo tempo em seu site, motores de busca vão gostar ainda mais de você. E isso significa que você vai classificar mais alto e mais alto na classificação. Como você vai receber mais e mais e mais visitantes, e é disso que se trata. E, finalmente, uma vez que você tem uma ótima interface de usuário, ótima experiência de usuário e, finalmente, a experiência personalizada realmente atinge picos. Então você vai ter conversões agora, conversões. Essa é apenas uma palavra que literalmente significa mudança. Então, uma conversão para um bloco pode ser que você tenha um visitante se transformar em um leitor. Agora, se você tem um comércio, isso pode significar que você tem um visitante se transformar em um comprador ou você pode ter, por exemplo, um visitante se transformar em uma pista , etc, Dependendo do que você quer que eles transformem em convertido em que vai ser o resultado, certo? É disso que temos estado a falar. O propósito fora do site da página inicial e tudo mais. E porque estamos fazendo cursos, queremos que as pessoas venham ao nosso site, se acostumem conosco, se aqueçam e usem nossos cursos. Então, quando alguém comprar um dos nossos cursos, isso vai ser uma conversão para nós. E para conseguir isso, precisamos pregar a interface do usuário. Você eu, a experiência do usuário ux e o cliente experimentam o C X. Então, pessoal, não quando soubermos disso, vamos passar para a próxima palestra. E porque temos feito tanta interface de usuário para projetar Em outras palavras, vamos começar melhorando a experiência do usuário e observando como nosso site está funcionando com a velocidade de carregamento, por exemplo. Então isso é super importante. Vejo você na próxima palestra, onde vamos otimizar o U X e depois ir mais fundo em você. Eu vejo você lá 2. Teste de velocidade seu site: Muito bem, pessoal, nesta palestra, vamos aprender a acelerar o teste do nosso site. Agora, isso é muito importante porque a velocidade de carregamento do seu site determina como seus visitantes experimentam seu site, lembra? Costumava experimentar. Agora há algumas estatísticas bastante loucas que mostram que se o seu site leva cinco segundos ou mais para carregar, em seguida, até 70% de desconto seus visitantes sairão. E da mesma forma, se o seu site leva dois segundos para carregar, então até 34% de desconto seus visitantes vão deixar isso, pessoal, isso é um dois segundos que as pessoas não estão dispostas a esperar que ele carregue. Isso é insano. Por isso, temos de continuar a certificar-nos de que o nosso website é carregado rapidamente. Caso contrário, se vamos perder todo o tráfego, eles não vão experimentar todo este belo design. Certo? Então vamos em frente e usar uma ferramenta chamada tempo, e isso vai estar fora do curso. O recurso é que você pode simplesmente ir em frente e acessá-lo. Eles vão e nós vamos em frente e ver quanto tempo leva para um site carregar e ver o que está atrasando. Se está demorando, agora o que vou fazer aqui está realmente acostumado com o Tab. Então eu vou usar um para o site que eu criei, certo, certo, e então outra guia com o mesmo tempo em que você pode ir em frente e verificar seus concorrentes tempo de carregamento ou simplesmente alguém que você tenha baseado seu projeto fora porque que vai lhe dar uma boa dica sobre o que você está perdendo quando se trata de tempos de carregamento quando se trata de muitas vezes mouses ations. Então o que eu vou em frente e fazer é ir em frente e pegar nosso U R l assim. Eu vou lidar com isso, e então eu vou em frente, remover isso e apenas colá-lo dentro. Lá vamos nós, e eu vou clicar em começar a testar. Eu vou deixar aquele local aleatório, começar a testar, e eu vou ao site do Pat Flynn na verdade vamos usar o site dele porque nós temos andado a sacudi-lo muito e baseado em um monte de ciência em seu site, Vou pegar o Ural dele. Copie isso. Volte aqui, remova isso, cole-o e clique em. Comece a testar. Vou deixar isto aleatoriamente para isso não é completamente justo, mas não é. De qualquer forma, só queremos um gráfico de comparação. As chances estão aqui, alguns orçamento muito maior e as pessoas que trabalham para ele para otimizar seu site para o próximo nível. Provavelmente não temos isso. Ainda queremos algo para comparar. Tudo bem, pessoal. Então os resultados chegaram, e honestamente, não parece muito bom. Então olhando para isso, podemos ver que o tempo de carregamento é baseado fora de Sidney, Austrália agora, Austrália agora, mas de qualquer maneira, tempo de carregamento é de mais de quatro segundos. Agora, isso é milissegundos, então isso significa que cada 1000 é um segundo. Então o tempo de carregamento de um site é de 4,2 segundos. Agora, lembra quanto tráfego perdemos em dois segundos? Imagina o quanto vamos perder os três? E agora, até quatro. Estamos quase em cinco segundos. O que significa que provavelmente estamos tocando que 70% de desconto de tráfego perdido. Isto é uma grande quebra de negócio, e vamos precisar de optimizar isto. Vemos que temos um monte de solicitações, sendo que há certas coisas que precisam carregar entre o CSS e JavaScript . Nós não precisamos ir em detalhes sobre isso. Só que há muitas coisas acontecendo em nosso site. Provavelmente não há ajuda com o tempo de carregamento e o tamanho total do nosso site é 2,7 megabytes. Pessoal, isso é muito grande agora. Honestamente, o objetivo é ficar abaixo de um megabyte para o seu site. Ok, então 2.7 isso é muito grande. E vamos ter que consertar isso. Se você torná-lo realmente profissional, você pode até mesmo conseguir ir em menos de 500 kilobytes. Agora que 0,5 megabytes, podemos ver que temos um baixo nível de desempenho para os quatro de 100 com base nas estatísticas anteriores. Mas nossa capacidade de uso móvel é realmente alta, e isso é graças ao tema Ocean WP e fora do curso elemental, que já está tornando-o móvel responsivo para nós. Então, obrigado por isso. E então vemos onde esse teste é baseado. Então vamos em frente e sacudir o site do Pat Flynn. Agora podemos ver que ele tem um carregamento muito mais rápido de um tempo de carregamento muito, muito mais rápido certo, então ele está carregando o tempo é de 0,3 segundos, quase 0,4 segundos, mas de qualquer maneira, Está abaixo de um segundo. Também vale a pena notar que ele está carregando dos EUA enquanto estamos carregando da Austrália . Portanto, há alguma diferença, mas ainda assim a diferença é enorme. Ele é muito menos solicitado que também ajudou. Mas olha para isto. Isto é vital. O tamanho total do site dele é de 630 kilobytes. Agora que 0,6 megabytes. Então precisamos reduzir drasticamente decisivo nosso site para acelerá-lo. Olhando para sua nota de desempenho, podemos ver que ele não está no topo da escala aqui também. Ele não tem 100 em cada 100 caras que você não quer necessariamente para superar a escala de desempenho porque quanto maior for o seu desempenho, geralmente mais seu design tem que sofrer, certo, porque quanto mais alta qualidade fotografa o seu uso, quanto mais recursos interativos, você está usando todas essas coisas que levam tempo para carregar. Então, o que você quer fazer é encontrar um equilíbrio entre a experiência do usuário e a interface do usuário . Então 73 pode realmente ser um número muito, muito bom porque sabemos que seu site é lindamente o sinal e há um monte de características maravilhosas acontecendo aqui. Então o fato de que ele pode ter todos esses maravilhosos descendentes a carga tão rapidamente que é incrível. Lembre-se disso quando você está fazendo o teste, você não quer ir muito no desempenho e fazer o design sofrer. É tudo sobre o equilíbrio. Aqui. usabilidade móvel está indo muito alto também. Então vamos voltar para o nosso próprio site aqui agora. O interessante é que se rolarmos para baixo, podemos realmente ver qual é o problema em nosso site. Certo. Então o que vemos aqui é que temos um problema com a otimização de nossas imagens. Eles não são otimizados. Em outras palavras, temos algo chamado renderizar bloqueando JavaScript e CSS no conteúdo acima da dobra, lembre-se, acima da dobra, que vai ser tudo isso. E tudo aqui está abaixo da dobra. E, em seguida, reduzimos o tempo de resposta do servidor e alavancagem, navegar ou descontar o quê? Nós vamos em frente e fazer caras nas próximas palestras há para passar por tudo isso e corrigi-los e certificar-se de que nosso site carrega muito, muito mais rápido e otimizar tudo Ok, porque isso vai fazer nosso usuário experiência sofrem muito. Vai fazer o nosso CEO sofrer muito. Basicamente, você não será capaz de ter um negócio sustentável com este tipo de site lento. Certo, então precisamos corrigir isso. E honestamente, é muito excitante de fazer. Este é um passo vital. Não perca esta seção no curso. Vejo vocês na próxima palestra, pessoal. 3. Velocidade de carregamento de imagem: Muito bem, meus amigos, nesta palestra, vamos seguir em frente e resolver problemas juntos, como fizemos por um tempo. Agora, vamos em frente e otimizar nossa velocidade de carregamento de imagem porque não estamos parecendo tão impressionantes agora. Pelo teste, acabamos de fazer. Então, como você pode ver, se você rolar para baixo, obtemos algumas recomendações acontecendo aqui que temos na seção de desempenho. Temos as imagens de otimização, eliminando o bloqueio de renderização, ossos de serviço reduzidos, alavancagem de tempo, descontamento do navegador e, em seguida, um em alvos de toque de tamanho de usabilidade móvel apropriadamente. Agora vamos passar por eles, mas vamos fazer isso passo a passo. Então vamos começar com este. Otimizando imagens. Então, se eu clicar aqui, ele vai me dizer aproximadamente quanto espaço eu poderia dizer se eu fosse apenas um pouco mais inteligente. E também quais das imagens eles estão realmente custando problemas para que possamos ver. Por exemplo, temos o estes são marketing 17 cursos em uma imagem é, na verdade, ele poderia ser reduzido 97%. Isso é enorme. E também temos a Amazônia. Poderia ser reduzido em 97%. Temos a imagem da Shopify 97% E essas são todas essas imagens que acabamos de colocar agora elas estão ocupando uma enorme quantidade de espaço no Now desnecessariamente. Nós também temos outras imagens como ele diz que eles são pessoas do céu e pessoas, e estas são na verdade as imagens de fundo que eu acabei de decidir não nomear. Mas lembro-me dos nomes deles. Então estas são as imagens de fundo que poderiam ser otimizadas também. E então, finalmente, temos a edição de imagem cortada, e este é realmente o nome do nosso logotipo. Mas como você pode ver, isso só vai dizer que foram 4,9 kilobytes. Então eu não vou me preocupar em otimizar este aqui. Mas tudo acima aqui vamos ir em frente e otimizar cada um deles e seguida, executar um novo teste e obter este tamanho certo, porque estes a sua maneira de ser quer estar abaixo de um megabyte e definitivamente abaixo de dois segundos para o tempo de carregamento. Então vamos em frente e ir para a nossa página inicial. E se você está aqui e você quer começar a editar com L um mentor ou precisamos fazer é clicar em editar com L.A mentor. Então o que vamos fazer agora é que vamos começar a otimizar todas essas imagens que estavam usando. E estamos falando dessa imagem de fundo, esse fundo, todos esses três e essa imagem de fundo, certo? E vamos fazer isso colocando-os todos em uma pasta para sabermos onde os temos . E então nós vamos para este site chamado Image Compressor Dot com. Também conhecido como meu Sil, como eu amo esse nome. Então isso é, é claro, no recurso é agora tudo o que vamos fazer aqui é clicar no upload de arquivos como este, e então nós vamos para todas as nossas imagens, selecioná-los e clicar em sapatos. Então, é realmente um processo muito fácil, e agora ele vai começar a comprimir as imagens para nós neste segundo. Mas o mais bonito aqui é que podemos personalizar nossa própria compressão, certo? Então, por exemplo, temos a Amazon agora que está selecionada aqui. E se eu rolar para baixo, eu posso ver a forma como o original parece e a aparência enquanto ele é comprimido. Eu também posso ver quantos por cento eu estou economizando o que os novos tamanhos. Mas aqui está a coisa interessante. Eu posso ver a quantidade de cores que estão sendo usadas agora e também notar que não há muitas culturas acontecendo agora. Então o que eu vou fazer é puxar isso para baixo para dizer, vamos fazer 80 colares e podemos dizer que não há nenhuma diferença nas imagens. Mas há uma diferença nesse tamanho, então vou continuar. Vamos descer para 70, certo? E ainda não há igualdade perceptível. Sério, isso está mudando aqui. Então eu vou descer ainda mais. Vamos descer para dizer 55. Estou empurrando os limites levemente aqui. Vamos fazer 53 ainda está bem. Vou ainda mais longe. Vamos fazer 40. Ok, então eu realmente comprimido este grande momento agora. Mesmo se eu assumir que ainda não há perda perceptível de qualidade, eu vou enlouquecer, na verdade, e ir com 20 e ainda está olhando. Ok, mas se eu assumir lá dentro sim, como podemos ver, o branco está realmente começando a sofrer um pouco. Então eu vou subir para dizer 40 e nós temos um bom ou branco lá. Então eu vou ficar com este com o quatro para a faculdade porque isso vai ser apenas um tamanho de miniatura de qualquer maneira, então eu vou clicar em aplicar. Então, passamos de 68 a 76% de compressão. Realmente bom. Agora, isso é apenas uma miniatura, para que você possa se safar com o sofrimento da qualidade MAWR aqui. Mas esta é uma imagem super importante porque esta é a nossa imagem de fundo. Então precisamos ser um pouco mais cuidadosos aqui. Então nós temos a qualidade agora e só para mostrar a vocês o que acontece se você for longe demais, se eu puxar isso para baixo para dizer, você sabe, vamos com 35 você pode ver que há uma decentemente notável falta de qualidade indo em aqui agora, especialmente se eu processar significa que ele fica mais prevalente e porque isso é um pouco mais sensível fora de um caso, porque vai haver uma grande imagem de fundo. Não queremos ir muito longe aqui. Como você pode ver, está tudo embaçado no fundo aqui. Vamos experimentar 60 e ver o que acontece. Então, seis está parecendo muito bem. Eu vou processar. significa que você pode ver que há definitivamente um pouco de perda de qualidade se assumir em como este. Mas, na verdade, vou aumentá-lo para 65. Acho que isto está muito bonito. Então, o que você quer fazer? Você também pode ver que há um pouco fora do desvanecimento do chamador mais. Eu vou para 70 aqui. Então o que você quer fazer aqui é apenas ficar de olho na qualidade. Certifique-se de que a perda não é direitos muito grandes, especialmente nestas imagens importantes. Vamos aplicá-los, e vamos fazer isso para todas as imagens. E então nós vamos ter certeza de que vamos enviá-los em nossa página inicial e dar uma olhada para que não há perceptível sofrer fora de qualidade. Claro, não queremos sacrificar a qualidade real da imagem, a qualidade perceptível para obter uma melhor velocidade de carregamento. Vai haver um bom equilíbrio, mas queremos ter menos de um megabytes de tamanho, então vou continuar otimizando essas imagens. Vamos puxar isso para cerca de, digamos 65 e logo em breve, podemos ver que há uma mudança de qualidades definitivamente. Eu vou com 70 nesses, e então eu vou me candidatar, e vamos ver que tipo de resultados esses produzem. Agora você pode, por exemplo, ver, passamos de 252 kilobytes para 71 kilobytes. Há uma enorme, enorme, enorme diferença. Então estamos economizando um tamanho serrado. E agora, se alguma vez formos longe demais, que vamos notar quando estamos carregando, tudo o que precisamos realmente fazer é voltar seu upload, seu original, e então ser mais gentil com a compressão em si. Então eu vou descer para 70 neste. Bem, lá iria. Eu vou bater. Aplicar. Isto é uma miniatura. Eu não tenho que ser muito sensível Vamos com e verificar, digamos, 59. Você pode ver que há algum sofrimento de qualidade bem ali. Mas mais uma vez, isso vai ser uma miniatura. Eu acredito que isso vai ficar bem. Vou em frente e usar isto de 501 kilobyte a 116. Isso é enorme. E finalmente vou fazer “Não Shopify”. E esta é também uma imagem muito simples, mesmo que haja mais acontecendo em segundo plano. Então eu vou rolar para baixo. Vamos fazer 60. Lá vamos nós, e eu vou apenas aplicar aqui. Então, agora que eu terminei, eu apliquei em todos e podemos ver que não há perda de qualidade real perceptível. Nada grande. Vou baixar tudo isso simplesmente clicando em baixar tudo. E então eu vou ir em frente e extraí-los. Então aqui estão todas as imagens agora que acabei de usar. E aqui está o compressor de imagem. É um arquivo de gole. Eu só vou clicar duas vezes nele. E aqui tenho as novas faltas. É apenas nesta pasta chamada Compressor de Imagem. Certo, então isso é muito, muito bom. Agora vamos em frente e ir para o site. Vamos recarregar tudo isso, e então vamos fazer um novo teste e ver os resultados. Ok, então vamos começar com a imagem de fundo aqui. Vou clicar aqui em cima. Vamos editar esta seção, passar para o estilo, e então temos a imagem bem aqui. Vou passar para fazer o upload do arquivo. Vou selecionar o compressor de imagem. Está bem aqui. E então vamos usar essa imagem do céu novamente e podemos ver que o tamanho agora é 134. E lembre-se, ainda temos esmagado que está comprimindo os arquivos para nós, de modo a fazer upload está na seção 131. Aplica-se esta compressão de vida a isso. Mas olha para esta comparação. Temos 131 kilobytes aqui e o anterior, mesmo com esmagado comprimido foi 422 é uma enorme diferença, pessoal. E isso é porque estamos usando a compressão com perdas, certo? Com o Smart, podemos usar compressão sem perdas a menos que compremos essa tomada. E, claro, se você quiser tornar sua vida um pouco mais rápida e fácil, você pode comprar smush o premium. Mas honestamente, não é um grande incômodo usar essa ferramenta. Acho que funciona soberbo. Então isso parece muito bom e vai em frente e clique em inserir mídia e aqui nós temos isso . Então deixe-me ir em frente e clique em pré-visualização mudanças aqui e aqui nós temos isso. E como você pode ver, não há grande diferença na qualidade. Então, se eu só te mostrar a diferença entre eles, eu vou em frente e compará-los lado a lado. Então, se eu abrir estes dois, esta é a imagem original, certo? Este é o que tinha 422 kilobytes, e então este é o que é quase quatro vezes menor em tamanho como você pode vender. Se olharmos para a sombra aqui embaixo enquanto eu estou pulando entre eles, há uma ligeira diferença na cor sempre tão ligeira diferença na cor. E você pode notar estes perguntou, Bem, quando você está olhando para o fundo direito, mas não há grande coisa acontecendo sobre ele. Isso vale a pena salvar todo o tamanho, economizando todo o tempo de carregamento. Então, basicamente, mesmo que estejamos usando lossy, é basicamente nenhuma perda da qualidade real. Então vamos continuar otimizando. Eu vou em frente. Eu vou rolar para baixo até aqui, clicar em editar esta seção, passar para o estilo, ir para baixo para a imagem aqui, clicar na imagem, e eu vou fazer upload de arquivos, Selecione. E então eu vou clicar na imagem com as meninas sentadas aqui. Agora, isto é 76 kilobytes. E se você der uma olhada nas prévias, este é 293. Então esta é uma enorme, enorme, enorme diferença. Agora, minha matemática é muito ruim para lhe dar um cálculo adequado. É muito melhor, mas há uma grande diferença acontecendo. Certo? Então, de 293 a 74 em Gana, poderia inserir mídia aqui e ali nós temos isso. Não há perda perceptível de qualidade acontecendo aqui também. Agora, eu vou em frente e eu vou fazer upload de todos eles. E depois vamos verificar a página, certo? Então eu vou fazer o mesmo. Aparece, vá para a seção, vá para o estilo. Vou clicar na imagem aqui, fazer upload de arquivos, selecionar imagens, clicar em sapatos. Então este é 71 kilobyte. O anterior foi 252. Grande diferença. Clique em inserir mídia. Lá vamos nós. Agora vou em frente e mudar estes. Isso é o que eu vou apenas Kulick aqui e eu vou clicar nesta imagem e, em seguida, fazer upload arquivos selecionados e, em seguida, eu vou fazer o upload correto e sapatos e a mídia de inserção. Vou continuar a fazer isto em todos eles, está bem? Então eu acabei de mudar todos esses três também. Agora há mais uma coisa que é super importante para você saber sobre que eu não fiz quando eu estava usando essas imagens antes. E isto é, se você clicar no imaturo, você pode ver que eu estou usando o tamanho total da imagem. Não há nenhuma razão para fazer isso, porque estamos comprimindo a um tamanho tão pequeno. Então, quando estávamos olhando para o teste e ele disse que você pode economizar depois e ter uma redução de 97% , o que significa com isso é que eu posso realmente, em vez de usar uma imagem completa, ele tira muito do tamanho e do espaço . Eu posso simplesmente ir em frente e clicar no meio, por exemplo, e não há perda de qualidade qualquer porque eu estou realmente tendo este tamanho pequeno. Mas ele está se recortando usando esse recurso para que ele automaticamente fica ainda menor Agora você vai notar se você for longe demais. Porque se eu usasse a miniatura aqui, por exemplo, você pode ver que isso apenas arruína a imagem. Certo? Mas se eu usei o meio 300 vezes, 300 ou médio grande ou eu usei um grande, você pode dizer que a única diferença real é o tempo de carregamento, porque a qualidade é praticamente a mesma. Então eu vou com média 300 vezes, 300 porque isso é tudo o que precisamos. O mesmo aqui. Média 300. O mesmo aqui. Média. 300 vezes, 300. E agora nós atualizamos tudo. Vou em frente e clicar na atualização aqui e agora vou descer e clicar nas mudanças de pré-visualização, e vamos ver como o site parece e como você pode ver, você viu o tempo de carregamento? Foi uma grande, grande diferença. Caras como nós acabamos aqui assim e eu estou amando isso, e se você rolar para baixo, você pode ver que não há qualidade realmente perdida. Na verdade, esta imagem pode estar tendo um pouco de muita qualidade, mas não muito ruim, na minha opinião, rolando para baixo isso não é perda perceptível de qualidades. Então a única coisa que você pode querer fazer seria aumentar a qualidade desta imagem , porque aqui é um pouco mais perceptível. Mas este não tem perda notável de qualidade. O que é que está a acontecer? Então eu estou super feliz com os resultados disso. Mas o que vamos fazer agora é fazer um novo teste de velocidade e comparar os resultados. Então eu vou abrir em nova guia, ir para o tempo que vêm ferramentas gratuitas, teste de velocidade. E agora vou entrar no nosso site e começar a testar. Tudo bem, pessoal. Então os resultados chegaram. E como podemos ver, há uma grande diferença nos resultados neste momento. Então, os resultados anteriores, estávamos parecendo algo assim. Estamos olhando para um tempo de carregamento em 4,2 segundos. Agora estamos olhando para um tempo de carregamento em 2,3 segundos. Isso é quase metade ainda demais, mas drasticamente diferente agora, se estamos olhando para o tamanho total, na verdade é 1,1 megabyte. Essa é uma enorme diferença de 2,7 agora, na minha opinião, 1,1 megabyte ainda é um pouco demais porque eu quero estar abaixo de um megabytes. Então o que eu vou fazer é realmente colocar estes através da compressão. Alguns deles, por exemplo. Eu vou comprimir isso ainda mais enquanto também comprimir isso um pouco mais enquanto na verdade, talvez, aumentar a qualidade fora deste, e então eu vou executar um teste novamente e ter certeza de que eu estou abaixo de um megabyte. Ok, mas é assim que você otimiza suas imagens. Certifique-se de que seu site é carregado muito mais rápido, mas ainda há mais problemas acontecendo, certo? Então, se olharmos para baixo, podemos ver que temos o bloqueio de renderização eliminar que é o próximo, e vamos passar por isso na próxima palestra. Então, se eu ir em frente e descer para otimizar imagens, vamos ser capazes de ver qual é o problema, porque aparentemente podemos economizar muito espaço roubando. Se estamos economizando tanto, vamos cair drasticamente no tamanho total. Então, como podemos ver, ainda podemos ter uma enorme redução no marketing digital, da Amazon e no logotipo da Shopify, certo? Não vamos nos preocupar com isso porque é seguro, tão pouco. Mas aqui nós poderíamos realmente economizar mais de 100 sobre 100 sobre 200. Então o que eu estou percebendo aqui é que estes são P e G reais. Certo? Então o que, eu vou ir em frente e fazer antes de seguir em frente para eliminar o bloqueio de renderização é que eu vou ir em frente e mostrar a vocês na próxima palestra como você pode transformar imagens PNG para J pig, a fim de economizar ah muito tamanho e nós vamos ir bem abaixo do um megabytes. Ok, então se você já sabe como fazer isso e você é divertido com a imagem da minha estação, você pode passar para a próxima palestra. Mas se você tem P e G falso e você precisa redimensionar ainda mais para ficar abaixo disso do que se juntar a mim e me seguir na próxima palestra, e nós vamos cuidar desse problema de tamanho, Casey, na próxima palestra, rapazes 4. PNG para conversão JPG: Tudo bem. Nesta palestra, vamos em frente e converter nossos arquivos PNG em J pig. Agora, se rolarmos para baixo, notamos nas imagens otimizadas aqui que há muito fora do tamanho a ser reduzido ainda. Agora, nós não vamos ganhar com essa redução porque nós não estamos usando o tamanho total dessas miniaturas, certo? Lembre-se desses ar em grande escala quando eles são carregados, mas da maneira que estamos usando-os para nossos produtos ou para nossos cursos, nós realmente os fazemos 300 por 300. Mas é desnecessário dizer ainda há muito espaço que podemos poupar. Então vamos em frente e transformar nossos arquivos PNG, que são esses três arquivos em J pack. Porque geralmente isso pode até fazer o tamanho cerca da metade. Então nós realmente precisamos disso neste momento porque nós queremos ir abaixo de um megabytes. Então eu vou em frente e ir para o site PNG para J pig dot com. Isso está no recurso está fora do curso, e eu vou clicar no upload de arquivos, e então eu vou escolher meu arquivo, que é o Amazon, o digital e o Shopify. clique em sapatos e, em seguida, eu vou apenas ir em frente e clique em download. Tudo OK, então eu adicionei no arquivo sip e apenas vou clicar duas vezes sobre ele assim, eles iriam. E agora eu posso remover o arquivo doente, e eu vou ir em frente e pegar essas imagens, colocá-lo na mesma pasta abaixo aqui, indo para remover esta pasta, e eu estou realmente indo para ir em frente e remover essas imagens PNG agora porque não precisamos deles. Aqui temos o nosso novo J. Pig. E se você der uma olhada neles, por exemplo, este e este aqui, eu vou apenas abri-los. Você pode ver que, literalmente, não há perda de qualidade. Agora a única coisa que estou percebendo é que há algum tipo de diferença. Se você olhar super de perto para o ouro no chip de volta, parece que algo está acontecendo quando eu estou mudando. Então isso é um extremo menor, especialmente considerando que vamos usar isso é 300 por 300, então não precisamos deles. Vamos em frente e remover os PNG da Amazon e lá vamos nós. Eles já se foram. Na verdade, vou colocar isto na compressão mais uma vez porque com o J peg notaria se os comprimirmos para baixo ainda mais insights, vamos fazer isso agora mesmo. Então eu vou voltar para o compressor de imagem ou otimizar Cilla como também conhecido como eu amo esse nome. E eu poderia fazer upload de arquivos bem aqui. E então eu vou escolher estes, que estão agora em J pig lá. E, em seguida, o Shopify está bem e demorado pode escolher. Eu vou rolar para baixo, e agora podemos baixar a qualidade um pouco já. Então eu vou apenas experimentá-lo. Talvez clicando no 25. Podemos ver que eles são claramente uma perda de qualidade. Mas temos de nos lembrar, isto vai ser 300 por 300 por isso vai haver uma mudança muito, muito pequena nisto. Então eu sou um 25. Você pode ver o original baixou para 52, o que é uma enorme diferença. Eu acredito que o anterior vai ficar em torno de 100 por isso realmente baixou o tamanho, tornando este em um J peg e qualidade 25. Agora, novamente, você pode realmente ver que há uma qualidade perdida acontecendo. Não há dúvida sobre isso. Mas vamos usar isto como miniatura, por isso acredito que vai ficar tudo bem. Na verdade, vou usar este 25 rápido e aplicar. Vou fazer a mesma coisa aqui. Vamos descer para 25 ver o que acontece. Sim, há uma perda de qualidade aqui também. Mas eu vou aplicar isso porque eles serão tão pequenos. A mesma coisa aqui. Clique em aplicar. E se é muito ruim, se não está funcionando, então ele está puxando o original mais uma vez e refazendo o processo. Não vou clicar em baixar tudo. Aqui está o arquivo do gole. Vou clicar duas vezes neste arquivo de gole bem aqui. E então temos a compressão da imagem, certo. Vou remover este. Vou tirar estes e colocá-los lá dentro. Vamos colocá-lo aqui embaixo. E eu não quero misturar isso, então eu vou dar a eles um novo nome rapidamente. Tudo bem, então agora todos eles têm um novo nome. Isso é muito bom. Vou em frente e voltar para o site. Eu vou para nossa casa aqui, e eu vou clicar em editar com L.A mentor. Agora também deve deixar você saber que eu tomei a liberdade de usar as imagens de fundo anteriores e realmente comprimi-los um pouco mais. Eu acredito que eu usei no início 70 ou 75. Agora eu desci e compactei para 60 e ainda comparando o original com a compressa, que você sempre pode fazer. Ainda não há perda de qualidade em ninguém fora das fotos. Nem mesmo este fundo que eu pensei que tinha uma perda. Ele não fez. Então, isso é uma ótima notícia. Então vamos em frente e eu vou clicar neste aqui e depois clicar aqui, clicar em carregar arquivos, selecionar arquivos. Vai ser um pouco mais fácil de encontrar agora porque tem um novo nome, certo? Então agora este é na verdade 26 kilobytes. Isso é super pequeno, e podemos ver isso comprimido com inteligência, o que acontece automaticamente. Torna-se 25 kilobytes e podemos ver o anterior. Eu tinha 116 certo, porque era um PNG. Então nós economizamos muito fora do tamanho fazendo esses caras um monte de tamanho. Então eu vou ir em frente e clicar em inserir mídia. E como você pode ver, não há perda de qualidade porque é tão pequena. Vou fazer a mesma coisa aqui, clicar nele, carregar arquivo, selecionar arquivo. Eu vou para a loja se eu j porco comprimido. Agora, este é 12. Pode se tornar 11. Não, ainda são 12 e o anterior era 82. Então enorme diferença de tamanho acontecendo aqui, e eu vou fazer o mesmo com este Amazon, que é o último upload Encontrar a compressa J porco, que é 14 pode se tornar 13 é como uma aposta, você sabe, apenas adivinhando assim. Não, ainda são 14. A anterior era de 75. Grande diferença de tamanho. Agora, 14 e 75. Eles não são grande quantidade, mas este tipo de gerenciamento em um monte de imagens que vai economizar muito espaço. Se você acha que 14 a 75 na minha matemática não é tão impressionante. Mas eu acho que economizar, como quatro vezes ou cinco vezes decisivo, é uma enorme diferença. nesse sentido. Então, como podemos ver, não há perda visível de qualidade porque eles são tão pequenos. Vou em frente e clicar em atualizações. Então estes foram os nossos resultados na primeira vez que fizemos o teste. Depois refizemos o teste. Tínhamos 1,1 megabyte. Agora vamos fazer o teste mais uma vez e compará-lo com o último quando tivermos otimizado o porco P e G T J. Eu vou para o tempo, clique de ferramentas gratuitas, clique de ferramentas gratuitas, ir para o teste de velocidade, e eu vou escrever em nosso site, em seguida, começar a testar. E lembre-se, continuamos olhando para esse tamanho agora e confira isso. Pessoal, realmente boas notícias. Este tamanho é absolutamente incrível. Então, agora descemos para 465 kilobytes enquanto estávamos em 1,1 megabytes . Então nós tivemos uma grande redução afinal de contas, de transformá-los de P e G para J peg, mesmo com a compressão e tudo acontecendo. Então isso nos economizou muito espaço, e nós otimizamos toda a nossa primeira página agora e olhar para a velocidade de carregamento foram realmente o carregamento em um segundo. Isso é metade da regra dos dois segundos. Agora, ainda há muitas coisas boas a serem feitas. Por exemplo, ainda queremos eliminar a renderização bloqueando JavaScript, que faremos na próxima palestra. Mas mesmo que Onley fizesse isso agora, tínhamos uma velocidade de carregamento de um segundo e um local total abaixo de 0,5 megabytes. Então isso seria incrível. Mais uma vez, olhando para o Pat completamente e ele é maior. Mas também há mais coisas em seu site. Mas isto é mais do que incrível. Então, mesmo que ele tem um tamanho maior ainda está carregando mais rápido e isso é porque ele é menos pedido e ele tem cuidado bem de seu site e nós estamos fazendo a mesma coisa. Então vamos continuar e otimizar ainda mais o nosso site. Mas conseguimos reduzir o tamanho total otimizando nossas imagens e olhando para as suas próprias imagens agora, você ainda pode ter essa. O Words otimizou imagens porque ainda há algum trabalho. Se quisermos que você termine, por exemplo, ainda temos o logotipo que poderíamos comprimir. Curiosamente, ele ainda está dizendo que poderíamos estar economizando algum espaço nessas imagens diretamente nas imagens das pessoas , mesmo que seja tão pequeno, diz que poderíamos estar economizando espaço no digital em na Amazon e na Shopify, e isso pode ser verdade. Nós provavelmente poderíamos comprimi-lo cada vez mais e mais e mais. Mas honestamente, este é um tamanho muito, muito bom. Como eu disse antes, se você conseguir 0,5 megabytes, isso vai ser incrível. Isso pode ser difícil de manter se você continuar a expandir e adicionar mais coisas à sua home page, mas ainda é um tamanho muito, muito bom. Você quer estar abaixo de um megabyte. Se você pode ir para a Síria 10,5 megabytes, isso é incrível, e você não quer enlouquecer com isso, também. Lembre-se, é tudo sobre o equilíbrio entre a interface do usuário e o uso da experiência, e eu acho que agora nós os compactamos mais do que suficiente, e eu estou super feliz. Então, duas coisas para lembrar uma. Vire seus P e G para J picareta e comprimê-los todos. Se você tiver esmagado isso vai ser fácil esmagado a versão premium, que é. Mas se não o fizeres, é melhor usares as ferramentas. E o recurso é apenas leva um pouco mais de tempo, mas é completamente gratuito. Então vamos seguir em frente. Instale o próximo problema, veja na próxima palestra caras. 5. Elimine o bloqueio de renderização JavaScript e CSS: Tudo bem, pessoal. Então, nesta palestra, vamos avançar e avançar para a próxima edição que temos com o nosso site, a fim de torná-lo melhor e carregar mais rápido. Agora, a próxima coisa para nós passar para a sua sob a guia de desempenho e é este e diz eliminar renderizar bloqueio JavaScript e CSS no conteúdo padrão acima. Ok, então vamos quebrar isso. Água isso agora JavaScript é um computador. Idioma é o idioma que o computador e o navegador da web entendem. E JavaScript é basicamente o que executa os muitos fora dos efeitos em nosso site que este assinam nosso site, certo? Veja, Assessor, o treinador que temos usado para fazer diferentes mudanças em um site como se estivéssemos usando um certo código para nosso formulário de poeta postal. Temos usado um código para um menu pegajoso, etcetera aqueles códigos r C s que são códigos. Agora. O problema com isso é que eles são processados bloqueando. Então, o que faz me bloquear? Isso significa que estes precisam ser executados antes que o site possa carregar corretamente, certo? E eles levam seu tempo para executar. E porque leva um tempo, aumenta a velocidade de carregamento. Então, o que queremos fazer é eliminar a renderização bloqueando JavaScript e CSS acima do conteúdo da dobra . E a razão pela qual nós só queremos eliminá-lo acima do conteúdo completo é porque quando você carrega um site realmente não importa quanto tempo leva para que tudo isso seja carregado ou qualquer disso porque a única coisa que você estará vendo em seu site ou em seu celular se você estiver carregando o site lá em sua tela vai ser o acima o conteúdo completo. Então, tudo aqui que você deseja carregar o mais rápido possível. Então vamos em frente e eliminar esses JavaScript é e aqueles ver avaliações. Então o que vamos fazer é passar para o nosso painel porque vamos usar plugins para isso, e então vamos continuar testando para garantir que obtemos as respostas que queremos. Agora vamos descer para plugins e clicar em adicionar novo plug in, e vamos procurar por ratos da equipe automática. Soa como fora para otimizar, mas ele só tem um único Oh, então é esperado auto optimizar tipo de um bocadinho. Então, aqui está. Ele tem mais de 900.000 instalações ativas, e vai nos ajudar com o JavaScript e CSS. Então vamos instalá-lo, e então eu vou clicar em Ativar. E agora vamos passar para as configurações. E é aqui que começamos a ativar as diferentes funções. Então, também somos capazes de otimizar o HTML, mesmo que não temos quaisquer problemas com que otimizar estações, Tentativa geral para ser bom. Então você pode decidir por si mesmo se você quer ativar isso ou não. Agora temos as opções de JavaScript e a CIA diz opções. Então eu vou ir em frente e clicar neste aqui dentro, e eu vou ir em frente e clicar neste também para que eles sejam otimizados. Então eu vou clicar em salvar as alterações. Agora, se olharmos para trás e olharmos para os resultados dos nossos testes aqui e eu clicar aqui para baixo, podemos ver que existem quatro JavaScript, sua reserva e 18 CSS. Recurso é agora porque há tantas estações. Recurso é o auto otimizado geralmente não é suficiente por conta própria para cuidar de todos eles. Então, o que? Eu vou em frente e fazer também. É mover mais uma vez para plugins e clique em Adicionar novo. E agora vou procurar os olhos do tema do automóvel outra vez. Quero dizer, essa palavra, é muito difícil de dizer. E agora eu vou usar o plugging mais antigo chamado CSS crítico. Agora, o que isso vai fazer é cuidar de ainda mais CSS e ainda mais especificamente o acima do CSS dobra. Então eu vou ir em frente e clicar em Instalar agora e então eu vou clicar em Ativar Perfeito . Está instalado. Agora, a fim de chegar a ele, tudo o que precisamos fazer é ir para auto, otimizar aqui e clicar em configurações novamente porque é a mesma empresa que tem feito isso vai ser adicionado. Você pode ver aqui diz CSS crítico. Mas também será adicionado no principal e é aqui que temos as principais características. Então agora estamos aqui e temos o CSS crítico adicionado e ele será adicionado no principal. Se você não vir essas mudanças, tudo o que você precisa fazer é clicar no botão de atualização aqui em cima e ele vai se resolver sozinho. Agora, há uma coisa especificamente querer fazer aqui, que é rolar para baixo. E vamos ver se há algo aqui. Isto está na linha acima da dobra CSS ao carregar principal para o meu C diz Onley após carregamento da página . Então queremos, especificamente o conteúdo acima da dobra, ter seu CSS otimizado e a maneira que muitos plugins fazem isso, mesmo que isso seja um pouco de informação extra, é que eles preferem colocar o CSS no rodapé. E sabemos que a foto está descendo, certo? Então isso significa que vai carregar mais tarde. Mas não importa, porque o que é importante é que a seção de dobra acima carrega o mais rápido possível porque no segundo que baixa esse segundo, seu site fica disponível e os visitantes podem começar a usar, e isso vai levar alguns segundos, e até lá o resto do site já estará carregando a si mesmo e funcionando. Então, o que? Eu vou seguir em frente e fazer aqui, na verdade, a fim de obter o CSS de cima da dobra. É usado um site chamado Side Low City. E eu vou colocar isso É claro, no recurso é para que você possa facilmente apenas agarrá-lo. Agora tudo o que precisamos fazer aqui é certo, nosso site assim. E, em seguida, clique em gerar caminho crítico. Ver avaliado. E isso vai nos dar a todos um para acima do CSS dobra. Que é que é ouro. Honestamente, e agora vamos rolar para baixo e vamos ter tudo aqui. Você só precisa clicar neste. Tudo vai se selecionar sozinho, certo? Click, e eu vou lidar com isso. Ok, agora, eu vou voltar para Auto Optimize aqui, e eu vou colá-lo dentro Lá vamos nós. E agora eu vou rolar todo o caminho para baixo e clicar em salvar alterações. As configurações foram salvas. Então, o que você quer fazer agora? Bem, claro, queremos fazer um novo teste para ter certeza de que ele está carregando corretamente e que temos menos pedidos e podemos ver que essas questões estão desaparecendo. Vou escrever no nosso site aqui e clicar em começar a testar e, como podemos ver , há muitas melhorias realmente boas acontecendo. Olha para isto. Pedimos ter descido para 31. Vemos o anterior agora? O anterior tinha 60 pedidos acontecendo, e agora este está tendo 31. Agora o tamanho total vai ver caiu também, mas eu tenho notado que isso está carregando tamanhos ligeiramente diferentes. O que é importante saber é que ele está abaixo de um megabyte, certo, e está bem abaixo de um megabytes e a velocidade de carregamento também melhorou, que é incrível, e está carregando de Londres Reino Unido. incríveis, Estatísticasincríveis, absolutamente incríveis. Neste momento, o nosso excelente desempenho subiu de 56 para 63. Mas o mais importante, vamos descer e verificar isso. Podemos ver que o único problema agora é que temos um bloqueando JavaScript e que é o coro G. Ele dot gs, e na verdade este geralmente é os temas JavaScript. Então o tema quer estar carregando a si mesmo antes de realmente executar e mostrar o site, e há maneiras de contornar isso. Mas honestamente, na minha experiência, isso não é um problema. Se você tem um tema que realmente quer usar este JavaScript e não adiá-lo. Podemos usar este. Então eu vou deixar isso, e eu estou realmente super feliz com essas estatísticas. Agora, pessoal, se vocês instalaram esses plugins e ainda estão tendo javascript, que são problema aqui, há mais uma coisa que vocês podem fazer. Agora. Se você não tem esse problema, você pode passar para a próxima palestra. Mas se o fizeres, fica por perto e eu mostro-te. Então nós vamos voltar aqui e vamos nos mover e instalar mais um plug in . Quero dizer, se há um problema, há um blog, certo? Então, vamos clicar em adicionar novo, e agora vamos procurar por uma pia. JavaScript. E aqui vamos nós. E nós vamos clicar em instalar. Agora. Na verdade, não precisamos disso. Isto é para fins de demonstração, certo? E então eu vou clicar em ativar, e então vamos passar para as configurações, e então tudo que você precisa realmente fazer é ir em frente e clicar em Habilitar frente javascript e, em seguida, rolou para baixo e salvar as configurações. de , Antesde seguirmos em frente,há algumas coisas que quero te mostrar. Existem duas maneiras diferentes de usar o JavaScript de corrida. Ou você enfileirou um coletor ou você pode adiar o JavaScript e as diferenças com a caixa que vai permitir que o JavaScript para executar um logo que eles tenham sido carregados. Em outras palavras, sempre que há algo em seu site carregando, você só vai deixar que apareça na tela antes que tudo o resto seja feito certo? O problema com isso é que se as coisas erradas carregando o ar muito rápido, seu tema vai quebrar. Você vai ver, tipo, tipo, essa versão realmente feia do seu site por cerca de meio segundo, e então todos os efeitos sob a ciência e tudo vai ser aplicado. E isso não é uma grande coisa. Então, para algumas pessoas, alguns temas e sites, o A acha que não vai funcionar. Bem, é quando você pode usar para adiar e adiar isso significa que você vai coletar todas essas cargas juntos. E quando todos os mais importantes para a grande aparência forem feitos, então eles serão executados. Você tem este olhar maior em seu site agora. O problema com isso é que às vezes isso é um pouco mais lento, mas você nunca quer quebrar o seu tema sobre o carregamento. Então, como você sabe qual deles usar como bastante simples, na verdade, porque nós já temos este tempo para fazer os testes primeiro para que possamos verificar estes aqui e tudo o que você realmente precisa fazer é ir em frente e pegar uma guia privada e agitar para fora do seu site. Vá para o seu site. Se o lavatório A não estiver funcionando, vá com o diferencial. Apenas faça o que funciona, certo? Você vai ver se o seu site, se o seu tema está quebrando. Se for, não está funcionando direito. Então, pessoal, é isso. É assim que resolvemos o problema fora da renderização bloqueando JavaScript e CIA diz acima do conteúdo dobra. Portanto, nosso site está ficando cada vez melhor, mais rápido e mais rápido. Vamos passar para a próxima palestra, está bem? E se você tiver alguma dúvida fora do curso, e , como sempre, estará no Q e A C na próxima palestra 6. Reduza tempo de resposta do servidor: Muito bem, pessoal, bem-vindos de volta. Agora, já chegamos muito longe. Até agora, aproveitamos o tempo para otimizar todas as nossas imagens para economizar muito fora do tamanho. Nós também fomos em frente e eliminamos nossa renderização bloqueando JavaScript e CSS para o conteúdo de dobra acima . Agora, em seguida, como você pode ver, está reduzindo o tempo de resposta do servidor. Agora, estes Air Putin mais alto Kim. O que significa que eles querem isto no topo, mais à esquerda. Esse é o que tem a maior prioridade. O maior problema, se quiser. Então, atualmente, não estamos tendo um tempo de resposta muito bom do servidor. Se clicarmos nele, podemos ver que está em 0,78. E, claro, isso também vai depender de onde você está tentando agora. Estamos a tentar de Londres, e se voltarmos e tentarmos o anterior e verificarmos que este é o nosso primeiro teste , muita coisa aconteceu desde então. Podemos ver que levou até 1,1 segundos. Agora isso é muito tempo para esperar até mesmo para fazer seu servidor funcionar, ou melhor, para ter uma resposta do servidor. Então vamos aprofundar o que isso realmente significa, o que podemos fazer sobre isso. Então vamos começar. Então, por que você diz tempo de resposta do servidor? Bem, para saber o que é, precisamos saber como. O que? É medido agora que é a resposta do servidor. O tempo é medido por algo chamado titi FB. Hora da primeira mordida, certo? Assim, sempre que seu usuário estiver chegando ao seu site, ele vai medir quanto tempo leva até que ele receba sua primeira mordida. A primeira informação, então você sabe, vai de kilobytes, megabytes, gigabytes, etc. Então, quando eles receberam sua primeira mordida, foi quando o servidor considerou dar uma resposta. E para nós, agora são 0,8 segundos e tivemos até 1,1 2º antes mesmo que o usuário tenha qualquer resposta para baixar qualquer coisa. E isso é muito tempo, pessoal. Então vamos ver por que isso é e o que podemos fazer sobre isso. Assim, o mais comum emitido, se vemos da maneira mais fácil de resolvê-lo, é dando uma olhada no servidor host. O recurso está certo, então um host terá vários servidores diferentes de onde você coloca todas as coisas do seu site em. E quanto mais espaço você tiver nesse servidor, mais você poderá usar, por exemplo, plugins exigentes. Adicionando Mawr fora de seus itens, etc, etc, e isso vai ditar quanto tempo de resposta é. Agora estamos usando hospedeiro azul, certo? E se tivermos uma olhada em seu site, podemos ver que um par que vai para hospedagem há três seções diferentes acontecendo agora. Estamos usando hospedagem compartilhada agora, e eu vou explicar a diferença entre esses três e por que eles importam. E eu vou explicar de uma maneira que eu aprendi e eu acho que é realmente, muito entregador. Então hospedagem compartilhada é basicamente como ter no apartamento agora. Quanto mais pessoas houver no apartamento, menos espaço você terá porque todos estão compartilhando o mesmo espaço. Hospedagem compartilhada é da mesma maneira. Então você basicamente tem um servidor e eles vão colocar um monte de pessoas nesse servidor e menos pessoas. Há mais histórias de espaço para você e seu site. Quanto mais pessoas houver, menos doces para você e mais lento será o tempo de resposta , e então teremos os vice-presidentes. Agora, VPs é como viver em um dormitório. Vais ter o teu próprio quarto, o teu próprio espaço, e cabe a ti o quanto decides usar esse espaço. Mas você sempre terá uma certa quantidade de espaço disponível. Agora, isso é muito parecido com VPs porque você tem um servidor e você vai ter uma certa quantidade de CPU, uma certa quantidade de RAM, e vai ser até você o quanto o uso dele. Então vai haver um limite, mas você não depende de outra pessoa usá-lo. Então não importa quantas pessoas realmente na casa, porque você ainda tem seu próprio espaço. E finalmente temos a hospedagem dedicada, e isso é basicamente como possuir a casa inteira você mesmo, certo? É tudo você. Não há mais ninguém que você tenha todo o espaço, você tem toda a disponibilidade para si mesmo. Mas como você pode imaginar, é isso mesmo, há hipotecas. Há aluguel, etcetera, etcetera, e da mesma forma, quando você possui todo o servidor, haverá mais custos, então há uma manutenção maior para quanto esses três custos e hospedagem compartilhada fora do curso sendo o mais barato porque você está compartilhando VPs sendo mais caro e dedicado hospedagem sendo de longe o mais caro. Agora estes são geralmente necessários apenas os VPs e er dedicar, se você tem um monte de tráfego acontecendo e dedicado, é principalmente se você tem uma quantidade extrema de tráfego acontecendo. Imagine estes enorme site de comércio e. Eles podem precisar da hospedagem dedicada. E também, se vamos para a hospedagem compartilhada, que temos agora, podemos ver que há atualizações. Agora, mesmo com a atualização pro, temos um alto desempenho acontecendo, ou seja, se tivermos aqui, diz densidades menores de servo. Então seu site tem mais recursos está disponível, e isso é realmente o que se trata. O recurso disponível é para você e seu site que vai ditar a velocidade do servidor. Ok, então isso é o que Madison mais quando se trata de tempo de resposta do seu servidor. Mas, é claro, não estamos limitados apenas aos cavalos, muitas coisas pelas quais podemos passar, mas deixe-me passar e aprofundar o porquê disso e também o que podemos fazer sobre isso agora. A razão pela qual esta é a forma como é é porque o Blue Host é uma parte de algo chamado o Grupo Internacional de Endurance E. I G. I G. E basicamente, essa é uma grande, grande, grande empresa que possui muitas empresas de hospedagem como o host Gator, etc, etc. Você tem uma olhada na sua, Wikipédia disse. Você pode ver que eles são donos. Eu acho que era como 83 empresas de hospedagem diferentes agora, e isso é enorme. Mas isso também significa que há, ah, ah, muitas pessoas que estão sendo empacotadas em servidores bem pequenos, que é o que eles estão fazendo. Mas temos que saber que há grandes benefícios para o Blue Host. Vou mostrar-lhe como otimizar os servidores host azuis ainda mais com o que temos, e então você vai começar a ver quais são os outros benefícios dos hosts azuis agora. Eu amo Blue Host têm usado Blue House por um tempo, até mesmo Pat Flynn, que temos sido imitando até agora eu tenho aprendido com Ele está usando host azul e isso é porque eles têm muitas mais vantagens. Nem tudo sobre os caras da velocidade. Então, a outra coisa, nós também podemos ir em frente e fazer, o que já fizemos é estações otimizadas, como consertar nossa captura. Significa que estamos colocando todas as nossas coisas em uma pegadinha. E, em seguida, colocá-lo para o computador do usuário para que eles não têm que baixar, por exemplo, são cabeçalho são imagens são fundos ou decide etcetera. Cada vez em vez vai estar em seu computador, então a velocidade de carregamento é aumentada. Também tornando as imagens menores compressões, etc. Apenas tornando seu site mais leve. Ok. Mas talvez a coisa mais importante e mais importante que podemos fazer para acelerar o tempo de resposta do nosso servidor seja aproximar nosso servidor do Yusor. E vamos fazer isso através de algo chamado CD e rede de entrega de conteúdo. Agora, para a rede de entrega de conteúdo, você pode já saber sobre isso, mas eles também são tão importantes. E há três grandes que eu quero que você saiba. Agora, se você está usando host azul como nós estamos, você vai ter algo chamado site parece cdn já disponível para você nos painéis host azuis . Vou mostrar-vos como activar o “O que no SSL é como funciona a célula, etc, na próxima palestra. Mas há uma coisa que você estava indo para mostrar-lhe como ativar agora talvez o maior quando se trata de um CD M gratuito é Cloudflare. Então, na próxima eleição, vou mostrar a vocês como usar o Cloudflare também. Se você quiser usar esse serviço que você provavelmente vai querer e eu vou explicar por que em um pouco e, finalmente, temos Max Cdn, que pode ser o cdn mais popular fora da capacidade shopping. Eles têm os servidores mais dedicados ao redor, mas eles também custam. Mas eu quero que você saiba que se você está planejando gastar dinheiro nisso, eu recomendo Max Cdn. Então, em outras palavras, tendo essas diferentes redes de distribuição de conteúdo, vamos colocar nosso site em diferentes servidores ao redor do mundo. Então, se você tem alguém que é de uma certa parte da Ásia, por exemplo, entrando em seu site, então eles vão carregar seu site daquele servidor asiático que vai ser muito mais rápido do que carregá-lo de. Por exemplo, Utah, acredito que hospedeira azul situada em Utah, na América. E é assim que vamos acelerar nosso site usando todos esses servidores diferentes . Escusado será dizer que quanto mais serviço dedicado eles são, quanto maiores as redes de entrega de conteúdo, melhor geralmente é. Cloudflare tem de longe o mais quando se trata de um cdn livre, e Max Cdn tem de longe o mais eu acredito justo e fim da história. Mas eles também custam. Então vamos em frente e configurar isso nas próximas palestras, e isso vai melhorar seriamente o tempo de resposta do nosso servidor. Agora, há mais uma coisa que vamos seguir em frente e verificar que é tão importante e muitas vezes negligenciado. E essa é a nossa casa e o nosso lado. Você é eu e o que eu quero dizer com isso especificamente é como nós montamos para fora. Então, por exemplo, podemos ter o nosso http e então temos os dois pontos para frente barra barra barra Robin e Jesper dot com. Mas se estamos usando SSL, que faremos porque é tão importante para o CEO S e também para a segurança, vai parecer que isso vai parecer com https Colin Colin para frente barra barra robin e Jesper dot com. Mas isso também significa que se alguém vai para o lado http regular, eles primeiro precisam ser redirecionados para o site HT T.P HT T.P . Certo? E esse redirecionamento nos custará um valioso tempo de resposta do servidor, e não queremos isso. Então, sempre que estamos montando o site deles e colocando-o na web, precisamos ter certeza de que estamos colocando para fora o U R L apropriado . E o que 80 DP é um 82 P s nós vamos entrar mais na próxima palestra. Mas https, eu posso dizer que eu posso falar um pouco sobre, porque isso vai ser sobre a segurança do seu site. Você precisa que a segurança para um CEO por razões de segurança óbvias, e ele representa o S realmente representa a segurança e vêm do SSL Mais sobre isso na próxima palestra. Mas também temos mais coisas como se você estiver usando w w w dot Robyn e jesper dot com, ou vai ser www dot seu site dot com, Mas você realmente definiu seu site para simplesmente robin e jesper dot com. É a mesma coisa aqui. Isso significa que se alguém entrar em seu site usando o uso duplo, primeiro precisa ser direcionado para o U.R eleprimeiro precisa ser direcionado para o U.RL sem os W's e que também vai custar um tempo de resposta do servidor. Então, para reduzir isso, o que precisamos fazer é ter certeza de que estamos dando o seu l correto. Por exemplo, se estamos ligando do nosso Facebook, se estamos vinculando nosso conteúdo ou sites diferentes, etcetera, e certifique-se de que estamos classificando com o correto seu mais, e vamos passar por como fazer isso na próxima palestra. Então, na próxima palestra, vou mostrar-lhe como obter o https, que você provavelmente já tem. Mas se nada te mostrar como consegui-lo e também como activar este site, olha, C D. M. C D. M. Então veja, na próxima palestra, pessoal, 7. SSL SiteLock CDN: Tudo bem. Bem-vindo de volta nesta palestra, vamos em frente e garantir que você tem seu SSL ativado e também como desativado se você quiser isso. E também, vou mostrar a vocês como ativar este site. Olha, CDN. Agora, se você não estiver usando hosts azuis como seu host, você pode ir em frente e pular esta palestra e passar para a próxima, porque este é Onley vai se aplicar aos usuários do Host azul. Ok, então pule para o próximo, vamos passar por SSL e CD e mais em profundidade e, em seguida, encontrar uma solução alternativa. Então nós vamos começar com E no Blue Host que vêm aqui e então nós vamos clicar em um log in porque nós vamos e verificar para fora para ver o S S S S L Então aqui estamos. E agora nós vamos para o mercado, e então nós vamos clicar no Adams e abaixo aqui, você vai ver algo que é chamado de certificados SSL. Agora, se eu clicar aqui, eu vou entrar neste site e você pode ver que ele diz também SSL está ligado. Isso significa que temos nosso SSL ativado novamente. Se você ainda está confuso com SSL é não se preocupe com isso. Vamos falar mais sobre isso na próxima palestra, mas saiba que é super importante para a venda de segurança e, basicamente, para classificar e ser seguro. Então eu sei que isso está acontecendo. E isso também deve significar que se eu for para Robin e Jesper Dot vir, eu vou ter este olhar pequeno bloco acontecendo aqui e se e isso também significa que eu estou seguro porque o cadeado é a célula significa que eu tenho em Http seus sites. Se eu clicar aqui, você pode ver que ele diz h T P s. Agora, se eu não tivesse isso, ele iria apenas dizer, http ou poderia apenas olhar como este e não haveria cadeado. Agora, deixe-me mostrar-lhe um exemplo. Agora, há um site aqui chamado Treinador Branco. Se eu entrar, a primeira coisa que você vai notar é que não há nenhum olhar de almofada acontecendo. E se eu clicar em garoto, não há http s. Então eles não estão usando um certificado SSL, que significa que ele não vai ser seguro e não vai classificar corretamente tão bem quanto poderia . Vamos aprofundar estes na próxima palestra e mostrar-vos porquê e como funciona . Então isso é para o S L. Agora deixe-me mostrar-lhe também ajuda para ativar o site. Veja, veja porque essa é uma das características maravilhosas que vem com o Blue Host First teria o SSL gratuito, que é incrível. É muito, muito bom. E também temos um CDN grátis. Então o que queremos fazer é realmente estar em nossos direitos de casa aqui. E então vamos em frente e ir para o painel. E agora vamos passar para o Blue Host e vamos clicar no desempenho. E depois vamos mudar-nos para C. D. M. Agora. Desde que eu estive brincando com isso antes, ele diz que estamos configurando seu CDN. Isto não é verdade. Na verdade, desativei-o. Mas para você, na verdade, vai dizer que agiu em nosso caso, ativado, coisas desativadas vão ficar ligadas e desativadas. Mas isso é muito importante para você saber. A menos que você tenha realmente comprado em SSL, você não pode ativar isso E a razão para isso é que o SSL que temos aqui, o SSL livre é Onley vai trabalhar para o seu site através de Blue Host. Ok, então porque estamos usando o servidor host azul, podemos usar no certificado SSL. Mas se estamos usando um CDN, isso significa que vamos usar os servidores de outra pessoa. E se estamos usando servidores de outra pessoa, não estamos mais usando servidores host azuis E se não estamos mais usando servidores host azuis, não obtemos o certificado SSL gratuito. Ok, então isso significa que se você clicar nisso, você vai perder para a SL. Você não vai mais ser https e isso não vale a pena, pessoal. Mas isto é perfeito. Se você já esteve no jogo antes e já tem um SSL ativo, então você pode ir em frente. Você pode ativar isso porque o site parece cdn. Na verdade, é muito poderoso e muito seguro. Mas para o resto de nós mortais que ainda estão usando este, o SSL livre, não vamos ativar este site. Olha, Cdn, o que nós vamos seguir em frente e fazer é realmente usado um outro cdn que é chamado Cloudflare agora o Cdn Cloudflare é incrível porque com eles você se acompanha tem CDs em todo o mundo. Eles são livres, livres para sempre. É chamado de plano livre para sempre, o que significa que eles são livres e vão ficar livres. E também, surpreendentemente, eles também vão nos dar um SSL gratuito. Então isso vai resolver o nosso problema porque, bem, nós também podemos ver o fim da Cloudflare. E como esse é um SSL livre, precisamos usar os servidores Cloudflare e porque para usar seu CD e nós vamos usar seus servidores, espero que isso faça sentido, pessoal. Mas o que eu estou tentando dizer é que a nuvem para vai resolver tudo isso vai nos dar o SSL e também vai nos dar o C. D. M. Mas antes de seguir em frente em como fazer isso, eu realmente quer ir mais em profundidade em SSL e ver o fim, por que eles são tão grandes, sua culpa e então vamos seguir em frente para configurar isso. Custa caras, isso é fazer ou quebrar a compreensão do valor do seu site e segurança, como ele funciona e como você está protegendo seus clientes para ver na próxima palestra 8. Compability CDN SSL.: Bem-vindos de volta, pessoal. Nesta palestra, vamos falar sobre SSL O que é, para que o usamos, como funciona. Também sobre Cdn e ampla SSL. capacidade de CD e composição é tão importante agora. Primeiro, o que é SSL e o que torna tão importante que as pessoas estejam dispostas a pagar por isso? Bem, vamos começar definindo o que SSL significa agora. SSL significa camada de soquetes seguros e basicamente que é um nome extravagante para dizer que é uma proteção de segurança entre o cliente eo servidor. Certo? Vai estar protegendo o cliente e as transferências do servidor. Agora, a melhor maneira de explicar isso em profundidade é realmente mostrar a vocês o que eu quero dizer. Então, digamos que temos nosso cliente no cliente. Podem ser seus usuários usando seu site. Pode ser você usando um site. Você está olhando para o seu próprio site, etc, etc. Então vamos dizer que você tem um longo jogo. As pessoas têm a senha e usam o seu nome e tudo mais. Então o que eles vão fazer é que eles vão se conectar e, portanto, enviar seu nome de usuário e sua senha, e eles vão ser enviados de seu computador para os servidores, certo? E então o servidor vai buscá-lo, e vai trancá-los. Agora, aqui está o problema. Você vê que quando o Sr. Hacker aparecer na foto, que infelizmente se tornou um lugar comum hoje, ele vai ser capaz de assumir essa coisa, vai ser capaz de me processar na transferência entre o cliente e entre site. Veja seu nome de usuário e senha e de repente você ou aquele cliente foi hackeado e isso é terrível. Agora você não quer que isso aconteça, especialmente quando você tem alguma forma de comércio. Ou se você estiver lidando com informações confidenciais ou apenas para sua própria conta, faça login em seu próprio site que pode quebrar seu site inteiro. Agora, é claro, felizmente, temos reforços em tudo. Mas isso não é algo que você queira acontecer, especialmente sem saber que as pessoas podem estar compartilhando informações valiosas de suas informações privadas com você com suas informações de cartão de crédito, etc, etcetera. Então aqui está a solução. Pessoal, criptografia e criptografia é exatamente o que SSL oferece. Então, agora, quando estamos usando SSL, parece assim Desde que nós temos nossos clientes que vão ficar entrando em seu site, certo? Vai ter o nome de utilizador dele e é passado para a frente, mas não quando está a enviar a informação para o servidor. Na verdade, vai passar pela encriptação, certo? Esta é a criptografia SSL, Então isso significa que quando a transferência está acontecendo entre a subida eo servidor, ele não vai mais dizer usado para 123 Você passa para 123 direito não vai dizer o nome de usuário e a senha real. Em vez disso, vai parecer algo assim. Será apenas dígitos aleatórios e números impossíveis de saber o que realmente diz e o que realmente significa. Então, ele vai ser recebido pelo servidor com esta informação realmente estranha. Mas graças ao SSL, isso significa que quando o servidor receber esta informação será descriptografada. E isso significa que o servidor pode obter as informações reais e usá-las e registrar esse cliente em segurança. Então agora, se o Sr. Hacker aparecer, aparentemente há apenas um hacker no mundo nesta história. Se os hackers aparecerem, significa que vão assumir a encriptação, certo? E se eles seguirem em frente e pegarem a criptografia, eles não têm idéia do que significa que eles não podem fazer nada valioso com ela. E é por isso que SSL é tão importante. E é tão valioso para a segurança para si mesmo, para todos que o usam, você precisa ter o SSL do seu site protegido. Ok, então vamos seguir em frente para ver o fim. Agora, a coisa com a criptografia SSL é que a criptografia está passando pelo serviço Host azul porque estamos usando Blue Host e estamos recebendo um SSL livre só vai funcionar através dos servidores host azul. Mas com a Cdn, você vai usar um monte de servidores diferentes. E, a menos que você esteja pagando seu certificado SSL, você não poderá aplicá-lo no outro serviço que estiver usando. Por causa de todos esses servidores diferentes, eles vão estar por todo o mundo, certo? Então isso significa que o seu site em seu continente, material que as pessoas estão visitando em seu site, eles serão carregados em diferentes partes do mundo. Então, por exemplo, se alguém é visto na Noruega na Europa ou alguém está na Austrália ou Nova Zelândia, etc, etc. Então haverá um servidor mais próximo. mais provável é que sejamos anfitriãs azuis e eles vão ser um carregamento de páginas mais rápido. Eles vão obter o conteúdo muito mais rápido. Você vai ter um uso muito melhor através da experiência. Mas ainda precisávamos ser encriptados. E o SSL gratuito não oferece isso com o CD dele. Mas aqui está a solução. E é por isso que isto é tão perfeito. E isso é Cloudflare. Agora, Cloudflare tem uma oferta incrível. Eles têm bem para ser um CDN livre. Eles são de longe os mais largos. E eu diria que as melhores ofertas de CDN lá fora agora. Agora, claro, se você estiver usando Max Cdn ou algo assim, você pode obter mais sobre a coisa incrível com Club para é que ele é completamente gratuito e gratuito está sempre no orçamento, certo? Mas eles não estão no Lee oferecendo um CD incrível e eles também estão oferecendo um certificado SSL gratuito . Então o que isso significa é, e porque estamos recebendo um SSL da Cloudflare, isso significa que temos em SSL uma criptografia segura, transferências seguras enquanto também usando C. D. M. E não vai nos custar nada. Então essa é a coisa incrível aqui. Assim, nesta história à distância teria uma bela solução para todo o problema. Então, o que, nós vamos fazer agora é na próxima palestra. Vamos configurar nossas obras Cloudflare Cdn. Vamos configurar o nosso Cloudflare SSL, iniciar este grupo e, em seguida, certificar-se de que nossos tempos de carregamento estão melhorando em nosso tempo de resposta do servidor está melhorando. Ok, então vejam na próxima palestra, pessoal. 9. Cloudflare CDN: Muito bem, meus amigos, não há nada a não ser fazê-lo. Vamos configurar o CD do Cloudflare, e bem, agora, antes de fazermos isso, vamos fazer algumas etapas de preparação. E o primeiro é que se você tem um instalador de dinheiro como nós temos WP super dinheiro e ele tem CD e suporte, nós vamos em frente e de ativar isso. Vai estar em decadência aqui, e depois vamos transformar este único oficial que não temos que CD e apoiar. Isso é meio que colide juntos, e nós já sabemos que este não está funcionando muito bem. Poderíamos vê-lo em uma velocidade de carregamento. E nós não estamos recebendo qualquer apoio do outro mar e CD final nos Urais. Então vamos desativar isso e instalar um mais poderoso. Vou clicar em salvar as alterações. Eles iriam. E agora também vamos para o Blue Host que vêm, vamos clicar no Logan, podemos seguir meus passos lá, e vamos para o mercado e depois Adams e rolar para baixo até termos SSL certificados. E agora vamos desativar nosso SSL agora não se sente muito bem desde que olhar para a eleição anterior são, não é? Mas não se preocupe, vamos instalar um novo e as coisas vão ficar ainda mais seguras em apenas alguns minutos. Então vamos em frente e desativar este. Lá vamos nós. Então agora estamos prontos para começar com a Cloudflare, certo? Foram removidos. RSL Também removemos qualquer forma de outro cdn suportado pode colidir com este. Então vamos passar para Cloudflare dot com. Vou colocar isso. O recurso está fora do curso, e tudo o que você precisa fazer é ir em frente e clicar em Cadastre-se aqui. Mas para mim, que já tem uma conta, vou clicar no login. E uma vez que você se inscreveu, nós vamos acabar no mesmo lugar de qualquer maneira, e nós vamos apenas ir em frente e adicionar nosso site e eu vou escrever o site em que será Robin e Jesper dot Venha assim, eu vou clicar no site add, e agora vamos alterar seus registros DNS. Em outras palavras, nós vamos mudar para que o DNS Em outras palavras, a informação vai ser enviada através de seu serviço e não host azul em porque eles são enviados através de seus servidores, nós começa a se conectar com Eles vêem Dan, que vai ser por todo o mundo. Certo, vou clicar no ano que vem. Vou escolher o plano gratuito. Como você pode ver, temos a semente global em, que é incrível e também os certificados SSL gratuitos. Eu vou clicar cuidado e podemos confirmar o plano e nós começamos a fazer isso para um site gratuito que é mais do que bom o suficiente para nós. E então nós vamos confirmar então nós vamos chegar a esta página aqui e não há nada que nós precisamos pensar sobre porque tudo isso está acontecendo Automático. Até diz automático aqui, o que é perfeito. E o que está acontecendo é que eles estão mudando seu I, p ou melhor, R i p para apontar para seus servidores. Então agora todas as nossas informações que serão enviando em vez de passar por hosts azuis vão passar por Cloudflare. E isso é o que está sendo montado aqui. Então vamos deixar isto ser ácido é e clicar no próximo. Agora, é aqui que temos que sujar as mãos um pouco. Mas isso é realmente super simples. Precisamos mudar nossos servidores de nomes. Então o que vamos fazer é mudar ou azul servidores de nome de host para os servidores de nome Cloudflare . Então, o primeiro 1 aqui, nós vamos apenas clicar na cópia para que ele fique coberto, e então nós vamos para o host azul. Vou criar uma nova guia aqui e entrar em hospedeiros azuis e depois clicar em Logan. E então eu vou me mudar para fazer a rede aqui embaixo, e você pode ver que é o Robin e Jesper dele, e isso dói um pouco no coração não sabe SSL. Vamos corrigir isso em um minuto, e eu vou clicar em Gerenciar, e então vamos para servidores de nomes e aqui estão o serviço de nomes. Você pode ver isso no final, este um host azul escuro ponto com. E é nesta, a casa azul que vem no dia em que nos pedes para mudar, então eles querem ter o fim, este para este que já copiamos, certo? Então nós vamos apenas ir aqui e nós estamos indo para clicar em usar servidores de nomes personalizados e nós vamos mudar este para este. Lá vamos nós. E vamos fazer o mesmo com este. Nós vamos fazer isso, voltar, mudar o 2º 1 e pagar sentado assim. E quando terminarmos, vamos acertar Save, o que é muito longe para a direita. Meu rosto está no caminho, mas está aqui embaixo, à direita. Eu só vou bater, salvar assim. Então agora ele foi salvo com sucesso. Muito, muito bom. Nós estamos indo para ir em frente e voltar e clicar em continuar. E agora, na verdade, estamos todos acabados. Tudo o que precisamos fazer Bem, não é só já, não é? Mas, na verdade, precisamos esperar depois 24 horas antes que essa mudança ocorra. Agora, minha experiência, isso pode levar apenas metade do nosso John, mas também pode levar muito mais tempo. Então vamos ter que esperar e ver as mudanças. Agora, antes de seguirmos em frente e fazer isso, vamos mudar e acertar nosso SSL. Então vamos passar para o cripto. Isso é bem aqui. Tudo isso já está configurado. Vamos mudar para Crypto agora. A primeira coisa que temos que mudar dentro da cripta de opção é o nosso SSL, e felizmente, vamos ter o nosso SSL de volta. Ou melhor, já temos. Então é desde o início, definido para cheio e há quatro diferentes acontecendo. O 1º 1 está desligado, o que provavelmente não precisa de uma explicação. Você desliga, então temos flexibilidade e flexibilidade. Este é bastante problemático porque isso significa que não haverá segurança entre seu servidor e o Cloudflare. Mas haverá segurança entre Cloudflare em seus visitantes, certo? Então eles ainda vão ser uma lacuna de segurança entre seu significado, você pode escapar com muito menos restrições como o vendedor, sábio e segurança sábio. Mas os visitantes ainda vão ver seu site como seguro. Então é uma espécie de SSL falso, se você preferir, e eu não recomendo isso por razões óbvias. Não é tão seguro, pelo menos não do seu e é muito mais seguro do que está fora. Mas não é seguro o suficiente, então o próximo que temos está cheio e que ele está realmente cheio em seu seguro de sua extremidade para nuvem flare e da nuvem para ele para o usuário. E era assim que querias. Você quer todo o caminho para ser seguro agora? Nós também temos rigorosos e o que significa é que você precisa de algum tipo de certificado. Então, por exemplo, porque o host azul está usando um serviço chamado Let's Encrypt, já temos um certificado em nossos servidores. Nossos servidores são considerados seguros porque estamos usando o Blue Host. Nós temos o vamos criptografar, e então nós temos o certificado e nós podemos usar com total rigor. Por isso, recomendo vivamente que avancemos e usemos este totalmente rigoroso porque é o mais seguro . Mas se você não estiver usando hosts azuis, as chances são de que você só pode ser capaz de usar um fora do outro. Talvez até mesmo flexível, então flexível ainda vai ser melhor. Mas eu ainda recomendo que você verifique com o seu host seus servidores e certifique-se de que você pode ir em frente e obter no certificado SSL porque é tão valioso. Aprendemos isso na palestra anterior, certo, então vamos manter uma série completa porque podemos, e estamos gratos por podermos. Então vamos rolar para baixo e queremos verificar algumas coisas. E a primeira coisa é sempre usado https. E isso faz parte de ser rigoroso, certo? Então, se alguém está chegando com http, você sempre quer redirecioná-lo para http, como nós sempre queremos usar essa criptografia segura. Lembre-se, o S realmente significa seguro, e aqui temos regravações https automáticas. Basicamente, ele muda todos os pesquisadores de conteúdo e links. Dizia no site de Http para https. E queremos que isso esteja armado. Isso é ótimo. Quer que tudo seja criptografado e seguro, e é isso. Então, a seguir, ninguém, está tudo pronto. Temos nosso SSL e também criamos Cloudflare para a justiça Cdn. Ou isso vai levar um mundo que pode levar até, bem, algumas horas. Mas vou cortar isso para que você não tenha que ver toda a parte chata. Então eu vou mostrar-lhe como você pode ver que ele está realmente funcionando e funcionando. Tudo bem, então já se passaram cerca de duas horas e está funcionando por esse tempo. Agora o que vamos fazer é ir a um site chamado Qual é a rede de pontos da minha Deena ? Está em O recurso é e vamos escrever no nosso site. Vamos logo, Robin e Jesper Dot com. E então vamos mudar esse A e vamos acabar com isso, que é o servidor de nomes, e que vamos clicar em Pesquisar porque isso vai nos permitir ver até onde chegamos . E podemos ver que realmente temos alguns servidores que se voltaram para os servidores Cloudflare como o de Ashburn. Também temos um em Cambridge, no Brasil, em Amerigo, Paris, etc. Mas também temos um casal que não gosta e ainda não gosta em Londres, por exemplo. Podemos ver isso porque esses são os que colocamos manualmente e esses tipos de Blue Host, quais números? Porque eles dizem host azul agora, a fim de verificar ou SSL e tudo mais bem. E para obter mais informações, podemos usar esta verificação para Cloudflare dot celestic dot com. Isto também está no recurso é que vamos em frente e escrever em nosso site, que é http s coluna para frente barra barra sempre https. A partir de agora, caras Robin e Jesper ponto com e, em seguida, clique em Scam. E aqui podemos ver que ele verificou oito locais globais e encontramos Cloudflare em quatro antes da Inglaterra, Dinamarca, Rússia, nós não encontrados na China, Alemanha, Espanha e Países Baixos. Então ainda vai precisar de um pouco mais de tempo. Mas a grande notícia é que ele está realmente funcionando. Ele também diz que foram usados na roupa inferior CDN, que é uma notícia fantástica. Significa que está funcionando claramente. E também diz que estamos usando a camada de funcionário SSL, que significa que isso também está funcionando, que é uma notícia incrível. Então, tudo está funcionando. Pessoal, podemos ficar muito felizes com isso. Vamos dar mais algumas horas e então vamos passar para a próxima palestra , checar mais uma coisa, e então vamos fazer um novo teste de tempo e verificar o tempo de resposta do servidor. Certo, ótimo trabalho chegando até aqui. Veja, na próxima palestra 10. Conexões URL do site Home: Tudo bem. Então, antes de seguirmos em frente e fazermos o teste de tempo de atividade para verificar o tempo de resposta do servidor, quero mostrar algo que é realmente importante a longo prazo. E isso é sobre o site e casa seu l direito. Então, se você for para a sua página inicial para nós, isso é Robin e Jesper dot com aqui, e você clica. Você vai notar que temos HTTPS fora do curso, sempre asiático para PS. E depois temos a Robin e o Jesper Dot com. Agora, observe que ele não diz w w w w dot Robyn e jesper dot com. Devo ir lá dentro? Eu só vou ser direto jogado de volta para este Robin e Jesper ponto com sem o duplo usado e você pode escolher usar que você pode escolher não usar passo. Mas, pelo menos, vou dar-te as opções que escolher. E depois vamos falar sobre as vantagens e desvantagens. Então o que vamos fazer é ir ao site da Jennifer. Nós vamos para o painel aqui, e então nós vamos para baixo duas sessões, e nós vamos clicar em General e então nós podemos ver que nós temos bordo. Pressione o endereço do seu l e endereço do site, Ural. E se você gostaria de ter seu site como www dot seu nome de domínio dot com, este seria o lugar para mudanças de configurações e geral. E aqui temos. OK, agora, não há nenhum benefício particular de usar os W ou usar sem. Há muitos sites principais que usam sem, e muitos grande tamanho fez uso com. Ok, então realmente não importa qual deles você usa. Isso vai ser para você decidir. Mas eu quero que você pense em duas coisas que são importantes, uma que quando você está escrevendo o que você escolher, sempre certifique-se de que você usa essa. Então, por exemplo, se você estiver usando o que foi usado em sem os W's, então, quando você está escrevendo para pessoas e vinculando ele quando você está colocando em suas mídias sociais , quando você está fazendo seu marketing digital, por exemplo, você quer ter certeza de que você não está usando que dobrou usando aqui porque isso vai fazer um outro redirecionamento. Isso só vai tornar a velocidade de carregamento da página mais lenta, e nós não queremos isso, ok, e isso pode soar como um menor. Mas, a longo prazo, isso vai se tornar um major. Portanto, queremos ter certeza de que estamos sempre usando o mesmo. E a segunda coisa que sempre usaria o mesmo é que se você usar este por um tempo e então você decidir ir com W w w assim, então o problema pode ser que o Google veja isso. Certo, aí vem outro lado que não reconhece seu site original. E o problema com isso é, se ele deixou de sites idênticos, você provavelmente vai ser banido dos motores de busca do Google. E isso significa muito pouco ou nenhum tráfego. Então não queremos que isso aconteça. Mas no início, como estamos agora, está tudo bem ir em frente e mudá-lo. Neste momento, não há nenhum benefício em usar um em detrimento do outro. Apenas certifique-se de escolher um e ficar com ele. Na verdade, prefiro este. Mas o benefício de usar os W pode, é claro, claro, ser que um monte de pessoas quando eles falam e eles referem alguém que eles costumavam usar dupla , mas é qualquer taxa como você começar a classificar no motor de busca do Google Cosco melhora. Este vai ser o seu original. Citado Melhorado de qualquer maneira, então eles vão pousar aqui imediatamente. As partes mais importantes para a sua mídia social para um marketing digital. Se você estiver fazendo anúncios ou algo assim, você quer ter certeza de que está sempre usando o endereço correto. E se você quiser mudar é este é provavelmente o momento agora cedo para mudanças e certifique-se de que você mudar ambos fora deles. Se você alterar apenas um deles, seu site pode quebrar. E isso não é divertido, realmente não é. Então, apenas mude um desses. Então vamos em frente e passar para a próxima palestra e fazer o teste de velocidade e depois passar para a próxima edição e vendemos uma também. E depois vou mostrar-te o que podes fazer se o teu site ceder. Eu sei que temos nossos backups e tudo mais, mas há mais coisas que você pode realmente fazer se ele parar para ver na próxima palestra. Rapazes 11. Aproveite o cache do navegador: Muito bem, pessoal, pessoal, bem-vindos de volta. Agora, se você tem me seguido da palestra anterior, você também terá configurado sua nuvem para ver o fim agora. Se não, vá em frente e faça isso. Se é isso que você está procurando fazer para otimizar nesta seção. Agora, antes de irmos em frente e fazer um teste de velocidade em um teste de página de carregamento, eu quero falar sobre o próximo problema que estamos enfrentando. O que é, o que podemos fazer sobre isso. E então vamos testar nossa nova Cloudflare Cdn para o tempo de resposta do servidor e também verificar como afetar a alavancagem do navegador. Ok, então o que é o Leverage Browser descontar? Bem, basicamente, é o dinheiro que sabemos o que é um dinheiro, certo? Trata-se de alavancar um cache do navegador, o que significa que pegamos um monte de coisas como ver você, diz javascript. Ah, muito para imagens ou fundos, etc para o navegador ou para o usuário para seus computadores. Tudo será carregado muito mais rápido agora, o problema que temos certo, e é um pequeno problema porque você pode ver que ele está na parte mais baixa da lista de prioridades aqui é que se você rolar para baixo, há sem datas de expiração ou tempo de expiração. Em vez disso, ele especificou. E isso geralmente não é um problema tão grande, porque vamos em frente e marcar uma partida de qualquer maneira, então isso vai resolver esse problema. Mas o que significa é que ele não tem uma data ou uma hora para quando vai expirar. Então, se você está atualizando seu lado, ele não se remove automaticamente do dinheiro. E para alguns, muitas pessoas usam tempos diferentes para o dinheiro, dependendo do tipo de site, dependendo de como querem alavancar, etc. Mas o que é importante saber é que você ainda vai ter o lado atualizado se você cuidar fora do dinheiro em seu site. Agora, se dermos uma olhada no Pat Flynn aqui em seu site inteligente, renda passiva. Este é o primeiro teste que fizemos anteriormente na seção. Você vai ver que ele também deve ter esse navegador alavancagem capturando como um erro. Se clicar nele, ele tem a mesma coisa. É que a expiração não especificada em um monte de coisas aqui, mas de qualquer maneira, seu site leste está funcionando muito bem e está carregando super rapidamente e é um tamanho pequeno agora, o mais importante de tudo isso fora do curso, o próprio tempo de carregamento. E não estamos aqui para ficar pendurados em todos os números, deixando tudo perfeito. Queremos ter um ótimo tempo de carregamento para a experiência do usuário e para o S e. certo. Mas o que eu quero que você faça é realmente ir para o seu plug in dinheiro. E se você tem seguido junto, você deveria ter o super dinheiro WP. E se não o fizeres, tudo bem também. Há um monte de dinheiro que ele plugins lá fora e eu queria ir para baixo para este aqui na seção avançada. Então você vai definir coisas WP Super Cash adiantamento e, em seguida, ir para este é em 304 não modificado. Navegar ou descontar indicar quando uma página não foi modificada desde que foi solicitada pela última vez. Então o que isso vai fazer é que é sempre quando eles estão entrando em nosso site, eles vão verificar sua captura para o dinheiro atual no site para ver se eles estão combinando apenas para agitar. Ok. Há algo que é atualizado que precisa ser atualizado ou se é o mesmo, se é o mesmo que nada precisa ser feito. Se algo está lá em cima vai nos atualizar. É apenas algo que vale a pena ter ativado. Então, vamos clicar nele. Vamos descer e clicar em atualizações. Status. E agora, com esta pequena diferença que fizemos com esta pequena atualização, vamos em frente e vamos fazer um novo teste de velocidade para o nosso site. Agora, claro, há muito mais coisas que poderíamos estar fazendo aqui. Você poderia realmente entrar em seus arquivos em excesso de HD e sentar certos tempos de expiração para cada um desses arquivos, e eu vou te mostrar como fazer isso também. Agora, você também pode ir em frente e ir para o seu arquivo de acesso HD e escrever em um determinado código para definir uma data de validade. Mas esse arquivo é muito sensível. Se algo der errado, vai quebrar seu site. Eu tenho usado isso antes, mas eu realmente não vi nenhuma diferença no desempenho em meus sites ser então eu realmente não me incomodo em fazer isso mais, Então nós não vamos estar tocando isso. É apenas trabalho desnecessário e também um trabalho um pouco arriscado. Vamos em frente e vamos fazer outro teste de velocidade, então eu vou clicar em começar a testar. Tudo bem, então os números estão dentro, e como podemos ver, há uma ótima melhoria acontecendo. O tempo de carregamento é melhorado. Os pedidos são reduzidos. Este tamanho agora é apenas um aviso de isenção de responsabilidade. Nada disso é uma ciência exata. Se você executar vários testes, você deve ter notado que ele vai um pouco confuso, também, dependendo de onde o teste está vindo. Mas dá-lhe uma estimativa muito boa que, como podemos ver nos testes anteriores, estão carregando. O tempo estava pairando em 80,8 2 e perto de 0,9, e agora está pairando em 0,6. Isto é incrível. Os pedidos são reduzidos. Podemos ver 31 a 18. É provável que o tamanho aumente. Mas, novamente, estes podem não. Isto não é perfeito para o arremesso. Isto não é perfeito para o arremesso. Nada disso é. Mas uma pontuação total subiu para 71 de 63 em diante. Isso é realmente, realmente ótimos caras. Agora, se nós rolarmos para baixo, você vai notar que o navegador de alavancagem capturá-lo ainda é um problema acontecendo aqui. Mas vai ser até a hora de expirar. E na minha opinião, olhando para estas notas fantásticas, acho que não precisamos. E eu não acho que você deveria se preocupar muito em aperfeiçoar esses também. Agora, este está fora do curso. Super interessante. Olha para isto. Agora ainda estamos recebendo um aviso de tempo de resposta do servidor reduzido. Mas antes que um estava realmente no topo fora, o kit mais alto era o maior problema atual. Agora ele está na parte inferior, ainda mais baixo do que alavancar o descontar do navegador. Então, se eu clicar neste, podemos ver que o servidor respondeu em 0.3 segundos e isso é fantástico. Onde está antes? Ele estava respondendo em 0,78 segundos. Certo? E se olharmos todo o caminho desde o início, quando nossa velocidade estava emprestada a 4,2 segundos, quase 4,3, lembre-se, isso era de Sydney, Austrália. Nós também tivemos um tempo de resposta do servidor de 1.1 2º Então, quase em seu segundo. Tivemos que esperar antes que o servidor respondesse e algo acontecesse. E essa foi a hora da primeira mordida. Lembre-se disso. Então, agora, pessoal, nós realmente temos um site fantástico acontecendo. E se nos compararmos com Pat Flynn, vai notar que a velocidade de carregamento dele está fora de rota mais rápida. E as chances são de que ele está usando especialista para utilizar corretamente seu site, minimizando os tamanhos de imagem ainda mais fora do curso talvez esteja usando servidores dedicados ou hospedagem VPN enquanto estávamos usando a hospedagem compartilhada no plano mais básico. E para ser honesto, estamos indo muito bem mesmo para que ele tenha um ponto zero quase 0,4 e nós estamos em 0,6 e o ponto é estar abaixo de dois segundos. Então estamos indo realmente fantásticos. Tamanho total agora nossas performances em 71 ele está em 73 novamente, estas são apenas estimativas abstratas deste lado em cima do tempo que vêm e nada aqui é perfeito. Não há necessidade de enlouquecer para aperfeiçoar isso. Ele também tem essas coisas acontecendo. Mas um de seus problemas é não servir um tempo de resposta. Você pode ver que ele diz verde, e você vai ficar verde se você servir. O tempo de resposta é melhor do que 0.2 e nós vamos ter que atualizar quer ir de host azul para, por exemplo, terra do site, que host realmente rápido ou melhorar a nossa hospedagem no host azul para talvez um plano VPN ou pro, ou apenas ser realmente feliz que estamos pagando muito pouco dinheiro por um serviço fantástico. E nosso site está funcionando perfeitamente, pessoal, mas como sempre, a prova real está no vaso. Certo? Então, se formos em frente e nós vamos carregar Robin e Jesper Dot com assim, nós vamos notar que ele carrega muito rapidamente fora do curso. Mas se você sabe o que é que inteligente, renda passiva ele passado aviões site ele baixa mais rápido. Mas estes dois, embora haja uma diferença, a diferença não é enorme. Ambos os sites estão carregando muito, muito rapidamente e isso é fantástico. Se você estiver nos dois segundos, você pode ter um site fantástico. Fantástico s você visitantes felizes. Você tem uma ótima interface de usuário i e grande, você X Agora nos próximos caras palestra. O que? Vamos em frente e fazer é realmente olhar para todas essas outras estimativas acontecendo aqui agora para mim agora mesmo. E as chances são para você, eles podem ser verdes, mas eles podem não ser. Então vamos falar sobre o que todas essas outras coisas são. E se eles tivessem este sinal de aviso o que fazer com eles agora? Uma última coisa. Eu quero te contar sobre isso. Como sempre, este tipo de testes não são perfeitos. E testes diferentes dão resultados diferentes. Nós temos o que temos um teste do Google e nós também temos o teste Ping dum, e aqueles vão dar-lhe sugestões diferentes. Resultados diferentes. Mas, como sempre, os homens não enlouquecem com isto. O ponto principal é ter uma boa pontuação, uma interface de usuário bonita, experiência de usuário bonita, e então você está tudo pronto para ir. Não precisamos ter notas perfeitas em tudo. Olha para o Pat Flynn. Ele tem um site incrível, negócios incríveis acontecendo, e ele está fazendo 73 em 100 não 100 em 100. Então vamos falar sobre essas outras coisas, e depois vamos seguir em frente. Ok? Veja, na próxima palestra, pessoal, 12. Adicionando otimizações: Muito bem, pessoal, pessoal, bem-vindos de volta. Agora vamos fazer mais alguns problemas de resolução para quando sua velocidade testar seu site. Então já passamos por alguns problemas na aba de desempenho, certo? Nós fizemos o primeiro eliminando a renderização bloqueando JavaScript e CSS no acima o conteúdo dobra. Agora que é um bocado que temos otimizado ou imagens passaram por alavancar o descarte do navegador , que sabemos que é mais frequentemente tempo de expiração do que o tempo real de descontar. E também analisamos como reduzir o tempo de resposta do servidor. E reduzimos o tempo de resposta e passamos por algumas opções para reduzi-lo ainda mais . Deveríamos querer fazer isso? Agora vamos olhar para os outros casais aqui. Agora há mais. Isso é verde para nós. E a razão pela qual eles são verdes é porque muitos destes nós temos quatro grátis. Como temos vindo a construir o nosso site. Agora, o primeiro 1 é chamado de HTML unificado, e você vai notar que temos ampliações homens do Gmail. Se eu e a CIA dissermos aqui em baixo ampliando o javascript. Então, o que significa se eu sou bem, basicamente homens, se eu ng é quando você está encurtando o código, certo? Como HTML, CSS e JavaScript são todos tipos diferentes de códigos off sobre o que homens, se olhar o código faz é que ele economiza espaço, tornando-o ilegível para humanos, mas ainda completamente legível para computadores. Então todos os espaços que fazem os códigos para humanos como nós entenderem e serem capazes programar eles removeram isso então eles removem o tamanho e removem tudo do branco. O espaço desnecessário comprim-lo. Basicamente, é uma compressão, mas os computadores ainda foram capazes de usá-lo. Mas presumo que seja só uma grande bagunça. Então deixe-me mostrar o que quero dizer. Então aqui temos um código muito simples para mudanças na posição de cor em off a entrada sente quando você está fazendo um formulário para porta macho, por exemplo. Então é assim que um casaco normal se parece quando você quer dizer que se eu for, vamos remover todo esse espaço todo esse espaço desperdiçado aqui. Então, o que nós estaríamos fazendo então, enquanto a ampliação está acontecendo e indo assim entrando assim e entrando assim e assim, então se você estiver fazendo qualquer forma de codificação ou programação e você obter um monte de código e seria olhando assim e vamos dizer que há um monte de código e eventualmente vai ficar assim, mas com um monte de entradas diferentes, isso vai ser apenas uma grande bagunça, certo, porque não há espaços. Mas com a poeira de aumento é que ele economiza o espaço usando tudo em uma linha, diz mais rápido para executar. E o arquivo em si é menor e funciona muito melhor, ou pelo menos muito mais rápido para os computadores. Mas um humano não será capaz de codificar. Mas você não precisa cooperar com isso porque você só precisa executá-lo. Então é isso que a ampliação é. E os homens, se eu conseguir através da nossa tomada de dinheiro, é certo e os plugins de dinheiro que você pode basicamente usar qualquer. Mas nós estamos usando para baixo no cenário dizer que estamos usando o WP super plug dinheiro em que Dustin unificando para nós. Mas o super dinheiro WP não só amplia, mas também descaixa em um arquivo estático, então coloca todos esses arquivos todos eles unificados cai no dinheiro e depois serviços. Portanto, está um passo mais longe da unificação. Então, deixa todos os arquivos muito cansados e muito compactados, coloca-os em dinheiro e depois coloca-os nos computadores do usuário. Carrega mais rápido. OK, agora, se você não tem uma pegadinha, tudo que você precisa fazer é ir para plugins, adicionar novos e procurar dinheiro, e há um monte de realmente maravilhoso plugins dinheiro Agora, honestamente, Eu usei para W três o dinheiro mais rápido, super dinheiro, ou para otimizar, e todos eles funcionam. Tenho certeza que este também funciona. Todos eles realmente funcionam. Mas o que eu acho mais eficaz e mais fácil que eu prefiro é o WP super dinheiro, que é por isso que estamos usando. Temos muito de graça, como eles se unificando aqui agora. A próxima coisa é habilitar a compactação e a descompactação é basicamente quando você tem um arquivo e você o torna menor. Então homens, se eu ng é uma forma de compressão para o HTML para a CIA, diz para o JavaScript. Mas o mais importante, o que é o mais pesado em nosso site são as imagens, certo? Então, temos gasto nosso tempo otimizando nossas imagens em grande escala indo para P e G para J peg e também compactando-as em um arquivo de resolução mais baixa. Então, economizamos muito, muito espaço e aumentamos ou carregamos o tempo, e isso é compressão. E nós temos que habilitar também através de plugins como Smush, por exemplo. Assim, sempre que carregamos qualquer forma de imagem para nossas bibliotecas de mídia, muito automaticamente a comprime. Então também temos a página de destino evitar. Redirecionar. Então, se você tem um problema com a compressão, o que você pode fazer é ir em frente e baixar um plug in como smushed. Vai comprimir. E também certifique-se de comprimir suas imagens e usar uma ficha de dinheiro em homens. Se eu seus arquivos, por exemplo, e dinheiro todos os seus arquivos para melhorar a velocidade de carregamento e usado o máximo de compressão possível em todo o rápido, ele pode ser compactado Agora. Em seguida, evite o redirecionamento da página de destino. Agora, um redirecionamento é quando você é enviado de uma página para outra Então, por exemplo, digamos que você estava indo para http Roman e jesper dot com. Mas então esta página realmente redireciona você para a versão H T P s fora da página. Certo? Então isso seria um redirecionamento. Mas agora esta página também redireciona você para a parte W W fora da página e, em seguida, esses espaços para realmente direciona. E, em seguida, este é diretores para a frente barra casa. Então agora estaríamos tendo três redirecionamentos desnecessários que estão acontecendo em nosso site, mas poderíamos usar para ser enviados do primeiro para o último sem todos esses redirecionamentos intermediários . Certo? Por isso, às vezes, isso pode acontecer quando temos problemas com o nosso SSL. Lembre-se do SSL. Então vamos de http para https, Mas então talvez haja algo errado com https vai enviá-lo de volta para http etcetera ou qualquer problema de loop de formulário fora acontecendo. Ou talvez a página tenha sido configurada de tal forma que há muitos diretos gratuitos. Mas se você está tendo este problema ou há algo quebrado ou você está mudando a URL , tudo que você precisa fazer é ir em frente e ir para os plugins e ir para plugins, Adicionar novo e procurar por algo chamado Redirect. Agora, aqui, vai haver essa conexão chamada redirecionamento. Você pode simplesmente instalá-lo e começar a usá-lo imediatamente. É super simples de usar vai pedir-lhe a entrada. Então, quando uma pessoa escreve este seu l eles serão enviados para este euro. Então você apenas para a direita em seu l que você quer que as pessoas usem e, em seguida, para onde você quer que eles sejam enviados super fácil. Eles serão redirecionados para onde você quiser, para que você não precise de redirecionamentos médios , se preferir. Tão super fácil de usar. E então também temos priorizado conteúdo visível sobre o que isso significa é que estamos priorizando carregamento e renderizando o conteúdo acima da dobra. Ok, então quando nossas páginas sendo baixadas, o que ele vai ser baixado primeiro e acima de tudo vai ser o acima da seção de dobra em nossa página, esta seção você vê o quão rápido isso carregado agora tudo abaixo, provavelmente carregado depois de tudo isso já ter sido carregado. E isso é porque quando as pessoas vêm ao nosso site para que esta página seja carregada imediatamente, certo? Então, isso é priorizar neste conteúdo para ser descarregar primeiro agora tudo o que está abaixo onde provavelmente terá carregado mais lento. Mas isso não importa, porque quando as pessoas visitam nosso site, queremos ter certeza de que elas estão vendo tudo isso imediatamente. E então tudo abaixo pode levar seu tempo para ser carregado. E é isso que eles significam com priorizar o conteúdo visível. Então, se você está tendo um problema com isso, provavelmente o problema vai ser com o seu plug de dinheiro ou melhor, falta de plug de dinheiro porque o plug de caixa vai certificar-se de que você priorizar automaticamente o carregamento fora do os arquivos mais importantes no sequestro, na seção de dobra e tudo o que não é importante serão carregados mais para baixo porque leva mais tempo, mas eles não precisam ser carregados. Então, se nós rolarmos para baixo, nós também temos usabilidade móvel, e nós estamos recebendo ah lote de graça aqui por duas razões. Um, estamos usando o tema Ocean WP, que já é móvel, amigável e móvel adaptado, mas também porque tudo o que você faz em L. Um mentor também é muito amigável para dispositivos móveis, então é extremamente doador e você recebe muito de graça usando essas ferramentas. Agora, na verdade, temos um erro aqui que diz que o tamanho do toque atinge os alvos apropriadamente. Se eu clicar nele, ele diz que o Taft ou sua política de privacidade está perto de um outro toque alvo final. E muito provavelmente isso significa que no rodapé nossa política de privacidade e termos e condições links ou para fechar na versão móvel. Mas isso é bom porque não avançamos e adaptamos nosso site à capacidade de resposta móvel e à capacidade de resposta do tablet. No entanto, a direita ou o site é responsivo para tablets e dispositivos móveis, mas ainda não os redesenhamos especificamente para eles. Vamos fazer isso em uma próxima palestra, então isso será resolvido em breve. E, em seguida, temos usado tamanhos de fonte legíveis, e isso é mais divertido opinião off up tempo, que eles estão pedindo que você usa certo tamanho divertido e certa quantidade fora palavras por coluna . Então, o geral seu site ficará bem e nós preenchemos este critério. Mas isso é mais uma opinião do que qualquer outra coisa. Então temos esse conteúdo de gelo para ver o porto, certo? E este aqui. Certifique-se de que você não precisa em breve em seu telefone celular quando você está usando para ler o conteúdo, porque isso tira a experiência do usuário grande momento. Então, quando você entra em um site no seu celular, você quer ter certeza de que você pode simplesmente ir em frente e rolar. Tudo será servido legível, acessível, e parecia muito bom. Mas se não houver conteúdo que tenha sido tamanho para a porta View, você terá que em breve em sua tela o tempo todo. E isso mata a experiência do usuário. Então isso significa apenas que ele é dimensionado adequadamente e mais uma vez, Ocean WP e fora do curso elementar. Obrigado. E aqui que você precisa configurar a porta View. Quão longe, ou quão longe você queria estar em breve e então este, para ser honesto, é bastante aleatório. Diz “Evite plugins”. Agora, se eu ir em frente e clicar sobre isso, ele me leva a um desenvolvedor do Google que vem site que nem parece existir. Eu não sei por que você iria querer evitar plugins. Acho que este é muito, muito aleatório. Mas se olharmos para Pat Flynn aqui e rolarmos para baixo, ele realmente tem um pequeno erro aqui, e esse é o seu media player que ele tem, ou melhor, é um flash player. Mas este, honestamente, você não precisa se preocupar com a direita a menos que haja algum plugging ele está tomando uma enorme quantidade de espaço ou que está quebrando seu site. Mas, geralmente, este não vai importar. Não precisa fazer nada sobre isso. Mas pessoal, se você não está usando Ocean WP e você não está usando ER elemental, que você deve, na minha opinião do que o que você pode fazer para tornar seu site mais responsivo, é realmente para ir aqui e ir para o seu plugins do painel e, em seguida, clique em Adicionar novo e , em seguida, apenas procurar por um MP. Agora, um MP significa páginas móveis aceleradas ia torná-lo muito mais rápido em seu telefone e também vai torná-lo móvel amigável. Agora, honestamente, eu não usei este ou este aqui porque eu basicamente sempre uso elementares. Eu não preciso usar isso porque elemental torna móvel amigável como ele é. Mas se você não quiser usar elementary por algum motivo e você também está usando um tema que não é mobile friendly por padrão, você pode usar um desses para plugins vai torná-lo mobile friendly para você. OK, então estes são todos os possíveis erros agora, já que você está usando outros testes, como o Google Page Speed Inside e Ping DM, por exemplo, que são outras ferramentas para medir o desempenho do seu site de carregamento Velocidade, etc. Você vai notar que você provavelmente vai obter resultados diferentes em primeiro lugar , e também você vai obter recomendações diferentes novamente. Eu recomendo que você não vá muito fundo nisso porque você quer ter certeza de que seu site é rápido. É eficaz. É uma alta experiência de usuário, alta interface de usuário. Mas não vá ao mar apontando para a pontuação perfeita, porque no final, o tipo de obsessão tende a prejudicar o site. Concentre-se no que é importante e não se especialize nos menores, certo? Olhe para os grandes problemas, corrija-os, melhore, pegue a semente e pegue o dinheiro, etc., e depois siga em frente. Esta é a minha recomendação, pessoal. Agora vamos passar para a próxima palestra do curso. E, claro, se você tiver alguma dúvida, estará nas perguntas e respostas, mas vamos abordar algo muito importante na próxima palestra também. Então vemo-nos lá. 13. Suporte: Certo, pessoal, nesta palestra, quero falar sobre algo muito, muito importante. E isto vai ser principalmente para aqueles de vocês que estão usando o Blue Host, certo? Se você não estiver usando Anfitrião azul, as chances são que isso não vai se aplicar para você passar para a próxima palestra. Mas se você estiver usando o host azul, Eu quero falar sobre suportes. Agora estamos falando sobre os hosts azuis não serem o host mais rápido com os servidores mais rápidos . Certo. E isso é definitivamente verdade. E se você está apontando para velocidade pura, você pode ir para terreno local, por exemplo, que sabemos que são mais rápidos do que hospedeiro azul. Mas uma das coisas mais incríveis, que é a principal razão pela qual nós amamos Blue Host tanto existe suporte? Há mais razões, é claro, como o SSL deles, e eles estão ouvindo o certificado de krypton. Mas o apoio que você recebe do Blue Host por pagar apenas alguns dólares por mês é absolutamente incrível. Agora eu não posso começar a dizer-lhe quantas vezes eu quebrei um site em servidores host azul em Lee para ir para o suporte para ter algum cara passar às vezes horas comigo me ajudar a recuperar isso. Eu digo-me o que fiz de errado e depois corrijo os erros para mim e para os rapazes. Estou tirando horas e horas do tempo de outra pessoa pagando uns dólares por mês . Sabe quanto vai custar? Se você vai ter um a um apoio com alguém e você vai pagar do nosso que pode ser, como 70 ou 80 dólares em nosso e aqui você está pagando um par fora da caixa por mês e você pode ter basicamente quantas horas você quiser. Por isso, recomendo vivamente que quando houver algum problema com o seu site, vá para o suporte de host azul. Agora, se você tiver alguma dúvida para o seu negócio, como levá-lo para o próximo passo para este sinal ou, você sabe, frente do que fora do curso estará no Q e A e você tem a regra de 24 horas estavam sempre indo para responder dentro de 24 horas. Mas para estas questões técnicas, eu posso tão forte o suporte host azul recomendado e também é muito fácil. Tudo o que você faz é seu clicável novamente. Vá em frente e faça login e clique no ponto de interrogação aqui e então você para o bate-papo. Você pode ligar, claro, mas eu gosto de fechar. E então você escreve em seu nome, seu domínio e o nome de domínio aqui. Em seguida, você começa a descrever o seu problema, e então você será colocado para o tiro com alguém pode levar alguns minutos. Depende de quantas pessoas estão usando o serviço, e isso pode parecer um sem cérebro. Mas honestamente, , muitas pessoas recebem esse serviço, mas não usam o suporte corretamente. E mais uma vez, passei tantas horas no apoio que me ajudou muito com problemas de aprendizagem, compreensão. Não posso recomendar o suficiente. E é por isso que eu recomendo fortemente não só usar o host azul, mas também usou seu suporte . Ok, então não entre em pânico se você tiver algum problema com seu site. Se há algo que você não está entendendo, não está funcionando. Vá em frente e use o suporte de host azul. Agora, Blue Host só pode falar para os serviços Blue Host. Se houver plugins, etcetera, etc, você vai querer falar conosco nas perguntas e respostas porque eles não podem ser responsáveis por todas essas coisas. Mas o que estou tentando dizer é que você tem muito apoio. Sua mangueira azul, que são realmente especialistas em assuntos técnicos. Tudo. Mangueira azul. E então você nos tem nas perguntas e respostas para tudo sobre os plugins para o sinal de negócios , etc, etc. Então tire a mensagem que os caras usaram para o suporte de hospedeiro azul que você comprou se você comprou mangueira azul, você tem isso incluído. Faça bom uso disso. Você não vai se arrepender. Está bem, veja-o na próxima palestra. 14. UI de design móvel: Muito bem, meus amigos, vamos em frente e tornar a interface do usuário absolutamente bonita para todas as pessoas que visitam nosso site em seu celular. Certo, então a primeira coisa que vamos fazer mudou o tamanho do logotipo porque nos lembramos que era muito grande. Estamos recebendo duas filas quando se trata do menu e do logotipo. Então o que eu vou fazer é clicar em personalizado aqui em cima, e então eu vou clicar aqui em cima, que vai me levar ao cabeçalho e depois logotipo. Lá vamos nós. E agora eu vou ir em frente e ver como o site parece em nosso telefone celular escreve Eu clique aqui embaixo, e nós podemos ver que estamos tendo esse problema, certo? Então o logotipo é muito grande. O menu é colocado na linha abaixo e temos todo esse espaço desperdiçado e todo o espaço é absolutamente pressões quando se trata de tudo, mas ainda mais. Alguns celulares, porque as telas são tão pequenas. Então, como você pode ver na área de trabalho, esse tamanho é realmente 280. E se eu me mudar para cá para o telemóvel. Você também pode ir até lá. Isto também vai ser na 280. Mas isso vai ser muito grande para nós. Então vamos em frente e mudar isso um pouco. Você pode ver que se eu sou um 280 como antes é muito grande. Nós vamos descer. Nós vamos. Lá vamos nós. Então vamos com, digamos, 200. Agora podemos ver que temos nosso logotipo e nosso menu lado a lado. E estamos economizando muito espaço. Agora, olha, olha para isto mais uma vez. Se eu aumentar, teremos todo esse espaço desperdiçado, voltamos para 200 parecendo muito melhor. Então estou super feliz com isso. Eu só vou ir em frente e clicar em Publicar. Lá vamos nós. Agora vamos voltar para L um mentor. Tudo bem, pessoal, que estão de volta em L. Um Mansour. E a primeira coisa que eu vou seguir em frente e fazer é descer para baixo novamente, clicar em um modo responsivo e mudá-lo para o modo móvel. Lá vamos nós. E eu estou super feliz com isso agora com o logotipo eo menu parece perfeito. Podemos até clicar no menu. Vamos ver como isso parece. Parece muito bom. Para ser honesto, estou amando isso. Então vamos em frente e fazer algumas mudanças aqui, como podemos ver agora que eu acho que este texto aqui precisa de um pouco mais espaço. Vou em frente e mudar isso. Então eu vou clicar aqui, e então eu vou passar para o estilo, e nós vamos passar para a tipografia, e então nós vamos descer para a altura da linha bem aqui, e nós vamos apenas ir em frente e expandir isso um pouco pouco. Algo como isto. Lá vamos nós. Você pode ver que está crescendo. Eles estão trocando toda a interface. Talvez isso seja um pouco demais. Lá vamos nós. Então, ainda queremos ter em mente essas coisas que temos o botão aprender mais que é facilmente acessível, que é realmente, muito bom e oh, tão importante. Ao mesmo tempo, o menu tornou-se um pouco mais difícil de alcançar porque, lembre-se, o polegar não vai tão facilmente lá em cima. Mas aqui, você tem que fazer a escolha. Você vai ter o menu fácil de alcançar, e isso vai custar como, 15% da tela. Na minha opinião, isso não vale a pena. Por isso, é muito melhor colocar o menu um pouco mais alto e dar-lhes mais desconto no conteúdo . Certo? Então lá vamos nós. Agora há mais espaço no meio daqui. Estou gostando disso, talvez até um pouco menos. Na verdade, a altura da linha pode ser um pouco mais. Eles são o nosso ponto ideal. Lá vamos nós. Então eu vou rolar para baixo e ver se há mais alguma coisa que eu não sou um grande fã de fora. Assim, podemos ver aqui, por exemplo, que este texto está ficando bastante apertado na vertical, mas ainda é uma informação muito importante. Então, o que eu gostaria de fazer é mudar a aparência desta seção inteira. Então eu vou ir em frente e clicar na seção de edição aqui, e eu vou ir em frente e remover alguns do preenchimento porque você pode ver que há um monte de espaço desperdiçado aqui. É um monte de espaço desperdiçado aqui, e isso parecia muito bom na área de trabalho, mas isso não parece tão bom no celular. Isso é apenas desperdiçar espaço de pressão. Então o que eu vou ir em frente e fazer é verificar o quanto do estofamento está realmente em cima aqui agora para que possamos manter este preenchimento o espaço entre as diferentes seções, mas,em seções, mas, seguida, removeu o preenchimento para os lados. Ok, Então, a fim de fazer isso, eu vou clicar no preenchimento e, em seguida, ir para a área de trabalho e podemos ver que é dito para 50 . E o que isso significa é que estes, apesar de não haver números, estes também são automaticamente ajustados para 50. É assim que funciona o Modo Responsivo Móvel Automático. Só define os mesmos números. Agora, o site é bonito, mesmo em um celular, mas é completamente otimizado. Então o que eu vou fazer é desvincular esses valores e então eu vou deixar o topo em 50 assim . Então ainda temos a mesma quantidade de espaço acontecendo para remover aquela Síria assim. E então eu vou apenas clicar em e escrever um aqui e outro aqui, outro aqui dentro. Agora, isso já parece muito melhor, mas eu ainda acho que o estofamento é um pouco demais aqui para o celular. Então eu vou ir em frente e diminuir isso para digamos que 25 pode parecer um pouco melhor. Então, se descermos e olharmos para o topo, podemos ver que este é o melhor. Na verdade, aparece aqui em cima, e eu estou gostando disso. Então você entra em toda essa tela, certo, e nós temos esse texto lá embaixo. Agora, há duas coisas que podemos fazer. Ou podemos deixar isto do jeito que está e podemos conseguir. Este é o melhor e mais leva em nosso telefone. Ou podemos realmente aumentar o tamanho deste plano de fundo agora rolando para baixo. Na verdade, estou muito feliz com isso. Você pode ver que há muito menos espaço desperdiçado aqui, e ainda temos esta citação maravilhosa ainda aqui. Agora, eu ainda vou querer cobrir tudo isso acima da seção de dobra com este fundo, então eu vou me mudar para cá, clicar na seção e então passar para a altura mínima, certo? E eu vou aumentar um pouco assim. Lá vamos nós. Agora podemos ver que está cobrindo toda a primeira festa. Agora, isso está afetando o resto das decisões. Agora nós podemos querer voltar aqui para isso leva, ir para a tipografia e mudar a altura da linha um pouco. Lá vamos nós, parecendo melhor e talvez um pouco mais de espaçamento entre essas colunas. Certo? Então vamos passar para o estilo aqui e passar para a tipografia e jogar um pouco com as alturas da linha. Lá vamos nós. Algo como isto. Então isso está começando a parecer muito bom agora. Talvez eu queira usar ainda mais. Lá vamos nós. negócio fez cartas fáceis mostrar-lhe como. Ok, agora, se olharmos para o fundo, podemos ver que a lua está realmente encobrindo. Isso leva um pouco. O que poderíamos estar fazendo é mudar a posição fora do fundo também para ver se conseguimos uma melhor olhada. Mas, na verdade, estou muito feliz com isso. Então vamos em frente e rolar para baixo e podemos ver que o cabelo da citação ainda parece muito bom. Agora removemos o espaço entre nós. Na verdade, nós adicionamos um pouco mais aqui talvez, mas eu acho que é bom. Também vai depender da resolução do telemóvel. Então vamos rolar para baixo. Aqui diz, obter hacks de marketing digital de graça, certo? Obter os hacks de marketing preguiçosos. E isso já está parecendo muito bom. Agora, há algumas coisas que você pode querer mudar. Agora, apenas clicando aqui meio que atualizou esta parte. Há mudanças acontecendo porque estamos nos movendo em torno dos diferentes bits. E estou gostando desse grande momento em que temos esse valor total de US$99 bem aqui. Cadastre-se abaixo e enviaremos para você. Ok. Parece muito bom. Super feliz com isso. O que eu poderia querer fazer, porque agora nós a temos de volta, o que é bastante escuro, contra nossas tomadas escuras, que funciona muito bem aqui em cima. Mas não tão bem aqui em baixo. Por exemplo, talvez queiramos realmente tornar esta parte em negrito. Certo? Então eu vou entrar aqui, vou selecionar isso, e vou torná-lo ousado. Então agora é um pouco mais fácil de ler e ver, e eu estou cavando esse design lá. Vamos, e este formulário está muito bonito. Sabemos que é realmente lado a lado na área de trabalho na versão móvel lá abaixo , onde sabemos também que o polegar vai facilmente chegar a clicar na minha primeira noite no e-mail e também facilmente chegar a clicar. Mande-me o hack. Então este é realmente um bom design? Sim. Vamos ir em frente e rolar para baixo e este ar parece absolutamente terrível. Isto não é bom. E isso é por causa do preenchimento que estamos usando no preenchimento. Eles fazem muito sentido na área de trabalho. Eles ficam lindos na área de trabalho, mas eles não traduzem bem para a versão do telefone celular. Então o que eu vou fazer aqui é começar a editar estes um pouco. Então eu vou começar clicando na edição, na seção aqui em cima, e começar a brincar um pouco com o hambúrguer. Vou passar para avançado. E agora estamos no modo de celular. E primeiro precisamos agitar o que o preenchimento está atualmente na área de trabalho e podemos ver que ele está definido para 70. Certo? Ok. Está definido para 17. Agora, vamos passar por cima. Voltar para o celular. 70 pode ser um pouco excessivo aqui, então eu vou apenas para estes mais uma vez porque eu quero o estofamento no topo. E eu vou definir isso para 50. Ou vamos com 20. Vamos com. Vamos com 40 desta vez. Certo, então vamos definir isso antes. Eles também iam mudar este tamanho um pouco, por isso parece melhor agora para estes. Talvez queiramos colocá-los em um. Nós pudemos ver que eles se mudam quando estamos ligados. Então estes são realmente começou a se corrigir um pouco. Se rolarmos para baixo, podemos ver que estamos recebendo um curso cobrindo toda a tela de cada vez. E honestamente, pessoal, isso está muito bonito. Isto é bastante sólido. Então tudo o que eu realmente precisava fazer e com essas bundas e também. Então tudo o que eu realmente precisava fazer era ligar isso e aquilo mudou o preenchimento para a versão do telefone celular e tudo está parecendo muito melhor já. Então eu definitivamente estou cavando isso agora. O que podemos fazer é ou devemos fazer, até está mudado. A manchete aqui The Header porque ele está absolutamente horrível e o que vamos começar mudando é o tamanho porque eles não estão com bom aspecto neste tamanho agora. Então vamos em frente e brincar um pouco com isso. Você queria ter uma ou duas filas agora? Eu queria estar em, como aqueles cursos mais vendidos. Então agora vai fazer muito mais sentido, certo, certo, porque você pode lê-lo e há menos espaço entre estes, e isso parece muito melhor. Eu prefiro ir com 50 ou 70 no preenchimento quando se trata de área de trabalho em torno de 22 14. Quando se trata de Mobile depende completamente do design, mas aqui eu acho que parece muito bom assim. Então nós temos os cursos mais vendidos, e então nós vamos ter o curso está rolando assim. Os botões ou há um curso de cada vez. Nós temos um pouco de espaço nos lados, mas esta é apenas uma boa parte fora. O design está olhando magnificência rolar para baixo. Nós temos a visão, todos os cursos que está cobrindo praticamente toda a tela e, em seguida, abaixo, tinha a política de privacidade em termos e condições. Então, pessoal, neste momento estou realmente feliz com este design, certo? Isto parece muito bom. Realmente legal. Mudamos principalmente o espaçamento entre as letras e o preenchimento. Então, quando se trata de quebrar o seu design, geralmente vai ser o estofamento. E isso vai ser muito individual para o seu site. O que você acha? Parece legal, etc. Agora estou fazendo isso muito intuitivamente, significa que não há nenhum plano por trás do que estou fazendo. Ou melhor, não há preparação para o que estou fazendo. Eu só estou decidindo o que eu acho que parece bom e perguntou, Eu vou e continuo a assinar o site. Eu posso voltar e fazer algumas mudanças, mas agora eu realmente acho que isso parece muito bom. Nós temos o livre em sua própria linha, o que eu acho que parece muito bom. Mas o que nós também poderíamos fazer é mudar este cabeçalho, ir para a tipografia estilo e brincar um pouco com o tamanho, por exemplo, vai ficar bom se eles estão em três assados. Que tal duas rosas, duas rosas muito pequenas, três fileiras parece OK, mas na verdade eu acho que isso pode ser um pouco melhor. Então eu vou mantê-los em três filas assim. Eles iriam, e estou gostando muito disso. Então, pessoal, é assim que se faz. Tudo o que você precisa fazer é antes de tudo, se você tiver um problema com o menu, fazer como fizemos no início do curso, depois passar para L. Um mentor, descer para o modo responsivo e mudar para móvel. E então as principais coisas que você vai querer mudar nosso desejo, o espaçamento entre letras, espaçamento entre as letras como fizemos no início aqui vai ser deste tamanho fora das tomadas, os cabeçalhos, etcetera, e três o estofamento. Agora, o estofamento é um grande quebra-cabeça fora belos projetos. Então, quando você ligar o estofamento só vai mudar o todo decidir grande momento. Então, estou muito feliz com a desse cara. E agora, não se preocupe, isso não afetará o design de sua área de trabalho. O que acontece no modo de telefone celular permanece no modo de telefone celular. OK, os motivos móveis para o modo móvel e desktop são para desktop, certo? Então nada mudou aqui. Ainda temos essa linda. Este sinal. O que vamos fazer agora é passar para a próxima palestra. Vamos falar sobre o design do tablet. Ok? O que também é uma coisa muito importante a se fazer. Mas, de longe, os principais são desktop e telefone celular, com uma ênfase extra no telefone celular. Porque mais da metade do seu tráfego virá de lá. Se tiverem alguma dúvida, vão estar no Q e A, então vejam na próxima palestra, pessoal. 15. UX Design de comprimidos: Certo, pessoal, vamos falar sobre o tablet projetado para a experiência do usuário. Em seguida, na próxima palestra, vamos em frente e focar no tablet projetado para o uso ou interface. Mas a primeira coisa é a primeira. O que há de tão especial em um tablet para assinar? Bem, como sabemos, Tablet parece assim agora. Eles fazem tamanho de tela variável comum que podemos ter tablets realmente pequenos. Podemos ter comprimidos muito grandes. Podemos ter verticais, e podemos ter comprimidos horizontais. O que é interessante saber, entanto, ao contrário dos outros dispositivos como Mobile é geralmente e desktop é que eles têm dois modos muito comuns fora usá-los. Agora. O primeiro 1 é realmente chamado de orientação retrato, e é quando você está mantendo-o neste tipo de modo vertical como vemos na imagem . Agora, a segunda maneira que você também pode usá-lo é colocá-lo para o lado assim, e isso é chamado de orientação paisagem. E isso também é muito importante saber, porque dependendo de como eles estão usando seu tablet, isso afetará o design do seu site. Agora vale a pena saber isso quando se trata de usuários móveis. Cerca de 90 pensam que é 93% de todos os usuários realmente usá-lo no modo retrato, o que significa que eles mantêm o telefone na posição vertical com uma mão assim. Agora, quando se trata dos comprimidos, as pontuações são um pouco diferentes. Em primeiro lugar, quanto menor for o tablet, mais provável é que ele seja usado em um modo retrato, certo, então quanto maior for a tela, mais comentado, é que as pessoas o usam em um orientação paisagística. Agora existem dois fabricantes comuns. Isso é andróide, certo? As versões android dos tablets e, em seguida, temos Apple e maçãs tendem a ser muito maior geralmente do que Androids. Assim, os usuários da Apple são os únicos usuários que realmente usam mais paisagem do que o retrato . Mas aqui está a ressalva, caras que a maioria de longe o mais hábito de ser solda realmente tablets android. Então isso significa também que o modo mais comum desligado usando seu tablet é o modo retrato. Então, vamos manter isso em mente para o nosso projeto agora. Em Lee, 4% de desconto no tráfego para um site vem do tablet vale a pena saber que quando as pessoas calculam seu tráfego móvel. Eles geralmente incluem o tráfego do tablet na pesquisa móvel, certo? Então, a palestra anterior que passamos com o tráfego móvel que normalmente vai ter o tablet incluído. Mas o tráfego tablet é geral é tão pequeno que não faz uma grande diferença ainda é mais da metade de todo o tráfego. Ele está usando celular, ou seja, seu celular, em vez de apenas os tablets ou a área de trabalho. Mas eu nunca vi um estudo que alguma vez mostrou que mais de 10% do tráfego vale tablets . Portanto, sabemos que uma pequena parte fora do tráfego para o seu site geral vem do tablet. Mas aqui é onde fica muito interessante porque eles têm o tempo de retenção duplo em tablets comparado com o direito do Mobil. E isso faz sentido porque as pessoas que vão a um site em seus celulares estão muito mais inclinadas a procurar algo rolando e depois voltando. Assim, as taxas de rejeição são muito maiores em dispositivos móveis do que em tablets, geralmente em tablets. As pessoas estão à procura de entretenimento ou querem ler alguma coisa. Eles estão mais assentados. O que me leva ao próximo ponto, que é que 60% de todas as pessoas que usam um tablet eles realmente montam o tablet certo? Isso significa que eles colocam o tablet em algo para que eles possam usar as duas mãos sobre os outros 40%. Eles ainda vão ver o tablet e, em seguida, usar a mão mais antiga para usar o Talbot e percorrer e clicar, etc. Então, isso significa que cerca de 100% de todos os usuários de tablets usaram ambas as mãos. E isso faz muito sentido considerando o tamanho dessas coisas. Mas isso é bom para nós sabermos, porque isso significa que ao contrário dos celulares, as pessoas terão um tempo mais fácil para chegar a todos os lugares na tela onde está em um celular. Haverá lugares mais fáceis e difíceis para alcançar. Isso não significa que você tem gama completamente livre com os projetos. Eles ainda serão mais, a menos que acessíveis. Isso indica onde você coloca seus botões de chamada para ação onde você coloca suas informações importantes , etc., a fim de otimizar seu site para conversão em telefones celulares, tablets e desktop, eles são todos três diferentes dispositivos e interfaces e, claro, experiências do usuário. Agora, com um tablet, diferente de um celular, você realmente tem muito mais espaço, certo? Mas a única coisa a manter em comum aqui é que é um erro muito comum quando se trata de experiência do usuário. Este sinal para tablet é que as pessoas colocam muito lixo em seu site. Para este design, menos ainda é mais. Agora Você tem que ter muito cuidado quando você está se concentrando na experiência do usuário e interface de usuário para um telefone celular, porque você não tem muita base aqui. As histórias de forma diferente realmente têm um pouco mais de espaço, mas é fácil colocar muito lixo na tela, obtendo uma sobrecarga de conteúdo e informações. Mantenha-o limpo, mantenha-o realmente agradável e limpo e pense nisso como uma parte mais acessível de um telefone celular . Mas você ainda precisa fazer com que pareça diferente e pareça bem, mas não desordene. Não desordene isso. Não coloque muita coisa desnecessária. Mantenha-o limpo, mantenha-o acessível e priorize o seu conteúdo. E, finalmente, mesmo que a maioria fora dos usos sejam usados na orientação retrato, o que significa que eles o mantêm vertical em seus tablets quando eles estão usando, você ainda precisa ter certeza de que você conta para a paisagem Orientação? E o que eu quero dizer com isso é que, por exemplo, você pode pensar que criar uma lista como essa é uma boa idéia porque parece muito legal . Você pode percorrer a lista com o seu conteúdo e ele parece bom. Agora, o problema com esta lista é que quando você passa de um modo retrato para o modo paisagem, ele simplesmente não parece mais tão agradável. Podemos ver que há um monte de desperdício de espaço à direita que vai ser um cheio de nada ou B vai ser preenchido com um monte de conteúdo que vai ser apenas sobrecarga de conteúdo. Então esse tipo de lista, o sinal não vai funcionar agora. Se usarmos outro design um design de bloco clássico, por exemplo, onde você tem seu grande conteúdo na frente e, em seguida, você tem peças menores abaixo com, por exemplo, suas postagens recentes com seus artigos com tutoriais ou seus produtos, o que quer que seja para você oferecendo, não vai ficar muito bom em um modo paisagem certo, porque podemos vê-lo olhando muito bem lá na tela também. E se você virar para retrato, ainda vai ficar muito bom. Só vai parecer um pouco diferente. Só vai ser geral, se for um pouco mais e ser um pouco menor, mas ainda vai parecer muito bom, e você pode querer mudar o sinal. Há bem. Então, em vez de ter seis produtos diferentes aparecendo, talvez só quando eu mostrar seis, porque você quer torná-los maiores, etc. Mas o ponto é, você precisa ter certeza de que você conta para o modo paisagem solicitado. Bem, então não use o desenho da lista. Agora vamos passar para a próxima palestra, e vamos adaptar nosso site para tablets, mesmo que seja apenas 4% do tráfego, 4% quando você está tendo milhares e milhares de visitantes, isso vai ficar grande, especialmente quando sabemos que duplicamos a retenção no site. Para esses usuários, e retenção sabemos que significa quanto tempo as pessoas estão hospedadas e curiosamente usuários móveis. Eles preferem ficar por cerca de quatro minutos em média, enquanto os usuários de tablet lá acontece para ficar dois até oito minutos e acima estatísticas muito interessantes. Então vamos passar para a próxima palestra e começar a projetar para tablets. 16. UI de design de tabuletas: Tudo bem, pessoal. Então, nesta palestra, vamos nos concentrar no design do usuário em nossa página inicial e site para tablets . Ok, então você sabe o que fazer. Vamos usar o elementar. Vamos em frente e descer para o modo responsivo e clicar no Tablet. E aqui estamos. Agora, não vou enlouquecer com isso. Vou ser muito intuitivo. E na verdade não se mistura muito se não for necessário. Porque lembre-se, vamos ter muitas páginas para otimizar e projetar, especialmente para desktop e muito especialmente para dispositivos móveis e tablets fora do curso. Você quer fazer com que pareça bom, mas ainda 4% de desconto no tráfego, certo? Então faça parecer bom, mas não enlouqueça por causa do design. Não me especializes em menores é a minha opinião. Então vamos em frente e verificar isso. , Na verdade, estou muito feliz com este. Eu gosto do design. Estamos indo direto ao ponto. No início, temos que aprender mais. Temos a próxima seção aparecendo. Não há nada que eu queira mudar intuitivamente. Então eu vou rolar para baixo e verificar o pulso. Eu acho que isso parece muito bom e bom para agora este. Eu não sou tão fã de. Podemos ver que há muito espaço acontecendo aqui. Podemos ver que há muito espaço acontecendo aqui, então para mim, não dá muito espaço. O que vou fazer é ouvir o tamanho desta imagem de fundo. Agora, eu acho que é realmente bonito e bonito porque ele está cobrindo toda a tela assim. Mas eu ainda acho que há um pouco de espaço entre as seções. Então eu vou seguir em frente e clicar aqui em cima, e então eu vou passar para o estilo. Lá vamos nós. E então eu vou ir em frente e passar para deitar depois ficar no layout, vez disso, e eu vou começar a brincar com a altura mínima. Certo. Então, vou em frente e ver o que fica bom, algo assim. Lá vamos nós. Então, agora, quando estamos rolando por isso, podemos ver que ele não está cobrindo a tela inteira como antes, que é realmente bonito. Um especial no desktop e no celular, na minha opinião. Mas também temos que explicar se estamos usando o modo retrato ou paisagem Agora, eu quero ser um pouco mais direto ao ponto aqui. Então, enquanto nós rolamos para baixo, nós realmente nos movemos. Temos o e-mail aberto que movemos ou para os cursos mais vendidos. Então talvez um pouco maior. Lá vamos nós. Então não temos essa mesma quantidade maluca de espaço, mas é lá que vamos nós. Certo, esse é o ponto ideal. Então, não fazer nada para criar para ouvir o texto está bom. Tudo está do jeito que deveria. Muito feliz com isso. Agora o que? Nós também poderia ir em frente e fazer como fizemos na versão móvel é fazer esta parte ousada. Certo? Então nós vamos entrar aqui e clicar no B, fazer essa parte ousada porque estamos na direção dela de volta aqui. Então, de repente, isso é mais fácil de ler. Realmente cavando isso tão rolando para baixo? Você teria nossos cursos aqui? Bem, está parecendo muito bom, para ser honesto. Agora, eu acho que há um pouco de branco acontecendo em torno disso. Então eu vou em frente e remover o preenchimento para os brancos, que está aparecendo nas colunas. Então o que eu vou fazer é clicar em um par para editar e editar esta coluna, e então eu vou passar para avançar aqui. E agora, a fim de editar corretamente isso, o que eu preciso fazer é saber quais os tamanhos originais organicamente vêm desktop aqui e podemos ver que o preenchimento é 50 certo? Apanhando os 50 dele. Então vamos voltar ao tablet. Se eu escrever 50, nada vai acontecer porque esse é o original. Simplesmente não aparece aqui. Agora, eu provavelmente vou querer usar cerca de metade, então eu vou escrever 25 algo assim. Então não leva tanto espaço que eles foram ir. Eu estou gostando desse design, então eu vou apenas clicar neste. Ir para avançar, passar para o preenchimento e escrever 25 aqui. Inchar. Faça o mesmo aqui. Por aqui. Acolchoamento avançado 25. Lá vamos nós. Um pouco mais limpo. Estou cavando esse olhar muito mais. - Legal. Direto ao ponto. Agora eu preferiria que houvesse um pouco mais de espaço entre esses cursos. Então o que vou fazer é aumentar a margem entre os cursos e a maneira mais fácil de fazer isso. Para ser honesto, é clicar aqui para editar a coluna do meio. Vou avançar, e depois vou verificar a região deles. Essa margem é de 30. Ok, eu sei que isso vai voltar. Certifica-te de que ainda estou aqui. E agora vou escrever algo como cofre 50 50. Pode ser bom. Certo, talvez até 70. Lá vamos nós. Então eu acho que 70. Bem, talvez isso tenha acabado um pouco de fazer isso. Eu vou fazer 50 assim. Eu acho que isso parece muito bom. Então, há um pouco mais de espaço acontecendo. E também, esta caixa está ficando um pouco menor, então vou aplicar isso a todas as colunas. Eles vão para a margem direita 50. E eu vou escrever a margem aqui também. Cinquenta anos, estou batendo dois coelhos com uma cajadada. Essa expressão terrível, a propósito. E eu estou fazendo um pouco mais de espaço no meio enquanto também faço isso menor. Então eu estou cavando isso. Acho que isto parece muito bom. Acho que precisa ir direto ao ponto. Sou um grande fã disso. Parece muito bom ser honesto e orgulhoso de vê-lo. Então este foi meu tablet projetado para a interface do usuário. Agora vai ser você quem decide fazer a sua decisão. É um indivíduo completamente individual. Apenas mantenha a experiência do usuário em mente, certo, porque eles vão virar isso. Vai parecer diferente, mas não estamos usando a lista. Por exemplo, isso ainda vai parecer bom. Isso ainda vai ficar bem com ratos. Tenha-os na mesma fila. Vamos ver. Mas, de qualquer forma, nada vai parecer muito louco porque temos mantido o design em mente. Agora, a última coisa que eu quero mostrar é que se você passar para um tablet para assinar, ou talvez até mesmo para um design móvel, o que pode acontecer às vezes é que se você estiver usando várias colunas seria em uma seção Eles podem trocar de lugar. Agora, não há nada realmente à vista desta coluna, certo, porque se você se lembra, quando estávamos no aborto do disco, nós estávamos realmente usando uma chamada extra para eles aqui, a fim de colocar isto mais para a esquerda. Então este colunista vazio e que é perfeito para desktop. Se você for para o tablet, ele só fica aqui embaixo. Certo, agora, porque estamos usando um tablet e fomos usados na capacidade de resposta do celular. Estas são pilhas? Certo? Podemos ver que eles empilham porque isso está no topo. Isto está no fundo. Então, se tivéssemos algum conteúdo aqui, eu só vou mostrar aqui, digamos que tivemos essa mensagem aqui, mas eles estavam empilhando na ordem errada, certo? Nós não gostamos disso. Tudo o que precisamos fazer para empilhar isso corretamente é ir para editar seção um par e, em seguida, sobre avançado e, em seguida, para baixo em responsivo aqui. E há algo que diz colunas invertidas para o tablet desta vez. Então, se você estivesse sentindo estes fora, então eles estariam revertendo para o tablet e para o celular. Certo? Então agora podemos ver que este está realmente no topo. Este está abaixo, e tudo o que precisamos fazer é apenas reverter estes e colocar estes muitas vezes eles vão mudar de volta para a sua posição original. E novamente, isso ocorre porque a capacidade de resposta vai empilhar muito do seu conteúdo, que parece bonito, para ser honesto, design muito fluido. Isso nos ajuda muito, mas eles nem sempre são empilhados do jeito que queremos. Ótimo trabalho, rapazes. Agora sabemos sobre a experiência do usuário e interface de usuário para desktop, para Mobil e para tablets. É hora de seguir em frente e começar a editar e projetar mais páginas em nosso site. E agora vamos começar a usar modelos e explorar como podemos personalizá-los para criar páginas mais fáceis, rápidas e fora do curso e torná-las absolutamente impressionantes. Então vejam na próxima palestra, pessoal.