Otimizar o WordPress: Como analisar o próprio site em 7 segundos

Jan Hornung Última atualização 12.10.2020
9 min.
Com estas dicas e a nossa folha síntese podes analisar as tuas páginas WordPress em apenas 7 segundos e ainda melhor que o Google PageSpeed Insights
Última atualização 12.10.2020

Se você quiser otimizar WordPress , algumas medidas são cristalinas, conhecidas e comprovadamente eficazes. Mas mesmo as páginas supostamente optimizadas ainda têm muitas vezes potencial. Portanto, vale a pena olhar para além do Google PageSpeed Insights and Co. Porque muitas ferramentas de desempenho fornecem verdadeiras minas de ouro de dadosque permitem uma análise muito abrangente - se você souber o que procurar. Hoje vou mostrar-lhe 7 dicas que o podem ajudar a analisar os seusdados em apenas 7 segundos.

Ferramentas simples de desempenho como as do Google Teste Meu Site ou Google PageSpeed Insights principalmente, vomitar uma lista de ações recomendadas como resultado. Isto pode ser bom para o início. Mas se você quiser monitorar seus projetos WordPress de forma eficiente e otimizar significativamente WordPress , mais cedo ou mais tarde você deve recorrer a uma ferramenta de desempenho que também produza o tempo de carregamento da sua página e lhe mostre exatamente como seu blog, sua loja, sua página da empresa se comporta ao carregar.

Estes incluem, por exemplo, o Pingdom, GTMetrix ou Webpagetest. Estes frequentemente fornecem uma chamada carta da cascata. Estes conjuntos de dados um pouco volumosos dificilmente são notados por muitos utilizadores. Mas se você trabalha profissionalmente com WordPress , você deve entender como eles funcionam. Porque: Não há outra fonte de dados que lhe mostre a rapidez com que a sua obra é carregada, o quão bom é o seu anfitrião, a eficiência com que a sua obra é carregada e onde estão os locais de construção da sua obra.

E com um pouco de prática, podes analisar cada página num piscar de olhos e em (paragem manual) 7 segundos 😉

Como é que se faz isso? Hoje vou mostrar-te passo a passo!

Otimizar o WordPress: Sem um diagrama de cascata fazes tudo apenas superficialmente

Talvez estejas a pensar agora: Qual é o objetivo de tudo isto? Existem excelentes ferramentas de desempenho que já me mostram todas as medidas de otimização importantes. Além disso, geralmente limita-se aos seguintes pontos:

Claro, se esclareceste e otimizaste estes pontos, criaste boas bases para um site realmente rápido. É por isso que estas razões são (e muito bem) abordadas em todos os guias de bom desempenho.

Por exemplo

E também com os freios de tempo de carga mais freqüentes do WordPress - lados estes motivos aterrissam repetidamente nos lugares da frente.

No entanto, a nossa experiência de centenas de análises sistemáticas de desempenho com Webpagetest e verificações extensivas do site mostra: Mesmo em páginas supostamente "completamente optimizadas" em WordPress , as armadilhas de desempenho podem ser encontradas repetidamente. E é exactamente aqui que o diagrama da cascata vem a calhar. Porque pode fazer algo especial: mostra-lhe como a sua página carrega, que elementos são carregados e quão rápido vai tudo.

Como aceder ao tesouro de dados

Todas as boas análises de desempenho também produzem diagramas em cascata. Por exemplo, se usares as Ferramentas do Pingdom, só tens de rolar o ecrã para baixo o suficiente.

WordPress  optimizar Cascata do Reino
Em Pingdom Tools, você primeiro tem que rolar um pouco para chegar ao gráfico da cachoeira. A seção correspondente aqui é chamada Pedidos de Arquivo. O Webpagetest e o GT-Metrix têm, cada um, as suas próprias abas para os diagramas.

Mas para obteres todas estas informações corretamente, precisas de entender como ler corretamente os diagramas de cascata.

Como ler corretamente os diagramas de cascata

A densidade de informação concentrada significa que os diagramas em cascata não são exatamente conhecidos pela sua clareza. Na verdade, só precisas de saber quatro coisas para compreender os conjuntos de dados:

  1. O tempo é traçado no eixo dos X.
    Os diagramas de cascata são estruturados cronologicamente: Usando o eixo X, você pode ver exatamente quando um elemento começa a carregar e quanto tempo leva para carregar. É esta estrutura cronológica que faz um gráfico de cascata tão valioso. Desta forma, você pode ver exatamente onde o tempo de carregamento é perdido e quais processos você precisa abordar para otimizar sua velocidade de carregamento.
  2. No eixo Y, cada solicitação HTTP é registrada.
    Na maioria dos diagramas de cascata, você pode clicar nos elementos do eixo Y para obter informações adicionais sobre eles.
  3. Uma lenda mostra que tipo de recurso está carregado.
    Webpagetest marca HTML, CSS, imagens, Flash etc. com cores, Pingdom usa ícones para isso.
  4. Um sistema de codificação adicional fornece informações sobre como as solicitações individuais são executadas - por exemplo, quanto tempo leva para se conectar ao servidor ou se o HTTPS é usado.
Otimizar o WordPress: Como analisar o próprio site em 7 segundos
WordPress  otimizar áreas de um diagrama de cachoeira
Nesta ilustração, podes encontrar as quatro áreas descritas acima.

Otimizar o WordPress com a análise de 7 segundos

Então agora está claro como lês um diagrama de cascata - mas que conclusões podes tirar dele?

Para a análise de desempenho, a análise de 7 segundos já nos provou o seu valor: O gráfico dá-lhe informações sobre sete factores importantes para a velocidade de carregamento com apenas um olhar. Estes sete hacks ajudam-no a compreender exactamente como e com que rapidez o seu website é apresentado. E eles mostram onde há potencial para torná-lo mais rápido, consertar problemas ou melhorá-lo ainda mais.

Nota

Aliás, nos nossos exemplos referiremo-nos sempre aos diagramas de cascata do Webpagetest, já que na verdade usamos sempre essa ferramenta, seja manual ou automaticamente.

Dica #1: O tamanho importa

Quanto mais longa for a cascata (ou seja, quanto mais elementos forem removidos no eixo Y), mais solicitações terão de ser processadas e mais lento será o carregamento da página. No entanto, uma longo diagrama de cascata não tem necessariamente de ser mau. Há características e recursos externos que simplesmente não podes ou não queres dispensar. Connosco, por exemplo, o chat ao vivo é uma dessas ferramentas. O carregamento do programa de chat torna o nosso site mais lento, é claro. Mas o suporte rápido via chat é uma parte central do nosso alojamento, por isso, não podemos abdicar do plugin.

O HTTP/2 também garante que o mero número de solicitações já não tem o mesmo significado que tinha há alguns anos.

Com o novo padrão web, os pedidos podem ser processados simultaneamente, em vez de um após o outro, como antes. Além disso, sob HTTP/2 o servidor já envia arquivos HTML para o navegador, como precaução. O novo padrão, portanto, compensa quaisquer desvantagens que você possa ter de um grande número de solicitações HTTP. Para beneficiar do HTTP/2, porém, o seu site deve ser carregado via HTTPS, ou seja, deve ter um certificado SSL.

De qualquer forma, a nossa experiência demonstrou que não existe uma correlação directa entre o comprimento de uma cascata e a velocidade real de carga. Pelomenos até um certo limite: com significativamente mais de 100 pedidos, existe definitivamente um potencial de poupança na maioria dos casos .

Se o teu site exceder este limite, deves analisar mais de perto os teus pedidos HTTP. Por exemplo, a nossa página inicial carrega com mais de 130 pedidos HTTP. Portanto, há aqui um potencial de otimização.

Se o teu diagrama de cascata contiver mais de 100 solicitações, vê exatamente quais aquelas que podes dispensar.

Dica # 2: Detetar tempo de carregamento

O valor máximo no teu eixo x é essencial para se analisar a velocidade de carregamento: Aqui podes ver quanto tempo passa até que o teu site seja completamente renderizado. Quanto menor for este valor, melhor.

Se o valor máximo do teu eixo X for superior a 10, deves definitivamente tratar da velocidade de carregamento da tua página.

O tempo total de carregamento da tua página deve ser inferior a 10 segundos

Dica #3: Detetar perceção do tempo de carregamento

A maioria dos usuários não se importa com o que as ferramentas de análise de valores cuspem. A única coisa que conta para eles é a rapidez com que a página é carregada .

Para ti, como operador de site, é importante melhorar ao máximo essa sensação de velocidade. Podes conseguir isso através da cache otimizada, uma otimização "acima da dobra" ou, se teus clientes estiverem no estrangeiro, a utilização de uma rede de distribuição de conteúdo (CDN).

Felizmente, você também pode chegar ao fundo deste tempo de carga percebido muito bem através de diagramas de cachoeira. Para o nosso conhecimento, a Webpagetest é a única ferramenta livre que pode distinguir entre a tecnicamente medido tempo de carregamento e o percebido pelo usuário tempo de carregamento.

O diagrama inteiro mostra o - menos importante - tempo de carregamento técnico. A perceção do tempo de carregamento esconde-se entre as linhas azul e verde no diagrama.

A linha verde indica quando o primeiro elemento visual do site é carregado (este é chamado de ponto "Start Render"). A linha azul indica quando o utilizador perceciona que a página está totalmente carregada - neste ponto, a probabilidade de interagir com a página aumenta significativamente. Estas duas linhas devem estar o mais à esquerda e o mais perto possível uma da outra.

WordPress  optimizar o mapeamento do tempo de carga percebido
A área laranja mostra a fase em que nenhum conteúdo visível está a ser renderizado. Até ao final desta fase, o visitante só vê uma página branca. A área azul marca o intervalo de tempo entre o Start Render (início da renderização) e o Load Time (tempo de carregamento), durante o qual o visitante pode percecionar um processo de renderização visível (por exemplo, uma ampulheta). Juntos, ambos constituem o tempo de carregamento percecionado.

OWebpagetest é a única ferramenta que lhe fornece estes dados. Isto não nos é conhecido da Pingdom Tools ou da GTMetrix. Esta regra, portanto, só se aplica se você usar o Webpagetest:

A linha verde deve aparecer após cerca de 2 a 3 segundos, a linha azul após 7 segundos, no máximo.

Dica #4: HTTP/2 vs. HTTP/1

O HTTP/2 oferece uma vantagem decisiva em comparação com o HTTP/1: Com o mais novo padrão web, as páginas são carregadas muito mais rapidamente. No entanto, além de um certificado SSL, também precisas que o teu host te forneça este serviço. Muitos operadores de sites não têm certeza se este é realmente o caso deles ou não.

Uma das maiores vantagens do HTTP/2 é que ele pode lidar com vários pedidos ao mesmo tempo. E você pode ver isto claramente no seu diagrama da cascata. Como as solicitações aqui são processadas cronologicamente, várias barras começam no mesmo ponto do eixo X quando o HTTP/2 é utilizado.

WordPress  otimizar o comportamento de carga de uma página WordPress  com e sem HTTP/2
À esquerda, o comportamento de carregamento típico de um site WordPress sem HTTP/2. As solicitações HTTP individuais são realizadas uma após a outra. À direita, podes ver como a mesma página se comporta com HTTP/2: As solicitações individuais são carregadas aqui simultaneamente.

Se as solicitações individuais forem carregadas em paralelo, o teu site será executado com HTTP/2.

Dica #5: Detetar imagens demasiado grandes

Em cerca de 30% dos sites que analisamos, ainda encontramos potencial em termos de tamanho de imagem. E isto apesar de a maioria dos webmasters presumirem que já tiraram o máximo partido deste potencial.

As imagens são - na nossa experiência - o fator mais importante do tempo de carregamento da página após o armazento em cache. Para cada imagem que carregas no backend, o WordPress cria automaticamente uma série de outros ficheiros adicionais, as miniaturas ou imagens em destaque. A compressão correta destes ficheiros é uma das formas mais eficazes de reduzir o tamanho e, consequentemente, a velocidade de carregamento da tua página.

Como otimizares as tuas fotos de maneira sensata, por exemplo:

No diagrama de cascata, as imagens podem ser rapidamente identificadas usando a legenda: O Webpagetest exibe-as com barras roxas, o Pingdom com um ícone. Apenas o GTMetrix não marca as imagens separadamente. Em qualquer caso, aplica-se o seguinte: Se as barras correspondentes forem significativamente mais longas do que as barras das solicitações restantes, isso indica um longo tempo de carregamento da imagem.

WordPress  optimizar isto é o que parece quando as imagens são realmente grandes demais
Um exemplo extremo, mas muito claro, de imagens não comprimidas. Alguns dos ficheiros demoram mais de 8 segundos para carregar, tornando toda a página mais lenta.

Num caso como o acima referido, deves dar uma vista de olhos às tuas imagens. Ao clicares na solicitação correspondente, geralmente podes ver num diagrama de cascata exatamente quais os ficheiros envolvidos. Isto torna muito mais fácil a procura de travões de tempo de carregamento.

Barras de carregamento longas para recursos de imagem indicam potencial de compactação.

Dica #6: Detetar redirecionamentos

Um diagrama de cascata não apenas ajuda a entender que elementos são carregados, quando e com que rapidez, mas também quantos redirecionamentos foram estabelecidos e para onde apontam.

As solicitações com redirecionamentos geralmente são destacadas a cores. O diagrama também fornece informações sobre qual o redirecionamento que está configurado e para onde vai.

OtimizarWordPress  Identificar redirecionamentos
Esta página apresenta vários redirecionamentos 302 consecutivos.

Com um diagrama de cascata, você pode ver rapidamente quantos e quais redirecionamentos foram definidos. A propósito, isto também ajuda a detectar loops de encaminhamento após uma mudança de DNS. Graças aos marcadores amarelos, temos sido capazes de detectar redirecionamentos desnecessários ou mesmo prejudiciais em várias ocasiões.

As linhas amarelas marcam os redirecionamentos.

Dica #7: Reconhecer erros com um olhar

Ocasionalmente acontece que os elementos de um site não são renderizados corretamente. Isto pode afetar as estruturas do AdSense (frames), por exemplo, mas também os mapas e fontes incorporados.

WordPress  optimizar no diagrama de cascata erros são identificados com linhas vermelhas
Esta página gera um erro 404.

Neste caso, o diagrama de cascata lança uma mensagem de erro e marca a linha com a solicitação relevante a vermelho. O diagrama também indica qual é o erro e qual é o recurso que está a produzir o erro.

As linhas vermelhas indicam erros ao renderizar a página.

Todas as dicas num relance com a folha de fraude

Um gráfico da cascata é provavelmente a análise mais valiosa que pode obter para as suas páginas em WordPress . Ele combina vários dados que você como proprietário do site deve ficar de olho: Tempo de carga, ordem de entrega e mensagens de erro. Armado com as dicas deste artigo, você pode rápida e efetivamente reconhecer e efetivamente, onde ainda há potencial de otimização:

  • O diagrama de cascata é muito longo (mais de 100 solicitações)?
  • O valor máximo do eixo X é muito grande (maior que 10)?
  • As solicitações são carregadas em paralelo (via HTTP/2)?
  • As imagens são demasiado grandes (ou seja, as imagens estão mal otimizadas)?
  • As linhas verde e azul estão muito afastadas para a direita ou demasiado afastadas (por isso o utilizador considera a página lenta)?
  • Existem linhas amarelas inesperadas (redirecionamentos)?
  • Existem linhas vermelhas (erros)?

É certo que esta análise pode demorar ainda mais na primeira vez. Com um pouco de experiência, no entanto, os diagramas de cascata permitem que entendas os teus projetos WordPress muito melhor e os otimizes de forma mais completa.

Membro da equipa RAIDBOXES desde o primeiro momento e chefe de suporte. Ele prefere falar sobre o PageSpeed ​​ e desempenho do site em BarCamps e em WordCamps. A melhor maneira de o subornar é com um café expresso - ou um pretzel da Baviera.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.