Como usar a API de regras de especulação para carregar páginas da Web instantaneamente

2024 parece ser o momento em que o carregamento instantâneo se tornará o novo padrão de desempenho na web, e os proprietários de negócios online estão todos ouvidos.

No entanto, a transição de rápido para instantâneo já está em andamento há algum tempo.

Já em 2009, a busca por um carregamento de página mais rápido e eficiente levou a equipe do Chromium a criar as primeiras dicas de recursos, às quais o link rel=”prerender” foi posteriormente adicionado.

Esperava-se que tivesse um impacto significativo no desempenho, uma vez que envolvia o carregamento de páginas subsequentes em segundo plano antes que o usuário navegasse até elas, garantindo uma renderização mais rápida quando a transição ocorresse.

No entanto, esta versão de pré-renderização não se mostrou eficiente o suficiente e foi descontinuada em 2017.

Avançando até hoje, o Google lançou desenvolvimentos promissores em sua API de regras de especulação, permitindo uma abordagem mais sofisticada para pré-renderização completa e desbloqueio de navegação na web verdadeiramente contínua.

O que é a API de regras de especulação do Google?

A API Speculation Rules é uma API definida por JSON desenvolvida pelo Google para melhorar o desempenho do carregamento de páginas da web por meio de estratégias de carregamento especulativo.

O carregamento especulativo envolve a previsão e o pré-carregamento de recursos para navegações subsequentes nas páginas, levando a tempos de renderização mais rápidos e melhores experiências do usuário. O Google introduziu esta API para fornecer aos desenvolvedores uma maneira mais flexível e expressiva de especificar quais documentos devem ser pré-buscados ou pré-renderizados.

Detalhes importantes sobre a API de regras de especulação:

• Direcionamento de URLs de documentos: ao contrário dos mecanismos tradicionais de pré-busca que visam arquivos de recursos específicos, a API de regras de especulação concentra-se em URLs de documentos. Isso o torna particularmente adequado para aplicativos de múltiplas páginas (MPAs), em vez de aplicativos de página única (SPAs).

• Pré-renderização e pré-busca: a API oferece suporte a estratégias de pré-renderização e pré-busca. A pré-renderização envolve buscar, renderizar e carregar conteúdo em uma guia invisível, pronta para ativação quase instantânea quando o usuário navega até a página. A pré-busca, por outro lado, baixa e salva os recursos especificados da página (por exemplo, documento, imagem, script, etc.), otimizando o tempo de carregamento quando o usuário navega posteriormente para essas páginas.

• Suporte ao navegador: a API é atualmente compatível com todos os navegadores baseados em Chromium, incluindo Chrome, Edge, Opera, Chrome Android, Opera Android e WebView Android. Para uma análise completa da compatibilidade, consulte a documentação da Mozilla:

Você também pode verificar se os navegadores suportam a API com o seguinte código:

• Alternativa para recursos obsoletos: serve como uma alternativa para tecnologias mais antigas, como o recurso obsoleto somente do Chrome , oferecendo melhor desempenho e sintaxe mais expressiva.
• Consideração de segurança: as pré-buscas entre sites têm limitações para proteger a privacidade do usuário. A pré-busca entre sites funciona somente se o usuário não tiver cookies definidos para o site de destino, evitando possível rastreamento da atividade do usuário.
  

Por que usar API de regras de especulação em seu site?

A API Speculation Rules permitecarregamentos de páginas quase instantâneos para experiências de navegação perfeitas.

Tempos de carregamento de página aprimorados,maior satisfação do usuário e vantagens potenciais de SEOsão motivos convincentes para os desenvolvedores adotarem essa tecnologia.

Ao reduzir a latência entre as navegações nas páginas, os usuários percebem o site como mais fluido e responsivo. Isso se torna claramente visível noCore Web Vitals do seu site, onde Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP) diminuem drasticamente.

Com experiências de navegação instantânea, ocorrem taxas de rejeição mais baixas e maior retenção de usuários– métricas vitais para o sucesso de sua plataforma online. Ressaltando assim o valor estratégico da integração da API de Regras de Especulação.

Como funciona a API de regras de especulação?

A API de regras de especulação do Google foi projetada para direcionar URLs de documentos em vez de arquivos de recursos específicos. A API Speculation Rules introduz uma sintaxe mais expressiva e configurável para especificar quais documentos devem ser pré-buscados ou pré-renderizados.

Com uma estrutura definida no formato JSON dentro de um script type="speculationrules", os desenvolvedores podem articular regras tanto para pré-renderização quanto para pré-busca. Essa flexibilidade aprimorada permite o ajuste fino do carregamento especulativo.

Recentemente, o Google anunciou uma nova melhoria na API de regras de especulação no Chrome 121, que agora oferece a opção de localização automática de links.

Isso é feito por:

• Especificando a origem do documento
• Seleção de links na página com base em URLs ou seletores CSS
• Especificar um nível de “ansiedade” – ansioso (imediatamente), moderado (ao passar o mouse por 200 ms) e conservador (ao passar o mouse ou tocar)

No entanto, se você é novo na API de regras de especulação, recomendamos que primeiro teste as diferentes configurações abaixo.

Como usar a API de regras de especulação do Google

A API Speculation Rules permite que os desenvolvedores sigam uma abordagem estruturada para otimizar os processos de pré-renderização e pré-busca.

Configurar

Ele começa primeiro criando um elemento script type="speculationrules" e definindo regras de especulação em uma estrutura JSON dentro dele.

As regras de especulação podem ser adicionadas na cabeça ou no corpo do quadro principal.

Importante: As regras de especulação em subquadros não são postas em prática, e as regras de especulação em páginas pré-renderizadas só são postas em prática quando o usuário navega para a própria página.

As regras de especulação podem ser incluídas estaticamente ou dinamicamente.

• A configuração estática é feita no HTML da página (perfeito para sites onde a próxima ação tem alta certeza, por exemplo, um site de notícias pode querer pré-renderizar o destaque do dia)
• A configuração dinâmica é feita via JavaScript (adequado para sites onde experiências de usuário personalizadas são muito utilizadas)

Importante: Ao optar pela configuração dinâmica, consulte sempre a documentação de suporte para desenvolvimentos futuros e casos de uso que possam estar disponíveis no futuro.

Para informar ao navegador quais URLs devem serpré-renderizados , você pode inserir instruções JSON em suas páginas:

Da mesma forma, insira as seguintes instruções JSON para pré-busca :

É possível adicionar múltiplas regras de especulação a uma página; nesse caso, você instruiria o navegador em qualquer um dos seguintes níveis:

• Lista de URLs
• Múltiplas regras de especulação
• Várias listas dentro de um conjunto de regras de especulação
  

Especificando rotas para pré-renderização/pré-busca

O ajuste fino do carregamento especulativo envolve a especificação de rotas para pré-renderização e pré-busca. Ao categorizar as páginas com base em sua importância ou probabilidade de navegação do usuário, os desenvolvedores podem otimizar a estratégia de carregamento especulativo.

No entanto, existem algumas rotas que são consideradas inseguras, como:

• URLs de saída;
• URLs de troca de idioma;
• URLs "Adicionar ao carrinho";
• URLs de fluxo de login onde o servidor solicita o envio de um SMS, por exemplo, quando a autenticação de dois fatores (2FA) é necessária;
• URLs que iniciam o rastreamento de conversões de anúncios no servidor;
• URLs que acionam os limites de uso de um usuário, por exemplo, usando sua cota mensal de artigos gratuitos.

Da mesma forma que excluir essas páginas do cache, o motivo para evitar a pré-busca e pré-renderização delas está relacionado a variáveis ​​dinâmicas.

São páginas sensíveis ao conteúdo onde os valores são atualizados com base nas ações do usuário e, ao pré-carregá-los em segundo plano, o risco de mostrar um estado desatualizado da página é muito alto.

Precisão e compensações

Como Barry Pollard mencionou em nosso webinar sobre “Carregando páginas instantaneamente”:

Embora a pré-busca seja a abordagem mais segura que você pode duplicar em muitas de suas páginas da web, ela também oferece a recompensa mais baixa, pois envolve apenas o download de recursos específicos.

Os pré-renderizadores de página inteira, por outro lado, oferecem recompensas mais altas, mas devem ser usados ​​com moderação, pois podem:

• Sobrecarregue o navegador, pois ele só pode executar uma quantidade limitada de tarefas em segundo plano.
• Consome largura de banda e recursos de CPU consideráveis, o que pode levar à degradação do desempenho de usuários em redes mais lentas ou em dispositivos com recursos limitados.
• Leva a um maior desperdício de recursos se o visitante não navegar até a página.

Para configurar a pré-renderização corretamente, você deve considerar o comportamento dos usuários e analisar as navegações comuns em seu site. Usando mapas de calor e fluxogramas do Google Analytics, você pode identificar rotas essenciais e iniciar seus experimentos de carregamento preditivo.

Para verificar se uma página foi pré-renderizada, use uma entrada activateStart diferente de zero de PerformanceNavigationTiming . Isso pode então ser registrado usando uma dimensão personalizada:

Dessa forma, você poderá avaliar a proporção entre a pré-renderização e outros tipos de navegação.

Além disso, é importante medir o número de páginas pré-renderizadas que não são visitadas posteriormente para otimizar as regras de especulação e obter taxas de acerto mais altas e menor desperdício de recursos.

Você pode fazer isso disparando um evento analítico quando regras de especulação são inseridas para indicar que a pré-renderização foi solicitada. Em seguida, compare o número desses eventos com as visualizações de página pré-renderizadas reais.

Ou você pode…

Considere a pré-renderização automatizada de páginas com Navigation AI da NitroPack

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

A AI de navegação permite que os proprietários de sites ofereçam experiências de navegação instantâneas em computadores e dispositivos móveissem escrever uma única linha de código , aumentando o envolvimento do cliente e as taxas de conversão.

Nota: Navigation AI é um produto separado, mas é 100% compatível com NitroPack e amplia ainda mais os benefícios para proprietários de sites.

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

O Navigation AI da NitroPack baseia-se na API de regras de especulação e oferece uma solução automatizada para atingir uma alta taxa de acertos e eficiência de recursos em cenários de pré-renderização.

Ao aplicar previsões iniciais aprimoradas por IA no carregamento da página com base em dados e analisar o comportamento do usuário, a Navigation AI pode ajustar as previsões e instruir com precisão a API de regras de especulação para pré-renderizar as páginas que serão realmente visitadas.

O resultado é o carregamento instantâneo da página, graças a esta página já pintada em segundo plano. Em dispositivos móveis, a AI de navegação depende da identificação de onde o usuário está na página e, dada a pequena janela de visualização, pode prever facilmente onde ele tocará.

Com base em 1.200 sites, a Navigation AI já apresenta resultados espetaculares.

• Resultado nº 1: páginas da Web que usam Navigation AI mostram consistentemente um tempo de carregamento de aproximadamente 2,86s VS 6,12s sem Navigation AI

• Resultado nº 2: com Navigation AI, as páginas pré-renderizadas mostram uma melhoria de LCP de 85% (de 3,1s para 0,4s) e uma melhoria de CLS de 80% (de 0,3s para 0,06s).Para páginas pré-buscadas, o Navigation AI aumenta o LCP em 52% (de 3,1s para 1,5s).

• Resultado nº 3: com a IA de navegação, as métricas de desempenho de todo o site melhoram significativamente: LCP em 15%, CLS em 8% e TTFB em 26%

Obtenha acesso ao Navigation AI entrando em nossa lista de espera →

API de regras de especulação e WordPress

Em nosso webinar “Carregamento instantâneo de página”, o engenheiro de relações com desenvolvedores do Google, Adam Silverstein, revelou que a equipe de desempenho principal do WordPress está trabalhando em implementações mais estáveis ​​​​da nova API de regras de especulação.

Atualmente, o foco permanece em disponibilizar uma pequena parte da funcionalidade da API para proprietários de sites e desenvolvedores no ecossistema para testar a eficiência e a taxa de adoção antes de torná-la parte do núcleo. Aqui está o que os usuários do WordPress podem aproveitar até agora:

• Um módulo no plugin Performance Lab
• Um plug-in independente que implementa apenas o frontend da API de regras de especulação (aplica o nível conservador de “ansiedade”, mas os desenvolvedores são livres para modificar o comportamento)

As rotas WP-admin são excluídas por padrão, mas cabe aos desenvolvedores do WP definir as rotas que gostariam de priorizar.

A equipe WordPress Core Performance também está trabalhando em implementações mais sofisticadas dentro de plugins no ecossistema. Isso visa aliviar parte do trabalho pesado que os desenvolvedores têm que fazer ao descobrir quais rotas são prioritárias e quais são proibidas.

Que melhorias estão ocorrendo nas regras de especulação

Atualmente, as regras de especulação estão limitadas a páginas dentro da mesma aba, mas estão em andamento esforços para reduzir essas restrições.

A pré-renderização é, por padrão, confinada a páginas da mesma origem. No entanto, uma atualização recente no Chrome 119 agora oferece suporte à pré-renderização para páginas de origem cruzada do mesmo site, exigindo aceitação por meio de um cabeçalho HTTP.

Versões futuras podem estender a pré-renderização para páginas de origem cruzada e permiti-la em novas guias. A API de regras de especulação está configurada para se expandir, introduzindo pontuações e sintaxe para regras de documentos e fornecendo mais flexibilidade, como pré-renderizar links ao passar o mouse.

Experimentos em andamento no Chrome estão explorando recursos adicionais, e os sites podem participar de um teste original para testar e fornecer feedback sobre possíveis adições futuras.