Uma cadeia de solicitações críticas é uma série de solicitações que dependem umas das outras e são essenciais para o carregamento da página. Ela segue o Critical Rendering Path, que determina a ordem em que as solicitações são processadas e executadas.
Cadeias longas de solicitações críticas, especialmente as que envolvem recursos importantes, podem deixar o carregamento da página significativamente mais lento porque bloqueiam o renderização. Reduzir o número dessas cadeias diminui a latência e acelera o tempo de carregamento.
- O encadeamento de solicitações críticas pode causar carregamentos mais lentos e tempos de resposta piores no seu site.
- Todos os recursos vitais são renderizados na ordem especificada no seu código HTML, o que pode atrasar a primeira exibição do conteúdo nas telas dos visitantes, dependendo do tamanho dos recursos e do comprimento da cadeia.
Este guia explora diferentes métodos para evitar o encadeamento de solicitações críticas no seu site. Vamos começar pelo básico.
Como as cadeias de solicitações críticas afetam a velocidade do site
No início do processo de carregamento, o navegador lê o HTML e lida com as solicitações críticas de acordo com seus níveis de prioridade. Normalmente, o HTML é priorizado primeiro, seguido por CSS, imagens e JavaScript.
Cadeias longas dessas solicitações críticas podem deixar o site mais lento, aumentando a latência e prolongando os tempos de carregamento. O atraso total é a soma do tempo necessário para baixar todos os recursos da cadeia de solicitações críticas mais longa.
- Você pode melhorar o desempenho do site e a experiência do usuário reduzindo o número desses recursos críticos.
- Isso pode ser feito atrasando o download, removendo-os por completo ou reduzindo o comprimento dos caminhos críticos.
Entendendo as solicitações críticas: perspectiva do Lighthouse
Uma solicitação crítica envolve qualquer recurso necessário para renderizar a página. O Lighthouse define uma solicitação crítica como:
- Não pré-carregada
- Bloqueante para a renderização
- Declarada com prioridade média, alta ou muito alta.
Essas solicitações geralmente incluem elementos como o título de uma publicação de blog ou imagens de um hero banner, que devem aparecer imediatamente na tela do visitante.
Análise de solicitações críticas com o GTmetrix
O GTmetrix descreve uma solicitação crítica como:
- Bloqueante para a renderização
- Não pré-carregada
- Declarada com prioridade média, alta ou muito alta.
Quando existe pelo menos uma dessas cadeias, o GTmetrix inicia uma auditoria. Em seguida, exibe a cadeia de solicitações críticas mais longa, detalhando cada solicitação e mostrando a latência máxima do caminho crítico.
Como evitar o encadeamento de solicitações críticas
Para melhorar o desempenho do seu site evitando o encadeamento de solicitações, você pode adotar o método de pré-carregamento das solicitações essenciais. Essa técnica especifica quais arquivos devem ser carregados no início do processo de carregamento por serem críticos para renderizar a parte visível da página.
Veja como implementar isso de forma eficaz:
Nota: É uma boa ideia fazer backup do seu site antes de fazer qualquer alteração. Se algo der errado, você poderá restaurar rapidamente o site para o estado anterior*. Você pode usar o WP Staging para fazer backups automáticos com facilidade. Consulte o guia de backup e restauração para mais ajuda.*
Pré-carregar as solicitações principais
Identifique os recursos mais críticos que afetam o carregamento da página. Geralmente incluem arquivos CSS, JavaScript, fontes e imagens "above the fold".
Use o atributo rel= "preload" na seção <head> do HTML para instruir o navegador a carregar esses recursos cedo. Isso é fundamental para recursos como CSS e JavaScript, que bloqueiam o renderização.
Especifique corretamente o tipo de conteúdo pré-carregado usando o atributo as (por exemplo, as= "script" para JavaScript). Isso ajuda o navegador a priorizar esses recursos de forma eficaz.
Plano B: usar o WP Rocket para pré-carregar
Se você prefere uma abordagem mais simples baseada em plugins, o WP Rocket é uma ferramenta altamente recomendada para automatizar o pré-carregamento das solicitações essenciais.
O WP Rocket facilita o pré-carregamento de fontes e outros recursos críticos diretamente do seu domínio, garantindo que esses recursos sejam carregados rapidamente para reduzir o bloqueio de renderização.
Além disso, o WP Rocket oferece recursos como otimização da entrega de CSS, incluindo opções para remover CSS não utilizado e carregar CSS de forma assíncrona. Isso melhora ainda mais o desempenho do site ao reduzir o impacto do CSS bloqueante.
Reduzir o número de recursos críticos
Acelere seu site minimizando o CSS e o JavaScript essenciais necessários para o conteúdo "above the fold". Otimize o carregamento atrasando CSS e JavaScript não críticos ou removendo-os completamente. Essa estratégia ajuda o navegador a carregar o conteúdo importante mais rápido, evitando recursos desnecessários, como CSS e JS não utilizados.
Para reduzir o número de recursos críticos no seu site usando o plugin WP Rocket, siga estes passos para habilitar opções específicas de otimização na aba "File Optimization":
- Minify CSS Files: Marque esta opção para comprimir seus arquivos CSS, removendo espaços em branco e comentários desnecessários. Isso reduz o tamanho dos arquivos e acelera o carregamento.
- Optimize CSS Delivery: Selecione esta opção para eliminar o CSS bloqueante no seu site, ajudando a renderizar páginas mais rapidamente. Lembre-se de que apenas um método pode ser selecionado nas configurações de otimização de CSS.
- Minify JavaScript Files: Ative esta opção para comprimir seus arquivos JavaScript removendo espaços e comentários.
- Combine JavaScript Files: Se o seu site não usa HTTP/2, considere combinar arquivos JavaScript internos e de terceiros para reduzir requisições HTTP.
- Load JavaScript Deferred: Marque esta opção para adiar o carregamento de arquivos JavaScript até o término do parsing do HTML, o que pode melhorar significativamente os tempos de carregamento.
Evitar o encadeamento de solicitações com ‘font-display‘
Para evitar o encadeamento de solicitações e melhorar o desempenho do site, você pode usar a propriedade font-display para controlar como as fontes web são exibidas durante o carregamento. Aqui estão os passos e valores que você pode usar:
Defina os valores de font-display:
- Auto: Usa a estratégia padrão do navegador.
- Block: Mostra um marcador invisível até que a fonte seja carregada.
- Swap: Usa uma fonte alternativa até que a fonte web seja carregada e depois troca por ela.
- Fallback: Esconde brevemente o texto e usa uma fonte alternativa até que a fonte web seja carregada.
- Optional: Similar ao fallback, mas o navegador pode decidir não usar a fonte web.
Para a maioria dos navegadores modernos, recomenda-se usar font-display: swap; porque evita o Flash of Invisible Text (FOIT).
- Implementando font-display: Adicione a propriedade font-display às suas regras @font-face no CSS:
@font-face {
font-family: 'Your Font';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}- Pré-carregando fontes: Use a tag
<link rel="preload">no<head>do HTML para garantir que as fontes sejam carregadas cedo no processo de renderização:
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Pré-carregar fontes usando o WP Rocket
Carregar fontes rapidamente é importante para evitar deslocamentos de layout no site. O WP Rocket, um plugin popular do WordPress, ajuda nisso. Veja como pré-carregar fontes:
Clique na aba "Preload" para acessar as configurações relacionadas ao pré-carregamento de fontes.
Role até a seção "Preload Fonts". Cole as URLs das fontes que você identificou anteriormente no campo indicado, certificando-se de que cada URL esteja em uma nova linha. Em seguida, clique no botão "Save Changes".
Pré-carregar fontes com o WP Rocket ajuda o site a carregar de forma mais suave, reduzindo o CLS e melhorando a experiência do usuário.
Resumo
- Entender e mitigar o impacto do encadeamento de solicitações críticas é essencial para melhorar o desempenho do seu site.
- Resolver esses problemas pode aumentar significativamente as velocidades de carregamento e oferecer uma experiência mais fluida e responsiva.
- Isso melhora a satisfação do usuário e afeta positivamente os rankings de SEO, tornando seu site mais favorável aos mecanismos de busca.
Artigos relacionados
- Como corrigir o erro "Sidebar Not Appearing" no WordPress
- Por que o WordPress está lento + Como resolver
- Por que o backup de dados e a recuperação de desastres são necessários para o WordPress?
- Como reparar e otimizar o banco de dados do WordPress
- Como desfazer alterações no WordPress (revisões, salvamentos automáticos, snapshots)
