Pré-carregue ativos críticos para melhorar a velocidade de carregamento
Quando você abre uma página da web, o navegador solicita o documento HTML de um servidor, analisa seu conteúdo e envia solicitações separadas para quaisquer recursos referenciados. Como desenvolvedor, você já conhece todos os recursos de que sua página precisa e quais deles são os mais importantes. Você pode usar esse conhecimento para solicitar os recursos críticos com antecedência e acelerar o processo de carregamento. Esta postagem explica como fazer isso com <link rel="preload">.
Como funciona o pré-carregamento #
O pré-carregamento é mais adequado para recursos normalmente descobertos mais tarde pelo navegador.
@font-face. O navegador carrega o arquivo de fonte somente após concluir o download e a análise da folha de estilo.
Ao pré-carregar um determinado recurso, você está dizendo ao navegador que gostaria de buscá-lo antes do que o navegador iria descobri-lo, porque você tem certeza de que é importante para a página atual.
A cadeia de solicitação crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador. O Lighthouse identifica os ativos que estão no terceiro nível dessa cadeia como descobertos posteriormente. Você pode usar a auditoria de solicitações de chave de pré-carregamento para identificar quais recursos pré-carregar.
Você pode pré-carregar recursos adicionando uma tag <link> rel="preload" ao cabeçalho do seu documento HTML:
<link rel="preload" as="script" href="critical.js">O navegador armazena em cache os recursos pré-carregados para que estejam disponíveis imediatamente quando necessário. Ele não executa os scripts nem aplica as folhas de estilo.
Dicas de recursos, por exemplo, preconnect - prefetch, são executadas conforme o navegador achar adequado. A preload, por outro lado, é obrigatória para o navegador. Os navegadores modernos já são muito bons em priorizar recursos, por isso é importante usar o preload com moderação e pré-carregar apenas os recursos mais críticos.
Pré-carregamentos não utilizados disparam um alerta de Console no Chrome, aproximadamente 3 segundos depois do evento load.
Casos de uso #
Recursos de pré-carregamento definidos em CSS #
Fontes definidas com @font-face ou imagens de fundo definidas em arquivos CSS não são descobertas até que o navegador baixe e analise esses arquivos CSS. O pré-carregamento desses recursos garante que eles sejam buscados antes do download dos arquivos CSS.
Pré-carregando arquivos CSS #
Pré-carregando arquivos JavaScript #
Como os navegadores não executam arquivos pré-carregados, o pré-carregamento é útil para separar a busca da execuçãoo, o que pode melhorar as métricas, como o tempo de interação. O pré-carregamento funciona melhor se você dividir seus pacotes de JavaScript e pré-carregar apenas os blocos críticos.
Como implementar rel=preload #
A maneira mais simples de implementar o preload é adicionar uma tag <link> <head> do documento:
<head>
<link rel="preload" as="script" href="critical.js">
</head>Fornecendo o as atributo ajuda o navegador definir a prioridade do recurso prefetched acordo com seu tipo, definir os cabeçalhos certas, e determinar se o recurso já existe no cache. Os valores aceitos para este atributo incluem: script , style , font , image e outros .
Alguns tipos de recursos, como fontes, são carregados no modo anônimo. Para aqueles, você deve definir o atributo crossorigin preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>Elementos <link> também aceitam um atributo type, que contém o tipo MIME do recurso vinculado. Os navegadores usam o valor do type para garantir que os recursos sejam pré-carregados apenas se seu tipo de arquivo for compatível. Se um navegador não suportar o tipo de recurso especificado, ele ignorará o <link rel="preload">.
Você também pode pré-carregar qualquer tipo de recurso por meio do cabeçalho Link HTTP:
Link: </css/style.css>; rel="preload"; as="style"
Um benefício de especificar o preload no cabeçalho HTTP é que o navegador não precisa analisar o documento para descobri-lo, o que pode oferecer pequenas melhorias em alguns casos.
Pré-carregando módulos JavaScript com webpack #
Se você estiver usando um empacotador de módulo que cria arquivos de construção de seu aplicativo, você precisa verificar se ele suporta a injeção de tags de pré-carregamento. Com o webpack versão 4.6.0 ou posterior, o pré-carregamento é suportado através do uso de comentários mágicos dentro de import():
import(_/* webpackPreload: true */_ "CriticalChunk")Se você estiver usando uma versão mais antiga do webpack, use um plug-in de terceiros, como preload-webpack-plugin.
Conclusão #
Para melhorar a velocidade da página, pré-carregue recursos importantes que são descobertos posteriormente pelo navegador. Pré-carregar tudo seria contraproducente, portanto, use a preload com moderação e meça o impacto no mundo real.