WordPress optimizar: Como analisar o seu site em 7 segundos

Jan Hornung
9 min.
Com estas dicas e a nossa cábula podes analisar as tuas páginas WordPress em apenas 7 segundos e ainda melhor que o Google PageSpeed Insights

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 dadosn, que permitem uma análise muito abrangente - se você souber o que procurar. Hoje eu mostro-te 7 dicas, pelo qual a análisee em apenas 7 segundos.

Ferramentas simples de desempenho como as do Google Teste Meu Site ou Google PageSpeed Insights resultam principalmente em uma lista de recomendações de ação. Isto pode estar bem para começar. Quando você tiver o seu WordPress mas monitoriza eficazmente os projectos e WordPress mais cedo ou mais tarde você deve usar uma ferramenta de desempenho que também exibe o tempo de carregamento da sua página e mostra exatamente como seu blog, sua loja, sua página da empresa se comporta ao carregar.

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

E com um pouco de prática, você pode analisar cada página num piscar de olhos e em (mão-ponta) 7 segundos 😉

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

ebook: Meça o desempenho do seu site como um profissional

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

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

Claro, se você esclareceu e otimizou esses pontos, você criou uma base muito boa para um site realmente rápido. É por isso que estas razões estão (com toda a razão) cobertas em todos os guias de bom desempenho.

Por exemplo

E também com os mais frequentes Freios de tempo de carga de WordPress -páginas estas razões vêm sempre ao de cima.

No entanto, a nossa experiência de centenas de análises sistemáticas de desempenho com testes de páginas web e verificações extensivas do site mostra: Mesmo em WordPress páginas supostamente "completamente optimizadas", existem sempre armadilhas de desempenho. E aqui é exactamente onde o diagrama da cascata ajuda. Porque pode fazer algo especial: mostra-lhe como a sua página carrega, que elementos são carregados e a rapidez com que tudo acontece.

É assim que você acessa o tesouro de dados

Todas as boas análises de desempenho também produzem diagramas de cascata. Por exemplo, se você usa as Ferramentas do Pingdom, você só tem que rolar para baixo o suficiente.

WordPress  optimizar a Cascata do Pingdom
Com as ferramentas do Pingdom Tools você tem que rolar um pouco primeiro para chegar ao diagrama 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 obter todas estas informações corretamente, você precisa entender como ler corretamente as cartas das cachoeiras.

Como ler correctamente os diagramas das cascatas

A densidade concentrada de informação significa que os diagramas de cascata não são exactamente conhecidos pela sua clareza. Na verdade, você só precisa saber quatro coisas para entender os conjuntos de dados:

  1. O tempo é traçado no eixo dos X.
    Os diagramas de cascata são estruturados cronologicamente: O eixo x mostra-lhe exactamente 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. Você pode ver exatamente onde o tempo de carregamento é perdido e com quais processos você precisa começar para otimizar sua velocidade de carregamento.
  2. Cada solicitação HTTP é registrada no eixo Y.
    Para a 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 é carregado.
    Webpagetest marca HTML, CSS, imagens, Flash, etc. em cores, 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 leva para se conectar ao servidor ou se o HTTPS é usado.
WordPress  optimizar: Como analisar o seu site em 7 segundos
WordPress  otimizar áreas de um diagrama de cachoeira
Nesta figura, você encontrará as quatro áreas descritas acima.

WordPress optimizar com a análise de 7 segundos

Então agora é claro como você lê um diagrama de cascata - mas que conclusões você pode tirar dele?

Na análise de desempenho, temos 7 segundos Análise provado: O diagrama dá-lhe informação num relance sobre sete factores importantes para a velocidade de carregamento. 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

A propósito, nos nossos exemplos vamos sempre referir-nos aos diagramas de cascata da Webpagetest, uma vez que na realidade utilizamos sempre esta ferramenta, não importa se 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 pedidos terão de ser processados e mais lenta será a carga de páginas. No entanto, uma longa queda de água não tem necessariamente de ser má. Há características e recursos externos que você simplesmente não pode ou não quer fazer sem. Connosco, por exemplo, o chat ao vivo é uma dessas ferramentas. O carregamento do programa de chat atrasa o nosso site, é claro. Mas o suporte rápido via chat é uma parte central do nosso alojamento. PluginPortanto, não podemos passar sem ele.

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

Porque 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, o servidor envia arquivos HTML para o navegador sob HTTP/2 como medida de precaução. O novo padrão compensa, portanto, as desvantagens que podem surgir de um grande número de solicitações HTTP. Para se beneficiar do HTTP/2, no entanto, o seu site deve ser carregado sobre HTTPS, ou seja, sobre um Certificado SSL ...ordem.

Em qualquer caso, a experiência tem mostrado que não existe uma correlação directa entre o comprimento de uma cascata e a velocidade real de carga. Pelo menos até um certo limite: Em bem mais de 100 consultas na maioria dos casos, há Potencial de poupança.

Se o seu site exceder este limite, você deve dar uma olhada mais de perto nos seus pedidos HTTP. Por exemplo, a nossa página inicial carrega com mais de 130 pedidos HTTP. Portanto, há aqui um potencial de optimização.

Se a sua cascata contém mais de 100 pedidos, veja de perto quais deles pode dispensar.

Dica # 2: Detectar tempo de carga

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

Se o valor máximo do seu eixo X for superior a 10, você deve definitivamente considerar a velocidade de carregamento da sua página.

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

Dica #3: Detectar o tempo de carga percebido

A maioria dos usuários não se preocupa muito com as ferramentas de análise de valores que são cuspidas. A única coisa que conta para eles é: a rapidez com que a página se sente.

Para você como operador do site é, portanto, importante melhorar ao máximo essa sensação de velocidade. Você pode conseguir isso através de um cache otimizado, uma otimização acima da hora ou - se seus clientes estiverem localizados no exterior - o uso de uma Rede de Entrega de Conteúdo (CDN).

Felizmente, também se conhece muito bem este tempo de carregamento de feltro por meio de diagramas de cascata. Para nosso conhecimento, a Webpagetest é a única ferramenta gratuita que pode ser usada entre tecnicamente medido tempo de carregamento e o percebido pelo usuário O tempo de carga é diferente.

O diagrama inteiro representa o - menos importante - tempo de carga técnica. O tempo de carga percebido está escondido entre as linhas azul e verde no diagrama.

A linha verde indica quando o primeiro elemento visual da página web é carregado (este é chamado de ponto "Start Render"). A linha azul indica quando o usuário percebe 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 não é apresentado nenhum conteúdo visível. Até o final desta fase o visitante só vê uma página branca. A área azul marca o intervalo de tempo entre o Start Render e o Load Time, durante o qual o visitante pode perceber um processo de renderização visível (por exemplo, uma ampulheta). Ambos juntos formam o tempo de carga percebido.

Webpagetest, é a única ferramenta que lhe pode dar esses dados. Das ferramentas do Pingdom Tools ou GTMetrix não sabemos isto. Portanto, esta regra só se aplica se você Utilizações da 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, você também depende do seu anfitrião que fornece este serviço. Muitos operadores de websites não têm certeza se este é realmente o caso para eles ou não.

Uma das maiores vantagens do HTTP/2 é o processamento simultâneo de vários pedidos. E você pode ver isto claramente no seu diagrama da 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 típico de carregamento de uma WordPress página sem HTTP/2. Os pedidos HTTP individuais são executados um após o outro. À direita você vê como a mesma página se comporta com o HTTP/2: Os pedidos individuais são carregados aqui simultaneamente.

Carregue pedidos únicos em paralelo, a sua página será executada com HTTP/2.

Dica #5: Reconheça as fotos que são muito 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 optimizar as suas fotografias mostra-lhe, por exemplo, de forma sensata:

No diagrama da cascata, as imagens podem ser rapidamente identificadas usando a legenda: Webpagetest mostra-as com barras roxas, Pingdom com um ícone. Apenas a GTMetrix não identifica separadamente as imagens. Em qualquer caso: Se as barras correspondentes forem muito maiores do que as barras dos pedidos 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 vívido de imagens não comprimidas. Só alguns dos arquivos levam mais de 8 segundos para serem carregados, tornando a página inteira mais lenta.

Em um caso como o acima, você deve dar uma olhada de perto nas suas fotos. Ao clicar na solicitação correspondente, você geralmente pode ver em um diagrama de cachoeira exatamente quais arquivos estão envolvidos. Isto torna a procura de travões de tempo de carga muito mais fácil.

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

Dica #6: Rastreamento

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

Os pedidos com encaminhamentos são normalmente destacados em cores. O diagrama também mostra qual o encaminhamento que está configurado e para onde ele leva.

WordPress  otimizar Identificar o encaminhamento
Esta página tem vários 302 redirecionamentos seguidos.

Assim, com um diagrama de cachoeira 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 DNA. Graças às marcações amarelas, já conseguimos detectar várias vezes redirecionamentos desnecessários ou mesmo prejudiciais.

As linhas amarelas marcam Forwarding.

Dica #7: Detectar erros num relance

Ocasionalmente acontece que os elementos de uma página web não são renderizados corretamente. Isso pode afetar as estruturas do AdSense, 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 ejeta um erro 404.

Neste caso, o diagrama da cascata ejeta uma mensagem de erro e marca a linha com a consulta relevante em vermelho. O diagrama também indica qual erro está envolvido e qual recurso está produzindo o erro.

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

Com o Folha de respostas todas as dicas em vista

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á espaço para melhorias:

  • A cascata é muito longa (mais de 100 pedidos)?
  • O valor máximo do eixo X é muito grande (maior que 10)?
  • Pedidos de carga em paralelo (via HTTP/2)?
  • As imagens são demasiado grandes (ou seja, as imagens estão mal optimizadas)?
  • As linhas verde e azul estão muito afastadas para a direita ou muito afastadas (assim o usuário percebe a página como lenta)?
  • Existem linhas amarelas inesperadas (redireccionamentos)?
  • Existem linhas vermelhas (erros)?

Concedido: na primeira vez, pode demorar mais tempo a analisá-lo. Com um pouco de experiência, no entanto, os diagramas de cascata permitem-lhe compreender muito melhor os seus WordPress projectos e optimizá-los mais profundamente.

RAIDBOXER da primeira hora e Chefe de Suporte. No Bar- e WordCamps ele gosta de falar sobre PageSpeed e o desempenho do site. A melhor maneira de suborná-lo é com um café expresso - ou pretzel bávaro.

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