Préchargement, prérendu et préchargement de service worker

Dans les deux derniers modules, vous avez découvert des concepts tels que différer le chargement de JavaScript et d'images à chargement différé et d'éléments <iframe>. Le report du chargement des ressources réduit l'utilisation du réseau et du processeur lors de la chargement d'une page en téléchargeant les ressources au moment où elles sont nécessaires, au lieu de les charger à l'avance, ce qui pourrait potentiellement être inutilisés. Cela peut améliorer le temps de chargement initial de la page, mais les interactions ultérieures peuvent engendrer un délai si les ressources nécessaires pour les alimenter ne sont pas déjà chargées à ce moment-là ; lorsqu'ils se produisent.

Par exemple, si une page contient un sélecteur de date personnalisé, vous pouvez reporter la date les ressources du sélecteur jusqu'à ce que l'utilisateur interagisse avec l'élément. Toutefois, le chargement les ressources à la demande du sélecteur de date peut entraîner un retard, peut-être minime, mais peut-être pas, en fonction de la connexion réseau de l'utilisateur, des capacités de l'appareil ou jusqu'à ce que les ressources soient téléchargées, analysées et disponibles pour exécution.

C'est un équilibre délicat : vous ne voulez pas gaspiller de la bande passante en chargeant ressources pouvant rester inutilisées, mais retardant les interactions et la page suivante peuvent ne pas être idéales non plus. Heureusement, il existe un certain nombre d’outils que vous pouvez pour trouver un meilleur équilibre entre ces deux extrêmes. Ce module aborde certaines techniques pour y parvenir, comme le préchargement des ressources, le préchargement de pages entières et la mise en cache de ressources à l'aide d'un service worker.

Précharger les ressources nécessaires dans un avenir proche à une priorité faible

Il est possible d'extraire de manière préventive les ressources, telles que des images, des feuilles de style, ou JavaScript, à l'aide de l'indice de ressource <link rel="prefetch">. La L'indice prefetch informe le navigateur qu'une ressource sera probablement requise dans dans un avenir proche.

Lorsqu'une suggestion prefetch est spécifiée, le navigateur peut alors lancer une requête pour cette ressource à la priorité la plus faible afin d'éviter de concurrencer les ressources requises pour la page actuelle.

<ph type="x-smartling-placeholder">

Le préchargement des ressources peut améliorer l'expérience utilisateur, car celui-ci n'est pas d'attendre que les ressources nécessaires dans un avenir proche soient téléchargées, car ils peuvent être instantanément récupérés du cache disque au moment où ils en ont besoin.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

L'extrait de code HTML précédent informe le navigateur qu'il peut effectuer une prélecture date-picker.js et date-picker.css une fois qu'il est inactif. Il est également possible de précharger les ressources de manière dynamique lorsque l'utilisateur interagit avec la page JavaScript.

prefetch est compatible avec tous les navigateurs récents, à l'exception de Safari, où il l'est. disponibles derrière un drapeau. Si vous avez absolument besoin de charger de manière préemptive pour votre site Web de sorte qu'elle fonctionne dans tous les navigateurs, en utilisant un service worker, puis lisez la section suivante de ce module sur la mise en cache préalable à l'aide d'un service worker.

Prélire les pages pour accélérer les futures navigations

Il est également possible de précharger une page et toutes ses sous-ressources en spécifiant la as="document" lorsque vous pointez vers un document HTML:

<link rel="prefetch" href="/page" as="document">

Lorsque le navigateur est inactif, il peut initier une requête de faible priorité pour /page.

<ph type="x-smartling-placeholder">

Dans les navigateurs basés sur Chromium, vous pouvez précharger des documents à l'aide de la API Speculation Rules Les règles de spéculation sont définies en tant qu'objets JSON dans le code HTML de la page ou ajoutées de manière dynamique via JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

L'objet JSON décrit une ou plusieurs actions (actuellement compatibles uniquement prefetch et prerender, ainsi qu'une liste d'URL associées à cette action. Dans l'extrait de code HTML précédent, le navigateur est invité à précharger /page-a et /page-b. Comme pour <link rel="prefetch">, les règles de spéculation sont que le navigateur peut ignorer dans certains cas.

<ph type="x-smartling-placeholder">

Les bibliothèques telles que Quicklink améliorent la navigation sur les pages en préchargement ou préchargement des liens vers des pages une fois qu'ils sont visibles dans dans la fenêtre d'affichage de l'utilisateur. Cela augmente la probabilité que l'utilisateur finisse accède à cette page (contrairement au préchargement de tous les liens de la page).

<ph type="x-smartling-placeholder">

Précharger les pages

En plus du préchargement des ressources, il est également possible d'indiquer au navigateur pour précharger une page avant que l'utilisateur n'accède à celle-ci. Cela peut générer presque le chargement instantané de la page, à mesure que la page et ses ressources sont récupérées et traitées en arrière-plan. Lorsque l'utilisateur accède à la page, celle-ci est placée dans le au premier plan.

Le prérendu est compatible avec l'API Speculation Rules:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

Démonstrations de préchargement et de prérendu

Mise en cache préalable d'un service worker

Il est également possible de précharger les ressources de manière spéculative à l'aide d'un service worker. La mise en cache préalable d'un service worker peut extraire et économiser des ressources à l'aide de l'API Cache. permettant au navigateur de diffuser la requête à l'aide de l'API Cache sans accéder le réseau. La mise en cache préalable d'un service worker repose sur un service worker très efficace mise en cache, également appelée stratégie de mise en cache uniquement. Ce modèle est très car une fois les ressources placées dans le cache des service workers, sont récupérées presque instantanément à la demande.

<ph type="x-smartling-placeholder">
</ph> Affiche le flux de mise en cache de service worker de la page, au service worker et au cache. <ph type="x-smartling-placeholder">
</ph> La stratégie "cache uniquement" ne récupère que les ressources éligibles pendant l'installation du service worker. Une fois installés, les fichiers les ressources ne sont extraites que du cache du service worker.
<ph type="x-smartling-placeholder">

Pour effectuer une pré-mise en cache des ressources à l'aide d'un service worker, vous pouvez utiliser Workbox. Si vous Toutefois, vous pouvez écrire votre propre code pour mettre en cache un ensemble . Dans tous les cas, vous décidez d'utiliser un service worker pour effectuer une mise en pré-cache des ressources, il est important de savoir que la mise en cache préalable a lieu lorsque le service le nœud de calcul est installé. Après l'installation, les ressources mises en cache sont peuvent être récupérées sur n'importe quelle page de votre site Web contrôlée par le service worker.

<ph type="x-smartling-placeholder">

Workbox utilise un fichier manifeste de mise en cache préalable pour déterminer les ressources à utiliser en pré-cache. Un fichier manifeste de mise en cache préalable est une liste de fichiers et d'informations de gestion des versions qui sert de "source de vérité" pour que les ressources soient mises en pré-cache.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

Le code précédent est un exemple de fichier manifeste qui comprend deux fichiers: script.ffaa4455.js et /index.html. Si une ressource contient le numéro de version informations directement dans le fichier (hachage de fichier), la fonction revision peut être conservée sur null, car le fichier possède déjà des versions (par exemple, ffaa4455 pour la ressource script.ffaa4455.js dans le code précédent). Pour ressources sans version, une révision peut être générée pour celles-ci au moment de la compilation.

Une fois configuré, un service worker permet de mettre en cache des pages statiques ou leurs des sous-ressources pour accélérer les navigations suivantes sur les pages.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

Par exemple, sur une fiche produit d'e-commerce, vous pouvez utiliser un service worker pour mettre en pré-cache le CSS et le JavaScript nécessaires à l'affichage de la page d'informations détaillées sur le produit, ce qui rend la navigation vers la page d'informations d'informations détaillées sur le produit beaucoup plus rapide. Dans dans l'exemple précédent, product-page.ac29.css et product-page.39a1.js sont en pré-cache. La méthode precacheAndRoute disponible dans workbox-precaching enregistre automatiquement les gestionnaires nécessaires pour garantir que les ressources mises en pré-cache sont extraites de l'API Service Worker à chaque fois que nécessaire.

Les service workers étant largement compatibles, vous pouvez les utiliser la mise en cache sur n'importe quel navigateur moderne où la situation l'exige.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

Tester vos connaissances

À quelle priorité une astuce prefetch apparaît-elle ?

faible.
Élevée.
Moyenne.

Quelle est la différence entre le préchargement et le préaffichage d'une page ?

Ils sont globalement les mêmes : seul le prérendu obtient l'intégralité des sous-ressources, contrairement au préchargement.
Alors qu'un préchargement et un prérendu d'une page obtiennent une page et tous ses sous-ressources, le préchargement ne récupère que la page et l'ensemble de ses ressources. Le prérendu va encore plus loin en affichant toute la page en arrière-plan jusqu’à ce que l’utilisateur y accède.

Le cache du service worker et le cache HTTP sont identiques.

Faux
Vrai

À suivre: Présentation des nœuds de calcul Web

Maintenant que vous savez comment le préchargement, le prérendu et la pré-mise en cache de service worker peut être bénéfique pour accélérer la navigation vous êtes en mesure de prendre des décisions éclairées bénéfique pour votre site Web et ses utilisateurs.

Ensuite, nous présenterons les Web workers et les raisons pour lesquelles ils peuvent travailler en dehors du thread principal et donner au thread principal plus d'espace pour les interactions des utilisateurs. Vous vous êtes déjà demandé ce que vous pouviez faire pour donner plus d'espace, alors les deux prochains modules valent la peine !