Recherche de site Web

Comment utiliser Preload et Prefetch en HTML pour charger des ressources

Introduction

Le chargement des ressources sur une page est une partie importante pour atteindre des performances web optimales et une expérience utilisateur fluide. Habituellement, les applications réelles chargent plusieurs fichiers CSS, de polices, JavaScript et d'images. Ces ressources bloquent le rendu par défaut, ce qui nuit aux performances de chargement.

Dans ce tutoriel, vous allez explorer une nouvelle fonctionnalité appelée resource hints, comme preload et prefetch. Ces resource hints vous permettront de surmonter le blocage du rendu.

Prérequis

Pour compléter ce tutoriel, vous aurez besoin des éléments suivants :

  • Google Chrome téléchargé et installé. Ce tutoriel est basé sur la version 86.0.4240.80 de Google Chrome.
  • Une compréhension du HTML, que vous pouvez trouver dans la série Comment créer un site Web avec HTML.
  • Une compréhension de base de JavaScript. Cette série Comment coder en JavaScript vous aide à y parvenir.

Étape 1 — Comprendre le blocage du rendu

Lorsqu'une requête vers une ressource bloque le rendu, cela signifie que l'événement window.onload ne sera pas déclenché tant que cette requête n'est pas terminée. Dans les applications modernes à page unique, la plupart des ressources, comme les fichiers CSS et JavaScript ainsi que les images, dépendent de cet événement pour commencer à fonctionner. Cela signifie que certaines parties de l'interface utilisateur ne commenceront pas à se rendre ou à s'afficher à l'écran tant que les requêtes bloquant le rendu n'ont pas fini de se charger.

Pour voir cela en action, créez un fichier HTML avec le modèle HTML standard en place. Cela peut être fait dans votre éditeur de code de choix :

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

Dans l’en-tête, utilisez la balise <link> pour accéder à votre police Google de choix. Cet extrait de code utilisera Roboto :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
  </head>
  <body>

  </body>
</html>

Ajoutez des balises <style>. En utilisant le CSS, définissez la font-family de toutes les balises p sur Roboto :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
      <style>
      p {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>

  </body>
</html>

Avec vos métadonnées et votre CSS en place, vous pouvez créer un <p> dans le <body> qui dit Hello :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>
  </body>
</html>

Pour voir le blocage du rendu en action, ajoutez des balises <script> dans le <body>. Créez une fonction JavaScript en utilisant window.onload qui fera un console.log du message 'Loaded' :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>

    <script>
      window.onload = function () {
        console.log('Loaded');
      }
    </script>
  </body>
</html>

Avec votre code en place, ouvrez votre fichier HTML dans Chrome. Ensuite, ouvrez les Outils de développement et allez dans l'onglet Réseau. Réduisez la connexion à 3G lente puis rechargez la page.

Le message Loaded est enregistré dans la console juste après le chargement du fichier CSS, comme le montre l'image suivante :

Cet effet devient plus problématique lors de la création et du chargement de sites web plus grands. Vos ressources CSS et JavaScript, ainsi que beaucoup d'autres, peuvent prendre beaucoup de temps à se charger. Par conséquent, vos styles CSS peuvent ne pas s'afficher immédiatement. Le préchargement des ressources peut éliminer cet effet et prévenir un chargement retardé.

Étape 2 — Préchargement des ressources

Pour empêcher le blocage de rendu par défaut et pour s'assurer que les ressources de la page comme les polices et le CSS commencent à se charger tôt dans le cycle de vie de la page, vous devrez mettre en œuvre le préchargement. La valeur d'attribut rel="preload" est utilisée pour précharger les ressources. Elle peut être appliquée à plusieurs formats de fichiers, y compris CSS, JS, polices, images, et plus encore. Selon le type de fichier que vous souhaitez précharger, l'attribut as correspondant peut aussi devoir être inclus avec rel="preload". Pour le CSS, as= devra être défini comme "style". Pour le JavaScript, as= devra être défini comme "script".

Retournez au fichier HTML et modifiez le <link> précédent. Définissez rel égal à "preload". Ajoutez l'attribut as défini égal à "style" :

<head>
    <link
      rel="preload"
      as="style"
      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>

Avec votre fichier HTML ouvert dans Google Chrome, retournez dans Outils de développement et rechargez la page avec Réseau toujours réglé sur 3G lente. Vous verrez que le journal Chargé apparaît juste avant que la requête CSS ne commence, comme le montre l'image suivante :

Cependant, vous avez peut-être remarqué que le style CSS n’a pas été appliqué au texte. Cela s’explique par le fait que l’utilisation de preload ou prefetch ne fait que récupérer la ressource, mais ne l’applique pas. Au lieu de cela, preload et prefetch garderont la ressource en mémoire. Vous devez définir quand la ressource sera chargée.

La police doit être appliquée dès qu'elle se charge. Pour que cela se produise, ajoutez l'attribut onload à la balise <link>. Définissez onload égal à "this.rel='stylesheet'" :

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>

En définissant l'attribut rel sur stylesheet dans onload, le navigateur est informé d'utiliser la ressource. Comme elle a déjà été téléchargée en mémoire, elle n'est pas téléchargée à nouveau.

Puisque la solution onload repose sur JavaScript, ajoutez des balises <noscript> contenant les balises <link> originales avec rel défini sur "stylesheet" :

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
<noscript>
  <link
    rel="stylesheet"
    href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</noscript>

Cela garantira que la police s'affiche si JavaScript est désactivé ou ne parvient pas à se charger.

Vous savez maintenant comment précharger les ressources de votre page web. Il y a des moments où vous voudrez peut-être pré-extraire vos ressources à la place.

Étape 3 — Préchargement des ressources

Le préchargement fonctionne de manière similaire au préchargement préalable. La différence est que, lors du préchargement préalable d'une ressource, le navigateur considère la ressource comme étant de faible priorité. Cela signifie que la ressource ou l'actif se chargera un peu plus tard. Pour cette raison, le préchargement préalable est généralement utilisé avec des ressources qui ne sont pas nécessaires initialement, mais qui sont utilisées ultérieurement.

Pour implémenter le préchargement sur votre page HTML, changez la valeur de rel en "prefetching" :

<link
  rel="prefetch"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>

Le préchargement et le préfetching du CSS peuvent aider à améliorer les performances du web. Vous pouvez également vouloir appliquer le préchargement à votre JavaScript. Le préchargement du JavaScript est différent du préchargement des ressources CSS.

Étape 4 — Préchargement de JavaScript

Le préchargement des ressources JavaScript se fait différemment. Cet exemple, tiré de cet article de Google Developers sur le préchargement, montre ceci :

<link rel="preload" href="used-later.js" as="script">
<!-- ... -->
<script>
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'used-later.js';
  document.body.appendChild(usedLaterScript);
</script>

Remarque : Extrait de code reproduit à partir d’un travail créé et partagé par Google et sous licence Apache 2.0.

L'étape importante ici est de définir l'attribut src du fichier et de l'insérer dans le DOM.

Conclusion

Le préchargement et la prélecture vous permettent de contrôler la manière dont les ressources sont chargées et aident à améliorer les performances du web. Avec ce tutoriel, vous avez mis en œuvre des indices de ressources pour précharger et prélire des ressources comme le CSS, les polices et le JavaScript. Cela vous aidera à créer des applications web progressives plus rapides.

Pour créer des applications web progressives avec Angular, ce tutoriel Comment créer des applications web progressives avec Angular peut y parvenir. Si vous préférez JavaScript natif, ce tutoriel Comment créer une PWA en JavaScript natif peut vous aider.