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 seus usuários e diminuir as conversões.
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 dos usuários para determinar quais recursos devem ser pré-buscados.
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:
- Como usar o Guess.js com o Angular
- Como usar o Guess.js com o Next.js
- Como usar o Guess.js com o 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 a Guess.js implementa a pré-busca preditiva:
- Primeiro, ele extrai dados do seu provedor de análise favorito para os padrões de navegação do usuário.
- 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 provavelmente vai acessar a partir de uma determinada página.
- Ele invoca o modelo para cada bloco de 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 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: