Dans les deux derniers modules, vous avez découvert des concepts tels que le report du chargement de JavaScript et le chargement différé des images et des éléments <iframe>.
Le report du chargement des ressources réduit l'utilisation du réseau et du processeur lors du chargement initial de la page en téléchargeant les ressources au moment où elles sont nécessaires, plutôt que de les charger à l'avance, où elles pourraient potentiellement ne pas être utilisées.
Cela peut améliorer le temps de chargement initial des pages, mais les interactions ultérieures peuvent entraîner un délai si les ressources nécessaires à leur fonctionnement ne sont pas déjà chargées au moment où elles se produisent.
Par exemple, si une page contient un sélecteur de date personnalisé, vous pouvez différer les ressources du sélecteur de date jusqu'à ce que l'utilisateur interagisse avec l'élément. Toutefois, le chargement à la demande des ressources du sélecteur de date peut entraîner un délai (peut-être léger, mais peut-être pas, selon la connexion réseau de l'utilisateur, les capacités de l'appareil ou les deux) jusqu'à ce que les ressources soient téléchargées, analysées et disponibles pour l'exécution.
Il s'agit d'un équilibre délicat : vous ne voulez pas gaspiller de la bande passante en chargeant des ressources qui peuvent ne pas être utilisées, mais retarder les interactions et les chargements de page ultérieurs n'est peut-être pas idéal non plus. Heureusement, il existe un certain nombre d'outils que vous pouvez utiliser pour trouver un meilleur équilibre entre ces deux extrêmes. Ce module aborde certaines techniques que vous pouvez utiliser pour y parvenir, comme le préchargement des ressources, le prérendu de pages entières et le précache des ressources à l'aide d'un service worker.
Préchargement des ressources nécessaires dans un avenir proche à faible priorité
Il est possible de précharger des ressources, y compris des images, des feuilles de style ou des ressources JavaScript, à l'aide de l'indicateur de ressource <link rel="prefetch">. L'indice prefetch informe le navigateur qu'une ressource est susceptible d'être requise dans un avenir proche.
Lorsqu'un indice prefetch est spécifié, le navigateur peut alors lancer une requête pour cette ressource avec la priorité la plus basse afin d'éviter d'entrer en conflit avec les ressources requises pour la page actuelle.
Le préchargement des ressources peut améliorer l'expérience utilisateur, car l'utilisateur n'a pas besoin d'attendre le téléchargement des ressources nécessaires dans un avenir proche. En effet, elles peuvent être récupérées instantanément à partir du cache disque au moment où elles sont nécessaires.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
L'extrait HTML précédent indique au navigateur qu'il peut précharger date-picker.js et date-picker.css lorsqu'il est inactif. Il est également possible de précharger des ressources de manière dynamique lorsque l'utilisateur interagit avec la page en JavaScript.
prefetch est compatible avec tous les navigateurs modernes, sauf Safari, où il est disponible derrière un indicateur. Si vous avez absolument besoin de précharger des ressources pour votre site Web de manière à ce qu'elles fonctionnent dans tous les navigateurs et que vous utilisez un service worker, consultez la section ultérieure de ce module sur le précache de ressources à l'aide d'un service worker.
Précharger des 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 l'attribut as="document" lorsque vous pointez vers un document HTML :
<link rel="prefetch" href="/page" as="document">
Lorsque le navigateur est inactif, il peut lancer une requête de faible priorité pour /page.
Dans les navigateurs basés sur Chromium, vous pouvez précharger des documents à l'aide de l'API Speculation Rules. Les règles de spéculation sont définies comme un objet JSON inclus dans le code HTML de la page ou ajouté 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, seules prefetch et prerender sont acceptées) et 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 une indication que le navigateur peut ignorer dans certaines circonstances.
Des bibliothèques telles que Quicklink améliorent la navigation sur les pages en préchargeant ou en prérendant dynamiquement les liens vers les pages une fois qu'ils sont visibles dans la fenêtre d'affichage de l'utilisateur. Cela augmente la probabilité que l'utilisateur finisse par accéder à cette page, par rapport au préchargement de tous les liens de la page.
Prérendre des pages
En plus de la prélecture des ressources, il est également possible d'indiquer au navigateur de prérendre une page avant que l'utilisateur n'y accède. Cela peut permettre de charger les pages presque instantanément, car la page et ses ressources sont récupérées et traitées en arrière-plan. Une fois que l'utilisateur accède à la page, celle-ci est placée 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>
Démos de préchargement et de prérendu
Précache du service worker
Il est également possible de précharger spéculativement des ressources à l'aide d'un service worker.
La mise en cache préalable des service workers peut récupérer et enregistrer des ressources à l'aide de l'API Cache, ce qui permet au navigateur de répondre à la requête à l'aide de l'API Cache sans passer par le réseau. La mise en cache anticipée des service workers utilise une stratégie de mise en cache des service workers très efficace, appelée stratégie de cache uniquement. Ce modèle est très efficace, car une fois les ressources placées dans le cache du service worker, elles sont récupérées presque instantanément sur demande.
Pour précharger des ressources à l'aide d'un service worker, vous pouvez utiliser Workbox. Toutefois, si vous préférez, vous pouvez écrire votre propre code pour mettre en cache un ensemble prédéterminé de fichiers. Quelle que soit la manière dont vous décidez d'utiliser un service worker pour précharger les ressources, il est important de savoir que le préchargement a lieu lorsque le service worker est installé. Une fois l'installation terminée, les ressources pré-mises en cache peuvent être récupérées sur n'importe quelle page contrôlée par le service worker sur votre site Web.
Workbox utilise un fichier manifeste de précache pour déterminer les ressources à précharger. Un manifeste de précache est une liste de fichiers et d'informations sur les versions qui sert de "source de vérité" pour les ressources à précharger.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Le code précédent est un exemple de fichier manifeste qui inclut deux fichiers : script.ffaa4455.js et /index.html. Si une ressource contient des informations sur la version dans le fichier lui-même (appelées hachage de fichier), la propriété revision peut être laissée sur null, car le fichier est déjà versionné (par exemple, ffaa4455 pour la ressource script.ffaa4455.js dans le code précédent). Pour les ressources sans version, une révision peut être générée au moment de la compilation.
Une fois configuré, un service worker peut être utilisé pour prémettre en cache les pages statiques ou leurs sous-ressources afin d'accélérer les navigations de page ultérieures.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Par exemple, sur une page de liste de produits d'e-commerce, un service worker peut être utilisé pour précharger 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 cette page beaucoup plus rapide. Dans l'exemple précédent, product-page.ac29.css et product-page.39a1.js sont pré-mises en cache. La méthode precacheAndRoute disponible dans workbox-precaching enregistre automatiquement les gestionnaires nécessaires pour s'assurer que les ressources pré-mises en cache sont récupérées à partir de l'API Service Worker chaque fois que nécessaire.
Étant donné que les service workers sont largement compatibles, vous pouvez utiliser le préchargement du service worker sur n'importe quel navigateur moderne lorsque la situation l'exige.
Tester vos connaissances
À quel niveau de priorité un indice prefetch se produit-il ?
Quelle est la différence entre le préchargement et le prerendu d'une page ?
Le cache du service worker et le cache HTTP sont identiques.
Prochaine étape : Présentation des Web Workers
Maintenant que vous savez comment la prélecture, le prérendu et la mise en cache du service worker peuvent être utiles pour accélérer la navigation vers de futures pages, vous êtes en mesure de prendre des décisions éclairées sur la façon dont cela peut être bénéfique pour votre site Web et ses utilisateurs.
Ensuite, un aperçu des workers Web est fourni, ainsi que la manière dont ils peuvent décharger le thread principal des tâches coûteuses et lui donner plus de marge de manœuvre pour les interactions utilisateur. Si vous vous êtes déjà demandé comment donner plus de marge de manœuvre au thread principal, les deux prochains modules valent la peine d'être consultés !