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.
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.
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.
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>
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">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 ?
Quelle est la différence entre le préchargement et le préaffichage d'une page ?
Le cache du service worker et le cache HTTP sont identiques.
À 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 !