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

Jan Hornung Atualizado em 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 em 12.10.2020

Se você quiser WordPress otimizar, algumas medidas são cristalinas, conhecidas e comprovadamente eficazes. Mas mesmo as páginas supostamente optimizadas ainda têm muitas vezes potencial. É por isso que vale a pena olhar para além do horizonte do Google PageSpeed Insightsand Co. Porque muitas ferramentas de desempenho entregam uma verdadeira mina de ouro de dados, que permitem uma análise muito abrangente - se souberes o que procurar. Hoje mostro-te 7 dicas, com as quais podes fazer a análiseem apenas 7 segundos.

Ferramentas simples de desempenho como as do Google Test My Site ou Google PageSpeed Insights produzem, como resultado, principalmente uma lista de recomendações para a ação. Isto pode ser bom para começar. Mas se quiseres monitorizar os teus projetos WordPress de forma eficiente e otimizar o WordPress de forma sensata, mais cedo ou mais tarde, deverás recorrer a uma ferramenta de desempenho que também mostre o tempo de carregamento da tua página e mostre exatamente como o teu blog, a tua loja, a página da tua empresa se comporta a carregar.

Isto inclui, por exemplo Pingdom, GTMetrix ou Webpagetest,. Estes fornecem frequentemente um chamado diagrama de cascata Muitos utilizadores quase não prestam atenção a estes conjuntos de dados um pouco volumosos. Mas se és um profissional de WordPress, deverás entender como eles funcionam. Porquê? Não há nenhuma outra fonte de dados que mostre a velocidade de carregamento do teu site, a qualidade do seu host, a eficiência de carregamento do teu site e onde estão os locais de construção do teu site.

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

Como fazer isso? Hoje vou mostrar-te passo a passo!

WordPress optimizar: Sem um diagrama de cascata você só arranha a superfície

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 travões de tempo de carregamento de sites WordPress mais frequentes, estas razões acabam sempresem primeiro lugar.

No entanto, nossa experiência com centenas de análises sistemáticas de desempenho com Webpagetest e verificações exaustivas de sites mostra que, mesmo em sites WordPress aparentemente “totalmente otimizados”, há sempre armadilhas de desempenho. E é exatamente aqui que o diagrama de cascata ajuda, porque pode fazer algo especial: mostra como a tua página carrega, quais os elementos carregados e quão rápido tudo acontece.

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 a Cascata do Pingdom
Com as ferramentas Pingdom Tools tens de primeiro rolar um pouco o ecrã para chegar ao diagrama de cascata. A secção correspondente chama-se aqui solicitação de ficheiros. O Webpagetest e o GT-Metrix têm, cada um, os seus próprios tabs (ou separadores) 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 X.
    Os diagramas de cascata são estruturados cronologicamente: O eixo x mostra-te exatamente quando um item começa a carregar e quanto tempo demora a carregar. É esta estrutura cronológica que torna um diagrama de cascata tão valioso. Podes ver exatamente onde o tempo de carregamento é perdido e com quais os processos que precisas de implementar para otimizar a velocidade de carregamento.
  2. Cada solicitação HTTP é registada no eixo Y.
    Podes clicar nos elementos do eixo Y para obter informações adicionais sobre eles na maioria dos diagramas de cascata.
  3. Uma legenda mostra que tipo de recurso é carregado.
    O Webpagetest marca o HTML, CSS, imagens, Flash, etc. a cores, o Pingdom usa símbolos 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 demora a ligação ao servidor ou se o HTTPS é utilizado.
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.

WordPress optimizar 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?

Na análise de desempenho, testámos e comprovámos a análise de 7 segundos : O diagrama dá-te informação num relance sobre sete fatores importantes para a velocidade de carregamento. Estas sete dicas ajudam-te a compreender exatamente como e com que rapidez o teu site é renderizado, e mostram onde há potencial para torná-lo mais rápido, resolver 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 da web, as solicitações podem ser processadas simultaneamente, em vez de uma após a outra, como antes. Além disso, o servidor envia ficheiros HTML para o navegador sob HTTP/2 como precaução. O novo padrão compensa, por isso, as desvantagens que poderás ter de enfrentar com um grande número de solicitações HTTP. Para beneficiar do HTTP/2, o teu site deve, no entanto, ser carregado via HTTPS, ou seja, possuir um Certificado SSL .

Em qualquer caso, a nossa experiência tem mostrado que não existe uma correlação direta entre o comprimento de um diagrama de cascata e a velocidade real de carregamento. Pelo menos até um certo limite: Com bem mais de 100 solicitações , há na maioria dos casos, potencial de poupança.

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 utilizadores não se preocupa muito com o que as ferramentas de análise de valores apresentam. A única coisa que conta para eles é: a rapidez com que a página se carrega.

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, também dá para ter esta perceção do tempo de carregamento usando diagramas de cascata. Tanto quanto sabemos, o Webpagetest é a única ferramenta gratuita que distingue entre o tempo de carregamento tecnicamente medido e o observado pelo utilizador .

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  otimizar 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.

Webpagetest, é a única ferramenta que te pode fornecer estes dados. Não temos conhecimento disto com as ferramentas Pingdom Tools ou GTMetrix. Portanto, esta regra só se aplica se utilizares 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 é o processamento simultâneo de várias solicitações. E tu podes ver isto claramente no teu diagrama de cascata. Como aqui as solicitações 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 cobrança de um WordPress  -Página 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 de página após o caching. Para cada imagem que você carrega no backend, um monte de outros arquivos, as miniaturas ou imagens em destaque, são criadas WordPress automaticamente. A compressão correcta destes ficheiros é uma das formas mais eficazes de reduzir o tamanho e, consequentemente, a velocidade de carregamento da sua 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 fotos 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.

WordPress  otimizar Identificar o encaminhamento
Esta página apresenta vários redirecionamentos 302 consecutivos.

Com um diagrama de cascata, podes ver rapidamente quantos e quais redirecionamentos foram definidos. Aliás, isto também ajuda a detetar loops de redirecionamento após uma alteração do DNS (sistema de nomes de domínio). Graças às marcações amarelas, já conseguimos detetar várias vezes redirecionamentos desnecessários ou mesmo prejudiciais.

As linhas amarelas marcam os redirecionamentos.

Dica #7: Detetar erros num relance

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  otimizar no diagrama da cascata, os 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.

Com a folha síntese todas as dicas resumidas

Um gráfico de cascata é provavelmente a avaliação mais valiosa que você pode obter para as suas WordPress -páginas. Ele combina vários dados que você como proprietário do site deve manter sob controle: Os tempos de carregamento, a ordem de renderização e as mensagens de erro. Armado com as dicas deste artigo, você vai reconhecer rapidamente e eficaz onde ainda há potencial para 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 * .