Rendu progressif : améliorer les performances d'affichage des contenus

Le

Le rendu progressif est un ensemble de techniques utilisées pour améliorer les performances d'une page Web, notamment en termes de rapidité avec laquelle le contenu est affiché aux utilisateurs. Certaines parties de la page sont affichées et chargées progressivement, au lieu de charger la page entière en une seule fois. L'objectif est d'afficher le contenu le plus rapidement possible, améliorant ainsi le temps de chargement perceptuel - le temps pendant lequel l'utilisateur perçoit que la page se charge.

---

Avantages du rendu progressif

1. Temps d'affichage plus rapide - Les utilisateurs voient le premier contenu plus rapidement, ce qui améliore l'expérience utilisateur, en particulier sur les réseaux plus lents.

2. Optimisation pour les appareils les plus faibles - Les appareils moins puissants peuvent afficher plus facilement le contenu initial sans décalage.

3. Utilisations du référencement - Les moteurs de recherche indexent les éléments initialement chargés, ce qui contribue à un meilleur classement des pages.

---

Techniques de rendu progressif

Les techniques utilisées pour le rendu progressif incluent le chargement paresseux pour les images et autres ressources, le rendu côté serveur (SSR) et l'hydratation côté client code SPA candidature.

Bien que le rendu progressif soit particulièrement important à l'époque où Internet était plus lent, il est toujours utile dans le développement actuel en raison de l'utilisation généralisée des réseaux mobiles qui peuvent s'avérer peu fiables. Voici quelques techniques utilisées pour le rendu progressif.

1. Chargement paresseux des images (Chargement paresseux)

Dans cette technique, les images de la page ne sont pas chargées d'un seul coup. Au lieu de cela, les images sont chargées uniquement lorsque l'utilisateur fait défiler jusqu'à la partie de la page où se trouve l'image. De cette manière, les ressources sont utilisées de manière plus économique et la page se charge plus rapidement car seul le contenu le plus important est affiché en premier.

• Chargement paresseux moderne : HTML prend désormais en charge l'attribut chargement="lazy" pour éléments, qui indiquent au navigateur de retarder le chargement des images qui se trouvent en dehors de la partie visible de la page jusqu'à ce que l'utilisateur les fasse défiler. Par exemple:

   <img src="image.jpg" loading="lazy" alt="Opis slike">

• Suivi du défilement JavaScript : Vous pouvez utiliser JavaScript pour suivre la position du défilement, et lorsque l'image se rapproche de la partie visible de l'écran, le chargement de l'image peut être déclenché à ce moment (en comparant les coordonnées du image avec la position de défilement actuelle).

2. Priorité au contenu visible (Rendu du contenu au dessus de la superposition)

Par « contenu au-dessus de la ligne de flottaison », nous entendons le contenu qui est immédiatement visible dans le navigateur sans défilement. Pour que la page affiche ce contenu clé le plus rapidement possible, seules les ressources nécessaires telles que les CSS de base et les scripts de rendu de page initiaux doivent être chargées.

Minimiser les ressources : Lors du chargement d'une page, vous ne devez inclure que la quantité minimale de CSS, de contenu et de scripts nécessaires au rendu de la première partie de la page. D'autres ressources peuvent être différées à l'aide de scripts defer ou en surveillant des événements tels que DOMContentLoaded ou Load, afin que des ressources supplémentaires soient chargées après l'affichage initial.

3. Fragments HTML asynchrones

Cette technique permet au serveur d'envoyer une partie du HTML au navigateur afin que la page puisse être rendue immédiatement, tandis que les parties restantes sont chargées successivement. Cette approche est particulièrement utile pour les pages dynamiques dont le contenu provient du serveur - une partie de la page est affichée en premier, tandis que d'autres parties sont ajoutées ultérieurement.

4. Préchargement et prélecture des ressources

En utilisant ou pour charger des ressources critiques telles que des styles, des scripts ou des polices avant qu'elles ne soient nécessaires. Cela permet au contenu de se charger plus rapidement, en particulier pour les ressources qui ne sont pas immédiatement nécessaires mais qui sont utilisées plus tard sur la page.

5. Partage du code et chargement dynamique de JavaScript

Briser le code JavaScript en parties plus petites (morceaux) qui ne sont chargées qu'en cas de besoin, réduisant ainsi le volume initial de données téléchargées.

6. Chemin critique CSS (Critical CSS)

Isoler et charger uniquement le CSS le plus important pour l'affichage initial de la page, tandis que le reste peut être chargé de manière asynchrone. Cela permet au contenu visuel d'être rendu plus rapidement pendant que le reste de la page se charge en arrière-plan.

7. Rendu côté serveur (SSR) et génération de site statique (SSG)

Rendu de parties de la page sur le serveur avant qu'elles ne soient envoyées à l'utilisateur. Cela permet aux utilisateurs de voir le contenu immédiatement sans attendre le chargement de JavaScript, ce qui entraîne de meilleures performances et un meilleur référencement.

8. Applications Web progressives (PWA)

L'utilisation de la technologie PWA permet de charger et d'accéder à l'application même lorsque l'utilisateur n'est pas en ligne, ce qui réduit la charge du réseau et permet un chargement rapide du contenu même dans des conditions de mauvaise connexion Internet.

---

Conclusion

Le rendu progressif permet d'obtenir un rendu de contenu plus rapide, réduisant ainsi les temps de chargement perçus. Malgré des connexions Internet plus rapides, ces techniques restent utiles en raison de l’utilisation accrue des appareils mobiles et de l’évolution de la qualité des réseaux mobiles. De cette façon, vous offrez aux utilisateurs une meilleure expérience, avec un accès plus rapide aux informations les plus importantes de votre page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!