Ganhando a corrida de velocidade da página

Uma breve história da missão do Google de tornar a web mais rápida

Em 2009, ao emitir uma chamada às armas para “tornar a web mais rápida”, o Google estabeleceu uma missão para tentar convencer os proprietários de sites a fazer com que seus sites carreguem mais rapidamente.

Para atrair os proprietários de sites a se importar com isso, em 2010 o Google anunciou que A velocidade do site se tornaria um fator em seus algoritmos de classificação de mecanismos de pesquisa (não-mobil). Isso significava que os sites que carregavam rapidamente teriam uma vantagem de SEO em relação a outros sites.

Seis anos depois, em 2015, o Google anunciou que O número de pesquisas realizadas no celular excedeu as realizadas em computadores de desktop. Essa porcentagem continua a aumentar. A última estatística publicada diz que, a partir de 2019, 61% das pesquisas realizadas no Google eram de dispositivos móveis.

O papel agora dominante da Mobile na pesquisa levou o Google a desenvolver seu projeto “Páginas móveis aceleradas” (AMP). Essa iniciativa visa incentivar os proprietários de sites a criar o que é essencialmente outro tema móvel, além de seu tema móvel responsivo, que cumpre um conjunto muito rigoroso de diretrizes de desenvolvimento e desempenho.

Embora muitos proprietários de sites e SEOs se queixem de ter que tender a velocidade da página e AMP no topo dos outros mais de 200 fatores de classificação que já lhes dão dores de cabeça, a velocidade da página é realmente um esforço digno para os proprietários de sites se concentrarem. Em 2017, Google conduziu um estudo onde os resultados justificaram muito o foco em tornar a web mais rápida. Eles descobriram que “À medida que o tempo de carregamento da página passa de um segundo a 10 segundos, a probabilidade de um visitante de site móvel saltando aumenta 123%.”

Em julho de 2018, A velocidade da página se tornou um fator de classificação para pesquisas móveise hoje o Google incorporará ainda mais fatores relacionados à velocidade (chamados Vitals da Web centrais) em seus algoritmos de classificação.

Com o tempo médio de atenção humana diminuindo o tempo todo e nossa dependência de nossos dispositivos móveis crescendo de forma consistente, não há dúvida de que a velocidade da página é e continuará sendo uma coisa incrivelmente importante para os proprietários de sites cuidarem.

Como otimizar um site para velocidade

Pense como um motorista de carro de corrida

Ganhar a corrida de velocidade da página requer as mesmas coisas que vencer uma corrida de carros. Para ganhar uma corrida em um carro, você garante que seu veículo seja o mais leve possível, o mais poderoso possível, e navega na pista da pista da maneira mais eficiente possível.

Vou usar essa analogia para tentar tornar as técnicas de otimização de velocidade da página um pouco mais compreensível.

Torne -o leve

Hoje em dia, os sites são mais bonitos e funcionais do que nunca – mas isso também significa que eles são maiores do que nunca. A maioria dos sites modernos é o equivalente a um ônibus de festa ou uma limusine. Eles são super chiques, carregados com todos os tipos de comodidades e, portanto, pesados ​​e lentos. No mecanismo de busca “Racetrack”, você não vencerá com um ônibus de festa ou uma limusine. Você parecerá legal, mas você perderá.

Fonte da imagem: uma página de resultados dos testes GTMetrix

Para ganhar a corrida de velocidade da página, você precisa de um veículo de corrida adequado, que é leve. Os carros de corrida não têm rádios, porta -copos, caixas de luvas ou realmente qualquer coisa que não seja absolutamente necessária. Da mesma forma, seu site não deve ser carregado com animações elaboradas, fundo de vídeo, imagens enormes, widgets sofisticados, plugins excessivos ou qualquer outra coisa que não seja absolutamente necessária.

Além de organizar seu site de fantasia desnecessária e plugins excessivos, você também pode lançar o peso do site por:

• Reduzindo o número de scripts de terceiros (trechos de código que enviam ou recebem dados de outros sites)

• Mudando para um tema mais leve (menos pesado de código) e reduzindo o número de fontes usadas

• Implementando AMP

• Otimizando imagens

• Código de compactação e minificação

• Realizando otimizações regulares de banco de dados

Em um sistema de gerenciamento de conteúdo de código aberto, como o WordPress, estão disponíveis plug-ins de velocidade que podem facilitar muito essas tarefas. O WP Rocket e o Imagify são dois plugins do WordPress que podem ser usados ​​juntos para aliviar significativamente o peso do seu site por otimização de imagens, compressão, minificação e uma variedade de outras práticas recomendadas de velocidade de página.

Dê mais poder

Você não colocaria um motor de carrinho de golfe em um carro de corrida, então por que você colocaria seu site em um plano de hospedagem compartilhado e barato de terra? Você pode achar doloroso pagar mais de alguns dólares por mês na hospedagem se você estiver em um desses planos há muito tempo, mas novamente, carrinho de golfe versus motor de carro: você quer ganhar esta corrida ou não?

Os planos de hospedagem compartilhados tradicionais incluem dezenas de milhares de sites em um único servidor. Isso deixa cada site individual faminto por poder de computação.

Se você deseja correr nas grandes ligas, é hora de obter um plano de hospedagem adulto. Para sites WordPress, empresas de hospedagem gerenciada, como WP Engine e Flywheel, utilizam servidores poderosos e especificamente sintonizados para servir os sites do WordPress mais rapidamente.

Se a hospedagem gerenciada do WordPress não for o seu ou se você não tiver um site do WordPress, a atualização para um VPS (servidor privado virtual) resultará em seu site ter muito mais recursos de computação disponíveis. Você também terá mais controle sobre seu próprio ambiente de hospedagem, permitindo que você “ajuste seu mecanismo” com coisas como as versões mais recentes do PHP, MySQL, cache de verniz e outras tecnologias modernas do servidor da web. Você não estará mais à mercê da ganância da sua empresa de hospedagem compartilhada à medida que eles enchem cada vez mais sites no seu servidor já tributado.

Em suma, colocar seu site em um ambiente de hospedagem bem ajustado pode ser como colocar um supercharger em seu carro de corrida.

Dirija melhor

Por último, mas certamente não menos importante, um carro de corrida leve e poderoso só pode ser tão rápido sem um motorista treinado que sabe como navegar com o curso com eficiência.

A parte “Navegue pelo curso” dessa analogia refere -se ao processo de um navegador da web carregando uma página da Web. Cada elemento de um site é outra reviravolta ou virada para o navegador navegar enquanto viaja pelo código e processa a saída da página.

Vou mudar de analogias momentaneamente para tentar explicar isso com mais clareza. Ao remodelar uma casa, você pinta os quartos antes de refazer o chão. Se você refiz os pisos primeiro e depois pintasse os quartos, os novos pisos pegavam tinta neles e você teria que voltar e cuidar do chão novamente mais tarde.

Quando um navegador carrega uma página da web, ele passa por um processo chamado (coincidentemente) de “pintura”. Cada página é “pintada”, pois o navegador recebe bits de dados do código -fonte da página da web. Esse processo de pintura pode ser executado com eficiência (por exemplo, paredes de pintura antes de reefimir pisos), ou pode ser feito de uma maneira mais caótica fora de ordem que requer várias viagens de volta ao início do processo para refazer ou corrigir ou adicionar algo que poderia ter/deve ter sido feito anteriormente no processo.

Fonte da imagem: WebPageTest.org Resultado do teste (Visualização de Filmstrip)

Aqui é onde as coisas podem ser técnicas, mas é importante fazer o que puder para ajudar seu site a dirigir a “faixa” com mais eficiência.

O cache é um conceito que todo site deve ter para facilitar o carregamento de uma página da web no navegador. Já demoram o suficiente para um navegador processar todo o código -fonte de uma página e pintá -lo visualmente para o usuário, para que você possa ter esse código -fonte pronto para entrar no servidor. Por padrão, sem armazenamento em cache, esse não é o caso.

Sem armazenamento em cache, o CMS do site e o servidor ainda podem estar trabalhando para gerar o código -fonte da página da web enquanto o navegador está esperando para pintar a página. Isso pode fazer com que o navegador tenha que pausar e aguardar mais código vir do servidor. Com o armazenamento em cache, o código-fonte de uma página é pré-compilado no servidor, para que esteja totalmente pronto para ser enviado ao navegador na íntegra de uma só vez. Pense nisso como uma fotocopiadora com muitas cópias de um documento já produzido e pronto para ser distribuído, em vez de fazer uma cópia sob demanda cada vez que alguém pedir um.

Vários tipos e níveis de cache podem ser alcançados por meio de plugins, sua empresa de hospedagem e/ou através de uma CDN (rede de entrega de conteúdo). Os CDNs não apenas fornecem cache, mas também hospedam cópias do código do site pré-gerado em uma variedade de servidores em todo o mundo, reduzindo o impacto da distância física entre o servidor e o usuário no tempo de carregamento. (E sim, a Internet é na verdade composta de servidores físicos que precisam conversar entre si por distâncias físicas. A Web não é realmente uma “nuvem” nesse sentido.)

Voltando à nossa analogia de carros de corrida, a utilização do cache e uma CDN é igual a uma viagem muito mais rápida pela pista.

Esses são dois dos blocos básicos de pintura de página eficientes, mas há ainda mais técnicas que também podem ser empregadas. No WordPress, o seguinte pode ser implementado por meio de um plug -in ou plugins (novamente, WP Rocket e Imagify são uma combinação particularmente boa para alcançar muito disso):

• Carregamento assíncrono e/ou diferido de scripts. Esta é basicamente uma maneira sofisticada de se referir a carregar várias coisas ao mesmo tempo ou esperar até mais tarde para carregar coisas que não são necessárias imediatamente.

• Pré -carregamento e pré -busca. Basicamente, recuperar dados sobre links com antecedência, em vez de esperar o usuário clicar neles.

• Carregamento preguiçoso. Termo irônico é que esse conceito existe para fins de velocidade da página, mas, por padrão, a maioria dos navegadores carrega todas as imagens em uma página, mesmo aquelas que estão fora de vista até que um usuário role para baixo para eles. A implementação de carregamento preguiçoso significa dizer ao navegador para ser preguiçoso e aguarde o carregamento dessas imagens fora de vista até que o usuário realmente role lá.

• Servindo imagens em formatos de próxima geração. Novos formatos de imagem, como o WebP, podem ser carregados muito mais rapidamente por navegadores do que os formatos JPEG e PNG à moda antiga. Mas é importante observar que nem todos os navegadores podem suportar esses novos formatos ainda-portanto, use um plug-in que possa servir as versões de próxima geração para os navegadores que os suportam, mas forneça as versões antigas aos navegadores que não o fazem. O foguete WP, quando combinado com o Imagify, pode conseguir isso.

Fonte da imagem: Configurações do plug -in de foguete WP

Otimizar para os principais vitais da Web

Por fim, otimizando para o novo Web central vital As métricas (maior tinta conteúdo, atraso de primeira entrada e mudança de layout cumulativa) também podem ser uma viagem muito mais eficiente pela pista de corrida.

Fonte de imagem

Esses são conceitos bastante técnicos, mas aqui está uma visão geral rápida para familiarizá -lo com o que eles significam:

• Maior tinta conteúdo (LCP) refere -se à pintura do maior elemento da página. A ferramenta PageSpeed ​​Insights do Google informará qual elemento é considerado o elemento LCP de uma página. Muitas vezes, esta é uma imagem de herói ou uma área deslizante grande, mas varia de página para página, então execute a ferramenta para identificar o LCP em sua página e depois pensar no que você pode fazer para tornar esse elemento específico carregar mais rápido.

• Primeiro atraso de entrada (FID) é o atraso entre a primeira ação do usuário e a capacidade do navegador de responder a ele. Um exemplo de um problema do FID seria um botão visível para um usuário mais cedo do que se torna clicável. O atraso seria causado pelo carregamento da funcionalidade de clique notavelmente mais tarde do que o próprio botão.

• Mudança de layout cumulativa (CLS) é um conjunto de três grandes palavras que se referem a um conceito simples. Você sabe quando está carregando uma página da Web no seu telefone e clica em algo ou lê algo, mas depois ele sai ou para baixo porque algo mais carregado acima ou abaixo dele? Esse movimento é CLS, é principalmente irritante e é um subproduto da pintura de página ineficiente.

Em conclusão, carro de corrida> carrinho de golfe

A otimização da velocidade da página é certamente complexa e confusa, mas é um componente essencial para obter melhores classificações. Como proprietário de um site, você está nesta corrida, quer goste ou não – então pode fazer o possível para tornar seu site um carro de corrida em vez de um carrinho de golfe!