- PageSpeed Insights
Texte traduit par l'IA.
Résumé du texte par durumis AI
- L'amélioration des performances d'un site Web à l'aide d'outils de mesure (PageSpeed Insights, Lighthouse) est bénéfique pour le référencement. Les indicateurs Web Core Vitals sont particulièrement importants.
- Pour optimiser les indicateurs CLS, LCP, FCP et FID, vous pouvez utiliser des squelettes d'interface utilisateur (UI Skeleton), optimiser les images, supprimer les éléments bloquant le rendu, optimiser les polices Web et gérer le JavaScript de manière asynchrone.
- Nous présentons les méthodes d'amélioration de chaque indicateur, ainsi que diverses techniques d'optimisation des performances Web (compression gzip, Web Workers, etc.). Nous approfondirons ces sujets dans de futurs articles.
Grâce au site fourni par Google,
vous pouvez facilement mesurer les performances Web.
https://pagespeed.web.dev/
Vous pouvez saisir l'URL pour la mesurer ou installer Lighthouse en tant qu'extension Chrome pour la mesurer.
Quels sont les avantages de l'amélioration des indicateurs ?
Vous pouvez obtenir un meilleur classement dans les moteurs de recherche. Le référencement (SEO) utilise souvent le rendu côté serveur, mais
si les indicateurs de performance ci-dessus sont faibles, l'efficacité sera considérablement réduite.
Comment améliorer les performances ?
Le site web.dev explique en détail comment améliorer chaque indicateur.
En particulier, trois indicateurs ont un impact significatif sur le score (Web Core Vitals).
Je souhaite consigner les tentatives d'amélioration de ces indicateurs.
Comment mesurer localement ?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
Insérez le code ci-dessus. Dans le cas de Nuxt, placez-le dans les plugins et vérifiez les journaux de la console.
Décalage de disposition cumulé (CLS)
Il s'agit de la mesure du changement de disposition lors du rendu.
Par exemple, supposons qu'il existe une page qui reçoit l'URL de l'image via une réponse API et affiche une image de 400 x 400 pixels.
Certaines positions de la mise en page seront décalées de 400 px en raison du rendu de l'image.
Il s'agit d'un déplacement imprévu pour l'utilisateur, ce qui nuit à l'expérience utilisateur (UX) et affecte indirectement le navigateur lors du rendu de l'écran.
Cela a un impact négatif sur le navigateur.
Il existe deux méthodes simples pour améliorer cela.
1. Appliquer un squelette d'interface utilisateur
- La plupart des sites Web dessinent un squelette adapté à la taille de l'image ou du composant. Tenez compte de ce point lors du développement de l'écran. Dans le cas de Vue, utilisez v-if et v-else pour dessiner un squelette adapté à chaque élément.
2. Réserver de la hauteur
- Si le squelette contient trop de styles, la maintenance devient complexe et peut avoir l'effet inverse. Le simple fait de définir la hauteur minimale (min-height) de l'élément à afficher peut être efficace.
- Dans le cas d'un site Web réactif où la taille de l'image varie selon l'appareil, il est difficile de fixer une hauteur fixe. Dans ce cas, vous pouvez utiliser la plus petite taille d'appareil comme référence ou utiliser vh ou vw.
3. Spécifier la largeur et la hauteur pour les éléments d'image
- Vous pouvez ajouter la largeur et la hauteur aux éléments d'image comme suit :
<img src="image.jpg" width="400" height="400">
Même si la taille réelle de l'image n'est pas de 400 x 400 pixels, cela indique au navigateur la taille estimée de l'image.
4. Utiliser font-display: swap pour empêcher les modifications de disposition dues aux polices Web
- En indiquant une police de remplacement, vous évitez les décalages de disposition.
Plus grand élément de contenu peint (LCP)
Il s'agit du temps nécessaire au rendu de l'élément qui occupe la plus grande partie de l'écran. Il s'agit généralement d'une image, et de manière intuitive, il suffit d'accélérer la vitesse de chargement.
1. Réduire la taille de l'image.
- Vérifiez que la taille de l'image n'est pas trop grande par rapport à la taille de rendu.
- Optimisez le rendu de l'image à l'aide d'extensions telles que webp. WebP est environ 30 % plus petit que le format JPEG en cas de compression avec perte, et environ 20 % plus petit que PNG en cas de compression sans perte.
- Vous pouvez également envisager le chargement différé (lazy loading), qui charge les images en fonction de la position de défilement.
2. Utiliser la mise en cache ou un CDN.
3. Supprimer les éléments bloquant le rendu.
- La plupart des indicateurs de mesure sont affectés, il est donc essentiel de les supprimer. Lorsque le navigateur affiche l'écran, il récupère d'abord les scripts de la balise head, puis les affiche. Par conséquent, vérifiez si les scripts dans la balise head (généralement des scripts externes) doivent être affichés en premier. L'utilisation des balises async et defer permet de gérer facilement cela.
* Je publierai un autre article sur les attributs des scripts dans la balise head ultérieurement.
4. Minimiser la taille du bundle.
- Indépendamment de la lenteur de rendu des images, si la transmission depuis le serveur est lente, il est nécessaire de l'améliorer.
Si vous utilisez un serveur proxy tel que Nginx, vous pouvez utiliser la compression gzip.
* Je publierai un autre article sur la configuration de Nginx ultérieurement.
Première peinture de contenu (FCP)
Indique le moment où le premier contenu de la page est affiché.
1. Supprimer les éléments bloquant le rendu, comme indiqué ci-dessus.
2. Minimiser la taille du code HTML.
- Si vous entourez excessivement les éléments avec des balises div, une arborescence fortement imbriquée est créée et la taille du fichier augmente.
3. Les polices Web externes peuvent poser problème. Utilisez activement font-display: swap ; pour afficher d'abord la police par défaut.
Délai de première saisie (FID)
Indique le temps nécessaire au navigateur pour traiter la première interaction de l'utilisateur avec la page (clic, défilement, etc.). Il arrive parfois que les boutons ne répondent pas, mais en réalité, ils ne sont pas bloqués, ils attendent simplement la réponse de l'API.
1. Utilisez correctement l'asynchrone pour éviter que le thread principal de JavaScript ne soit bloqué par des tâches lourdes.
2. Vous pouvez utiliser un Web Worker pour exécuter une autre tâche indépendamment du thread principal.
* Je publierai un autre article sur les Web Workers ultérieurement.
Je vais conclure ici en raison de la limite de nombre de caractères.