Pré-carregue solicitações importantes

Published on Updated on

Translated to: English, Español, 한국어, Pусский

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.