A seção "Oportunidades" do relatório do Lighthouse sinaliza o terceiro nível de solicitações na cadeia de solicitações críticas como candidatos ao pré-carregamento:
![Captura de tela da auditoria de solicitações de chaves de pré-carregamento do Lighthouse](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=4&hl=pt-br)
Como as sinalizações do Lighthouse determinam os candidatos de pré-carregamento
Suponha que a cadeia de solicitação crítica da sua página tenha esta aparência:
index.html |--app.js |--styles.css |--ui.js
O arquivo index.html
declara <script src="app.js">
. Quando app.js
é executado , ele chama
fetch()
para fazer o download de styles.css
e ui.js
. A página não aparecerá completa
até que esses dois últimos recursos sejam transferidos por download, analisados 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 poderia iniciar as solicitações se você declarou links de pré-carregamento.
Por exemplo, se app.js
levar 200 ms para fazer o download, analisar e executar, a economia potencial para cada recurso será de 200 ms, porque app.js
não é mais um gargalo para cada uma das solicitações.
As solicitações de pré-carregamento podem acelerar o carregamento de páginas.
![Sem links de pré-carregamento, estilos.css e ui.js são solicitados somente após o download, a análise e a execução do app.js.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=4&hl=pt-br)
styles.css
e
ui.js
são solicitados somente depois que app.js
é feito o download,
a análise e a execução.
O problema é que o navegador só fica ciente
dos dois últimos recursos depois de fazer o download, analisar e executar app.js
.
Mas você sabe que esses recursos são importantes e
precisam ser salvos o mais rápido possível.
Declarar seus links de pré-carregamento
Declare os links de pré-carregamento no HTML para instruir o navegador a fazer o 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, estilos.css e ui.js são solicitados ao mesmo tempo que o app.js.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=4&hl=pt-br)
styles.css
e
ui.js
são solicitados ao mesmo tempo que app.js
.
Consulte também Pré-carregar recursos essenciais para melhorar a velocidade de carregamento para mais orientações.
Compatibilidade com navegadores
A partir de junho de 2020, o pré-carregamento será compatível com navegadores baseados no Chromium. Consulte Compatibilidade do navegador para mais atualizações.
Suporte a ferramentas de criação para pré-carregamento
Consulte a página Pré-carregamento de recursos do Tooling.Report.
Orientações específicas para a pilha
Angular
Pré-carregue os trajetos com antecedência para acelerar a navegação.
Magento
Modifique o layout dos temas
e adicione tags <link rel=preload>
.