Os utilizadores da Web de hoje exigem uma navegação rápida, passando de uma página para outra com um atraso mínimo. Entre na API Speculation Rules, um divisor de águas no domínio das APIs da Web. Esta ferramenta elegante tem como objetivo melhorar o desempenho de futuras navegações através da pré-busca ou pré-renderização de potenciais páginas seguintes.
Neste post, vamos nos aprofundar no que é a API Speculation Rules, compartilhar alguns resultados impressionantes de testes no site Scalemates usando a Akamai e mostrar como aproveitar essa API em seus próprios projetos. Além disso, indicaremos alguns recursos úteis do Linode para você começar.
O que é a API de regras de especulação?
A API Speculation Rules é uma ferramenta poderosa concebida para melhorar o desempenho da Web através da pré-busca ou pré-renderização proactiva de futuras navegações. Isto significa que o browser pode começar a carregar a página seguinte antes mesmo de o utilizador clicar numa ligação, fazendo com que a navegação pareça instantânea.
Carregamento proactivo
A API utiliza vários sinais para prever (especular) a página para a qual o utilizador provavelmente navegará a seguir e, em seguida, começa a carregá-la em segundo plano. Os sinais utilizados para a previsão podem incluir o comportamento de navegação do utilizador, como passar o rato sobre as hiperligações ou começar a interagir com elas.
Pré-busca versus pré-renderização
Como programador, especifica se o browser deve pré-buscar ou pré-enderizar o conteúdo utilizando a API. A pré-busca descarrega o HTML, deixando-o pronto para quando o utilizador navegar. A pré-apresentação vai um passo mais além, carregando totalmente e apresentando a página num separador oculto, para que possa ser apresentada instantaneamente quando o utilizador navega para ela.
Adoção e apoio actuais
No momento em que este artigo foi escrito, a API de Regras de Especulação é suportada principalmente por navegadores baseados no Chromium, e há um desenvolvimento contínuo para um suporte mais amplo.
Navegadores (a partir do número de versão indicado) que suportam a API de regras de especulação.
Casos de utilização
O principal caso de utilização da API Speculation Rules são as aplicações de várias páginas (MPAs), onde a navegação rápida entre páginas pode melhorar significativamente a experiência do utilizador. Normalmente, neste tipo de sites, os utilizadores deslocam-se frequentemente entre páginas. Quando o carregamento da página se atrasa, a experiência e a satisfação do utilizador são afectadas.
Ao pré-buscar ou pré-renderizar páginas futuras, a API garante que as transições são suaves e quase instantâneas. Os tipos de sites que mais beneficiam com isto incluem sites de comércio eletrónico e portais de notícias. A API Speculation Rules pode ajudar em qualquer MPA em que a redução dos tempos de espera conduza a um maior envolvimento e retenção de utilizadores.
A API em ação: Scalemates na Akamai
Para ver a API Speculation Rules em ação, testamos um protótipo de tráfego de produção para o Scalemates, o maior website de modelagem do mundo, que é alimentado por soluções da Akamai (incluindo Ion, um WAF e Image Manager). Validámos as alterações de desempenho com o mPulse, uma solução de monitorização de utilizadores reais (RUM) que capta a experiência do utilizador e os dados de desempenho.
Antecedentes e configuração
Activámos a API Speculation Rules para Scalemates, concentrando-nos na pré-busca proactiva e na pré-renderização. A configuração incluiu:
- Ativação de uma pré-busca: As hiperligações eram pré-carregadas quando se passava o rato por cima delas, com uma avidez moderada.
- Desencadear uma pré-apresentação: A pré-renderização da página inteira ocorreu quando o utilizador começou a interagir com a ligação, definida com uma avidez conservadora.
- Seletores CSS: Determine quais os links que devem desencadear acções de pré-busca e pré-renderização.
Resultados impressionantes
Os resultados da utilização da API Speculation Rules foram impressionantes:
- Ganhos de desempenho: O percentil 95 (P95) do Largest Contentful Paint (LCP) foi aproximadamente 500 ms mais rápido, enquanto o percentil 75 (P75) foi cerca de 170 ms mais rápido.
- Eficiência da pré-renderização: 59% das navegações accionaram a pré-renderização.
No percentil 75, o LCP é 177 ms mais rápido para páginas pré-renderizadas (537 ms) em comparação com páginas renderizadas padrão (714 ms).
Com apenas um pouco de esforço na implementação da API de regras de especulação, reduzimos 170 ms do LCP. O uso dessa API tem o potencial de ajudar no desempenho da Web e nas metas do Core Web Vitals.
Como tirar partido da API
Para maximizar os benefícios de desempenho, é necessário compreender como definir e comunicar regras de especulação ao browser. Aqui está um guia detalhado para o ajudar a começar.
Regras de especulação definidas como JSON
As regras de especulação definem a ação a tomar, os URLs para desencadear as acções e a avidez destas acções. São definidas em conjunto numa estrutura JSON.
- Ação: Especifica se o navegador deve pré-buscar ou pré-renderizar.
- URLs de destino: Especifica em quais URLs as ações devem ser acionadas. É possível utilizar URLs específicos, selectores CSS ou expressões regulares e wildcards.
- Ânsia: Especifica quando é que as especulações devem disparar.
Relativamente à avidez, as opções possíveis são:
- imediato: Especula o mais rapidamente possível quando a regra é observada.
- ansioso: Semelhante ao imediato, mas pode ter ajustamentos futuros.
- moderado: Especula sobre um pairar durante 200 ms ou mais com o ponteiro para baixo.
- conservador: Especula sobre o ponteiro ou o toque no chão.
Comunicar com o browser
Como é que comunica estas regras ao browser? Existem dois métodos possíveis.
Método 1: Através do cabeçalho de resposta HTTP
Pode implementar a API utilizando cabeçalhos de resposta HTTP. Quando você implanta seu aplicativo, seu servidor back-end adiciona um cabeçalho Speculation-Rules à resposta. O valor deste cabeçalho é um caminho para um ficheiro JSON que contém as suas regras de especulação.
Por exemplo, se estivesse a criar uma aplicação Node.js Express, poderia definir o cabeçalho da seguinte forma:
app.use((req, res, next) => { |
O arquivo JSON pode existir nos ativos do seu aplicativo, mas também pode ser armazenado externamente, como em um bucket do Linode Object Storage acessível publicamente. O uso de um arquivo JSON de regras de especulação externa permite atualizações rápidas e alterações dinâmicas em seu site, sem a necessidade de modificar qualquer código em seu aplicativo.
Eis um exemplo de um ficheiro JSON de regras de especulação básicas:
{ |
Neste exemplo, utilizamos selectores CSS para corresponder aos URLs de destino. O navegador irá pré-buscar quaisquer links no documento com a classe prefetch-link, usando uma configuração de ansiedade conservadora. Entretanto, irá pré-apresentar todas as hiperligações no documento com a classe prerender-link, utilizando uma definição de ansiedade moderada.
O que acontece se fizer referência a um ficheiro JSON de regras de especulação que não foi encontrado ou não está disponível? Nesse caso, as regras simplesmente não serão aplicadas e o navegador continuará sem elas. Além disso, os navegadores sem suporte simplesmente ignoram as regras.
Método 2: Dentro do HTML
You can also embed your speculation rules directly in the HTML, in a <script> tag, to provide flexibility for page-specific rules. It would look like this:
<script type="speculationrules"> |
Qual o método a utilizar?
A escolha do método correto depende das suas necessidades específicas. Se adotar a abordagem do cabeçalho de resposta HTTP, obtém uma gestão centralizada. Isso facilita a atualização de regras em várias páginas. No entanto, não terá um controlo detalhado página a página. O método HTML em linha oferece maior personalização e regras específicas de página.
Em última análise, o método que escolher será o de encontrar o equilíbrio entre controlo e comodidade.
Conclusão
A utilização da API de regras de especulação é uma forma poderosa de melhorar o desempenho da Web, pré-busca ou pré-renderização de futuras navegações. Quando testámos em Scalemates, vimos melhorias significativas nos tempos de carregamento da página, demonstrando o potencial da API.
Definindo regras de especulação numa estrutura JSON e comunicando-as através de cabeçalhos HTTP ou HTML, pode gerir e otimizar dinamicamente os seus sítios para melhorar a velocidade e a suavidade dos carregamentos das suas páginas. Isto traduz-se numa melhor experiência do utilizador final e numa maior satisfação.
Para saber mais sobre a pré-renderização de páginas com a API Speculation Rules, confira este guia detalhado da Akamai TechDocs. Quando estiver pronto para iniciar seus projetos da Web, explore o que a Linode tem a oferecer para facilitar a implantação e o gerenciamento de sua infraestrutura.
Comentários