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.
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?
Qual é a diferença entre a pré-busca e a pré-renderizar uma página?
O cache do service worker e o cache HTTP são os mesmos.
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!