Melhorar o desempenho do carregamento da próxima página

Recursos da Web: Regras de especulação

Uma das maneiras mais eficazes de melhorar o desempenho de carregamento de páginas para os usuários que navegam em um site é iniciar o carregamento da próxima página que eles vão acessar antes que eles a visitem. Isso pode ser feito com uma técnica chamada carregamento especulativo usando a API Speculation Rules.

Como funciona

O carregamento especulativo usa regras de especulação baseadas em JSON para informar ao navegador sobre links que podem ser pré-buscados ou pré-renderizados, melhorando o desempenho do carregamento de página quando o usuário clica neles.

As regras podem ser uma lista codificada de URLs com uma chave urls (conhecida como regra de lista) ou com uma chave where que contém um conjunto de seletores href e CSS usados para encontrar links na página (conhecida como regra document).

As regras também podem incluir uma propriedade eagerness opcional que especifica quando a página precisa ser pré-buscada ou pré-renderizada. A propriedade eagerness pode ser definida como immediate, eager, moderate ou conservative. immediate faz a especulação o mais rápido possível, enquanto os outros aguardam sinais do usuário, como passar o cursor por um período curto, por um período mais longo ou começar a clicar na página, respectivamente.

As regras podem ser combinadas com diferentes configurações de urgência para fazer a pré-busca com urgência e, em seguida, pré-renderizar quando o usuário interagir mais.

Quando usar

O carregamento especulativo é especialmente útil para páginas estáticas, em que o conteúdo não costuma mudar com frequência e as páginas são mais baratas de produzir, principalmente se armazenadas em cache na borda. Ele também pode ser usado para páginas dinâmicas, mas é importante ter cuidado com o potencial de conteúdo desatualizado.

O carregamento especulativo geralmente é usado para links de mesma origem, mas opções mais avançadas permitem alguma especulação entre origens. Este guia se concentra no caso de uso mais comum de mesma origem.

O carregamento especulativo mais rápido é uma boa opção para páginas que provavelmente serão visitadas em seguida, como um artigo de manchete ou a próxima página em um processo de etapas, como um curso de aprendizado.

O carregamento especulativo menos antecipado é uma boa opção quando não é tão óbvio o que o usuário vai fazer em seguida, quando há muitos links na página, cada um com a mesma probabilidade de ser visitado. Ao aguardar mais indicadores, como passar o cursor ou começar a clicar na página, você pode se antecipar à próxima página e melhorar a experiência do usuário, mesmo que ela não seja totalmente pré-buscada ou pré-renderizada.

Da mesma forma, a pré-busca é uma escolha mais conservadora do que a pré-renderização, usando menos recursos (tanto no lado do cliente quanto no do servidor), mas oferecendo menos benefícios ao usuário. É uma boa opção para a implementação inicial, que pode ser expandida para a pré-renderização mais tarde, quando o desenvolvedor solicitar explicitamente.

Como usar

As regras de especulação têm um formato baseado em JSON e podem ser incluídas em uma tag <script type="speculationrules">. As regras podem ser incluídas no <head> ou no <body> do documento ou adicionadas dinamicamente usando JavaScript.

Um tag também pode ser usado, seja em um nível global ou por regra. Quando definida, essa tag é incluída no cabeçalho Sec-Speculation-Tags e permite identificar do lado do servidor quais especulações foram feitas.

Exemplo de uma regra de lista de URLs simples para pré-carregar URLs predefinidos

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Exemplo de uma regra de documento simples para pré-renderizar todos os links de mesma origem em uma página

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Exemplo de um conjunto de regras misto

Este exemplo mostra um conjunto de regras que faz a pré-busca de todos os links de forma antecipada e, em seguida, vai além disso para pré-renderizar esses mesmos links quando recebe mais indicadores com a antecipação moderate.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Práticas recomendadas

  • USE regras de especulação para pré-buscar e pré-renderizar páginas que o usuário provavelmente vai acessar em seguida.
  • USE regras de especulação para sites estáticos, em que o conteúdo não muda com frequência e as páginas são mais baratas de produzir, especialmente se armazenadas em cache na borda.
  • TOME mais cuidado ao usar regras de especulação para páginas dinâmicas, em que o conteúdo tem mais probabilidade de mudar com frequência, pode ficar desatualizado e as páginas são mais caras para produzir.
  • DÊ preferência às regras de documento em vez das regras de lista, porque elas são mais flexíveis, permitem que a mesma regra seja compartilhada em várias páginas e podem ser usadas para pré-buscar e pré-renderizar páginas que não são conhecidas com antecedência.
  • CONSIDERE as vantagens e desvantagens entre a pré-busca e a pré-renderização e escolha a opção adequada para seu caso de uso. A pré-renderização é mais cara do que a pré-busca e pode causar mais efeitos colaterais indesejados em aplicativos complexos que exibem estado dinâmico, mas oferece uma melhor experiência do usuário. Se não tiver certeza, pergunte ao desenvolvedor qual é a preferência dele.
  • CONSIDERE as vantagens e desvantagens entre os diferentes níveis de eagerness e escolha o mais adequado para seu caso de uso. Uma especulação mais intensa oferece uma experiência do usuário melhor, mas usa mais recursos e pode causar mais efeitos colaterais indesejados em aplicativos complexos que mostram um estado dinâmico. Se não tiver certeza, pergunte ao desenvolvedor qual é a preferência dele.
  • NÃO use regras de especulação em excesso, por exemplo, para especular todos os links na página. Os navegadores têm limites (duas especulações para especulações não antecipadas). immediate deve ser usado apenas para um número muito pequeno de links.
  • NÃO especule URLs que possam acionar mudanças de estado, como /logout ou /add-to-cart, e exclua-os explicitamente das regras de especulação se houver probabilidade de serem incluídos nas regras de documento.
  • NÃO use regras de especulação em aplicativos de página única (SPAs). As regras de especulação são projetadas para aplicativos de várias páginas (MPAs, na sigla em inglês), em que o navegador acessa um novo documento em cada navegação. Em SPAs, o navegador não acessa um novo documento em cada navegação, então as regras de especulação não funcionam como esperado.

Suporte ao navegador e estratégias de substituição

No entanto, o carregamento especulativo é um aprimoramento progressivo. É perfeitamente seguro usar como uma melhoria e é altamente recomendado, considerando os possíveis benefícios de desempenho. Se um navegador não for compatível com as regras de especulação, ele vai ignorá-las.