Como priorizar seus recursos com o link rel="#39;preload'

Jeff posnick

Você já quis informar o navegador sobre uma fonte, um script ou outro recurso importante que será necessário para a página, sem atrasar o evento onload? O <link rel="preload"> permite que os desenvolvedores da Web façam exatamente isso, usando uma sintaxe de elemento HTML familiar com alguns atributos-chave para determinar o comportamento exato. É um padrão de rascunho que é enviado como parte da versão do Chrome 50.

Os recursos carregados usando <link rel="preload"> são armazenados localmente no navegador e ficam inertes até serem referenciados no DOM, JavaScript ou CSS. Por exemplo, confira um caso de uso em potencial em que um arquivo de script é pré-carregado, mas não executado imediatamente, como se fosse incluído por uma tag <script> no DOM.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

O que está acontecendo aqui? Os desenvolvedores da Web precisam conhecer o atributo href usado nesse exemplo, já que ele é o atributo padrão usado para especificar o URL de qualquer recurso vinculado.

O atributo as é provavelmente novo para você. Ele é usado no contexto de um elemento <link> para dar ao navegador mais contexto sobre o destino da solicitação de pré-carregamento que está sendo feita. Essas informações extras garantem que o navegador defina cabeçalhos de solicitação adequados e a prioridade, além de aplicar quaisquer diretivas da Política de Segurança de Conteúdo relevantes para o contexto correto do recurso.

Aprenda (muito) mais

Yoav Weiss escreveu o guia definitivo para usar <link rel="preload">. Se você tiver curiosidade e quiser começar a usá-lo nas suas próprias páginas, recomendo ler o artigo dele para saber mais sobre os benefícios e casos de uso criativos.

<link rel="preload"> substitui <link rel="subresource">, que tem bugs e desvantagens significativas e que nunca foi implementado em outros navegadores além do Chrome. Assim, o Chrome 50 remove o suporte para <link rel="subresource">.