Quelles méthodes d'optimisation de page…

Minification et compression des ressources :
- HTML, CSS, JavaScript : Suppression des espaces inutiles, commentaires, sauts de ligne, abréviation des noms de variables.
- Images : Optimisation des formats (WebP, AVIF), compression sans perte de qualité, utilisation d’images responsive.
Utilisation de CDN (Content Delivery Network) : Distribuer les ressources statiques depuis des serveurs proches de l’utilisateur réduit la latence.
Caching du navigateur : Configurer les en-têtes HTTP appropriés (Cache-Control, Expires) pour mettre en cache les ressources statiques côté client.
Chargement paresseux (Lazy Loading) : Charger les images, vidéos et autres ressources lourdes uniquement lorsqu’elles apparaissent dans la zone visible de l’écran.
Chargement asynchrone et différé de JavaScript et CSS : Utiliser les attributs async et defer pour les scripts qui ne bloquent pas l’exécution, charger le CSS hors du chemin critique de rendu.
Optimisation du CSS critique : Intégrer un ensemble minimal de CSS pour le rendu de l’écran initial directement dans le <head>, charger le reste du CSS de manière asynchrone.
Réduction du nombre de requêtes HTTP :
- Fusionner les fichiers CSS et JavaScript.
- Utiliser des sprites pour les petites images.
Optimisation des polices :
- Utiliser le format WOFF2.
- Utiliser font-display.
- Précharger les polices critiques.
Utilisation du rendu côté serveur (SSR) ou de la génération de sites statiques (SSG) : Rendre une partie ou la totalité de la page sur le serveur avant de l’envoyer au client, ce qui améliore le temps jusqu’au premier contenu et l’indexation.
Optimisation des images :
- Dimensions appropriées pour différents appareils.
- Utilisation de <picture> et srcset.
- Compression avec perte contrôlée.

Utilisation de Resource Hints (preconnect, prefetch, preload) : Conseils au navigateur concernant les ressources qui pourraient être nécessaires prochainement.

<!-- Connexion au domaine avant la requête de la ressource -->
<link rel="preconnect" href="https://example.com">
<!-- Préchargement de la ressource -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Préfetch de la ressource -->
<link rel="prefetch" href="/next-page.html">

Optimisation du DOM : Réduire la profondeur de l’arbre DOM, éviter les opérations coûteuses de lecture/écriture dans des boucles.
Optimisation du rendu (Layout, Paint, Composite) : Éviter les recalculs forcés de styles et de mise en page, utiliser des propriétés CSS qui n’entraînent pas de repaint complet (par exemple, transform, opacity au lieu de top, left).
Utilisation de Web Workers : Déplacer les calculs intensifs vers des threads séparés pour éviter de bloquer le thread principal de l’UI.
Chargement progressif : Afficher le contenu au fur et à mesure de sa chargement.

Quelles méthodes d'optimisation de page connaissez-vous?