Apprenez à améliorer le PageSpeed et les Core Web Vitals

Techniques pour améliorer la performance d'un site.

Arjen Karel
linkedin

J'aide les entreprises à corriger les Core Web Vitals, mettre en place un suivi RUM robuste des Core Web Vitals, sensibiliser à la vitesse et piloter la mise en œuvre des bonnes pratiques Core Web Vitals

Parfois, quand j'ai le temps (ce qui n'arrive pas souvent ces jours-ci), j'écris sur les Core Web Vitals

Parlons-en

Empêchez Coralogix RUM de voler votre réseau en début de chargement

Coralogix RUM envoie des balises pendant le chargement et vole le réseau de votre propre LCP. Mettez les événements en mémoire tampon et envoyez-les lors du masquage de la page à la place.

Corriger le Layout Shift du widget de chat HubSpot

Une solution de contournement qui réduit un CLS de 0.91 à 0.02 en exploitant deux exclusions de layout-shift du navigateur

Comment les animations déclenchées par le défilement causent le CLS

Votre en-tête qui se masque au défilement échoue peut-être silencieusement au CLS. Voici pourquoi, et comment le corriger.

Raisonnement Proportionnel pour la Performance Web

Le goulot d'étranglement est la phase qui consomme la plus grande part du temps total. Pas la phase qui dépasse un seuil absolu.

Corriger l'INP avec un agent IA : La métrique que les outils de laboratoire ne peuvent mesurer

L'INP ne peut pas être simulé. Voici le flux de travail connecté aux données de terrain pour diagnostiquer et corriger l'Interaction to Next Paint avec un agent IA.

Corriger le LCP avec un agent IA : des données de terrain au correctif de code

Le flux de travail complet de diagnostic du LCP avec CWV Superpowers : de l'identification de la phase de goulot d'étranglement dans les données de terrain à la modification de code spécifique.

CWV Superpowers : diagnostic automatisé des Core Web Vitals

Un skill Claude Code gratuit qui se connecte à vos field data CoreDash et à Chrome pour diagnostiquer les problèmes de LCP, d'INP et de CLS et générer des corrections de code.

Agent IA pour le suivi des Core Web Vitals : field data via MCP

Trois types de serveurs MCP connectent les agents IA aux données des Core Web Vitals. Un seul leur fournit les données que Google utilise réellement pour le classement.

JPEG XL et Core Web Vitals : ce que vous devez savoir maintenant que Chrome le prend en charge

Comment le JPEG XL se compare à l'AVIF, au WebP et au JPEG, ce que cela signifie pour vos Core Web Vitals, et comment commencer à le servir aujourd'hui

Prerender Until Script : Le juste milieu entre prefetch et prerender

Chargez les sous-ressources et construisez le DOM sans déclencher de scripts ni polluer vos analyses

Différer les images hors écran sur mobile : guide du lazy loading natif

Lazy loading natif, content-visibility, et pourquoi différer les images en JavaScript est un poids mort

Guide Core Web Vitals pour la priorisation des ressources

Contrôlez quelles ressources se chargent en premier et lesquelles attendent

Planifier les événements dataLayer pour optimiser l'INP

Comment différer les événements GTM après le paint du navigateur améliore les scores INP

Optimiser les Core Web Vitals pour les appareils d'entrée de gamme

Pourquoi les sites rapides sur du matériel économique nécessitent des compromis plus stricts que la plupart des équipes ne l'admettent

La meilleure configuration Cloudflare pour valider les Core Web Vitals

Configurez Cloudflare pour une vitesse maximale et comprenez les réglages à votre disposition

Supprimer les paramètres de suivi avec Cloudflare Workers et Transform Rules

Les paramètres de suivi comme fbclid et gclid créent des URL uniques qui contournent le cache de votre CDN. Trois façons d'y remédier.

Des images hero Elementor plus rapides en 2 minutes !

Découvrez comment passer d'images d'arrière-plan lentes à des images normales rapides pour les images hero Elementor en 2 minutes.

L'impact des CSS View Transitions sur les performances web

Comprenez pourquoi et quand les view transitions peuvent impacter les performances web

5 niveaux de priorité JavaScript et comment les utiliser

Tous les scripts ne se valent pas. Chargez-les dans le bon ordre.

Chargement responsive des polices web : une stratégie adaptée à l'appareil

Une stratégie de chargement de polices responsive pour un LCP plus rapide et aucun changement de mise en page

Réglages du panneau Réseau des Chrome DevTools pour les Core Web Vitals

Les réglages du panneau Réseau que j'utilise à chaque audit Core Web Vitals

Pourquoi le délai de 28 jours des Core Web Vitals est un mythe

Les données CrUX datent de deux jours, pas de 28. Voici ce que signifie réellement la fenêtre glissante de 28 jours.

Améliorez l’Interaction to Next Paint en abandonnant le scrolling JavaScript

Créez une belle expérience de défilement fluide qui n’affecte pas les Core Web Vitals

Le script GRATUIT d'optimisation de la vitesse de page en dernier recours

Accélérez votre page impossible à corriger avec cette méthode de dernier recours pour améliorer même les pages les plus lentes.

Accélérer l'intégration de Calendly

Intégrez Calendly sans ralentir les Core Web Vitals

Cache warmer gratuit pour site web

Préchargez le cache de votre site web pour accélérer les Core Web Vitals gratuitement

Pages à chargement instantané avec les Speculation Rules

Apprenez à améliorer les Core Web Vitals en rendant le chargement des pages instantané avec l'API Speculation Rules.

Comment rendre la main au thread principal pour améliorer l'INP

Utilisez scheduler.yield() pour fractionner les tâches longues et maintenir la réactivité de vos pages

Core Web Vitals pour l'E-commerce : Pourquoi les visiteurs à forte intention obtiennent les pires performances

Les plugins de mise en cache désactivent le cache pour les utilisateurs avec un panier. Voici comment corriger la chute du TTFB.

La checklist ultime des Core Web Vitals (2026)

Toutes les optimisations à vérifier pour améliorer les performances LCP, INP et CLS

Layout Shift causé par les transitions CSS

Apprenez à trouver et supprimer les transitions CSS qui provoquent des layout shifts

Vitesse de chargement avec un budget limité : les optimisations qui comptent le plus

Apprenez à améliorer les Core Web Vitals avec des stratégies adaptées aux petits budgets

Quand le préchargement des feuilles de style a (ou non) du sens

Pourquoi précharger votre CSS n'aide généralement pas, et le seul cas où cela fonctionne

Différer jQuery dans WordPress

Apprenez à différer jQuery dans WordPress pour améliorer la vitesse de la page

Pourquoi limiter les scripts d'analyse et de suivi

Comment les scripts d'analyse et de suivi affectent vos Core Web Vitals et ce qu'il faut faire pour y remédier

Les images d'arrière-plan sont mauvaises

Pourquoi les images d'arrière-plan nuisent à vos Core Web Vitals et comment les remplacer

Reflow du navigateur : ce qui le déclenche et comment il affecte les Core Web Vitals

Le reflow recalcule les positions des éléments et bloque le thread principal. Découvrez ce qui le déclenche, comment le détecter et comment le prévenir.

Auto-héberger Google Fonts pour améliorer les Core Web Vitals

Découvrez comment auto-héberger Google Fonts et optimiser ces polices pour améliorer les Core Web Vitals

JavaScript dans le Head ou le Footer : comment cela affecte les Core Web Vitals

Pourquoi defer dans le head est la meilleure pratique moderne, et quand le placement en footer a encore du sens

Defer vs Async en JavaScript et comment cela affecte les Core Web Vitals

Apprenez quand utiliser async pour le JavaScript et quand utiliser defer pour obtenir les meilleurs résultats pour les Core Web Vitals

Différer les scripts jusqu'à ce qu'ils soient nécessaires

Chargez le JavaScript à la demande à l'aide d'IntersectionObserver et de déclencheurs d'interaction utilisateur

Corriger 'Reduce Unused JavaScript' dans Lighthouse

Trouvez et supprimez le JavaScript inutilisé pour améliorer vos Core Web Vitals

Il n'y a pas de score Core Web Vitals (et pourquoi cela compte)

Pourquoi un score Lighthouse n'est pas un score Core Web Vitals, et ce qui détermine réellement si vous réussissez ou échouez

Widget de chat avec des Core Web Vitals parfaits

Chargez des widgets de chat sans perdre en PageSpeed

Devriez-vous vous préconnecter aux réseaux publicitaires ? Cela dépend de votre LCP

La préconnexion aux réseaux publicitaires peut nuire ou aider. Tout dépend si votre image LCP est déjà optimisée.

Optimiser les images pour les Core Web Vitals

"Découvrez comment les images affectent les Core Web Vitals et comment les optimiser

Corriger le décalage de mise en page causé par le redimensionnement automatique des images

Les images avec une largeur et une hauteur automatiques provoqueront un décalage de mise en page. Découvrez comment corriger cela

Core Web Vitals Visualizer : Extension Chrome gratuite pour déboguer les CWV

Une extension Chrome gratuite qui crée une superposition en temps réel de vos Core Web Vitals, conçue pour les développeurs qui déboguent les performances sans ouvrir DevTools.

Lent par erreur vs lent par conception : Un framework de web performance

Comment la catégorisation des problèmes de performance vous aide à corriger les bonnes choses en premier

Différer les images d'arrière-plan pour des Core Web Vitals plus rapides

Différer ou charger paresseusement les images d'arrière-plan pour un Largest Contentful Paint plus rapide

16 méthodes pour différer ou planifier JavaScript

Apprenez à différer et planifier JavaScript

Corriger l'avertissement 'Largest Contentful Paint image was lazily loaded' dans Lighthouse

Apprenez à corriger l'avertissement Lighthouse 'Largest Contentful Paint image was lazily loaded'

Interaction to Next Paint (INP) : comprendre, mesurer et optimiser

Ce que mesure l'INP, en quoi il diffère du FID et laquelle des trois phases corriger en priorité.

Corriger les scripts tiers dans Next.js pour de meilleurs Core Web Vitals

Corrigez les problèmes de Core Web Vitals causés par les scripts tiers dans Next.js

Mesurer les Core Web Vitals dans Next.js : Guide de configuration RUM

Configurer le Real User Monitoring pour les Core Web Vitals dans Next.js (App Router et Pages Router)

Supprimer le CSS bloquant le rendu dans Next.js pour de meilleurs Core Web Vitals

Supprimer le CSS bloquant le rendu dans Next.js pour des Core Web Vitals plus rapides

Cloudflare a corrigé son script d'obfuscation d'e-mail (j'y suis peut-être pour quelque chose)

Le script d'obfuscation d'e-mail de Cloudflare bloquait le rendu. Un PM de Cloudflare a lu cet article et a déployé le fix. Les problèmes SEO et de sécurité méritent toujours d'être évités.

Corriger les hero images lentes & Core Web Vitals

Améliorer le Largest Contentful Paint en accélérant les hero images lentes

Qu'est-ce que le Cumulative Layout Shift (CLS) et comment le corriger

Ce que mesure le CLS, comment est calculé le score et quelles causes vérifier en priorité.

103 Early Hints : Préchargez les ressources critiques pendant le temps de réflexion du serveur

Utilisez le temps de réflexion du serveur pour précharger votre image LCP et votre CSS critique avant que la page ne soit prête

Comment j'ai réduit mon LCP de 70 %

Apprenez des méthodes avancées pour améliorer les Core Web Vitals

Précharger l'image du Largest Contentful Paint

Apprenez comment améliorer les Core Web Vitals en préchargeant l'image LCP

Différer les formulaires HubSpot : Corriger le blocage du rendu sans modifier les pages

Une solution prête à l'emploi pour les scripts de formulaires HubSpot qui bloquent le rendu

Corriger 'Defer Offscreen Images' : Guide du lazy loading pour les Core Web Vitals

Différer les images hors écran et améliorer les Core Web Vitals

Core Web Vitals parfaits avec YouTube

Apprenez à intégrer des vidéos YouTube sans perdre en PageSpeed

First Contentful Paint (FCP) : ce que c'est, comment le mesurer et l'améliorer

Découvrez ce que mesure le First Contentful Paint, pourquoi ce n'est pas un Core Web Vital, et 15 techniques éprouvées pour accélérer le rendu de vos pages