Pré-carregar solicitações de chave

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

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.
Sem links de pré-carregamento, 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.

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.
Com os links de pré-carregamento, 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>.

Recursos