Como obter pontos 100 / 100 no Google Pagespeed para o seu site WordPress

0
1312
percepções página de velocidade

Google Pagespeed Insights é a conhecida ferramenta de site com a qual você pode verificar e otimizar todos os parâmetros relevantes para o mecanismo de pesquisa. Você pode clicar no link acima ou, geralmente, ver no sistema de gerenciamento um valor atualizado diariamente da sua página.

Neste guia, mostraremos como é fácil Pontuação da velocidade da página de 100/100 para alcançar. Você pode fazer isso também.

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 comuns. Então, exatamente o que criar bons sites.

super-alimento-homepage

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

É isso que você precisa para um site rápido.

  1. um host rápido com experiência
  2. um WordPress atual limpo
  3. as configurações corretas para o servidor web
  4. uma ferramenta para otimizações e cache

Nós usamos neste exemplo WP foguete, Todas essas ferramentas fazem o mesmo. Você compacta arquivos de texto, recolhendo o código e possivelmente criando uma página estática como uma cópia.

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

As páginas estáticas lembram o código html da época. Sites que consistem apenas em imagens e código html simples ainda são os mais rápidos. Mas não é dinâmico. Mas com esses plug-ins, o cache é sempre recriado assim que algo na página muda.

Dica: Desative o Cronjob WordPress, Não é realmente um cronjob no verdadeiro sentido, é sempre chamado quando um visitante chega à página. Como fazer isso, mostramos a você em outro artigo.

Google Pagespeed Insights

Digite seu site atual no google e assista ao desempenho.

Normalmente, obtém-se os primeiros valores na área amarela, portanto, até 85, se o Webhoster tiver um bom servidor.

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

Instalação padrão do PSI WordPress

Um tanto enganosa, no entanto, é a afirmação de que o servidor respondeu lentamente. Aqui se entende o tempo até o primeiro byte que é transmitido.

Existem muitos fatores que interagem aqui. Freqüentemente você reduzirá o chamado TTFB (Time to First Byte), se você corrigir todos os outros pontos.

Convenientemente, o Google oferece o código otimizado para download por muitos pontos. Neste ponto, no entanto, geralmente recomendo apenas incorporar imagens previamente otimizadas no site.

Você pode até fazer isso de graça com o Tinypng panda fazer.

tinypng-imagem-compressão
Tinypng.com Panda alimenta os bytes redundantes.

No entanto, a maioria dos temas também cria suas próprias imagens em tamanhos diferentes, para que ele volte sempre às novas necessidades de otimização.

Portanto, é ocasionalmente aconselhável simplesmente otimizar e substituir todos os arquivos de imagem que residem no servidor da web.

Pingdom, GTMetrix e companhia

Claro que existem outras páginas de teste. Aqui, no entanto, muitas vezes há o problema de que a ligação é do exterior e, portanto, não é significativa o suficiente para simular o visitante habitual da Alemanha. Também é importante saber que alguns programas de teste não conseguem lidar com http / xnumx e ignoram exatamente a vantagem do http / s, ou seja, a transmissão paralela de dados através de uma conexão e a interpreta negativamente.

gtmetrix
Relatório de Desempenho GTMetrix

TTFB ou tempo total de carregamento?

Basicamente, o resultado do tempo total de carregamento conta. O primeiro byte depende de muitos fatores, dos quais se pode influenciar apenas problemas. Uma página que não é compactada geralmente tem um valor TTFB muito baixo do que uma página perfeitamente compactada. Mas o tempo total de carregamento com compactação é obviamente mais rápido em uma página com muito conteúdo. Como o Google avalia que, em última análise, é nebuloso. Temos até páginas que carregam muito, porque o software está desatualizado e um valor PSI de 68. Com palavras-chave orgânicas 28K, mas cerca de visitantes do 1000 acessam o site por dia. Mas para sites comparáveis, a página com os melhores valores certamente será listada mais alta.

Módulos de CDN e aceleração

Também existem 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 com o servidor e reduz o chamado TTFB. Caches por akamai, cloudflare ou incapsula estão disponíveis aqui, que também oferecem compactação e otimização, dependendo do serviço reservado. Uma proteção pequena (D) Dos também será incluída se a conexão for feita inteiramente por meio desses provedores.

cloudflare-web-tráfego-Uebersicht
Análise de tráfego Cloudflare

Speedkit para Plesk

Por exemplo, existe um plug-in para o Plesk, que pode acelerar o site com apenas alguns cliques. No meu teste, no entanto, exatamente o oposto foi o caso. O principal problema com esses plug-ins é o fato de o cache iniciar apenas quando o visitante visualiza a página pela segunda vez ou se conecta ao sistema pela primeira vez.

A vantagem é que você pode ativá-lo facilmente sem fazer alterações no seu sistema. Mas a desvantagem é a falta de velocidade dos visitantes do 1 View. Por esse motivo, você não vê nenhuma alteração nos programas de teste usuais, porque eles sempre visitam o site sem fazer o cache como um novo usuário.

Speedkit-site-acelerador-plesk
O Speedkit for Plesk foi projetado para tornar as páginas da Web mais rápidas. Mas provavelmente nem sempre funciona.

Como a maioria dos visitantes geralmente só acessa o site por meio de um link de um mecanismo de pesquisa, não há vantagem em velocidade para esses visitantes. Com os meios de bordo, a pessoa se dá bem sem caches externos. Em termos de proteção de dados, especialmente o DSGVO e o próximo Regulamento ePrivacy, o uso desses serviços não é adequado. Já está faltando um contrato para o processamento de dados do pedido ao solicitar esses serviços.

Então você torna o site mais rápido.

O ponto mais importante: o host certo.

Visto de fora, todo mundo faz Provedor de hospedagem na web o mesmo. Mas a diferença é muitas vezes escondida.

Existem webhosts que anunciam com núcleos e recursos dedicados, mas dos quais tudo isso é executado apenas em hardware muito fraco. Um pequeno núcleo AMD de um servidor do ano 10 não é o mesmo que um núcleo do Intel Platinum Xeon, a versão mais recente.

vmware_cluster
Um exemplo de cluster do VMWare

Hoje, a maioria dos provedores também virtualiza toda a sua infraestrutura. Frequentemente, em estruturas estranhas, como sistemas de contêineres nos quais o cliente reservava núcleos, os outros clientes da 20. Bom e caro por causa do custo de licença de software, os fornecedores usam sistemas de virtualização corretos, como vmware ou KVM, geralmente chamados de nuvem.

kvm_cluster
Um pequeno cluster KVM

Muitas vezes, um compartilhamento é suficiente Hosting fora. Nós mesmos criamos sites com dezenas de milhares de visitantes por mês. Eles também são executados em uma pequena conta de hospedagem, porque as máquinas de hospedagem na web são geralmente dimensionadas pelo provedor já muito grande, para que possam servir centenas de sites.

virtuozzo_cluster
Vista de um nó do Virtuozzo 7

No entanto, a maioria dos sites não precisará dos serviços que eles reservaram, portanto, sempre resta muita energia.

Ao escolher o webhoster, basta procurar uma conta de avaliação e reproduzir seu site sem compromisso. Geralmente, você pode alcançá-los por meio de um subdomínio e testar a velocidade. Se não for nada, basta mudar para outro provedor.

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

O hardware usado é um servidor Dell R740 com SSDs do servidor MLC como uma matriz RAID.

A interface de gerenciamento é Plesk Onyx na versão atual.

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

  • Amazon Affiliate para WordPress
  • NextScripts: Auxiliar de atualização do SNAP Pro
  • NextScripts: Poster de redes sociais
  • SEO inteligente Ligações O negócio
  • shortcodes finais
  • Tabela de Conteúdos Mais
  • Elementos The7
  • Complementos finais para o WPBakery Page Builder
  • WPBakery Page Builder
  • Yoast SEO Premium
  • WP foguete

O modelo de design

O tema é o The7.

O design da página consiste em modelos do tema ou no construtor de páginas. As subpáginas geralmente têm palavras 2500-3000 e muitas figuras e tabelas.

Portanto, é sempre importante não apenas verificar a página inicial, mas também as subpáginas.

Nosso site de demonstração é chamado www.super-food.de e também está sob este Domínio realizável. Então você pode verificar todos os testes você mesmo. Em outro artigo, mostramos como criar um site grande com poucos recursos em pouco tempo. Talvez isso seja algo para você também. Às vezes, o site é copiado para outros sistemas para fins de teste para criar testes comparativos.

Como definir o servidor da web através do Plesk

Primeiro de tudo, o servidor da web deve ser configurado via Plesk. Sempre há recomendações para usar o nginx como um servidor web puro. Nós não fazemos isso porque basicamente não há suporte a arquivos .htaccess e a maioria das funções dos plug-ins do WordPress só pode ser convertida com maior esforço, caso contrário, são ineficazes. Também não há vantagem de velocidade.

plesk-painel-domínio
O painel do Plesk para o domínio

Configurações do PHP no Plesk

Usamos a versão atual do php 7.2.9 com as configurações padrão. Sob o item de menu PHP settings, geralmente você pode definir as opções sozinho. Caso contrário, o provedor de hospedagem precisa fazer isso.

plesk-php-version-set-apache-com
Configurações do PHP no menu Plesk. PHP FPM com servidor web Apache.

Configurações para Apache e nginx

No caso das configurações para nginx ou Apache, definimos apenas os valores já preparados pelo provedor. Então, nada de especial. Aqui, os links simbólicos são desativados e a compactação padrão é ativada apenas por razões de segurança.

configurações do nginx como proxy no menu Plesk

Usaremos apenas o nginx como um servidor proxy com o processamento inteligente de arquivos estáticos. Basicamente, você pode fazer completamente sem o nginx. O http / 2 não funciona mais e outros problemas ocorrem. Então, vamos apenas deixá-lo com os valores padrão.

WordPress Painel

Nosso site de demonstração já está funcionando muito bem. Mas, para alcançar o 100 / 100, precisamos de algumas modificações, como a Minificação, de modo que o resumo de CSS e Javascript, conforme o Google recomenda.

Isso geralmente não pode copiar tudo junto, então há ajudantes úteis fazendo o trabalho.

Estamos usando o plugin WP-Rocket nesta revisão. Mas a maioria dos outros pode.

wp-foguete-reserva
O painel WP-Rocket

Na seção Preferências, na seção Otimização de Arquivos, basta clicar em todos os itens, exceto aqueles que são prejudiciais ao http / 2. Esses são os arquivos CSS que "Minify CSS"E"Otimizar apresentação de CSS".

css Minify
WP Rocket CSS Minification

Com as configurações de javascript, você precisa alterar as configurações "Minimizar Javascript"E"Carregamento atrasado de Javascript"Assim como o"Modo de segurança para jQuery (recomendado) ".

Minify javascript
Configurações de Javascript do WP Rocket

É quase isso. Com o plug-in, a página no valor PSI aumenta para 94 / 100. Agora, faltam apenas algumas otimizações menores dos arquivos de imagem ou do código CSS, que de alguma forma não foram compactadas no chamado tema filho. Convenientemente, o google fornece esses arquivos, mas otimizados, para que você possa substituí-los facilmente pelo gerenciador de arquivos.

Nesse caso, conseguimos trocar as imagens alteradas pelo tema e colocar um arquivo CSS e Javascript no tema filho.
Depois, houve apenas uma pequena recarga no 100 / 100 esperado depois que todas as otimizações foram executadas.

percepções página de velocidade

page-speed-100-100
Google Pagespeed Insights com 100 / 100 aprovado.

Esperamos que o nosso pequeno tutorial tenha ajudado você na otimização. Então, tudo é possível. Mas as coisas estão mudando todos os dias também. É por isso que você precisa manter o WordPress atualizado, caso contrário, novos recursos não serão mais suportados.

Você encontrará um vídeo completo em nosso canal do youtube em breve.

DEIXE UMA RESPOSTA

Por favor, escreva seu comentário!
Digite seu nome aqui