Navegação na Web mais rápida com pré-busca preditiva

Saiba mais sobre a pré-busca preditiva e como ela é implementada pelo Guess.js.

Na sessão Navegação na Web mais rápida com pré-busca preditiva (em inglês) no Google I/O 2019, comecei falando sobre a otimização de apps da Web com divisão de código e as possíveis implicações de desempenho para a navegação subsequente nas páginas. Na segunda parte da palestra, discutimos como melhorar a velocidade da navegação usando o Guess.js para configurar a pré-busca preditiva:

Divisão de código para apps da Web mais rápidos

Os apps da Web são lentos, e o JavaScript está entre os recursos mais caros que você envia. Aguardar o carregamento de um app da Web lento pode frustrar os usuários e diminuir as conversões.

Apps da Web lentos são estressantes.

O carregamento lento é uma técnica eficiente para reduzir os bytes do JavaScript transferidos pela rede. Você pode usar várias técnicas para o carregamento lento do JavaScript, incluindo:

  • Divisão de código no nível do componente
  • Divisão de código no nível da rota

Com a divisão de código em nível de componente, você pode mover componentes individuais em blocos JavaScript separados. Em eventos específicos, você pode carregar os scripts relevantes e renderizar os componentes.

No entanto, com a divisão de código no nível da rota, você move rotas inteiras em blocos independentes. Quando os usuários fazem a transição de uma rota para outra, eles precisam fazer o download do JavaScript associado e inicializar a página solicitada. Essas operações podem levar a atrasos significativos, especialmente em redes lentas.

Pré-busca do JavaScript

A pré-busca permite que o navegador faça o download e armazene em cache os recursos que o usuário provavelmente vai precisar em breve. O método normal é usar <link rel="prefetch">, mas há dois problemas comuns:

  • A pré-busca de muitos recursos (excesso de busca) consome muitos dados.
  • Talvez alguns recursos de que o usuário precise nunca sejam pré-buscados.

A pré-busca preditiva resolve esses problemas com um relatório dos padrões de navegação para determinar quais recursos devem ser pré-buscados.

Exemplo de pré-busca

Pré-busca preditiva com Guess.js

A Guess.js é uma biblioteca JavaScript que oferece funcionalidade preditiva de pré-busca. A Guess.js consome um relatório do Google Analytics ou de outro provedor de análise para criar um modelo preditivo que pode ser usado para fazer a pré-busca inteligente apenas do que o usuário provavelmente vai precisar.

O Guess.js tem integrações com o Angular, Next.js, Nuxt.js e Gatsby. Para usá-lo no seu aplicativo, adicione estas linhas à configuração do webpack e especifique um ID da vista do Google Analytics:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

Se você não usa o Google Analytics, pode especificar um reportProvider e fazer o download dos dados do seu serviço favorito.

Integração com frameworks

Para saber mais sobre como integrar o Guess.js à sua estrutura favorita, confira estes recursos:

Para um tutorial rápido sobre a integração com o Angular, confira este vídeo:

Como o Guess.js funciona?

Veja como a Guess.js implementa a pré-busca preditiva:

  1. Primeiro, ele extrai dados do seu provedor de análise favorito para os padrões de navegação do usuário.
  2. Em seguida, ele mapeia os URLs do relatório para os blocos de JavaScript produzidos pelo webpack.
  3. Com base nos dados extraídos, ele cria um modelo preditivo simples das páginas que um usuário provavelmente vai acessar a partir de uma determinada página.
  4. Ele invoca o modelo para cada bloco de JavaScript, prevendo os outros blocos que provavelmente serão necessários a seguir.
  5. Ele adiciona instruções de pré-busca a cada bloco.

Quando o Guess.js estiver pronto, cada bloco conterá instruções de pré-busca semelhantes a:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

Esse código gerado por Guess.js está informando ao navegador para considerar a pré-busca do bloco a.js com probabilidade 0.2 e do bloco b.js com probabilidade 0.8.

Depois que o navegador executa o código, o Guess.js verifica a velocidade de conexão do usuário. Se ela for suficiente, o Guess.js vai inserir duas tags <link rel="prefetch"> no cabeçalho da página, uma para cada bloco. Se o usuário estiver em uma rede de alta velocidade, o Guess.js fará a pré-busca dos dois blocos. Se o usuário tiver uma conexão de rede ruim, o Guess.js só fará a pré-busca do bloco b.js, porque ele tem uma alta probabilidade de ser necessário.

Saiba mais

Para saber mais sobre o Guess.js, confira estes recursos: