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 qualquer recurso referenciado. Como desenvolvedor, você já sabe todos os recursos de que sua página precisa e quais 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 o pré-carregamento funciona
O pré-carregamento é mais adequado para recursos normalmente descobertos tarde pelo navegador.
@font-face. O navegador carrega o arquivo de fonte somente depois de terminar de fazer o download e analisar a folha de estilos.Ao pré-carregar um determinado recurso, você informa ao navegador que quer fazer a busca antes que ele o descubra, porque tem certeza de que ele é importante para a página atual.
A cadeia de solicitação crítica representa a ordem dos recursos priorizados e buscados pelo navegador. O Lighthouse identifica os recursos que estão no terceiro nível dessa rede como descobertos tardiamente. Use a auditoria Pré-carregar solicitações de chaves para identificar quais recursos serão pré-carregados.
Para pré-carregar recursos, adicione uma tag <link> com rel="preload" ao cabeçalho do documento HTML:
<link rel="preload" as="script" href="critical.js">
O navegador armazena em cache os recursos pré-carregados para que eles fiquem disponíveis imediatamente quando necessário. Ele não executa os scripts nem aplica as folhas de estilo.
As dicas de recursos, como preconnect e prefetch, são executadas de acordo com as necessidades do navegador. O preload, por outro lado, é obrigatório 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.
Os carregamentos prévios não usados acionam um aviso no console do Chrome aproximadamente três segundos após o evento load.
Casos de uso
Pré-carregamento de recursos definidos no CSS
As fontes definidas com regras @font-face ou imagens de plano de fundo definidas em arquivos CSS não são descobertas até que o navegador faça o download e analise esses arquivos CSS. O pré-carregamento desses recursos garante que eles sejam buscados antes do download dos arquivos CSS.
Pré-carregar arquivos CSS
Se você estiver usando a abordagem de CSS crítico, vai dividir o CSS em duas partes. O CSS essencial necessário para renderizar o conteúdo acima da dobra é inline no <head> do documento, e o CSS não essencial geralmente é carregado lentamente com JavaScript. Aguardar a execução do JavaScript antes de carregar um CSS não essencial pode causar atrasos na renderização quando os usuários rolam a tela. Por isso, é recomendável usar <link rel="preload"> para iniciar o download mais cedo.
Pré-carregamento de arquivos JavaScript
Como os navegadores não executam arquivos pré-carregados, o pré-carregamento é útil para separar a busca da execução, o que pode melhorar métricas como o tempo de resposta. O pré-carregamento funciona melhor se você dividir seus pacotes JavaScript e pré-carregar apenas os blocos críticos.
Como implementar rel=preload
A maneira mais simples de implementar preload é adicionar uma tag <link> ao <head> do documento:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
O fornecimento do atributo as ajuda o navegador a definir a prioridade do recurso pré-buscado de acordo com o tipo, definir os cabeçalhos corretos e determinar se o recurso já existe no cache. Os valores aceitos para esse atributo incluem: script, style, font, image e outros.
Alguns tipos de recursos, como fontes, são carregados no modo anônimo. Para esses casos, defina o atributo crossorigin com preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Os elementos <link> também aceitam um atributo type, que contém o tipo MIME do recurso vinculado. Os navegadores usam o valor do atributo type para garantir que os recursos sejam pré-carregados apenas se o tipo de arquivo for compatível. Se um navegador não oferecer suporte ao tipo de recurso especificado, ele vai ignorar o <link rel="preload">.
Também é possível pré-carregar qualquer tipo de recurso pelo cabeçalho HTTP Link:
Link: </css/style.css>; rel="preload"; as="style"
Um benefício de especificar preload no cabeçalho HTTP é que o navegador não precisa analisar o documento para detectá-lo, o que pode oferecer pequenas melhorias em alguns casos.
Pré-carregar módulos JavaScript com o webpack
Se você estiver usando um bundler de módulos que cria arquivos de build do aplicativo, verifique se ele oferece suporte à injeção de tags de pré-carregamento. Com a versão 4.6.0 ou mais recente do webpack, o pré-carregamento é compatível com o uso de comentários mágicos no import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Se você estiver usando uma versão mais antiga do webpack, use um plug-in de terceiros, como o preload-webpack-plugin.
Efeitos do pré-carregamento nas Core Web Vitals
O pré-carregamento é uma otimização de desempenho eficiente que afeta a velocidade de carregamento. Essas otimizações podem levar a mudanças nos Core Web Vitals do seu site, e é importante estar ciente delas.
Maior exibição de conteúdo (LCP)
O pré-carregamento tem um efeito poderoso na maior exibição de conteúdo (LCP, na sigla em inglês) quando se trata de fontes e imagens, já que imagens e nós de texto podem ser candidatos à LCP. Imagens principais e grandes quantidades de texto renderizadas usando fontes da Web podem se beneficiar significativamente de uma dica de pré-carregamento bem posicionada e devem ser usadas quando houver oportunidades de entregar esses bits importantes de conteúdo ao usuário mais rapidamente.
No entanto, é preciso ter cuidado com o pré-carregamento e outras otimizações. Em particular, evite carregar muitos recursos. Se muitos recursos forem priorizados, nenhum deles será priorizado. Os efeitos de dicas de pré-carregamento excessivos serão especialmente prejudiciais para aquelas em redes mais lentas, em que a contenção de largura de banda será mais evidente.
Em vez disso, concentre-se em alguns recursos de alto valor que você sabe que vão se beneficiar de um pré-carregamento bem posicionado. Ao pré-carregar fontes, verifique se as fontes estão no formato WOFF 2.0 para reduzir ao máximo o tempo de carregamento de recursos. Como o WOFF 2.0 tem excelente suporte a navegadores, o uso de formatos mais antigos, como WOFF 1.0 ou TrueType (TTF), vai atrasar o LCP se o candidato for um nó de texto.
Em relação ao LCP e ao JavaScript, é importante enviar uma marcação completa do servidor para que o leitor de pré-carregamento do navegador funcione corretamente. Se você estiver disponibilizando uma experiência que depende inteiramente de JavaScript para renderizar marcação e não puder enviar HTML renderizado pelo servidor, seria vantajoso ir em uma etapa em que o scanner de pré-carregamento do navegador não consegue e pré-carregar recursos que, de outra forma, só seriam detectáveis quando o JavaScript termina de carregar e executar.
Cumulative Layout Shift (CLS)
A mudança cumulativa de layout (CLS, na sigla em inglês) é uma métrica especialmente importante para fontes da Web e tem uma interação significativa com fontes da Web que usam a propriedade CSS font-display para gerenciar como as fontes são carregadas. Para minimizar as mudanças de layout relacionadas a fontes da Web, considere estas estratégias:
- Pré-carregue fontes usando o valor padrão de
blockparafont-display. Esse é um equilíbrio delicado. Bloquear a exibição de fontes sem um substituto pode ser considerado um problema de experiência do usuário. Por um lado, carregar fontes comfont-display: block;elimina as mudanças de layout relacionadas a fontes na Web. Por outro lado, você ainda vai querer carregar essas fontes da Web o mais rápido possível se elas forem cruciais para a experiência do usuário. Combinar um pré-carregamento comfont-display: block;pode ser um comprometimento aceitável. - Pré-carregue fontes usando o valor
fallbackparafont-display.fallbacké um compromisso entreswapeblock, porque tem um período de bloqueio extremamente curto. - Use o valor
optionalparafont-displaysem um pré-carregamento. Se uma fonte da Web não for crucial para a experiência do usuário, mas ainda for usada para renderizar uma quantidade significativa de texto na página, use o valoroptional. Em condições adversas, ooptionalvai mostrar o texto da página em uma fonte substituta enquanto carrega a fonte em segundo plano para a próxima navegação. O resultado líquido dessas condições é uma melhoria no CLS, já que as fontes do sistema são renderizadas imediatamente, enquanto os carregamentos de página subsequentes carregam a fonte imediatamente sem mudanças de layout.
A CLS é uma métrica difícil de otimizar para fontes da Web. Como sempre, faça testes no laboratório, mas confie nos dados de campo para determinar se as estratégias de carregamento de fontes estão melhorando ou piorando o CLS.
Interação com a próxima exibição (INP)
A métrica "Interaction to Next Paint" mede a capacidade de resposta à entrada do usuário. Como a maior parte da interatividade na Web é impulsionada pelo JavaScript, o pré-carregamento de JavaScript que gera interações importantes pode ajudar a manter o INP de uma página mais baixo. No entanto, o carregamento antecipado de muito JavaScript durante a inicialização pode ter consequências negativas não intencionais se muitos recursos estiverem competindo pela largura de banda.
Também é importante ter cuidado com a divisão de código. A divisão de código é uma ótima otimização para reduzir a quantidade de JavaScript carregada durante a inicialização, mas as interações podem ser atrasadas se dependerem do JavaScript carregado no início da interação. Para compensar isso, você precisa examinar a intenção do usuário e injetar um pré-carregamento para os fragmentos necessários de JavaScript antes que a interação ocorra. Um exemplo seria pré-carregar o JavaScript necessário para validar o conteúdo de um formulário quando qualquer um dos campos do formulário estiver em foco.
Conclusão
Para melhorar a velocidade da página, pré-carregue recursos importantes que são descobertos tarde pelo navegador. Carregar tudo de antemão seria contraproducente. Use preload com moderação e meça o impacto no mundo real.