Como alcançar 100/100 pontos no Google Pagespeed para o seu site WordPress

Google Pagespeed Insights é a conhecida ferramenta do site com a qual você pode verificar e otimizar todos os parâmetros relevantes para o motor de busca. Você pode clicar no link acima, ou você pode ver um valor atualizado diariamente do seu site no sistema de administração.

Neste manual mostramos-lhe como é fácil usar o pontuação da velocidade da página de 100/100 para alcançar. Você também pode fazer isso.

Para o nosso exemplo usamos um site de demonstração com todo o tipo de conteúdo e um tema bem conhecido, que também inclui os plugins habituais. Então é exatamente a mesma coisa que você usa para criar bons sites.

página de super alimentação

Nós estamos aqui para o tema The7 decidido. Mas não importa o tema que você usa. O principal é que está atualizado e oferece algumas opções de configuração para a criação do site.

Você precisa disso para um site rápido.

  1. a webhoster rápido por experiência
  2. um WordPress atual e limpo
  3. as configurações corretas para o servidor web
  4. uma ferramenta de optimização e caching

Neste exemplo, usamos Foguetão WP. Estas ferramentas fazem todas a mesma coisa. Eles comprimem arquivos de texto, fundem o código e, se necessário, criam uma página estática como uma cópia.

Isso permite que o visitante chame a página rapidamente.

As páginas estáticas fazem lembrar o código html da época. Os sites que consistem em simples código html e imagens continuam a ser os mais rápidos. Mas não dinâmico. Com estes plugins, o cache é reconstruído uma e outra vez, assim que algo muda na página.

Dica: Desactive o WordPress Cronjob. Não é realmente um cronjob no sentido real, mas é sempre chamado quando um visitante vem à página. Vamos mostrar-lhe como isto funciona noutro artigo.

Google Pagespeed Insights

Digite seu site atual no google e veja o desempenho.

Normalmente você receberá valores na faixa amarela até 85 se o webhoster tiver um bom servidor.

Em nossa instalação padrão, o PSI nos mostrou 85/100 na vista da área de trabalho.

 largura=
Instalação PSI Padrão WordPress

Um pouco enganadora, no entanto, é a afirmação de que o servidor respondeu lentamente. Aqui se entende o tempo para o primeiro byte, que é transmitido.

Há muitos fatores que jogam juntos aqui. Muitas vezes você irá reduzir o chamado TTFB (Time to first Byte) se você corrigir todos os outros pontos.

 largura=

O Google oferece convenientemente o código otimizado para muitos pontos para download. Mas recomendo a utilização apenas de imagens optimizadas no site.

Isto pode até ser feito gratuitamente, por exemplo, com o Panda Tinypng ...para tratar do assunto.

compressão de imagens em tinypng
Tinypng.com Panda come os bytes supérfluos.

No entanto, a maioria dos temas também cria suas próprias imagens em diferentes tamanhos, de modo que há sempre a necessidade de uma nova otimização.

Recomenda-se, portanto, ocasionalmente, simplesmente re-otimizar e sobrescrever todos os arquivos de imagem no servidor web.

Pingdom, GTMetrix e Co.

Claro que também há outras páginas de verificação. No entanto, aqui há frequentemente o problema de que a recuperação é feita a partir do estrangeiro e, portanto, não é suficientemente significativa para simular o visitante habitual da Alemanha. Também é importante saber que alguns programas de teste não conseguem lidar com o http/2 e ignorar exatamente a vantagem do http/s, ou seja, a transmissão paralela de dados sobre uma conexão, e interpretar isso de forma negativa.

gtmetrix
Relatório de desempenho da GTMetrix

TTFB ou tempo total de carregamento?

Basicamente, o resultado do tempo total de carregamento é o que conta. O primeiro byte depende de muitos fatores que são difíceis de influenciar. Uma página que não é comprimida normalmente tem um valor TTFB muito baixo do que uma página perfeitamente comprimida. Mas o tempo total de carga com compressão é, naturalmente, mais rápido para uma página com muito conteúdo. Como o google classifica isto no final é nebuloso. Temos até páginas que carregam lentamente porque o software está desactualizado e tem um valor PSI de 68, mas com 28K palavras-chave orgânicas conseguimos cerca de 1000 visitantes por dia. Mas com sites comparáveis, o site com os melhores valores certamente será listado com valores mais altos.

CDN e módulos de aceleração

Há também módulos que armazenam dados estáticos em outros servidores e os entregam dependendo da localização do visitante. Isso reduz o número de conexões ao servidor e, portanto, também reduz a chamada TTFB. Aqui podem ser utilizados caches de akamai, cloudflare ou incapsula que também oferecem compressão e otimização, dependendo do serviço reservado. Uma pequena proteção (D)Dos também está incluída, desde que a conexão seja feita completamente através destes provedores.

visão geral do tráfego web cloudflare
Análise do tráfego de nuvens

Speedkit para Plesk

Por exemplo, existe um plugin para Plesk que pode tornar o site mais rápido com alguns cliques. Mas no meu teste foi exactamente o oposto. O principal problema com tais plugins é que a cache só arranca quando o visitante vê a página uma segunda vez ou se conecta ao sistema primeiro.

A vantagem é que você pode ativá-lo facilmente sem fazer nenhuma alteração no seu sistema. Mas a desvantagem é a velocidade que falta para os visitantes da 1 View. Por este motivo não se vê qualquer alteração com os programas de verificação habituais, porque eles visitam sempre o site sem cache como um utilizador completamente novo.

velocidade-kit-website acelerador-plesk
Speedkit para Plesk é projetado para fazer Web site mais rapidamente. Mas nem sempre funciona.

Como a maioria dos visitantes muitas vezes só chegam à página através de um link de um motor de busca, isso não traz nenhuma vantagem de velocidade para esses visitantes. Com as ferramentas de bordo, você pode se sair muito bem sem caches externos. Também em termos de protecção de dados, especialmente o DSGVO e o próximo Regulamento de Privacidade e Comunicações Electrónicas, a utilização de tais serviços não é adequada. Já lhe falta um Contrato para o processamento de dados da ordem ao encomendar estes serviços.

Desta forma, você torna o site mais rápido.

O ponto mais importante: O anfitrião web certo.

Visto de fora, todos provedor de alojamento web o mesmo. Mas a diferença é tão frequentemente escondida.

Existem web hosters que anunciam com núcleos e recursos dedicados, mas depois tudo isso só funciona com hardware muito fraco. Um pequeno núcleo AMD de um servidor com 10 anos não é o mesmo que um núcleo de um Intel Platinum Xeon da versão mais recente.

vmware_cluster
Exemplo de um Cluster VMWare

A maioria dos fornecedores de hoje também virtualizam toda a sua infra-estrutura. Muitas vezes em estruturas estranhas, como sistemas de contentores, onde os núcleos reservados pelo cliente também foram reservados por outros 20 clientes. Bom e por causa da licença de software custa caros fornecedores usam sistemas de virtualização real como vmware ou KVM, geralmente chamado de nuvem.

kvm_cluster
Um pequeno aglomerado de KVM

Muitas vezes, a hospedagem compartilhada é suficiente. Nós mesmos construímos websites com milhares de visitantes por mês. Estas também funcionam em uma pequena conta de hospedagem, porque as máquinas de hospedagem web já são normalmente muito grandes dimensionadas pelo provedor, para que possam servir centenas de sites.

virtuozzo_cluster
Vista de um nó Virtuozzo 7

No entanto, a maioria dos sites não precisará do poder que reservaram, por isso há sempre muito poder.

Ao escolher um webhoster, basta procurar uma conta de teste e carregar o seu website lá sem compromisso. Normalmente é possível alcançá-lo através de um subdomínio e testar a velocidade. Se não for nada, basta mudar para outro fornecedor.

Neste exemplo, a página de demonstração está localizada em um servidor SEO o webhoster.de AG onde você obtém uma conta de revendedor Plesk com 10 endereços IP para os seus projetos.

O hardware utilizado é um servidor Dell R740 com SSDs de servidor MLC como raid array.

A interface de administração é Plesk Onyx na versão actual.

Um WordPress padrão com os seguintes plugins ativos foi instalado:

  • Afiliado da Amazon para WordPress
  • Próximos scripts: Ajudante de Actualização SNAP Pro
  • Próximos scripts: Cartaz das Redes Sociais
  • SEO Smart Links Business
  • Códigos de atalho Ultimate
  • Tabela de Conteúdos Plus
  • Os7 Elementos
  • Ultimate Addons para WPBakery Page Builder
  • WPBakery Page Builder
  • Fermento SEO Premium
  • Foguetão WP

O Modelo de Design

O7 é usado como tema.

O design da página consiste em modelos do Theme ou do Page Builder. As subpáginas têm normalmente 2500-3000 palavras e muitas imagens e tabelas.

Portanto, é sempre importante verificar não só a página inicial, mas também as sub-páginas.

O nosso site de demonstração chama-se www.super-food.de e também é acessível sob este domínio. Para que você mesmo possa verificar todos os testes. Em outro artigo nós apenas mostramos como você pode construir um grande site com poucos recursos em um tempo muito curto. Talvez isto também seja algo para ti. O site é copiado para outros sistemas de tempos em tempos para fins de teste para criar testes comparativos.

Para configurar o servidor web através do Plesk

Primeiro de tudo, o servidor web deve ser configurado via Plesk. Há sempre recomendações para usar o nginx como um servidor web puro. Mas nós não fazemos isso porque essencialmente nenhum arquivo .htaccess é suportado e a maioria das funções do WordPress dos plugins só podem ser convertidas com mais esforço, caso contrário elas são ineficazes. Também não há vantagem de velocidade.

domínio do tabuleiro de pelúcia
O Painel de Controle Plesk para o domínio

Configurações do PHP em Plesk

Nós usamos a versão atual do php 7.2.9 com as configurações padrão. Sob o item de menu Configurações de PHP você pode normalmente definir as opções você mesmo. Caso contrário, o fornecedor de alojamento Web tem de o fazer.

plesk-php-version-setting-with-apache
Configurações do PHP no menu Plesk. PHP-FPM com Apache Webserver.

Configurações para Apache & nginx

Nas definições para nginx ou Apache, apenas definimos os valores que já estão predefinidos pelo fornecedor. Portanto, nada de especial. Apenas por razões de segurança as ligações simbólicas são desactivadas e a compressão padrão é activada.

 largura=
configurações nginx como proxy no menu Plesk

nginx só trabalharemos como um servidor proxy com o processamento inteligente de arquivos estáticos. Basicamente, você também pode fazer sem nginx completamente. Mas então o http/2 não funcionará mais e outros problemas irão ocorrer. Então, deixamos tudo nos valores por defeito.

Painel WordPress

A nossa página de demonstração já está a correr bastante bem. Mas para chegar aos 100/100 precisamos de algumas modificações como a minificação, por isso a combinação de CSS e Javascript como o Google recomenda.

Normalmente você não pode copiar tudo sozinho, mas é por isso que existem pequenos ajudantes úteis que fazem o trabalho.

Nós usamos o plugin WP-Rocket neste teste. Mas a maioria dos outros também pode fazer isso.

wp-rocket-dashboard
O WP-Rocket Dashboard

Nas configurações, basta clicar em todos os itens da seção Otimização de Arquivos, exceto nas configurações que são prejudiciais ao http/2. Para os ficheiros CSS estes são os "Minimizar o CSS" e "Otimize a exibição do CSS„.

css-minify
WP Foguetão CSS Mineração

Nas configurações do Javascript você tem que alterar as configurações "Minimizar Javascript" e "Javascript com carregamento atrasado" e o "Modo seguro para jQuery (recomendado)".

javascript-minify
WP Definições de Javascript de Foguetão

Estava quase a acabar. Com o plugin o valor PSI da página sobe para 94/100. Agora faltam apenas algumas pequenas otimizações dos arquivos de imagem ou código CSS, que de alguma forma não foram comprimidas com o chamado Tema Criança. Praticamente, o google fornece estes arquivos otimizados, para que você possa substituí-los facilmente com o gerenciador de arquivos.

[su_youtube_advanced url="https://www.youtube-nocookie.com/embed/BkoN59dqVvA" playlist="PL_g5rilBm5WXqk9J755LBUCYBowdsc7DL" autohide="no" loop="yes" rel="no" theme="light" https="yes"]

Neste caso ainda poderíamos trocar as imagens alteradas pelo tema e colocar um arquivo CSS e Javascript no tema criança.
Depois só faltava uma pequena recarga para os 100/100 esperados, depois de todas as optimizações terem sido feitas.

pagepeed-insightsights

page-velocidade-100-100
Google Pagespeed Insights passou com 100/100

Esperamos que o nosso pequeno tutorial o tenha ajudado com a optimização. Então, tudo é possível. Mas as coisas mudam todos os dias. Portanto, você tem que manter o seu WordPress sempre atualizado, caso contrário, novas funcionalidades não serão mais suportadas.

Você vai encontrar um vídeo completo em breve no nosso canal do Youtube.

 

 

Por favor divida a contribuição
Partilhar no facebook
Partilhar no twitter
Partilhar no linkedin
Partilhar no pinterest
Partilhar no whatsapp
Partilhar no telegram
Últimos posts

Vídeos recomendados do nosso Canal Youtube