Pré-busca, pré-renderização e pré-armazenamento em cache do service worker

Nos últimos módulos, você descobriu conceitos como adiar o JavaScript e o carregamento lento de imagens e elementos <iframe>. Adiar o carregamento de recursos diminui o uso da rede e da CPU durante a fase inicial carregamento de página fazendo o download dos recursos no ponto em que são necessários em vez de carregá-los logo no início, onde podem ficar sem uso. Isso pode melhorar o tempo de carregamento da página inicial, mas interações subsequentes podem incorrer um atraso se os recursos necessários para usá-los ainda não estiverem carregados no momento eles ocorrerem.

Por exemplo, se uma página tiver um seletor de data personalizado, você poderá adiar o os recursos do seletor até que o usuário interaja com o elemento. No entanto, o carregamento os recursos sob demanda do seletor de data podem resultar em um atraso, talvez leve, mas talvez não, dependendo da conexão de rede do usuário, dos recursos do dispositivo ou até que os recursos sejam baixados, analisados e disponibilizados para execução.

É um equilíbrio um pouco complicado: você não quer desperdiçar largura de banda carregando recursos que podem não ser utilizados, mas atrasam as interações e a página subsequente também não são ideais. Felizmente, há várias ferramentas que você pode podemos usar para encontrar um equilíbrio melhor entre esses dois extremos, e este módulo aborda algumas técnicas que podem ser usadas para chegar lá, como pré-busca de recursos, pré-renderizar páginas inteiras e pré-armazenar recursos em cache usando um service worker.

Fazer a pré-busca dos recursos necessários em um futuro próximo com baixa prioridade

É possível buscar recursos com antecedência, incluindo imagens, folhas de estilo ou JavaScript, usando a dica de recurso <link rel="prefetch">. A A dica prefetch informa ao navegador que um recurso pode ser necessário em em um futuro próximo.

Quando uma dica prefetch é especificada, o navegador pode iniciar uma solicitação para aquele recurso com a prioridade mais baixa para evitar a concorrência com recursos obrigatório para a página atual.

A pré-busca de recursos pode melhorar a experiência do usuário, já que ele não é aguardar o download dos recursos necessários em um futuro próximo, já que eles podem ser recuperados instantaneamente do cache de disco quando necessário.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

O snippet HTML anterior informa ao navegador que ele pode fazer a pré-busca date-picker.js e date-picker.css quando estiver inativo. Também é possível pré-buscar recursos dinamicamente à medida que o usuário interage com a página em JavaScript.

O prefetch é compatível com todos os navegadores modernos, exceto o Safari, onde ele é disponíveis atrás de uma sinalização. Se for muito necessário fazer o carregamento recursos para seu site de uma forma que funciona em todos os navegadores, e você usa um service worker e, em seguida, leia a seção posterior neste módulo sobre armazenamento em cache recursos usando um service worker.

Fazer uma pré-busca de páginas para acelerar as próximas navegações

Também é possível pré-buscar uma página e todos os sub-recursos dela especificando o as="document" ao apontar para um documento HTML:

<link rel="prefetch" href="/page" as="document">

Quando o navegador está inativo, ele pode iniciar uma solicitação de baixa prioridade para o /page.

Em navegadores baseados no Chromium, é possível pré-buscar documentos usando o API Speculation Rules. As regras de especulação são definidas como um objeto JSON incluído no HTML da página ou adicionado dinamicamente por meio de JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

O objeto JSON descreve uma ou mais ações, aceitando apenas prefetch e prerender: e uma lista de URLs associados a essa ação. Em o snippet HTML anterior, o navegador é instruído a fazer a pré-busca de /page-a e /page-b. Da mesma forma que <link rel="prefetch">, as regras de especulação são uma que o navegador pode ignorar em determinadas circunstâncias.

Bibliotecas como Quicklink melhoram a navegação nas páginas ao a pré-busca ou pré-renderização de links para páginas quando elas estão visíveis no na janela de visualização do usuário. Isso aumenta a probabilidade de o usuário navega para essa página, em comparação com a pré-busca de todos os links nela.

Pré-renderizar páginas

Além de pré-buscar recursos, também é possível indicar ao navegador para pré-renderizar uma página antes que o usuário navegue até ela. Isso pode fornecer quase carregamentos de página instantâneos, à medida que a página e seus recursos são buscados e processados em segundo plano. Quando o usuário navega até a página, ela é colocada no primeiro plano.

A pré-renderização é compatível com a API Speculation Rules:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
.

Pré-busca e pré-renderização de demonstrações

Pré-armazenamento em cache do service worker

Também é possível pré-buscar recursos especulativamente usando um service worker. O pré-armazenamento em cache do service worker pode buscar e salvar recursos usando a API Cache, permitindo que o navegador exiba a solicitação usando a API Cache sem ir na rede. O pré-armazenamento em cache do service worker usa um service worker muito eficaz conhecida como estratégia somente cache. Esse padrão é altamente eficaz porque, depois que os recursos são colocados no cache do service worker, eles são buscados quase instantaneamente mediante solicitação.

Mostra o fluxo de armazenamento em cache do service worker da página para o service worker e o cache.
A estratégia somente de cache recupera apenas os recursos qualificados do durante a instalação do service worker. Depois de instalado, o conteúdo os recursos só são recuperados do cache do service worker.
.

Para pré-armazenar recursos em cache usando um service worker, você pode usar o Workbox. Se você preferir, no entanto, você pode escrever seu próprio código para armazenar em cache um conjunto predeterminado de . De qualquer maneira, você decide usar um service worker para pré-armazenar em cache é importante saber que o pré-armazenamento em cache acontece quando o serviço worker está instalado. Após a instalação, os recursos pré-armazenados disponível para recuperação em qualquer página controlada pelo service worker no seu site.

A caixa de trabalho usa um manifesto de pré-cache para determinar quais recursos precisam ser armazenados previamente em cache. Um manifesto de pré-cache é uma lista de arquivos e informações de controle de versão que serve como a "fonte da verdade" para que os recursos sejam pré-armazenados em cache.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

O código anterior é um exemplo de manifesto que inclui dois arquivos: script.ffaa4455.js e /index.html. Se um recurso tiver a versão no próprio arquivo (conhecido como hash de arquivo), depois o revision pode ser deixada como null, porque o arquivo já tem uma versão (por exemplo, ffaa4455 para o recurso script.ffaa4455.js no código anterior). Para recursos sem versão, uma revisão poderá ser gerada para eles no momento da criação.

Uma vez configurado, um service worker pode ser usado para pré-armazenar em cache páginas estáticas ou seus para acelerar as navegações subsequentes nas páginas.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

Por exemplo, em uma página de informações do produto de e-commerce, é possível usar um service worker pré-armazenar em cache o CSS e o JavaScript necessários para renderizar a página de detalhes do produto. fazendo com que a navegação para a página de detalhes do produto pareça muito mais rápida. Na exemplo anterior, product-page.ac29.css e product-page.39a1.js são armazenados previamente em cache. O método precacheAndRoute disponível em workbox-precaching registra automaticamente os gerenciadores necessários para garantir que os recursos pré-armazenados são buscados na API do service worker sempre que necessário.

Como os service workers são amplamente suportados, você pode usar os service workers armazenamento em cache em qualquer navegador moderno, dependendo da situação.

.

Teste seus conhecimentos

Em que prioridade uma dica prefetch ocorre?

Que nada.
Medium.
Alto.

Qual é a diferença entre a pré-busca e a pré-renderizar uma página?

Enquanto a pré-busca e a pré-renderização de uma página recebem uma página e todo o seus sub-recursos, a pré-busca só recupera a página e todos os recursos, enquanto uma pré-renderização vai um passo além, renderizando o toda a página em segundo plano até que o usuário navegue até ela.
Eles são praticamente os mesmos, apenas uma pré-renderização recebe sub-recursos, mas a pré-busca não.

O cache do service worker e o cache HTTP são os mesmos.

Falso
Verdadeiro

A seguir: visão geral dos web workers

Agora que você sabe como a pré-busca, a pré-renderização e o pré-armazenamento em cache do service worker pode ser benéfico quando se trata de acelerar as navegações em futuros páginas, você estará em uma posição para tomar algumas decisões informadas sobre como isso pode ser benéfico para seu site e os usuários.

A seguir, apresentamos uma visão geral dos web workers e de como eles podem gastar fora da linha principal e dar a ela mais espaço para interações do usuário. Se você já se perguntou o que poderia fazer para fornecer os próximos dois módulos vão valer a pena!