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 de pré-carregamento:
Como as sinalizações do Lighthouse determinam os candidatos de pré-carregamento
Suponha que a tag cadeia de solicitações crítica tem esta aparência:
index.html |--app.js |--styles.css |--ui.js
O arquivo index.html
declara <script src="app.js">
. Quando app.js
executa , ele chama
fetch()
para fazer o download de styles.css
e ui.js
. A página não parece completa
até que os dois últimos recursos sejam baixados, analisados e executados.
Usando o exemplo acima, o Lighthouse sinaliza styles.css
e ui.js
como candidatos.
A economia potencial baseia-se em quanto antes o navegador conseguiria
para 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 é 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 das suas páginas.
O problema aqui é que o navegador só identifica
dos dois últimos recursos depois de fazer o download, analisar e executar app.js
.
Mas você sabe que esses recursos são importantes
deve ser baixado assim que possível.
Declarar os links de pré-carregamento
Declarar links de pré-carregamento no HTML para instruir o navegador a fazer o download dos recursos principais assim que possível.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
Confira também Pré-carregar recursos essenciais para melhorar a velocidade de carregamento. para mais orientações.
Compatibilidade com navegadores
Desde junho de 2020, o pré-carregamento é compatível com navegadores baseados no Chromium. Consulte Compatibilidade do navegador para atualizações.
Suporte à ferramenta de build para pré-carregamento
Consulte Pré-carregamento de recursos do Tooling.Report página.
Orientação específica da pilha
Angular
Pré-carregue as rotas com antecedência para acelerar a navegação.
Magento
Modificar o layout dos temas
e adicione as tags <link rel=preload>
.