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