Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como funciona o pré-carregamento
  • Casos de uso
    • Recursos de pré-carregamento definidos em CSS
    • Pré-carregando arquivos CSS
    • Pré-carregando arquivos JavaScript
  • Como implementar rel=preload
    • Pré-carregando módulos JavaScript com webpack
  • Conclusão

Pré-carregue ativos críticos para melhorar a velocidade de carregamento

Nov 5, 2018 — Atualizado May 27, 2020
Available in: Español, 日本語, 한국어, Русский, 中文, English
Appears in: Tempos de carregamento rápidos
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Milica Mihajlija
Milica Mihajlija
TwitterGitHubHomepage
Nesta página
  • Como funciona o pré-carregamento
  • Casos de uso
    • Recursos de pré-carregamento definidos em CSS
    • Pré-carregando arquivos CSS
    • Pré-carregando arquivos JavaScript
  • Como implementar rel=preload
    • Pré-carregando módulos JavaScript com webpack
  • Conclusão

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.

Captura de tela do painel Chrome DevTools Network.
Neste exemplo, a fonte Pacifico é definida na folha de estilo com uma regra @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.

Captura de tela do painel Chrome DevTools Network após aplicar o pré-carregamento.
Neste exemplo, a fonte Pacifico é pré-carregada, portanto, o download ocorre em paralelo com a folha de estilo.

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.

A chave de pré-carregamento do farol solicita auditoria.

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.

Depois de implementar o pré-carregamento, muitos sites, incluindo Shopify, Financial Times e Treebo, viram melhorias de 1 segundo em métricas centradas no usuário, como Time to Interactive e First Contentful Paint.

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.

Aviso do Chrome DevTools Console sobre recursos pré-carregados não utilizados.
O preload é suportado em todos os navegadores modernos.

Casos de uso #

Cuidado

No momento da escrita, o Chrome tinha um bug aberto para solicitações pré-carregadas que são buscadas antes de outros recursos de prioridade mais alta. Até que isso seja resolvido, desconfie de como os recursos pré-carregados podem "pular a fila" e ser solicitados mais cedo do que deveriam.

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 #

Se estiver usando a abordagem crítica de CSS{/a0 , você dividirá seu CSS em duas partes. O CSS crítico necessário para renderizar o conteúdo acima da dobra é embutido no <head> do documento e o CSS não crítico geralmente é carregado lentamente com JavaScript. Esperar que o JavaScript seja executado antes de carregar o CSS não crítico pode causar atrasos na renderização quando os usuários fazem a rolagem, então é uma boa ideia usar <link rel="preload"> para iniciar o download mais cedo.

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 .

Dê uma olhada no documento de Agendamento e Prioridades de Recursos do Chrome para saber mais sobre como o navegador prioriza diferentes tipos de recursos.

Cuidado

Omitir o atributo as ou ter um valor inválido é equivalente a uma solicitação XHR, onde o navegador não sabe o que está buscando por isso não pode determinar a prioridade correta. Também pode fazer com que alguns recursos, como scripts, sejam buscados duas vezes.

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>

Cuidado

Fontes pré-carregadas sem o crossorigin serão buscadas duas vezes!

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">.

Experimente

Melhore o desempenho de uma página pré-carregando fontes da web.

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.

Desempenho
Last updated: May 27, 2020 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Codelab: Preload critical assets to improve loading speed
  • Preload web fonts to improve loading speed
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.