Imagens, PHP e outros ganhos de velocidade

Módulo 6: Velocidade · Tempo de leitura: 9 minutos

Objetivo de aprendizagem: Após esta lição, será capaz de aplicar os maiores ganhos de velocidade restantes e medir o seu efeito.

Conceitos-chave: otimização de imagens, WebP e AVIF, lazy loading, a imagem LCP, fetchpriority, versão de PHP, limpeza da base de dados (revisões, transients, autoload), WP-Cron, cron real, DISABLE_WP_CRON, tipos de letra externos, Heartbeat

Trabalhe pela ordem certa

Depois de uma cache de página (lição 6.2), estes são os ganhos que mais compensam, mais ou menos por ordem de esforço face ao efeito:

1. imagens em ordem;
2. uma versão atual de PHP;
3. menos elementos externos e plugins pesados;
4. uma base de dados organizada;
5. tarefas agendadas num cron real.

Meça antes e depois de cada passo (lição 6.1), caso contrário não saberá o que ajudou. E faça uma coisa de cada vez.

Imagens: o maior ganho no navegador

Na maioria das páginas, as imagens são a maior parte do que um visitante transfere. O que aprendeu na lição 4.4 compensa aqui:

• Dimensão correta: não carregue imagens maiores do que o necessário e deixe o WordPress oferecer formatos mais pequenos através de srcset.
• Compressão e formato: o WebP é geralmente bastante mais pequeno do que o JPEG com qualidade equivalente; o AVIF é muitas vezes ainda mais pequeno. Um plugin pode converter imagens existentes e fornecer a versão mais pequena aos navegadores que a suportam. Verifique se a conversão acontece no seu próprio servidor ou num serviço externo.
• Lazy loading, mas não para tudo. O WordPress atribui automaticamente loading="lazy" às imagens, exceto à primeira imagem grande no topo. Essa imagem é frequentemente o elemento LCP (lição 6.1): o maior bloco de conteúdo que o visitante vê em primeiro lugar. Se essa imagem for carregada de forma lazy, o navegador adia precisamente o seu carregamento e o seu LCP piora. Por isso, o WordPress atribui muitas vezes fetchpriority="high" à candidata a LCP, para que o navegador a obtenha em primeiro lugar.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Oficina com bicicletas enfileiradas">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="A equipa em frente à loja">

Uma armadilha: alguns temas, criadores de páginas e plugins de otimização aplicam lazy loading também à primeira imagem, ou carregam a imagem grande como fundo via CSS (que é detetada mais tarde). No PageSpeed Insights, na secção LCP, consegue ver qual é o elemento e se está a ser carregado de forma lazy.

PHP: velocidade gratuita

Cada nova versão principal do PHP é mais rápida do que a anterior, e os sites WordPress beneficiam disso diretamente, sem alterar nada no seu site. Além disso, as versões antigas deixam de receber atualizações de segurança (lição 8.4). Ao mudar de versão, verifique se os seus plugins e o seu tema suportam a nova versão, e faça-o de preferência primeiro num ambiente de testes (staging).

Nas definições de PHP, veja também:

• OPcache: está ativo por predefinição na maioria dos alojamentos (hosting). Uma consequência: um ficheiro PHP alterado pode demorar algum tempo até o PHP utilizar a nova versão.
• memory_limit: demasiado baixo causa erros em páginas pesadas; demasiado alto não torna o seu site mais rápido.

Elementos externos e plugins pesados

Cada elemento de outra parte é uma ligação extra e um tempo de espera extra: tipos de letra de um serviço externo, um vídeo incorporado, um widget de chat, códigos de medição, botões de redes sociais, um mapa. Perguntas a fazer sobre cada elemento:

• É necessário? Um vídeo que quase ninguém reproduz pode também ser uma imagem com uma ligação.
• Pode ser local? Os tipos de letra podem normalmente ser colocados no seu próprio servidor (com um plugin ou através do theme.json num tema de blocos). Isso poupa uma ligação e é melhor para a sua privacidade (lição 9.3).
• Pode ser mais tarde? Um widget de chat ou um vídeo pode só carregar após um clique.

No caso dos plugins, ajuda medir com X-Ray (em alojamento com CloudLinux) ou com um plugin como o Query Monitor (ativar temporariamente, visível apenas para administradores). Estes mostram qual o plugin que consome mais consultas à base de dados ou tempo.

Limpar a base de dados

Uma base de dados cresce com coisas que não vê:

• Revisões (lição 4.1): cada versão guardada de cada página. Limite-as com WP_POST_REVISIONS e limpe as antigas.
• Comentários de spam e no lixo, e artigos no lixo.
• Transients: dados temporários de plugins em wp_options, que por vezes não são limpos.
• Autoload: as opções em wp_options com autoload ativo são carregadas de uma só vez em cada pedido. Plugins que já removeu há muito tempo deixam por vezes grandes quantidades de dados para trás. O Diagnóstico do site (lição 5.4) avisa quando os dados de autoload são muito grandes.
• Tabelas de registo (log) de plugins (estatísticas, registos de segurança, registos de e-mail) que nunca são esvaziadas.

A limpeza pode ser feita com um plugin de limpeza, com WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), ou com a função de otimização do phpMyAdmin para as próprias tabelas. Faça sempre primeiro uma cópia de segurança. Não remova nada que não saiba o que é.

Tarefas agendadas: WP-Cron

O WordPress tem tarefas que precisam de ser executadas num determinado momento: publicar um artigo agendado, verificar atualizações, fazer funcionar um plugin de cópias de segurança. Isto chama-se WP-Cron. Por predefinição, o WP-Cron não funciona por relógio, mas por visita: a cada pedido de página, o WordPress verifica se há uma tarefa pronta. Duas desvantagens:

• Com poucos visitantes, as tarefas executam-se demasiado tarde (um artigo agendado só aparece na primeira visita seguinte).
• Com muitos visitantes, a verificação é feita com muita frequência, e uma tarefa pesada pode precisamente atrasar a página de um visitante.

Melhor: desative o WP-Cron nas visitas e deixe um cronjob real do servidor executá-lo a cada cinco ou dez minutos. No wp-config.php (acima de "pare de editar"):

define( 'DISABLE_WP_CRON', true );

E no ecrã de cron do seu painel de alojamento, uma tarefa, a cada 10 minutos:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

O caminho para o PHP e para o seu site varia consoante o alojamento; consulte o manual do seu painel. Ou utilize WP-CLI: wp cron event run --due-now. Verifique depois no Diagnóstico do site que não há tarefas agendadas em atraso.

Heartbeat e o painel de administração

O painel de administração do WordPress comunica com o servidor a cada 15 a 60 segundos enquanto estiver aberto (o Heartbeat): para guardar automaticamente, para avisar que outra pessoa está a editar o mesmo artigo, e para notificações. Se deixar dez separadores com o painel de administração abertos o dia todo, isso traduz-se em milhares de pedidos. Feche os separadores que não estiver a utilizar. Alguns plugins de cache podem abrandar o Heartbeat; desativá-lo por completo não é necessário e quebra o guardar automático.

Resumo

• Depois da cache de página: imagens, versão de PHP, elementos externos e plugins, base de dados, cron. Meça antes e depois, um passo de cada vez.
• Lazy loading para tudo exceto a imagem grande no topo; esta deve antes receber fetchpriority="high".
• Uma versão mais recente de PHP é velocidade gratuita, desde que os seus plugins acompanhem.
• Limpe revisões, transients, spam e dados de autoload grandes, sempre com uma cópia de segurança.
• Coloque o WP-Cron num cronjob real com DISABLE_WP_CRON e uma tarefa no seu painel.

Questionário

Exercício

Exercício A6.3: Lazy loading e formatos na página inicial do seu site. Introduza o endereço do seu site. O programa lê a página inicial e analisa as imagens: a primeira imagem grande não tem loading="lazy" (e idealmente tem fetchpriority="high"), as imagens mais abaixo têm lazy loading, e qual a proporção de imagens em WebP ou AVIF?

Exercício D6.3: Antes e depois. Meça uma página do seu site três vezes no PageSpeed Insights (versão móvel) e anote o LCP médio, o INP (ou o valor de laboratório Total Blocking Time se não houver dados de campo), o CLS e o TTFB do exercício A6.1. Depois, aplique uma melhoria desta lição (imagens, versão de PHP, remover um elemento externo, limpar a base de dados ou um cron real). Meça novamente três vezes e anote os novos valores. Descreva o que fez e se a diferença é maior do que a oscilação normal entre medições.

Leitura adicional

Estes artigos descrevem os passos nos painéis da WebOké; noutros painéis funcionam de forma semelhante.

• Manual DirectAdmin 14.1: Escolher a versão do PHP (Select PHP version)
• Manual DirectAdmin 12.7: Verificar, reparar e otimizar um banco de dados
• Manual DirectAdmin 15.1: Tarefas Cron Jobs: executar tarefas automaticamente
• Criar um cronjob ou tarefa (e o que fazer se não estiver a funcionar)
• Manual DirectAdmin 17.4: X-Ray: detetar páginas lentas
• Ligar o WP-Cron ao cron do sistema (developer.wordpress.org, Inglês): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading e LCP (web.dev, Inglês): https://web.dev/articles/lcp-lazy-loading