Pré-carregar solicitações de chave

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:

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

Sem os links de pré-carregamento, estilos.css e ui.js são solicitados somente depois que app.js é baixado, analisado e executado.
Sem os links de pré-carregamento, styles.css e ui.js serão solicitados somente depois do download de app.js. analisados e executados.

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 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>
Com os links de pré-carregamento, estilos.css e ui.js são solicitados ao mesmo tempo que app.js.
Com links de pré-carregamento, styles.css e ui.js são solicitadas ao mesmo tempo que app.js.

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

Recursos