Alguns administradores de sítios WordPress estão obcecados com o PageSpeed Insights ou o GTmetrix. O meu conselho, e o de muitos outros que sabem muito mais sobre o assunto, é que não se deve dar a essas métricas mais importância do que elas têm.
Se a velocidade de carregamento for boa, não é necessário pôr tudo "a verde". Em muitos casos, é até contraproducente, porque pode cair numa otimização excessiva ou, pior ainda, pode acabar por estragar várias coisas ao tentar corrigir uma.
No entanto, quer seja um aficionado do WPO, um entusiasta da otimização ou apenas queira tentar melhorar a capacidade de resposta do seu sítio, estas ferramentas são quase essenciais. O problema é que elas oferecem "imagens fixas" tiradas de servidores externos. Mas o que acontece quando você, como administrador, navega no seu sítio? O que acontece com os anúncios que carregam tarde ou com o menu que salta quando está prestes a clicar?
Origem
O Speed Auditor nasceu como resposta a uma necessidade pessoal de ter várias ferramentas de diagnóstico locais simples mas poderosas. Não se trata de um plugin de otimização (não altera nada no seu código), mas sim de um plugin de auditoria em tempo real.
Se procura um bom plugin, possivelmente o melhor, pago para o WPO, com o qual possa fazer alterações e afinações, dê uma vista de olhos ao Perfmatters. Se, por outro lado, procura algo gratuito e simples, sem se chatear com configurações e ajustes, mas com muitas possibilidades, pode experimentar o WPO Rocket Tweaks de Fernando Tellado, disponível no repositório do WordPress.
Se não sabe o que é um nó DOM ou uma métrica de latência, não se preocupe. O Speed Auditor foi concebido para o ajudar a compreender o seu Web site num relance:
- O indicador inteligente: Aparecerá um ícone que muda de cor na sua barra de administração. Se estiver Verde, o seu LCP (o tempo que demora a ver as coisas mais importantes) está ótimo. Se ficar laranja ou vermelho, algo precisa da sua atenção.
- Auditoria enquanto navega: Não precisa de configurar nada de complexo. Ativa o plugin e, enquanto verifica as suas mensagens, ele trabalha em segundo plano, analisando se as suas imagens são demasiado pesadas ou se o seu servidor está a responder com lentidão.
- Relatórios mais humanos: Com um clique, descarregue um ficheiro .txt que pode enviar ao seu programador ou guardar para comparar resultados após a aplicação de alterações.
Sob o capot
A versão 1.1.8 tenta fornecer alguma profundidade de diagnóstico para poupar tempo na consola do browser.
- Identificação exacta do LCP: O plugin detecta exatamente qual o elemento (imagem ou bloco de texto) que desencadeou o Largest Contentful Paint.
- Análise da profundidade do DOM: Crucial para evitar o "tamanho excessivo do DOM". O Speed Auditor decompõe o número de nós por zonas (Cabeçalho, Conteúdo, Rodapé) e avisa-o se o aninhamento exceder 15-20 níveis.
- Monitor de Latência de Mídia: Mede o tempo real de transferência (Resource Timing API) das imagens. Se uma imagem demorar 500 ms a ser transferida, o plug-in marca-a como crítica.
- Impacto zero no servidor: Todo o processamento ocorre no lado do cliente (navegador). Não existem consultas pesadas à base de dados ou processos PHP que tornem o sítio mais lento.
O grande salto. Em breve: Speed Auditor 1.1.9 (com "Radar CLS")
Até agora, o Cumulative Layout Shift (CLS) era uma figura abstrata num relatório. Sabia-se que algo se estava a mover, mas nem sempre se sabia o quê. Muito em breve, na versão 1.1.9, isto irá mudar.
Será introduzido o botão "Highlighter" do radar ou do CLS Visual.
Imagine ativar um modo "radar" que desenha caixas vermelhas sobre qualquer elemento que se mova enquanto se desloca. Isto, que algumas extensões já fazem, com mais ou menos sucesso, é sempre uma ajuda visual muito útil para tentar apanhar os "excessos" que por vezes escapam à vista.
- É um banner do AdSense que está a promover o seu conteúdo? Verá que tem uma caixa vermelha. Pode aprofundar este problema aqui.
- Trata-se de uma imagem sem dimensões definidas? O radar vai apanhá-la.
- Persistência total: Poderá navegar por todo o seu sítio web com o radar ligado; o plugin lembrar-se-á de que pretende continuar a auditar visualmente cada canto.
Esta atualização incluirá também um pequeno glossário técnico, que será alargado para incluir dicas e tutoriais, que serão integrados no seu painel de controlo do WordPress, para que termos como ins, iframe ou figure deixem de ser um mistério.
A ideia é melhorar tanto a resposta da análise como os relatórios gerados à medida que a vou testando em diferentes cenários e se recebo sugestões de melhoria ou avisos de erros.
A versão 1.1.8 já está disponível para arrumar as suas métricas e, em breve, a 1.1.9 facilitará ainda mais a correção da estabilidade visual do WordPress. Se o instalar agora, receberá a atualização em breve.
Como é que funciona?
O código segue estas três etapas:
1. O Observador de Desempenho
O navegador (Chrome, Edge, Opera) tem uma API nativa chamada API de desempenho. O plug-in regista um "observador" chamado PerformanceObserver especificamente configurado para o tipo de entrada layout-shift.
Sempre que algo se move no ecrã depois de ter sido inicialmente pintado, o browser gera um evento. O plugin captura esse evento e extrai dois dados importantes:
- O valor do desvio: (Este número é 0,0145).
- O elemento culpado: O browser indica ao plugin exatamente qual o nó HTML que foi movido.
2. O filtro "Interação recente
É aqui que o plugin tenta ser inteligente. Nem todos os movimentos são "maus". Se clicar num menu pendente e o conteúdo se deslocar para baixo, esse é um movimento esperado pelo utilizador.
O plug-in verifica uma propriedade chamada hadRecentInput. Se tiver tocado numa tecla ou clicado nos últimos 500 ms, o browser marca esse movimento como "esperado" e o plug-in ignora-o para evitar falsos positivos. Só detecta movimentos que ocorrem inesperadamente (como um anúncio que aparece de repente).
3. Representação visual (as caixas vermelhas)
Assim que o plugin tiver o elemento que foi movido, a parte visual entra em ação:
- Cálculo de coordenadas: Utiliza uma função chamada getBoundingClientRect() para descobrir onde esse elemento se encontra no ecrã nesse preciso momento (pixel acima, pixel à esquerda).
- Injeção de moldura: Crie uma
divcom posição absoluta, um rebordo vermelho de 2px e umíndice zmuito elevado para desenhar em cima de tudo. - A etiqueta: Adicione uma pequena caixa no canto superior esquerdo da caixa vermelha com o nome da etiqueta (ins, img, div) e o valor do CLS acumulado.
Por que razão é melhor do que um relatório externo?
Por vezes, ferramentas como o PageSpeed não detectam os CLS porque não se deslocam para o fundo ou não esperam que determinados anúncios sejam carregados.
O plug-in, ao utilizar a persistência, mede o CLS acumulado ao longo da sessão de navegação do utilizador real. Se um elemento se mover um pouco no início e um pouco ao deslocar-se, o plugin soma-o e destaca-o, dando-lhe o valor real mais aproximado que a Google acabará por ver no seu relatório"Chrome User Experience" (CrUX).
