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 do 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 posterior nas páginas. Na segunda parte, discutimos como melhorar a velocidade de 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 aplicativos 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.
O carregamento lento é uma técnica eficiente para reduzir os bytes de JavaScript transferidos pela rede. É possível usar várias técnicas de carregamento lento do JavaScript, incluindo as seguintes:
- Divisão de código no nível do componente
- Divisão de código no nível do trajeto
Com a divisão de código no nível do componente, é possível mover componentes individuais em blocos JavaScript separados. Em eventos específicos, você pode carregar os scripts relevantes e renderizar os componentes.
Com a divisão de código no nível da rota, no entanto, você move rotas inteiras em blocos independentes. Quando os usuários fazem a transição de uma rota para outra, precisam baixar o JavaScript associado e inicializar a página solicitada. Essas operações podem causar 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 recursos que o usuário provavelmente vai precisar em breve. O método mais comum é usar <link rel="prefetch">, mas há duas armadilhas comuns:
- A pré-busca de muitos recursos (overfetch) consome uma grande quantidade de dados.
- Talvez alguns recursos necessários para o usuário nunca sejam pré-buscados.
A pré-busca preditiva resolve esses problemas usando um relatório com os padrões de navegação dos usuários para determinar quais recursos devem ser pré-buscados.
Pré-busca preditiva com o Guess.js
A Guess.js é uma biblioteca JavaScript que oferece a funcionalidade de pré-busca preditiva. 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 pré-buscar de maneira inteligente apenas o que o usuário provavelmente precisa.
O Guess.js tem integrações com Angular, Next.js, Nuxt.js e Gatsby (links em inglês). Para usá-la no seu aplicativo, adicione estas linhas à configuração do webpack para especificar 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, é possível 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 ao seu framework favorito, confira estes recursos:
- Como usar o Guess.js com o Angular
- Como usar o Guess.js com o Next.js
- Como usar Guess.js com Nuxt.js
Para um tutorial rápido sobre a integração com o Angular, confira este vídeo:
Como o Guess.js funciona?
Veja como o Guess.js implementa a pré-busca preditiva:
- Primeiro, ele extrai dados para os padrões de navegação do usuário do seu provedor de análise favorito.
- Em seguida, ele mapeia os URLs do relatório para os blocos de JavaScript produzidos pelo webpack.
- Com base nos dados extraídos, ele cria um modelo preditivo simples das páginas que um usuário pode acessar em qualquer página.
- Ele invoca o modelo para cada bloco do JavaScript, prevendo os outros blocos que provavelmente serão necessários a seguir.
- Ele adiciona instruções de pré-busca a cada bloco.
Quando o Guess.js terminar, cada fragmento terá instruções de pré-busca semelhantes a:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Este código gerado pelo Guess.js está instruindo o navegador a 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 da conexão do usuário. Se for suficiente, o Guess.js vai inserir duas tags <link rel="prefetch"> no cabeçalho da página, uma para cada fragmento. 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 fará a pré-busca apenas do fragmento b.js, porque ele tem alta probabilidade de ser necessário.
Saiba mais
Para saber mais sobre o Guess.js, confira estes recursos: