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

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

Os recursos carregados por <link rel="preload"> são armazenados localmente no navegador. e ficam inertes até serem referenciados no DOM, JavaScript ou CSS. Por exemplo, este é um possível caso de uso em que um arquivo de script pré-carregado, mas não executado imediatamente, como aconteceria 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? O atributo href usado nesse exemplo precisa ser familiar para desenvolvedores Web, já que é o atributo padrão usado para especificar o URL de qualquer recurso vinculado.

O atributo as é provavelmente nova para você e é usada no contexto de um elemento <link> para dar ao navegador mais contexto sobre a destino de de pré-carregamento sendo feita. Essas informações adicionais garantem que o navegador definirá os cabeçalhos e a prioridade da solicitação, bem como aplicar Política de Segurança de Conteúdo relevante diretivas que podem estar em vigor para o contexto correto do recurso.

Saiba (muito) mais

Yoav Weiss escreveu o guia definitivo a usar <link rel="preload">. Se você tem curiosidade e quer começar a usar nas suas páginas, recomendo a leitura do artigo dele para saber mais sobre os benefícios e os casos de uso criativos.

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