PRPL est un acronyme qui décrit un modèle utilisé pour charger les pages web et deviennent interactives et plus vite:
- Préchargez les ressources récemment découvertes.
- Affichez la route initiale dès que possible.
- Mettez en cache les éléments restants.
- Effectuez un chargement différé des autres routes et des éléments non critiques.
Dans ce guide, vous découvrirez comment chacune de ces techniques s'intègre parfaitement utilisées de manière indépendante pour obtenir des performances.
Auditer votre page avec Lighthouse
Exécutez Lighthouse pour identifier les possibilités d'amélioration conformes à la PRPL. techniques:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Cochez les cases Performances et Application Web progressive.
- Cliquez sur Exécuter des audits pour générer un rapport.
Pour en savoir plus, consultez Identifier les opportunités d'amélioration des performances avec Lighthouse.
Précharger les ressources critiques
Lighthouse affiche l'audit qui a échoué suivant si une ressource donnée est analysée et récupéré en retard:
Précharger
est une requête de récupération déclarative qui indique au navigateur de demander une ressource qui n'est pas détectable par son outil d'analyse de préchargement, comme une image référencée par la propriété background-image. Préchargez les ressources récemment découvertes en ajoutant une balise <link> avec rel="preload" à 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"> lance une requête pour cette ressource et la stocke dans le cache. Le navigateur peut alors les récupérer en cas de besoin.
Pour en savoir plus sur le préchargement des ressources critiques, consultez Guide Précharger les éléments critiques.
<ph type="x-smartling-placeholder">Afficher l'itinéraire initial dès que possible
Lighthouse affiche un avertissement si des ressources retardent First Paint, moment où votre site affiche les pixels à l'écran:
Pour améliorer First Paint, Lighthouse recommande d'intégrer les éléments JavaScript critiques
en différant le reste en utilisant
async,
et intégrer les CSS critiques
utilisés dans la partie au-dessus de la ligne de flottaison. Cela permet d'améliorer 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.
ne peuvent pas être mises en cache séparément par le navigateur.
Une autre approche pour améliorer First Paint consiste à effectuer un rendu côté serveur le code HTML de votre page. Le contenu est immédiatement présenté à l'utilisateur pendant que les scripts sont toujours en cours d'extraction, d'analyse et d'exécution. Toutefois, cela peut augmenter du fichier HTML, ce qui peut nuire considérablement au délai d'interaction ou le temps nécessaire pour que votre application devienne interactive et réponde à l'entrée utilisateur.
Il n'existe pas de solution unique pour réduire le nombre d'impressions de votre première peinture votre application. Vous ne devez envisager que d'intégrer des styles et des si les avantages l'emportent sur les compromis pour votre application. Vous pouvez Pour en savoir plus sur ces deux concepts, consultez les ressources suivantes.
Mettre les éléments en pré-cache
En agissant en tant que proxy, les service workers peuvent récupérer des éléments directement à partir du cache. plutôt qu'au serveur lors de visites répétées. Cela permet non seulement aux utilisateurs applications hors connexion, mais cela réduit également le temps de chargement des pages sur visites répétées.
Utiliser 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 ce qu'une bibliothèque peut que vous fournissez. Par exemple : Workbox fournit ensemble d'outils permettant de créer et de gérer un service worker mettre en cache les éléments. Pour en savoir plus sur les service workers et la fiabilité hors connexion, consultez le guide Service Worker dans le parcours de formation dédié à la fiabilité.
Chargement différé
Lighthouse affiche un échec d'audit si vous envoyez trop de données sur le réseau.
Cela inclut tous les types d'éléments, mais les charges utiles JavaScript volumineuses sont particulièrement coûteux en raison du temps qu'il faut au navigateur pour les analyser et les compiler. Lighthouse affiche également un avertissement à ce sujet, le cas échéant.
Pour envoyer une charge utile JavaScript plus petite contenant uniquement le code nécessaire lorsqu'un charge l'application, divisez l'ensemble du bundle et les fragments de chargement différé à la demande.
Une fois que vous avez réussi à diviser votre bundle, préchargez les fragments les plus important (consultez le guide Précharger les éléments critiques). Le préchargement garantit que les ressources les plus importantes sont récupérées et téléchargées plus rapidement par le navigateur.
Outre la division et le chargement de différents fragments JavaScript à la demande, Lighthouse propose également un audit des images non critiques à chargement différé.
Si vous chargez de nombreuses images sur votre page Web, différez toutes celles qui se trouvent en dessous de la ligne de flottaison. 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 le chargement différé des images).
Étapes suivantes
Maintenant que vous comprenez certains concepts de base du modèle de 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és ensemble. Tous les efforts réalisés avec l'un des éléments suivants permettront des améliorations notables des performances.
- Précharger les ressources critiques
- Affichez la route initiale dès que possible.
- Mettez en cache les éléments restants.
- Effectuez un chargement différé des autres routes et des éléments non critiques.
Pour en savoir plus, consultez la section concernant les modèles de PRPL.