Category

SEO

Category

A velocidade é muito importante para um site. É tão importante que o Google fez dele um fator de classificação real. Com o tempo, o Google tomou medidas para melhorar a velocidade de carregamento de sites, fornecendo um conjunto de ferramentas para desenvolvedores e webmasters. O Google Lighthouse é uma dessas ferramentas.

Mas como essa ferramenta do Google PageSpeed ​​Insights realmente funciona? E mais importante, a velocidade da página afeta o SEO?? Você encontrará tudo o que precisa saber neste artigo.

how_page_speed_affects_google_ranking

A ferramenta PageSpeed ​​Insights não teve um bom desempenho no passado. A maioria das informações nele contidas pode ser encontrada com relativa facilidade em outros lugares e isso não indica a velocidade propriamente dita. No entanto, o Google atualizou recentemente essa ferramenta e é muito melhor. Infelizmente, também é muito mais difícil de entender.

No entanto, essa ferramenta se tornou popular entre os SEOs via PageSpeed ​​Insights, que é realmente desenvolvido pelo Lighthouse, mas fornece as informações em um formato fácil de seguir, em uma página da web.

  1. O que é o Google PageSpeed ​​Insights?
    1. Celular x computador
    2. Qual é a velocidade da página?
  2. O PageSpeed ​​Insights afeta o SEO? 100/100 Score é essencial?
  3. Métricas do PageSpeed ​​Insights
    1. Dados de campo e laboratório (métricas de desempenho)
    2. Oportunidades e diagnósticos
  4. Como é calculada a pontuação do PageSpeed ​​Insights?
  5. Pontos-chave para melhorar a pontuação do PageSpeed ​​Insights
    1. Tempo de resposta do servidor
    2. Compactação de imagem
    3. Estrutura HTML e CSS
    4. Minificação e compactação de script
    5. Política de Cache
    6. Tema leve e plugins
  6. Como verificar em massa a pontuação do PageSpeed ​​Insights
  7. Outras ferramentas para medir e melhorar a velocidade do site
    1. Pingdom
    2. GT-Metrix
    3. mod_pagespeed
    4. AMP do Google (páginas móveis aceleradas)

O que é o Google PageSpeed ​​Insights?

O PageSpeed ​​Insights é uma ferramenta on-line fornecida pelo Google que identifica problemas de desempenho da Web nos sites. Embora principalmente relacionado a Problemas técnicos de SEOas ferramentas também analisam o site do ponto de vista da experiência e acessibilidade do usuário.

Você pode acessar o PageSpeed ​​Insights visitando https://developers.google.com/speed/pagespeed/insights/.

Página inicial do Insights sobre velocidade

Você pode inserir o URL. Após alguns segundos, a ferramenta retorna uma página contendo resultados sobre o desempenho do seu site. No topo, haverá uma pontuação geral, que é uma média de vários fatores. Abaixo, você encontrará informações detalhadas sobre o que realmente afeta sua velocidade.

No entanto, essa não é a única ferramenta PageSpeed ​​fornecida pelo Google. Há também o mod_pagespeed, um módulo de servidor usado para corrigir esses problemas de velocidade, e o carro-chefe real (a ferramenta de análise de sites que alimenta tudo), disponível no próprio Chrome. Há também várias extensões do Chrome relacionadas ao PageSpeed ​​Insights do Google.

Discutiremos brevemente cada um deles neste artigo, mas focaremos principalmente no PageSpeed ​​Insights, que parece ser a ferramenta mais prática que a maioria dos SEOs usa ao visitar um site.

Celular x computador

Quando você insere uma página para testá-lo, o Google atribui duas pontuações: uma para a versão móvel e a outra para a versão para computador.

Inicialmente, a ferramenta PageSpeed ​​deu apenas uma pontuação, para a versão Desktop. Mas, recentemente, o uso de dispositivos móveis tornou-se cada vez mais popular. Em 2018, mais de 50% dos usuários de mecanismos de pesquisa pesquisavam em dispositivos móveis. Quando o Google mudou para um primeiro índice para celular, também foi bom começar testando a velocidade das versões móveis.

PageSpeed ​​Mobile vs Desktop

No entanto, se você tiver um design responsivo, poderá pensar que essas versões são na maior parte idênticas.

Se sim, por que eles têm pontuações diferentes?

móvel: Quando você usa a ferramenta PageSpeed ​​Insights, o primeiro resultado obtido é a velocidade de movimento. Isso significa que seu site foi testado em uma conexão móvel, provavelmente com uma conexão 4G, pois parece ser pelo menos a velocidade mais comum nos Estados Unidos.

Cobertura de rede móvel

https://www.uscellular.com/coverage-map/voice-and-data-maps.html

No entanto, lembre-se de que muitos usuários móveis em todo o mundo ainda recebem apenas o sinal 3G e, mesmo que tenham uma velocidade de conexão mais lenta, ainda estão esperando por ele. para um carregamento muito rápido do site.

E aqui está o problema. Nem sempre é sobre o seu site, mas sobre a velocidade da conexão. Pode parecer que o site está lento quando, na realidade, a velocidade da conexão é lenta.

escritório: Na área de trabalho, a pontuação é maior porque a velocidade da conexão é maior. É exatamente o que acontece com a luz e as fibras ópticas. A menos que você viva no Reino Unido, é claro, e ainda tenha xícaras e um canal na Internet.

O site passa pelos mesmos testes, mas é especialmente a velocidade da conexão que difere.

É por isso que o celular vem em primeiro lugar, porque os dispositivos móveis geralmente têm conexões mais lentas. As coisas podem mudar com o 5G, mas até então, certifique-se de melhorar a velocidade do seu site para dispositivos móveis.

O que é exatamente a velocidade da página?

OK, então sabemos o que a ferramenta faz: ela fornece uma pontuação com base na rapidez com que seu site pensa. Mas qual é exatamente a velocidade da página?

Velocidade da página é a velocidade com que uma página individual é carregada no seu site. Páginas diferentes podem ter velocidades diferentes devido a fatores como imagens e scripts.

Mas a velocidade é relativa. Isso depende de muitos fatores, como o desempenho do site, o desempenho do servidor, a página da web em que você está, o tipo de conexão, o provedor de serviços de Internet do usuário, o pacote da Internet, o poder do processamento do dispositivo, navegador, informações fornecidas pelo usuário. feito neste momento, quantos aplicativos estão sendo executados e assim por diante.

No entanto, só podemos trabalhar com o que podemos trabalhar, ou seja, nosso site e nosso servidor. Nós realmente não controlamos o resto.

Apenas para esclarecer, a velocidade da página não é uma pontuação, como o PageSpeed ​​Insights. O tempo de carregamento de uma página da web é medido em segundos. Isso é o que conta.

É por isso que o Google PageSpeed ​​Insights não era tão bom no passado. Na verdade, não informava com que rapidez o carregamento do seu site. Apenas pontuações.

E é por isso que esta nova versão é tão boa. Ele informa tudo o que você precisa saber sobre a velocidade real de carregamento, mantendo os benefícios da versão antiga.

É claro que existem diferentes pontos de interesse no tempo de carregamento. Por exemplo, convém executar alguns scripts no final, porque eles não precisam ser usados ​​inicialmente.

Eles podem levar muito tempo para concluir o carregamento, portanto, o tempo total de carregamento pode ser maior. Mas se o site for utilizável até então, não será um problema tão grande.

Carregamento rápido do site

Por exemplo, suponha que você queira executar um script pop-up com intenção de saída. Esse script leva de 5 a 10 segundos para carregar. No entanto, você deseja mostrá-lo ao usuário somente após cerca de 20 a 30 segundos.

Se você começar a executar seu script imediatamente, poderá adiar o carregamento de outros itens importantes, como a primeira coisa que o usuário precisa ver: o conteúdo da dobra acima. Isso seria muito sério, especialmente porque você só usará esse script 20 a 30 segundos depois.

Portanto, você pode adiar o carregamento do script depois de tudo o que é essencial para proporcionar ao usuário uma melhor experiência.

No entanto, se você tiver um script que faça o menu funcionar ou seja um elemento essencial para a facilidade de uso do site, convém carregá-lo no final. Isso prejudicaria a experiência, porque o usuário não pôde acessar esta função antes que todo o resto fosse carregado.

A velocidade da página afeta o SEO? O Índice de Insights 100/100 é essencial?

A resposta simples é que a velocidade da página afeta o SEO. A velocidade da página é um fator de classificação direta, fato ainda mais conhecido desde a rápida atualização do algoritmo do Google. No entanto, a velocidade também pode afetar indiretamente as classificações, aumentando a taxa de rejeição e reduzir o tempo de inatividade.

No Google, os usuários são os primeiros. Estudos realizados pelo Google mostram que a velocidade média de carregamento de 3G é muito lenta. Eles também mostram que os usuários saem do site após cerca de 3 segundos. Isso significa que a experiência deles é ruim e que o Google não gosta de classificar sites que oferecem uma experiência ruim ao usuário.

O que você precisa lembrar é que a velocidade é medida em segundos, e não pontos de 0 a 100. Embora o PageSpeed ​​Insights seja uma ferramenta que ajuda a melhorar a velocidade, a pontuação não significa necessariamente qualquer coisa no mundo real.

No entanto, é importante melhorar a pontuação de velocidade da página.

Por quê?

Como no Google, não sabemos ao certo se a pontuação é usada como um fator de classificação ou não. O Google usa segundos? Ele usa o placar? Quem sabe …

No entanto, vi sites com uma pontuação perfeita na classificação da página e mal sites com uma pontuação abaixo de 50 muito bem (#youtube).

No entanto, você precisa considerar como o Google realiza esses testes. Não sabemos de onde vêm os testes. O seu servidor é romeno e o Google está testando-o com uma conexão 3G nos EUA? Bem, obviamente você pode esperar velocidades baixas.

Mas apenas para o prazer do usuário, coloque o tempo de carregamento em primeiro lugar. E não use apenas o PageSpeed ​​Insights para testá-lo. Continue até o final e mostrarei algumas ferramentas que você pode usar para testar a rapidez com que o site é carregado em diferentes locais.

Às vezes, o Google se contradiz!

Por exemplo, o Google PageSpeed ​​Insights considera o bloqueio de renderização de script do Google Analytics, o que significa que você deve carregá-lo posteriormente no rodapé. No entanto, o Google Analytics especifica muito claramente que o script deve ser colocado no seção do site, caso contrário, não funcionará corretamente e não será aceito inicialmente como uma instalação válida.

Então você recebe uma pequena nota no PageSpeed ​​Insights … fazendo o que o Google diz … apenas para saber que você não deve fazer assim … pelo Google. Você entendeu.

Além disso, você não pode armazenar em cache o script corretamente, a menos que armazene o arquivo analytics.js no seu servidor. Obviamente, isso é algo que o Google Analytics não recomenda. Também é um inferno para manutenção, porque sempre que o arquivo JavaScript do Google Analytics recebe uma atualização, você também precisa atualizá-lo em seu site.

Obviamente, isso não acontece apenas com ferramentas e scripts do Google, mas com um script de terceiros sobre o qual você não tem controle.

Para nossa defesa, até o YouTube, que pertence ao Google e deveria, em teoria, dar o exemplo, tem uma pontuação bastante lenta, pelo menos no momento da redação deste artigo.

Velocidade lenta da página do YouTube

Mas isso não significa que o carregamento do site seja lento. Você pode ver que os dados do campo (para os quais há muito, porque é o YouTube) indicam que o site carrega em cerca de 4 segundos, o que não é ruim, pois o YouTube possui exibições de vídeo fornecidas recentemente em miniaturas.

Você também pode testar seu site em https://www.thinkwithgoogle.com/intl/en-gb/feature/testmysite/ para obter uma explicação mais simples de quão rápido o site é carregado!

Teste de velocidade do ThinkWithGoogle Mobile

O site da nossa outra empresa, BrandMentions, carrega em menos de 2 segundos com uma conexão 4G, como você pode ver acima. Nós veríamos isso como muito bom. Obviamente, sempre há espaço para melhorias. De acordo com os padrões do Google … é o caminho.

No entanto, o Google parece considerar que a velocidade do website cognitivoSEO é lenta, mesmo que o carregamento tenha sido feito em pouco mais de 3 segundos, o que ainda é bastante rápido, dado o número de ferramentas de terceiros que usamos .

CognitiveSEO

Observe que você precisará gastar menos de 1 segundo para ser considerado rápido! Para fazer isso, você provavelmente precisará de um site muito simples, sem plug-ins de terceiros ou janelas pop-up sofisticadas. Não é fácil se você realmente deseja fazer marketing digital.

Então, sim, a velocidade de carregamento é importante para o SEO, mas uma pontuação perfeita do PageSpeed ​​Insights não é. Desde que o site seja carregado em cerca de 3 segundos, a maioria dos usuários deve concordar.

Métricas do PageSpeed ​​Insights

Como muitos fatores podem afetar a velocidade do site, o Google divide tudo em diferentes categorias na ferramenta PageSpeed ​​Insights, para uma melhor compreensão dos problemas.

Isso é útil porque o Google também fornece algum tipo de priorização, que mostra o que afeta mais a velocidade.

Dados de campo e laboratório

Essas são as novas métricas que são realmente úteis. Eles são divididos em duas categorias: dados de campo e laboratório.

Dados de campo Isso é importante no mundo real, porque são os dados que o Google extrai de usuários reais, via Chrome ou outros provedores de dados.

Obviamente, essa é uma média e, se o Google ainda não tiver dados suficientes, será informado.

Resumo de origem mostra uma média da velocidade do site como um todo. Dessa forma, você pode ter uma idéia da comparação da sua página com o site e a comparação entre este site e outros sites no relatório sobre a experiência do usuário do Chrome.

Dados laboratoriaisembora ainda útil, pode ser considerado menos importante porque é coletado em um ambiente controlado. Isso significa que é testado por meio de uma única conexão e não agrega dados de vários usuários.

Os dados do laboratório geram a pontuação de velocidade da página do Google.

Como o Google nem sempre tem dados de campo, ele usa dados de laboratório do campo para analisar seu site.

Primeira pintura de contentamento representa o momento em que os usuários veem algo em sua página da web pela primeira vez. Se você observar as séries de imagens, poderá ver como elas são:

Primeira pintura de contentamento

Como você pode ver, a página não foi totalmente renderizada, algo aconteceu.

Primeira pintura significativa O segundo passo, digamos, se tomarmos os resultados acima como exemplo. Representa o ponto em que o usuário pode realmente entender o primeiro conteúdo. Por exemplo, aparece um texto legível ou uma imagem, em vez de cores e planos de fundo.

Índice de velocidade é uma métrica mais complexa. Ele mede a velocidade com que os elementos do seu site são visivelmente preenchidos. Quanto mais rápido eles aparecerem, melhor. Você está procurando uma pontuação mais baixa aqui, porque ela também é medida em segundos.

Primeiro processador em espera é o ponto em que o site carregou informações suficientes para processar a primeira entrada do usuário. Por exemplo, se o site não tiver carregado informações relevantes o suficiente, o usuário poderá pressionar itens ou rolar pela tela, mas nada acontecerá.

Tempo de interatividade é o próximo nível, aquele em que o site é totalmente interativo. Isso significa que tudo está carregado na memória do dispositivo e agora está pronto para ser usado.

Primeira vez de entrada potencial máxima Tempo de espera para um usuário a partir do momento em que ele interage com os navegadores até que ele responda. Essa é a única medida de desempenho que não afeta a pontuação de velocidade da página.

Oportunidades e diagnósticos

A seção Oportunidades fornece informações sobre o que você pode melhorar em seu site. Também fornece uma estimativa do impacto de cada problema no seu tempo de carregamento e como você deve priorizar suas tarefas.

Passar por cada um deles seria um exagero. No entanto, em cada métrica, você terá uma pequena seta que pode ser usada para expandir a seção.

Oportunidades e diagnósticos de velocidade de página

Você encontrará informações sobre cada uma das recomendações e como resolver o problema para aumentar a velocidade do seu site. Você notará que os elementos que causam os problemas mais importantes são geralmente imagens e scripts de terceiros.

A seção de auditorias anteriores é a lista de coisas que você já faz bem em sua página da web. Basicamente, ele mostrará elementos das seções Oportunidades e Diagnósticos que correspondem às configurações do Google.

Quanto mais você tiver nesta lista, melhor!

Como é calculada a pontuação do PageSpeed ​​Insights?

Embora você possa ver muitas coisas na ferramenta PageSpeed ​​Insights, a pontuação é realmente calculada usando apenas os segundos na seção Dados do laboratório. Se você ler atentamente, verá a mensagem "Essas métricas não afetam diretamente a pontuação de desempenho" em Oportunidades e diagnósticos.

As métricas nos dados do laboratório são chamadas de métricas de desempenho. Existem 6 deles e nós os apresentamos acima. Cada métrica obtém uma pontuação de 0 a 100. Cada métrica tem um peso diferente no cálculo da pontuação.

3 – Primeira pintura de contentamento
1 – Primeira pintura significativa
2 – Primeiro processador em espera
5 – Tempo para interatividade
4 – Índice de velocidade
0 – latência estimada de entrada

Em ordem de importância, eles estão listados da seguinte forma: Tempo para interatividade, Índice de velocidade, Conteúdo da primeira resposta, Primeiro processador em espera, Primeira tabela significativa e Latência estimada de entrada, que não tem efeito sobre pontuação.

As pontuações são baseadas em algoritmos de distribuição log-normal, portanto, evite ir muito longe na toca do coelho. Se você quiser saber mais, leia esta página.

O Google também colocou um arquivo em folha que você pode usar para ver como a pontuação é gerada. Se você conhece as funções do Excel, pode fazer engenharia reversa. Você pode fazer o download deste arquivo aqui, mas deve criar sua própria cópia (Arquivo -> Criar sua própria cópia) antes de poder editá-lo. Há também uma versão para o Lighthouse v5.

PageSpeed ​​Score Calculator

Simplificando, a primeira pintura do conteúdo contém mais impacto na pontuação do que a primeira pintura com significado, e assim por diante.

Por quê? Bem, provavelmente porque se nada for exibido na tela, é mais provável que o usuário saia do seu site. Se você postar … alguma coisa, você economizará um pouco de tempo para entregar o restante da coisa.

As pontuações são finalmente divididas em 3 categorias, lento (0-49) média (50-89) e bem (90-100). Em seguida, uma média é gerada como resultado final para o seu site.

Geralmente, se você tem menos de 50 anos, tem problemas a resolver! Mas, novamente, não se preocupe se o seu site carregar em cerca de 3 segundos.

Pontos-chave para melhorar a pontuação do PageSpeed ​​Insights

Tudo lá em cima pode ser um pouco difícil de digerir. Nós entendemos. Muito provavelmente, você não será capaz de resolver tudo! Excluímos o fato de que não era importante obter uma pontuação de 100%. No entanto, aqui estão os principais elementos que tornarão o carregamento do site mais rápido.

aviso: faça um backup dos seus arquivos e banco de dados antes de fazer essas melhorias. Eles podem atrapalhar o seu site e você precisa se certificar de que pode voltar para uma versão anterior!

Tempo de resposta do servidor

O servidor é algo que você realmente não pode melhorar. Você tem uma boa ou uma má. Para melhorá-lo, você deve reduzir consideravelmente sua carga ou melhorar seu hardware, sobre o qual você não tem controle, a menos que tenha a máquina física.

Portanto, é importante ter um bom servidor em primeiro lugar. Mas como você escolhe um bom servidor?

Bem, qualquer empresa de hospedagem que se posicione bem no Google deve fornecer serviços decentes. No entanto, cabe a você testar. Melhor conselho? Se você estiver focando principalmente no SEO local, escolha um servidor local. Por exemplo, se a maioria do seu público-alvo reside na Itália, escolha um servidor com o data center na Itália.

Se o data center estiver nos Estados Unidos, as informações precisarão percorrer um longo caminho antes de atingir seu público-alvo.

Você sempre pode testar o site do seu host com o PageSpeed ​​Insights e procurar TTFB (Time To First Byte) ou tempo de resposta do servidor. Se isso estiver na seção Auditorias de sucesso, você sabe que possui um bom provedor de hospedagem.

Fast Server TTFB

No entanto, é melhor conhecer alguém que seja um provedor de hospedagem de clientes real para que você possa testar a velocidade lá.

Realisticamente, o site do host provavelmente estará em um servidor dedicado, enquanto o site estará em um pacote de hospedagem compartilhada. Isso significa que você compartilhará o processador e a largura de banda da Internet do computador com outros sites.

Se você pode testar um site real de um cliente, é ótimo. Você pode visualizar as avaliações e encontrar clientes ou solicitar à equipe de suporte que forneça uma.

Compactação de imagem

Em geral, as imagens são o principal problema dos sites. Eles são grandes e demoram muito para baixar.

Existem dois tipos de problemas com imagens. O primeiro é o tamanho da tela em comparação com o tamanho real da imagem em pixels e o segundo é o tamanho do disco.

Tamanho do disco: Quanto mais espaço uma imagem ocupa em um disco rígido ou SSD, mais tempo será necessário para o download. 100 KB será baixado muito mais rápido que 1000 KB (1 MB). Se você tiver 10 imagens desse tipo no seu blog, espere que o site seja carregado muito lentamente.

Você pode usar o WP Smush para otimizar suas imagens. É um plugin que comprime imagens sem perda de qualidade. Isso significa que você pode reduzir uma imagem de 1000 × 1000 pixels de 200 KB para 150 KB sem perceber a diferença de qualidade, o que acelera o carregamento em 25%.

WP Smush

Tamanho da tela: O tamanho da tela é o tamanho em que uma imagem é exibida. Por exemplo, a imagem abaixo é exibida em 300 × 300 pixels.

300x300

Para que as imagens sejam carregadas mais rapidamente, você deve primeiro verificar se não está usando uma imagem maior que a que será exibida. Por exemplo, se você tiver uma seção HTML com um estilo CSS de 300 × 300 pixels, mas carregar uma imagem de 1000 × 1000 pixels na origem, perderá o tempo de carregamento desses 700 × 700 pixels.

Isso ocorre porque o navegador deve baixar a imagem 1000 × 1000 pixels e reduzi-la a 300 × 300 pixels. Demora mais para o processo de download e redução. Você pode resolver esse problema carregando suas imagens com a mesma largura e altura em que serão exibidas.

O WordPress faz isso automaticamente criando várias instâncias da imagem quando você a baixa. É por isso que você verá esse sufixo 300 × 300 ou 150 × 150 no final do caminho de um arquivo de imagem. É por isso que você pode escolher tamanhos (Grande, Médio, Miniatura). Embora não seja perfeito, especialmente se você redimensionar manualmente a imagem clicando e arrastando, e ocupando mais espaço no servidor a longo prazo, isso ajuda na velocidade de carregamento.

Denunciar imagens é outra coisa que você pode fazer para melhorar o tempo de carregamento. Isso significa que você pode baixá-los mais tarde quando o usuário rolar a página da web para baixo. Haverá um breve momento em que as imagens não serão visíveis, mas elas aparecerão uma após a outra.

Isso ajuda os navegadores a se concentrarem na parte importante, aquela que os usuários estão assistindo naquele momento.

Existem vários plugins que podem ajudá-lo a fazer isso. No entanto, muitos têm bugs ou apenas postam imagens em determinadas situações, por exemplo, se elas foram criadas pelo WordPress ou WooCommerce, mas não quando são criadas ou inseridas por plugins menos populares.

Certamente existem plugins para outros CMS, como Joomla ou Magento. Basta fazer uma pesquisa no Google por eles. Se você não está em um CMS popular, como o WordPress, as imagens podem ser carregadas com o jQuery, mas você definitivamente precisará de um desenvolvedor, se você não é um deles.

Formatos de imagem da próxima geração são recomendados pelo Google. Eles são muito úteis, especialmente ao carregar um site a partir de um dispositivo móvel. No entanto, há uma razão pela qual poucas pessoas ainda os usam.

Os formatos de imagem da próxima geração ainda não são suportados por todos os principais navegadores. Isso significa que você precisará veicular dinamicamente diferentes formatos para diferentes navegadores.

Se você pode usar um plug-in no seu CMS, pode parecer simples, mas se você usa uma plataforma personalizada, precisa desenvolver tudo do zero, o que é muito caro. Aqui está uma lista de navegadores compatíveis com o formato WebP.

WebP Formato de imagem da próxima geração

Se você redimensionar e otimizar suas imagens corretamente, as economias que você obtém ao convertê-las em formatos de imagem da próxima geração, como JPEG2000 ou WebP, podem não valer tempo e dinheiro.

No entanto, se você tiver tempo e orçamento, vá em frente, faça-o. Você pode usar esta ferramenta para verificar se os navegadores nos quais seus usuários passam mais tempo são suportados. Procure WebP ou JPEG2000.

Estrutura HTML e CSS

A estrutura HTML da sua página da web determina como ela é carregada. Os navegadores leem uma página de cima para baixo e carregam itens da mesma maneira. Isso significa que, se você deseja que algo seja carregado primeiro, coloque-o mais alto em sua página.

Geralmente, os problemas não dizem respeito a HTML, mas a CSS. Se você escrever seu código CSS de maneira caótica, o tempo de carregamento será mais lento e a experiência do usuário será ruim.

Veja um exemplo. A maioria dos sites, se não todos, segue esta estrutura HTML: head> body> footer.

Se meu arquivo CSS começar com o estilo do rodapé, ele obterá o estilo, mesmo antes da dobra. Enquanto isso, o cabeçalho e o corpo podem ficar limpos.

Também é uma boa ideia adicionar o seu estilo móvel primeiro, porque os dispositivos móveis são os mais lentos.

É o mesmo com a renderização JavaScript. Poste scripts que não são essenciais. Adicione-os ao rodapé para que sejam carregados por último.

No entanto, se você tiver scripts importantes, como o Google Analytics, que precisam ser executados o mais rápido possível, mantenha-os imperativamente no cabeçalho e verifique se eles são acionados e funcionam corretamente, mesmo se possível. resultar em uma pontuação mais baixa no PageSpeed.

Minificação e compactação de script

Minificação é reduzir o tamanho de um arquivo, removendo informações desnecessárias.

Por exemplo, ao escrever JavaScript e CSS, a maioria, se não todos, os codificadores preferem usar espaços para manter seu código limpo e fácil de ler. No entanto, esses espaços extras se somam, especialmente se você tiver um longo pedaço de código.

Minificação CSS

cssminifier.com

Une autre façon de minimiser le code serait de combiner des éléments similaires.

Par exemple, si mes sections de tête et de pied de page étaient identiques, au lieu de les écrire comme suit:

corps {
taille de police: 16px;
}
bas de page {
taille de police: 16px;
}

Je pourrais écrire:

corps, pied de page {
taille de police: 16px;
}

Compression est le processus de réduction de fichiers en remplaçant des séquences d'informations récurrentes par une seule référence à cette séquence particulière.

Ainsi, par exemple, si j'ai le code suivant: 123 4 123 123 123 4 123 123, je pourrais remplacer 123 par un 1 et obtenir une version compressée comme celle-ci: 1 4 1 1 1 4 1 1. Bien sûr, c'est beaucoup plus complexe que ce que j'ai présenté.

Cela se produit généralement côté serveur et le plus commun s'appelle compression Gzip. Le serveur envoie une version compressée. Une fois que le navigateur a reçu le fichier compressé, il le décompresse en inversant le processus pour en lire le contenu.

Cela fonctionne assez bien comme WinRAR; nous le savons probablement tous, car nous l’utilisons gratuitement depuis toujours!

Si vous utilisez un CMS populaire, vous trouverez certainement un plugin pour la compression et la minification. Par exemple, le plugin W3 Total Cache fait beaucoup de choses, y compris les deux, si vous le configurez correctement.

N'oubliez pas que la compression dépend de la configuration du serveur. Si votre serveur ne prend pas en charge Gzip, vous ne pourrez pas compresser les fichiers. Si vous avez un serveur Apache, assurez-vous que mod_deflate est installé.

Vous pouvez demander à votre fournisseur de serveur si votre hébergement le supporte. 99,9% du temps, ils diront oui. Si ce n’est pas déjà installé, ils devraient le faire gratuitement, car c’est quelque chose de très basique.

Si vous n’êtes pas sur un CMS populaire, vous pouvez également activer la compression Gzip. via le fichier .htaccess (Serveurs Apache) en ajoutant le code suivant, tant que mod_deflate est installé.

Sometimes, you can also combine the scripts. There are plugins that do this, such as Autoptimize, which I’ve presented before. Combining scripts is exactly what it says. Instead of having two files, you combine them into one. This way there’s only one request made to the server, instead of multiple ones.

However, combining scripts can many times causes bugs, so make sure you back up everything before.

Cache Policy

Caching is the process of storing files in a client’s browser in order to be able to quickly access them at a later time.

For example, if a user comes to your website for the first time, your logo will have to be downloaded. However, if you have an effective caching policy, that file will be stored in the user’s browser. When the user accesses your site a second time, it won’t have to download that file again as it will be instantly loaded from their computer.

Dynamic Elements (short cache policy): Dynamic elements are elements on your website that change frequently. For example, you might keep adding new posts in a slider on the Homepage.

In this case, the HTML is the dynamic element, so set a short caching policy if this fits you. 30 minutes might be enough, just in case the user returns to that page in the same session.

In some cases, you might not want to cache those elements at all, if promptitude is what matters for your users, such as on news websites.

Static Resources (long cache policy): Static resources are files that rarely change. These are usually images and CSS or JS files, but they can also be audio files, video files, etc.

You can set a longer cache time for images and CSS files since you know you will not be changing them very frequently. You can even go up to one year, but 3 months is usually enough.

Third Party Tools: You don’t really have control over 3rd party tools, so if you feel like a tool that is hosted elsewhere makes your website run very slow, better find an alternative or give up on it.

A solution would be to host the files on your own server and cache them. However, this might not be very productive and it’s not recommended, as you’ll have to constantly update those files as soon as new versions come out, otherwise the tool or app won’t work properly.

Cache Plugins: There are a lot of plugins that will properly handle the cache protocols required for a good user experience. If you’re on WordPress, one of these plugins is W3 Total Cache. However, if you want to go for a better option, WP Rocket is also pretty popular, but it will set you back a couple hundred bucks.

Just search for cache plugin / extension / module + your platform on Google to find what you need. Look at the reviews to pick the best one.

.htaccess file cache: You can also set a cache control header from your .htaccess file on an Apache server, if you don’t run your website on a popular CMS.

There are multiple ways:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 hour"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##

Or you can also use this code:

# One year for image files

Header set Cache-Control "max-age=31536000, public"

# One month for css and js

Header set Cache-Control "max-age=2628000, public"

The numbers in the max-age attribute are in seconds, so 3600 would mean one hour, 86400 one day and so on.

Resetting the cache: When you make modifications to a web page, you want to reset the cache if an older version has been cached previously. However, you can only reset the cache on your server.

This means that users who have downloaded a previous version of a certain file will still load that old version from their computer when they access the website again. The file will be refreshed after the set amount of time in your caching policy or if the user manually resets their browser cache.

If you have a critical error in your web design or code, you can change the filename of your file. This way you can be sure that the cache for that particular file will be reset.

Sometimes, Chrome’s cache can be difficult to reset. Sometimes, routers and datacenters between the client and the server might also cache files so, if you don’t see the modifications, give it a couple of hours.

Lightweight Theme & Plugins

The more you load your website with plugins, the heavier it gets and the slower it runs.

A website’s theme is the biggest ‘plugin’ the site has. Most themes out there come with heavy 3rd party builders and huge libraries of plugins which all make the site run slower.

Lightweight Theme & Plugin

For example, slider plugins generally add the slider JS code to all pages, although it will probably be used only on the homepage or a landing page. That’s some heavy code to be loading on every page! Not to mention that nobody likes them and they lower the conversion rate.

So when you’re looking for a theme, try to find one without too much animations, sliders, functions and so on. If you look at the big websites you’ll see that, in general, they’re pretty simple.

A good theme which I recommend is GeneratePress. It’s lightweight and will load very fast. You can enable or disable elements to keep your site as clean as possible.

Combining it with an optimization plugin such as WP Rocket (paid) or a combo of free plugins such as Autoptimize + Fastest Cache will make it blazing fast! You can also use W3 Total Cache, a plugin which does almost everything listed above pretty well.

When you install new plugins, think about how important they are to your website. After you install them, test your score and loading speed. Does the plugin make your site run slower? If yes, is it critical to keep the plugin? Maybe look for a better alternative or remove it completely.

How to Bulk Check the PageSpeed Insights Score

The annoying part about PageSpeed Insights is that it checks only one web page at a time. It would take an eternity to check all the pages on your website, depending on its size.

However, there’s a way of bulk checking the PageSpeed Insights Score. Have you guessed it yet?

It’s the CognitiveSEO Tool Site Audit. Once you set up the technical SEO analysis with the Site Audit, go to your Campaign -> Site Audit -> Performance -> PageSpeed.

Bulk Check Google PageSpeed Insights Score

Of course, you can do a lot more with the tool, from improving your technical SEO and content to monitoring your rankings and link building efforts.

There’s also a somewhat free alternative which is a Chrome Extension. However, what it will actually do is ask for a list of URLs and then just open them as new tabs in the online PageSpeed Insights tool.

Bulk Check PageSpeed Extension Chrome

This means that the process is OK for about 10-20 tabs, if you have a medium to high end computer CPU. Anymore than that and the browser could crash or you’ll grow old waiting. It’s still pretty inconvenient.

Other SEO Tools for Measuring & Improving Site Speed

Of course, Google’s PageSpeed Insights tool isn’t the only tool to check and improve page speed. For once, we don’t really know where the tests are being performed from. If your site is hosted on a server in Europe and Google performs its tests from the US, it’s natural that the site will be slower.

However, there are tools which specify where the test is being performed from.

Pingdom

Pingdom Speed Test is a great tool which measures the speed at which your web page loads. Once the test is done, you’ll get some results which are similar to the ones on Google’s tool, at least visually.

Pingdom Speed Test

What’s interesting about it is that you can select where the test is going to be performed from. Sure, the options are limited, but it’s still better than not even knowing it.

If you focus on local SEO, choose the location closest to your server. If you don’t know where it’s actually hosted, ask your hosting provider and you’ll find out.

Pingdom Data Center Location

It’s also a good idea to make multiple tests from different locations, just in case you have an international audience.

GT-Metrix

GT Metrix has been one of my favorite speed testing tools out there. Although it tests only from Vancouver, Canada, the insights it gives are very useful.

GT Metrix Speed Tool

Quick tip: If you create a free account with them, you won’t have to wait so much for the test to be performed. To reduce load on their servers, they add you in a queue when there are too many requests. However, registered users have priority.

mod_pagespeed

The mod_pagespeed is a server addon from Google. Its purpose is to fix any page speed related issues at a core level, directly on the server side. This means that even if you add unoptimized images, mod_pagespeed will automatically compress, optimize and convert them to next gen image formats.

However, installing mod_pagespeed is definitely more technical than just dealing with everything in WordPress.

If your server already has it or you know what you’re doing go ahead and install it. However, it’s always a better idea to have a fast site in the first place instead of trying to cover things up.

Any way, this mod will increase load on your server as every time you upload an unoptimized image, it will have to use processing power to convert it.

Google AMP (Accelerated Mobile Pages)

If you want your site to be really fast on mobile searches, you can always implement Google AMP.

Google AMP or Accelerated Mobile Pages is a special type of HTML, stripped of heavy, slower loading elements.

More than that, AMP pages will preload in Chrome mobile browser as the user scrolls through the search results, resulting in an instant load of the page when the user taps the title.

Google AMP

There are also disadvantages, of course. You’re limited from every direction, although things are getting better and better every day. Also, your site’s design has to suffer and will pretty much look like any other site that uses AMP. Bummer.

The URL isn’t yours either, because Google loads a cached version of your site, on their URLs. However, Google developers have promised to bring native URLs into AMP.

On WordPress and other CMS, you can add AMP to your website through a plugin. For custom websites, you’ll need to get in touch with your developer and give them this link.

conclusão

Improving your site speed is important for better search rankings. PageSpeed Insights provides a set of best practices and possible improvements, prioritized by their impact on your site’s speed.

While the score itself shouldn’t concern you too much, it’s a good idea to try and get it at least over 50. However, focus on load time, which is measured in seconds. A good website should load in about 3 seconds. A really, really fast one should load in about 1.

Having a good server, compressing images and keeping things clean and simple in your code will benefit you the most when it comes to website speed.

What’s your PageSpeed Insights Score? Have you seen better rankings after improving the loading speed of your website? Share your experience with us in the comments section below!


Start Your Free 7-Day Trial

Com todos os sites disponíveis, você provavelmente já encontrou alguns sites cheios de pop-ups frustrantes. Essas notas introdutórias repentinas…