Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como sinalizações do Lighthouse determinam candidatos a pré-carregamento
  • Declare seus links de pré-carregamento
    • Compatibilidade de navegadores
    • Suporte de ferramentas de build para pré-carregamento
  • Orientações para pilhas específicas
    • Angular
    • Magento
  • Recursos

Pré-carregue solicitações importantes

May 2, 2019 — Atualizado Jun 4, 2020
Available in: Español, 한국어, Русский, English
Appears in: Auditorias de desempenho
Nesta página
  • Como sinalizações do Lighthouse determinam candidatos a pré-carregamento
  • Declare seus links de pré-carregamento
    • Compatibilidade de navegadores
    • Suporte de ferramentas de build para pré-carregamento
  • Orientações para pilhas específicas
    • Angular
    • Magento
  • Recursos

A seção Oportunidades de seu relatório Lighthouse sinaliza o terceiro nível de solicitações em sua cadeia de solicitações críticas como candidatos de pré-carregamento:

Uma captura de tela da auditoria Lighthouse Pré-carregue solicitações importantes

Como sinalizações do Lighthouse determinam candidatos a pré-carregamento #

Suponha que a cadeia de solicitações críticas de sua página seja a seguinte:

index.html
|--app.js
|--styles.css
|--ui.js

Seu arquivo index.html declara <script src="app.js">. Quando o app.js é executado, ele chama fetch() para baixar styles.css e ui.js. A página não aparece completa até que esses 2 últimos recursos sejam baixados, processados e executados. Usando o exemplo acima, o Lighthouse sinalizaria styles.css e ui.js como candidatos.

A economia potencial é baseada em quanto antes o navegador seria capaz de iniciar as solicitações se você declarasse links de pré-carregamento. Por exemplo, se app.js leva 200ms para baixar, analisar e executar, a economia potencial para cada recurso é de 200ms, pois app.js não é mais um gargalo para cada uma das solicitações.

O pré-carregamento de solicitações pode fazer com que suas páginas carreguem mais rápido.

Sem links de pré-carregamento, styles.css e ui.js são solicitados somente depois que app.js foi baixado, processado e executado.
Sem links de pré-carregamento, styles.css e ui.js são solicitados somente depois que app.js foi baixado, processado e executado.

O problema aqui é que o navegador só fica ciente desses 2 últimos recursos depois de baixar, app.js. Mas você sabe que esses recursos são importantes e devem ser baixados o mais rápido possível.

Declare seus links de pré-carregamento #

Declare links de pré-carregamento em seu HTML para instruir o navegador a fazer download dos principais recursos o mais rápido possível.

<head>
...
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">
...
</head>
Com links de pré-carregamento, styles.css e ui.js são solicitados ao mesmo tempo que app.js.
Com links de pré-carregamento, styles.css e ui.js são solicitados ao mesmo tempo que app.js

Veja também Pré-carregue ativos importantes para melhorar a velocidade de carregamento para mais orientações.

Compatibilidade de navegadores #

Até junho de 2020, o pré-carregamento já era suportado nos navegadores baseados no Chromium. Veja Compatibilidade de navegadores para atualizações.

Suporte de ferramentas de build para pré-carregamento #

Veja a página Preloading Assets da Tooling.Report.

Orientações para pilhas específicas #

Angular #

Pré-carregue as rotas com antecedência para acelerar a navegação.

Magento #

Modifique o layout dos seus temas e adicione tags <link rel=preload>

Recursos #

  • Código fonte para a auditoria Pré-carregue solicitações importantes
Last updated: Jun 4, 2020 — Improve article
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.