Appliquer le chargement instantané avec le modèle PRPL

PRPL est un acronyme qui décrit un modèle utilisé pour que les pages Web se chargent et deviennent interactives, plus rapidement:

  • Préchargez les ressources découvertes tardivement.
  • Affichez l'itinéraire initial dès que possible.
  • Mettez en cache les éléments restants.
  • Chargement différé d'autres routes et d'éléments non critiques.

Dans ce guide, découvrez comment chacune de ces techniques s'imbrique, mais peut toujours être utilisée indépendamment pour obtenir des résultats de performances.

Auditer votre page avec Lighthouse

Exécutez Lighthouse afin d'identifier les possibilités d'amélioration correspondant aux techniques PRPL:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  2. Cliquez sur l'onglet Lighthouse.
  3. Cochez les cases Performances et Progressive Web App.
  4. Cliquez sur Exécuter des audits pour générer un rapport.

Pour en savoir plus, consultez Identifier des opportunités de performances avec Lighthouse.

Précharger les ressources critiques

Lighthouse affiche l'échec de l'audit suivant si une certaine ressource est analysée et extraite tardivement:

Lighthouse: audit des requêtes de préchargement

Le préchargement est une requête de récupération déclarative qui indique au navigateur de demander une ressource qui n'est pas visible par l'outil d'analyse de préchargement du navigateur, telle qu'une image référencée par la propriété background-image. Pour précharger les ressources découvertes tardivement en ajoutant une balise <link> avec rel="preload" dans l'en-tête de votre document HTML:

<link rel="preload" as="image" href="hero-image.jpg">

L'ajout d'une instruction <link rel="preload"> lancera une requête pour cette ressource et la stockera dans le cache. Le navigateur peut alors le récupérer si nécessaire.

Pour en savoir plus sur le préchargement des ressources critiques, consultez le guide Précharger les ressources critiques.

Afficher l'itinéraire initial dès que possible

Lighthouse émet un avertissement si des ressources retardent le processus First Paint, au moment où votre site affiche des pixels à l'écran:

Lighthouse: éliminer l&#39;audit des ressources qui bloquent l&#39;affichage

Pour améliorer First Paint, Lighthouse recommande d'intégrer le code JavaScript critique et de différer le reste à l'aide de async, ainsi que d'intégrer le CSS critique utilisé au-dessus de la ligne de flottaison. Cela améliore les performances en éliminant les allers-retours vers le serveur pour récupérer les éléments qui bloquent l'affichage. Toutefois, le code intégré est plus difficile à gérer du point de vue du développement et ne peut pas être mis en cache séparément par le navigateur.

Une autre approche pour améliorer First Paint consiste à effectuer un rendu côté serveur du code HTML initial de votre page. Le contenu s'affiche immédiatement pour l'utilisateur pendant que les scripts sont toujours en cours de récupération, d'analyse et d'exécution. Cependant, cela peut augmenter considérablement la charge utile du fichier HTML, ce qui peut nuire au délai avant interactivité ou au temps nécessaire pour que votre application devienne interactive et puisse répondre aux entrées utilisateur.

Il n'existe pas de solution unique et appropriée pour réduire le composant First Paint dans votre application. Vous ne devez envisager d'intégrer des styles et de l'affichage côté serveur que si les avantages l'emportent sur les compromis pour votre application. Pour en savoir plus sur ces deux concepts, consultez les ressources suivantes.

Requêtes/réponses avec un service worker

Mettre en pré-cache les éléments

En agissant en tant que proxy, les service workers peuvent extraire des éléments directement du cache plutôt que du serveur lors de visites répétées. Cela permet non seulement aux utilisateurs d'utiliser votre application hors connexion, mais aussi d'accélérer le chargement des pages lors de visites répétées.

Utilisez une bibliothèque tierce pour simplifier le processus de génération d'un service worker, sauf si vous avez des exigences de mise en cache plus complexes que celles qu'une bibliothèque peut fournir. Par exemple, Workbox fournit un ensemble d'outils qui vous permettent de créer et de gérer un service worker afin de mettre en cache les éléments. Pour en savoir plus sur les service workers et la fiabilité hors connexion, consultez le guide des service workers dans le parcours de formation sur la fiabilité.

Charge différée

Lighthouse affiche un échec d'audit si vous envoyez trop de données sur le réseau.

Lighthouse: dispose d&#39;un énorme audit sur les charges utiles de réseau

Cela inclut tous les types d'éléments, mais les charges utiles JavaScript volumineuses sont particulièrement coûteuses en raison du temps nécessaire au navigateur pour les analyser et les compiler. Lighthouse envoie également un avertissement à ce sujet si nécessaire.

Lighthouse: audit du temps de démarrage JavaScript

Pour envoyer une charge utile JavaScript plus petite qui ne contient que le code nécessaire lorsqu'un utilisateur charge initialement votre application, divisez l'ensemble du bundle et les fragments de charge différée à la demande.

Une fois que vous avez réussi à diviser votre bundle, préchargez les fragments les plus importants (consultez le guide Précharger les éléments critiques). Le préchargement garantit que les ressources plus importantes sont extraites et téléchargées plus rapidement par le navigateur.

En plus de diviser et de charger différents fragments JavaScript à la demande, Lighthouse fournit également un audit pour le chargement différé des images non critiques.

Lighthouse: différer l&#39;audit des images hors écran

Si vous chargez de nombreuses images sur votre page Web, différez toutes celles qui se trouvent en dessous de la ligne de flottaison ou en dehors de la fenêtre d'affichage de l'appareil lors du chargement d'une page (voir Utiliser des tailles différées pour charger les images en différé).

Étapes suivantes

Maintenant que vous comprenez certains des concepts de base du modèle PRPL, passez au guide suivant de cette section pour en savoir plus. Il est important de se rappeler que les techniques ne doivent pas toutes être appliquées ensemble. Tout effort effectué avec l'un des éléments suivants permettra d'améliorer sensiblement les performances.

  • Préchargez les ressources critiques.
  • Affichez l'itinéraire initial dès que possible.
  • Mettez en cache les éléments restants.
  • Chargement différé d'autres routes et d'éléments non critiques.

Vous pouvez en savoir plus sur les modèles PRPL.