Pré-carregue solicitações importantes
Published on • Updated on
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:
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.jsSeu 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.
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>
styles.css e ui.js são solicitados ao mesmo tempo que app.jsVeja 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
Updated on • Improve article