Atualmente as páginas na web estão repletas de imagens, vídeos e elementos interativos que visam aprimorar a experiência do usuário. No entanto, esses elementos podem tornar o tempo de carregamento de página mais lento.
Com o avanço da tecnologia, um objetivo permanece constante: Desempenho. Todos esperam que suas páginas web sejam carregadas numa velocidade relâmpago.
Uma forma de acelerar o carregamento das páginas web é pré-renderizar ou pré-carregar as páginas antes que o usuário navegue até elas.
Um breve histórico da pré-renderização
Em 2011, a equipe do Chromium introduziu uma forma inicial de pré-renderização no navegador Chrome por meio da tag <link rel="prerender" … >.
Isso permitiu que os desenvolvedores indicassem aos navegadores as páginas que um usuário poderia visitar em seguida. O navegador então buscava e renderizava silenciosamente essas páginas em segundo plano, reduzindo drasticamente o tempo de carregamento quando o usuário navegava para essas páginas.
Apesar dos benefícios, essa implementação inicial de pré-renderização usava muitos recursos de largura de banda e CPU, e poderia levar a problemas de privacidade se o usuário não visitasse as páginas pré-renderizadas. Além disso, você tinha que selecionar manualmente quais links seriam pré-renderizados, o que nem sempre era eficaz ou viável.
Para resolver algumas dessas preocupações, o Chrome preteriu a pré-renderização que usava a sugestão de link rel=prerender em favor do método NoState Prefetch, que envolvia a busca de recursos para uma página sem executar JavaScript ou outras ações potencialmente invasivas à privacidade.
O método NoState Prefetch melhorou o carregamento de recursos, mas não conseguia fornecer um carregamento instantâneo de página tal como a pré-renderização completa.
Apresentando a API Speculation Rules
A API Speculation Rules (Regras de Especulação) é uma nova API experimental definida por JSON que pré-carrega especulativamente URLs antes de navegar até elas, o que resulta em tempos de renderização mais rápidos e experiências de usuário aprimoradas.
A API permite que os desenvolvedores configurem regras com uma estrutura definida no formato JSON em script type="speculationrules" que o navegador pode usar para decidir quais URLs devem ser pré-renderizadas.
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["firstpage.html", "secondpage.html"]
}
]
}
</script>O mesmo se aplica à pré-carregamento, que frequentemente pode ser um bom primeiro passo no caminho para a pré-renderização:
<script type="speculationrules">
{
"prefetch": [
{
"urls": ["firstpage.html", "secondpage.html"]
}
]
}
</script>Os snippets de código acima mostram como a API Speculation Rules funcionou ao especificar uma lista de URLs para pré-carregar ou pré-renderizar.
Recentemente, o Google anunciou novos aprimoramentos na API Speculation Rules, que agora oferece a opção de localização automática de links usando regras de documentos. Funciona usando a busca de URLs do documento com base em uma condição where.
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"href_matches": "/*"
},
{
"not": {
"href_matches": [
"/wp-login.php",
"/wp-admin/*"
]
}
}
]
},
"eagerness": "moderate"
}
]
}
</script>Nesse snippet de código, todas as URLs da página são consideradas para pré-renderização, exceto aquelas que levam às páginas de login e administração do WordPress. Você também especifica um nível de eagerness (ansiedade) — eager (imediatamente), moderate (ao passar o mouse por 200 ms) e conservative (ao passar o mouse ou ao tocar na página).
Os seletores CSS também podem ser usados como alternativa ou em conjunto com as correspondências href para localizar links na página atual:
<script type="speculationrules">
{
"prerender": [{
"source": "document",
"where": {
"and": [
{ "selector_matches": ".prerender" },
{ "not": {"selector_matches": ".do-not-prerender"}}
]
},
"eagerness": "moderate"
}]
}
</script>Ao usar a API Speculation Rules, você pode inspecioná-la usando os serviços em segundo plano Speculative loads na aba Application do Chrome, ao inspecionar a página.
Há mais informações sobre isso — vamos explorá-las na seção de depuração.
Suporte do navegador
A API Speculation Rules é compatível com navegadores modernos baseados no Chromium, incluindo o Chrome e o Edge, a partir de versões específicas.
Isso garante que os usuários de navegadores compatíveis possam se beneficiar de tempos de carregamento mais rápidos, enquanto os usuários de outros navegadores não sofrerão nenhum efeito negativo, pois a API é uma ferramenta de aprimoramento progressivo.
O plugin Speculative Loading do WordPress
Para aproveitar os benefícios da API Speculation Rules no WordPress, a equipe de desempenho do WordPress (incluindo desenvolvedores do Google) publicou recentemente o plugin Speculative Loading. Esse plugin permite o carregamento especulativo de URLs de frontend vinculadas na página.
Até o momento o plugin teve baixa adoção, pois a API ainda está em sua fase inicial, mas recebeu algumas críticas positivas.
Por padrão, o plugin é configurado para pré-renderizar URLs de frontend de WordPress quando o usuário passa o mouse sobre um link relevante. Isso pode ser personalizado por meio da seção Speculative Loading em Settings > Reading.
Isso significa que todas as URLs vinculadas na página são pré-renderizados com uma configuração eagerness de moderate, que normalmente é acionada quando você passa o mouse sobre um link. Dessa forma, você não precisa fazer nada após ativar o plugin; ele simplesmente funciona automaticamente.
Por exemplo, se você já instalou o plugin Speculative Loading em um site WordPress, use o Chrome DevTools para inspecionar o site e clique na aba Elements. Ao rolar para baixo, você notará que um script type="speculationrules" já foi adicionado pra você com as várias regras de especulação (speculation rules).
Ele usa um Regex para especificar os links que devem ser pré-renderizados, especifica os links que não devem ser pré-renderizados e define a ansiedade (eagerness). As seções a seguir explicam essas regras em detalhes.
Limites para evitar o uso excessivo
O Chrome tem limites para evitar o uso excessivo da API:
| Ansiedade (Eagerness) | Pré-carregamento | Pré-renderização |
| imediato/ansioso | 50 | 10 |
| moderado/conservador | 2 (FIFO) | 2 (FIFO) |
Eles evitam o uso excessivo por meio de várias configurações baseadas na urgência e na interação do usuário.
immediateeeager— Não dependem de ações do usuário e, portanto, têm limites mais altos. Permitem ajustes dinâmicos de capacidade, removendo especulações mais antigas.moderateeconservative— Por outro lado, essas configurações são acionadas pelo usuário e seguem o princípio FIFO (First In, First Out) com um limite de 2, substituindo a especulação mais antiga por novas para conservar a memória.
Evite que certas URLs sejam pré-carregadas e pré-renderizadas
É importante observar que as rotas WP-admin são excluídas da pré-renderização e pré-carregamento por padrão. Como desenvolvedor WordPress, cabe a você determinar as rotas que deseja priorizar.
Você pode personalizar as regras de quais tipos de URLs serão pré-carregados especulativamente usando o filtro plsr_speculation_rules_href_exclude_paths.
O exemplo de código a seguir garante que URLs como https://wordpresssite.com/cart/ ou https://wordpresssite.com/cart/book/ sejam excluídas da pré-renderização e pré-carregamento:
<?php
add_filter(
'plsr_speculation_rules_href_exclude_paths',
function ( $exclude_paths ) {
$exclude_paths[] = '/cart/*';
return $exclude_paths;
}
);Às vezes, você pode querer excluir uma URL da pré-renderização e permitir que seja pré-carregada. Por exemplo, uma página com JavaScript do lado do cliente para atualizar o estado do usuário provavelmente não deve ser pré-renderizada, mas seria razoável fazer pré-carregá-la.
Para essa finalidade, o filtro plsr_speculation_rules_href_exclude_paths recebe o modo atual (prefetch ou prerender) para fornecer exclusões condicionais.
Por exemplo, vamos garantir que URLs como https://wordpresssite.com/products/ não possam ser pré-renderizadas, mas ainda permitir que sejam pré-carregadas.
<?php
add_filter(
'plsr_speculation_rules_href_exclude_paths',
function ( array $exclude_paths, string $mode ): array {
if ( 'prerender' === $mode ) {
$exclude_paths[] = '/products/*';
}
return $exclude_paths;
}
);Depuração de regras de especulação para sites WordPress
A depuração de regras de especulação pode ser complicada, pois as páginas pré-renderizadas são renderizadas em um renderizador separado, como uma aba de fundo oculta que substitui a aba atual quando ativada. A equipe do Chrome tem trabalhado muito com as DevTools, permitindo que você faça a depuração com elas.
No Chrome DevTools, navegue até a aba Applications e role para baixo até a aba Speculative loads. Esta área oferece aos desenvolvedores informações detalhadas sobre processos de especulação, incluindo quais URLs foram pré-renderizadas, quais falharam, entre outros detalhes relevantes.
Aqui, você vê que cinco links na página podem ser pré-renderizados com base nas URLs que correspondem às regras definidas no JSON de regras especulativas, conforme mostrado abaixo. Observe como você não precisa listar todas as URLs; as regras do documento permitem que o navegador as escolha a partir dos mesmos links de origem na página.
O “Status” de alguns links é exibido como “Not triggered” (não acionado) — o processo de pré-renderização desses links não foi iniciado. No entanto, quando passamos o mouse sobre os links na página, vemos o status mudar à medida que cada URL é pré-renderizada.
Lembre-se de que o Chrome estabeleceu limites para a pré-renderização, incluindo um máximo de duas pré-renderizações para uma disposição moderada. Assim, ao passar o mouse sobre o terceiro link, podemos ver o motivo da falha para essa URL:
Lembre-se de que o Chrome definiu limites para os pré-renderizadores, incluindo um máximo de dois pré-renderizadores para moderate, portanto, após passar o mouse sobre o terceiro link, vemos o motivo da falha para essa URL:
Também é possível alternar o renderizador usado pelos painéis DevTools com o menu suspenso no canto superior direito ou selecionando uma URL na parte superior do painel e selecionando Inspect:
Esse menu suspenso (e o valor selecionado) é compartilhado em todos os outros painéis, como o painel Network, onde você pode ver que a página solicitada é a pré-renderizada:
No painel Elements você pode ver o conteúdo da página:
Assim como é possível depurar páginas pré-renderizadas, você também pode buscar páginas previamente. Para o plugin “Speculative loading”, certifique-se de selecionar Prefetch como o Speculation Mode.
Agora, quando você inspecionar a página com o DevTools e navegar até a aba Speculative loads, a Action será Prefetch para as várias URLs, e as regras também serão alteradas.
Quando você navega até a aba Network após passar o mouse sobre um link, os recursos pré-carregados são mostrados por último, como pode ser visto na coluna Type. Eles são obtidos com a prioridade mais baixa, pois são para navegações futuras, e o Chrome prioriza os recursos da página atual.
Comparação de desempenho
Até agora, você entendeu o que o plugin “Speculative Loading” faz e como funciona. Chega de teoria; vamos comparar o desempenho de dois sites idênticos no mesmo servidor (Hospedagem de Sites WordPress da Kinsta).
Para isso, criei dois sites WordPress com o painel MyKinsta no mesmo centro de dados (Iowa (US Central), que é impulsionado usando Máquinas Virtuais C3D do Google) e sem instalar nenhum outro plugin para ambos os sites.
O “Bare-site” não tem o plugin, enquanto o “Speculative-site” tem o plugin “Speculative Loading” instalado e ativado no painel WordPress.
É importante saber que a API Speculative Rules só aumenta o tempo gasto para carregar a próxima página que você está prestes a navegar — você não pode julgar isso com base em ferramentas genéricas de desempenho de sites como o Lighthouse.
Testaríamos a velocidade da página carregando uma página de um link interno específico nos dois sites, e usando a aba Network do Chrome DevTools quando você inspecionar o site para ver o tempo de carregamento e outras informações.
Para o “Bare-site”, você percebe que leva mais tempo para carregar, pois todo o processo de carregamento ocorre em movimento e o conteúdo do DOM está apenas sendo carregado:
Mas para o “Speculative-site”, o conteúdo do DOM já foi carregado por meio da API Speculative e armazenado em cache.
A diferença entre os dois sites pode parecer muito pequena. Neste caso, a diferença é de cerca de 0,22 s, mas em um site grande, com mais conteúdo, você começa a notar uma diferença significativa.
Impacto da API Speculation Rules nas análises
O Analytics é essencial para rastrear o uso do site por meio de visualizações de página e eventos e avaliar o desempenho por meio do Real User Monitoring (RUM). É importante que você saiba que a pré-renderização pode afetar as análises.
Por exemplo, o uso da API Speculation Rules pode exigir um código adicional para ativar as análises somente quando as páginas pré-renderizadas forem realmente acessadas. Embora o Google Analytics, o Google Publisher Tag (GPT) e o Google AdSense atrasem o rastreamento até que uma página esteja ativa, nem todos os provedores fazem isso por padrão.
Para lidar com isso, um Promise pode ser configurado para inicializar o Analytics somente quando a página for ativada:
// Promise to activate analytics on page activation for prerendered pages
const whenActivated = new Promise((resolve) => {
if (document.prerendering) {
document.addEventListener('prerenderingchange', resolve);
} else {
resolve();
}
});
async function initAnalytics() {
await whenActivated;
// Initialize analytics
}
initAnalytics();Resumo
Este artigo explica o que é a API Speculative Rules, como ela funciona e como você pode usá-la em um site WordPress. Ainda é um recurso experimental, mas está sendo gradualmente adotada em massa.
As regras de especulação ainda são limitadas a páginas dentro da mesma aba, mas há esforços em andamento para reduzir essas restrições.
Também é importante saber que uma parte significativa do desempenho do seu site depende da qualidade da sua hospedagem. Na Kinsta, somos conhecidos por fornecer Hospedagem premium de WordPress com dezenas de recursos do mais alto nível.
Nossa infraestrutura é totalmente conteinerizada e alimentada exclusivamente pelo Google Cloud Platform na rede de nível premium do Google, o que nos permite fornecer a você uma grande seleção dos servidores de dados mais rápidos, desempenho incrível, cache no nível de servidor, recursos dedicados e segurança aprimorada.
Veja o que nossos clientes dizem ou entre em contato conosco para saber mais sobre nossa solução de hospedagem gerenciada e como ela se destaca.
O que você pensa sobre a API Speculative Rules e sua introdução no WordPress? Compartilhe nos comentários abaixo!
Deixe um comentário