Carregamento especulativo está disponível no WordPress

Durante nosso webinar sobre “Carregamento de páginas instantaneamente” no início de 2024, Adam Silverstein do Google mencionou que a equipe de desempenho do WordPress está trabalhando em um plugin que habilitará a API de regras de especulação:

Avançamos para abril de 2024, quando o WordPress lançou oficialmente o Speculative Load, um plugin de desempenho que oferece suporte à API de regras de especulação.

Mas antes de entrarmos nisso, aqui está uma rápida visão geral da API de regras de especulação.

API de regras de especulação explicada

Os parágrafos a seguir são uma explicação concisa da API de regras de especulação do Google. Se você quiser se aprofundar,leia nosso artigo dedicado.

API de regras de especulação é uma tecnologia experimental desenvolvida pelo Google para melhorar o desempenho de futuras navegações de páginas. Com base nas dicas de recursos amplamente disponíveis link rel=prefetchelink rel=prerender, esta API definida por JSON fornece aos desenvolvedores e proprietários de sites uma maneira mais flexível e expressiva de especificar quais documentos devem ser pré-buscados ou pré-renderizados.

Você pode definir facilmente o tipo de carregamento especulativo (pré-busca ou pré-renderização) dentro do inline elementos e arquivos de texto externos referenciados pelo cabeçalho de resposta Speculation-Rules.

Você tem duas opções para ativar a API de regras de especulação:

1. Use padrões de URL: defina quais URLs são elegíveis para pré-busca ou pré-renderização.
   
2. Especifique o nível de “ansiedade”: Use a configuração deansiedadepara indicar quando as especulações devem disparar – “ansioso” dispara as regras de especulação assim que elas são observadas; “moderado” realiza especulações se você passar o mouse sobre um link por 200 milissegundos; “conservador” especula sobre ponteiro ou pouso

Como especificar o nível de “ânsia”

A pré-busca ou pré-renderização de uma página depende das melhorias de desempenho que você deseja realizar:

A pré-busca instrui o navegador a baixar o corpo da resposta das páginas referenciadas, mas não os sub-recursos referenciados pela página. Quando um usuário navega para uma página pré-buscada, ela carrega mais rápido que o normal.

O pré-renderização, por outro lado, instrui o navegador a buscar, renderizar e carregar todo o conteúdo, incluindo sub-recursos e JavaScript, em uma guia invisível. Esse pré-carregamento de recursos leva a uma experiência quase instantânea quando o usuário navega até a página.

Embora os benefícios de desempenho da pré-renderização sejam mais significativos, você deve usar essa tecnologia de carregamento com moderação. A pré-renderização utiliza muita memória e largura de banda da rede, o que pode levar ao desperdício de recursos se o usuário não navegar até a página.

Por outro lado, o custo inicial de uma pré-busca é muito menor do que o de uma pré-renderização, portanto você pode adotar a pré-busca de forma mais ampla.

Pré-renderização e pré-busca no WordPress

Os usuários do WordPress têm conseguido inserir tags de link para pré-busca ou pré-renderização de recursos em documentos HTML há anos, graças à API Resource Hints.

No entanto, o uso de tags carece de flexibilidade porque os URLs devem ser especificados antecipadamente, levando a um possível desperdício de recursos ou à perda de ganhos de desempenho. Além disso, soluções dinâmicas que inserem tags de link com base na visibilidade da janela de visualização oferecem mais flexibilidade, mas ainda podem levar a uma pré-busca excessiva.

Considerando todas estas limitações, a Equipa de Performance ficou altamente motivada para encontrar uma solução melhor…

Carregamento especulativo: o novo plug-in de desempenho do WordPress

O carregamento especulativo permite a pré-renderização ou a pré-busca de outros URLs de front-end vinculados à página.

Uma vez ativado, o plug-in insere automaticamente um script JSON e pré-renderiza quaisquer URLs na página com uma ansiedade “moderada”.

Você pode facilmente alterar esse comportamento padrão e modificá-lo através da seção “Carregamento Especulativo” na tela Configurações > Leitura :

Fonte:WordPress

Além disso, você pode personalizar quais URLs pré-carregar especulativamente usando um filtro chamado “plsr_speculation_rules_href_exclude_paths”. Por exemplo, páginas modificadas com base nas ações do usuário (por exemplo, carrinho) podem ser excluídas da pré-renderização ou da pré-busca.

Aqui está um exemplo de código do filtro:

Fonte:WordPress

Como testar e enviar feedback

A equipe de desempenho do WordPress está incentivando mais pessoas a testar o novo plugin enquanto consideram incluir o recurso no núcleo do WordPress no futuro.

Veja como você pode ajudá-los:

• Instale e ative o plugin Speculative Load em seu site via WP Admin ou o plugin Performance Lab.
• Experimente configurações diferentes na seção “Carregamento especulativo” em Configurações > Leitura.
• Depure como as regras adicionadas pelo plugin acionam o carregamento especulativo para entender melhor o recurso e encontrar possíveis bugs.
• Relate comentários ou bugs no repositório GitHub ou nos fóruns de suporte do plugin.
• Integre seus plug-ins com o filtro “plsr_speculation_rules_href_exclude_paths” para excluir URLs específicos da pré-busca e/ou pré-renderização.
  

Navigation AI da NitroPack: a solução automatizada para experiências instantâneas de página

Navigation AI da NitroPack é um otimizador de desempenho da web baseado em IA que prevê e analisa automaticamente o comportamento do usuário para pré-renderizar páginas inteiras durante a jornada do cliente.

Com base na API Speculation Rules, a solução sem toque permite que desenvolvedores e proprietários de sites forneçam uma experiência de navegação instantânea ao:

1. Aplicar previsões iniciais aprimoradas por IA no carregamento da página com base em dados sem passá-los para a API de regras de especulação (ainda);
2. Analisar o comportamento do usuário, ajustar as previsões e instruir a API de regras de especulação para pré-renderizar (ou pré-buscar) uma página assim que tivermos certeza de qual será a ação a seguir.

Esta combinação de inteligência artificial e API de regras de especulação do Google leva inevitavelmente a resultados de desempenho impressionantes:

• Tempos de carregamento inferiores a 3 segundos.
• Grandes melhorias em LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift)
• Better Core Web Vitals para todo o site

Então, se você quiser deixar seus visitantes impressionados com a rapidez com que suas páginas carregam…

Junte-se à lista de espera do Navigation AI e prepare seu site para experiências instantâneas do usuário →

Perguntas frequentes

O plugin de carregamento especulativo no WordPress usa IA?

Não, o plugin Speculative Load não é alimentado por inteligência artificial (IA). Ele aproveita a API de regras de especulação do Google, inserindo um script JSON em qualquer URL vinculado à página e pré-renderizando-os com uma configuração de entusiasmo “moderado”.

Quais páginas são elegíveis para carregamento especulativo?

Você pode aplicar estratégias de carregamento especulativo a todas as páginas que não são modificadas pelas ações do usuário. Uma boa regra é evitar pré-renderizar ou pré-buscar páginas de checkout e carrinho, pois isso pode levar a uma experiência ruim para o usuário. Além disso, o Google recomenda apenas páginas falsas quando há uma alta probabilidade (mais de 80% das vezes) de que os usuários as carreguem.

Quais navegadores suportam API de regras de especulação?

Embora a API Speculation Rules esteja disponível no Chrome e Edge desde a versão 109, o sub-recurso específico “regras de documento” que permite ao navegador obter a lista de URLs para carregamento especulativo de elementos em uma página está disponível no Chrome 121. Em outras palavras, os usuários precisarão usar o Chrome 121+ ou Edge 121+ para aproveitar todos os benefícios da API de regras de especulação.

Como o Google Analytics lida com o pré-carregamento especulativo?

Se você estiver usando o Google Analytics, não precisará fazer nada, pois o GA lida com a pré-renderização atrasando até a ativação por padrão. Com outras ferramentas, no entanto, as páginas pré-renderizadas podem impactar as análises, e os proprietários de sites podem precisar adicionar código extra para permitir análises apenas para páginas pré-renderizadas na ativação. Isso poderia ser conseguido usando uma Promise, que aguarda o evento prerenderingchange se um documento estiver sendo pré-renderizado.