Vitesse de page avec un petit budget : Les optimisations qui comptent le plus

Les optimisations qui comptent le plus

En tant que consultant Core Web Vitals, je reçois de nombreuses demandes d'assistance concernant la vitesse de page. Et oui, parfois, le budget n'est pas très élevé. Dans ce cas, je dois être encore plus efficace avec mon temps et n'effectuer que des optimisations à fort impact et à faible effort qui font vraiment bouger les choses pour les Core Web Vitals.

Dernière révision par Arjen Karel en mars 2026

Les chiffres parlent d'eux-mêmes. Selon le Web Almanac 2025, seules 48 % des origines mobiles réussissent les trois Core Web Vitals. La page mobile médiane pèse 2,6 Mo, dont 632 Ko de JavaScript (dont 251 Ko sont inutilisés). Ce sont des problèmes que vous pouvez résoudre sans un gros budget.

CONSEIL Core Web Vitals : Mon service de conseil sur appel (On-Call Consultancy) est le moyen le plus économique d'obtenir l'aide d'un expert. Réservez une session de 2 heures (300 €) et je diagnostiquerai vos problèmes liés aux Core Web Vitals, corrigerai les problèmes les plus urgents et vous donnerai une stratégie claire pour la suite. Je me prépare avant notre entretien, afin de ne pas perdre de temps.

Réserver une session !

1. Identifiez d'abord les problèmes

Lorsque l'on optimise les performances web avec un budget limité, on doit être absolument sûr d'optimiser le plus efficacement possible. Cela signifie que l'on doit d'abord savoir quel est le véritable problème.

Nous pouvons utiliser l'excellent outil gratuit PageSpeed Insights pour interroger les données CrUX. Les données CrUX sont la seule source de données qui compte puisque c'est celle qu'utilise Google.

Sous le score CrUX, vous verrez un audit Lighthouse.

Soyons clairs sur l'audit Lighthouse ! À ce stade, Lighthouse ne nous intéresse pas. Pourquoi ? Parce qu'il ne mesure pas les Core Web Vitals. Bien sûr, Lighthouse est un outil de test génial et n'hésitez pas à explorer toutes ses suggestions, mais puisque nous avons un budget limité, ce qui nous intéresse c'est de réussir les Core Web Vitals. Réussir des tests synthétiques n'a pas d'importance pour l'instant !

Revenons aux données CrUX. Voici quelques directives à suivre si vous avez un budget limité. Commencez à analyser les Core Web Vitals dans cet ordre précis et concentrez-vous d'abord sur ces problèmes !

• Si vous échouez au Time to First Byte (TTFB), corrigez-le en premier !
• Si vous échouez au First Contentful Paint (FCP), corrigez les ressources bloquant le rendu (différez les scripts et optimisez les styles).
• Si vous échouez au Largest Contentful Paint (LCP), priorisez les ressources dont vous avez besoin pour ce LCP (comme les polices ou les images).
• Si vous échouez au CLS, ajoutez une largeur et une hauteur à toutes les images, trouvez et supprimez les transitions CSS et réservez de l'espace pour les éléments à rendu tardif (comme les publicités, les filtres de produits, etc.).
• Si vous échouez à l'Interaction to Next Paint (INP), c'est probablement que vous utilisez trop de JavaScript au mauvais moment. Supprimez les scripts et plugins inutiles, utilisez un outil RUM comme CoreDash pour trouver les scripts les plus lents.

2. Optimisez vos images

Les images représentent 911 Ko de la page mobile médiane selon le Web Almanac 2025. C'est plus d'un tiers du poids total de la page. Et 57 % des images LCP sont toujours servies en JPG alors que le format WebP serait plus léger à qualité égale. Avec un budget limité, l'optimisation des images vous offre l'impact le plus important pour le moindre effort.

Convertissez vos images en WebP gratuitement

Il existe de nombreux outils, solutions et plugins gratuits qui vous permettront de convertir des images dans des formats plus récents, plus rapides et plus modernes comme WebP. Pour WordPress par exemple, je suggérerais l'excellent plugin gratuit WebP Express.

Mettez en place le chargement différé (lazy loading)

Le chargement différé (lazy loading) signalera au navigateur qu'une image ne doit pas être chargée avant d'être presque dans la fenêtre d'affichage (viewport) visible. Si vous avez 15 images sur une page et que seules 3 sont dans la partie visible de la page, vous pouvez ajouter en toute sécurité loading="lazy" aux images qui ne sont pas dans la fenêtre d'affichage visible.

Il y a 2 façons de procéder. La première consiste à activer le chargement différé dans votre CMS. Cela ajoutera le chargement différé à toutes les images. Consultez ensuite la documentation pour savoir comment désactiver le chargement différé pour les images qui sont visibles et importantes. L'autre moyen consiste à ajouter manuellement loading="lazy" aux images situées sous la ligne de flottaison (below-the-fold). Pour un guide complet, consultez comment différer les images hors écran.

<img loading="lazy" src="image.jpg" width="800" height="600">

Définissez la priorité de récupération (fetchpriority) des images

En ajoutant fetchpriority="high" à une balise img, nous signalons au navigateur que cette image est plus importante que les autres images et doit être téléchargée en premier. Et bien qu'il existe de meilleures méthodes qui incluent le préchargement des images (preloading) et les 103 Early Hints, définir la priorité de récupération est simple, rapide et efficace ! Il suffit d'identifier l'image la plus importante sur votre page, d'éditer le modèle et d'ajouter fetchpriority="high" à l'image :

<img fetchpriority="high" src="image.jpg" width="800" height="600">

3. Corrigez la mise en cache de votre navigateur

Si vous utilisez un hébergement bon marché, il y a de fortes chances que le serveur web ne soit pas configuré de manière optimale. L'une des erreurs que je rencontre régulièrement est une mise en cache du navigateur mal configurée. Sans en-têtes de cache appropriés, les visiteurs récurrents téléchargent à nouveau les mêmes images, scripts et feuilles de style. C'est de la bande passante et du temps gaspillés.

Si vous utilisez Apache comme serveur web, créez simplement un fichier appelé .htaccess dans le répertoire racine de votre site web et ajoutez ces lignes :

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|js|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Pendant que vous éditez le fichier .htaccess, activez également la compression GZIP. Cela compresse les ressources textuelles (HTML, CSS, JavaScript) avant de les envoyer au navigateur. Sur la plupart des sites, cela réduit la taille de transfert de 60 à 80 %.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

Si vous utilisez un serveur web différent comme NGINX, veuillez contacter votre fournisseur d'hébergement et lui indiquer cet article !

4. Envisagez d'utiliser Cloudflare (même le forfait gratuit est utile)

Même avec le forfait gratuit, Cloudflare vous offre un grand nombre de fonctionnalités de performance importantes. Si vous êtes sur un hébergement à petit budget, basculer vos DNS vers Cloudflare est l'un des changements à plus fort impact et à moindre effort que vous puissiez faire. Pour une procédure détaillée, consultez le guide de configuration complet de Cloudflare.

Avec le forfait gratuit

1. Des DNS rapides. Les serveurs DNS de Cloudflare sont gratuits et surpasseront probablement les serveurs DNS de votre fournisseur d'hébergement bon marché. Les données CrUX du Web Almanac 2025 montrent que seulement 44 % des origines mobiles ont un bon TTFB. Des DNS lents sont un facteur courant, et passer à Cloudflare règle ce problème instantanément.
2. HTTP/3 et Brotli. Cloudflare utilise les protocoles les plus récents et les méthodes de compression les plus rapides. Sans entrer dans les détails, soyez assuré que cela accélérera votre réseau d'au moins 10 %.
3. Une mise en cache du navigateur cohérente. Cloudflare a fait ses preuves en matière de mise en cache des ressources statiques. La configuration par défaut est probablement meilleure que ce que vous avez actuellement.
4. Mise en cache en bordure (Edge caching) pour les ressources statiques. Cloudflare mettra en cache des versions de vos ressources statiques comme les images, les scripts et les fichiers CSS et les servira directement à l'utilisateur final depuis son réseau de périphérie. Cela élimine la nécessité de faire des allers-retours vers votre serveur d'origine.
5. Rocket Loader. Rocket Loader différera le chargement des scripts et gérera les complications qui en découlent. C'est une méthode un peu brute, mais si vous êtes incapable de différer les scripts manuellement, cela améliorera probablement les métriques de rendu comme le Largest Contentful Paint. Remarque : Rocket Loader utilise des API de navigateur obsolètes et PageSpeed Insights peut le signaler. Si vous voyez ces avertissements, envisagez plutôt de différer vos scripts manuellement.

Avec le forfait Pro

L'une des premières choses que je dis toujours quand je vois un forfait Cloudflare gratuit est "passez au pro !". Si les 25 $ sont une somme que vous pouvez vous permettre et que vous êtes prêt à dépenser pour un site plus rapide, vous devriez probablement l'envisager.

1. Toutes les fonctionnalités gratuites. Évidemment, le forfait pro comprend toutes les fonctionnalités gratuites.
2. Cloudflare APO pour WordPress. L'APO pour WordPress est une solution complète qui mettra en cache vos pages sur le réseau périphérique si les visiteurs ne sont pas connectés. Cela peut accélérer énormément le Time to First Byte.
3. Optimisation des images avec et sans perte. L'un des principaux avantages de l'utilisation de la version pro de Cloudflare est leur optimisation des images. Cloudflare convertira et mettra en cache les images au format WebP et ne les servira qu'aux visiteurs qui acceptent ces formats.

5. Auto-hébergez autant que vous le pouvez

Une autre optimisation simple et efficace consiste à auto-héberger les ressources statiques. Sur de nombreux sites, les ressources statiques sont hébergées sur des CDN externes. Par exemple, jQuery est hébergé sur https://code.jquery.com/, Bootstrap est hébergé sur https://cdn.jsdelivr.net et vos polices sont hébergées sur https://fonts.googleapis.com. Je comprends l'attrait. Ces CDN se présentent comme étant faciles et rapides, mais les utiliser est en fait une mauvaise idée et ralentira votre site.

L'idée d'utiliser un CDN partagé pour ces types de fichiers était judicieuse à l'époque où les navigateurs pouvaient encore partager ces fichiers entre les sites web. Cette époque est révolue. Le résultat est qu'un nouveau visiteur doit toujours télécharger le fichier statique et qu'il faut une nouvelle connexion à un nouveau serveur pour chaque fichier. Et ces nouvelles connexions vers ces nouveaux serveurs peuvent prendre beaucoup de temps supplémentaire.

La solution est d'auto-héberger ces fichiers tiers. C'est facile à faire : il suffit de télécharger le fichier, de le placer sur votre serveur et de modifier la référence à ce fichier. Pour les polices en particulier, consultez comment auto-héberger les Google Fonts.

6. Différez vos scripts

Un énorme goulot d'étranglement peut provenir de scripts bloquants dans le header (en-tête) de la page. Ces scripts peuvent parfois retarder le chargement de la page jusqu'à 20 secondes ! Le Web Almanac 2025 a révélé que seulement 15 % des pages mobiles réussissent l'audit des ressources bloquant le rendu. Cela vous donne une idée de l'ampleur de ce problème.

Différer ces scripts n'est pas difficile du tout. Il suffit d'ajouter defer à la balise script et le tour est joué. Si vous le pouvez, faites-le ! Éditez le modèle et modifiez votre script comme ceci :

<!-- ancienne balise script bloquante -->
<script src="script.js"></script>

<!-- nouvelle balise script différée -->
<script defer src="script.js"></script>

Mais il y a des pièges ! Ajouter defer aux balises script peut causer toutes sortes de problèmes et d'erreurs de dépendance. Et comme vous avez un budget limité, je dois supposer que vous n'avez pas les moyens d'embaucher un expert en JavaScript pour corriger tous les problèmes qui pourraient survenir. Essayez donc de différer vos scripts et vérifiez s'il y a des erreurs (appuyez sur Ctrl+Maj+I dans Chrome et vérifiez l'onglet console). S'il n'y a pas de problèmes après les tests, vous faites partie des rares chanceux ! S'il y a des problèmes, vous devriez recourir à l'une des solutions suivantes. Pour une vue d'ensemble, consultez les 16 méthodes pour différer le JavaScript.

Utilisez Rocket Loader

Comme nous l'avons vu, la version gratuite de Cloudflare vous donnera accès à Rocket Loader. Cela différera tous les scripts d'une page. Ce n'est en aucun cas parfait, mais la plupart du temps, cela fera du très bon travail.

Utilisez un plugin

La plupart des sites basés sur un CMS disposent d'un vaste répertoire de plugins. Il existe de nombreux plugins qui vous permettront de différer le JavaScript et de gérer toutes les complications qui peuvent survenir avec les scripts différés.

7. Optimisez vos polices

Les polices web sont un coût caché en termes de performances sur les sites à petit budget. La page médiane charge 122 Ko de fichiers de polices selon le Web Almanac 2025. Si vos polices sont chargées depuis Google Fonts, vous effectuez des recherches DNS et des connexions TCP supplémentaires à chaque première visite.

Deux solutions gratuites :

1. Auto-hébergez vos polices. Téléchargez les fichiers de polices, placez-les sur votre propre serveur et chargez-les à partir de là. Cela élimine la charge de connexion vers fonts.googleapis.com et fonts.gstatic.com.
2. Ajoutez font-display: swap. Cela indique au navigateur d'afficher immédiatement le texte dans une police de secours (fallback font) pendant que la police web se télécharge. Vos visiteurs voient le contenu plus rapidement et vous évitez le problème du texte invisible. Pour la stratégie complète, consultez comment résoudre le problème du texte invisible pendant le chargement des polices web.

8. La mise en cache, encore la mise en cache

Lorsque vous avez un budget serré et que vous ne voulez pas dépenser beaucoup pour l'hébergement, la mise en cache est l'un des moyens les plus efficaces d'accélérer un site web. La mise en cache est particulièrement efficace contre un Time to First Byte élevé. La mise en cache peut se faire à différents niveaux.

Cache côté client (Client side cache) : Configurez votre serveur web pour demander aux navigateurs de mettre en cache autant de ressources statiques que possible. Cela diminuera la charge sur votre serveur. (Voir l'exemple .htaccess dans la section 3.)

Cache d'objet (Object cache) : Le cache d'objet peut être utilisé pour stocker des données dont la régénération peut être coûteuse en calcul, comme le résultat de requêtes complexes à la base de données. Demandez à votre hébergeur d'installer Redis ou Memcached.

Cache de page complète (Full page cache) : Si vous utilisez un CMS, vous voudrez probablement ajouter un cache de page complète à votre site. Pour WordPress, de bonnes options sont WP Fastest Cache ou WP Core Web Vitals.

9. Faites des choix d'hébergement stratégiques

En ce qui concerne l'hébergement, il est payant de comparer, et l'hébergeur le plus cher n'est pas toujours le plus rapide. En général, vous recherchez un plan d'hébergement optimisé pour votre CMS, car un touche-à-tout n'est maître de rien. Recherchez un hébergement qui inclut PHP 8+, HTTP/2 et un stockage SSD au minimum. Un bon hébergeur WordPress avec ces éléments de base surpassera toujours un hébergeur mutualisé générique.

10. Surveillez vos performances

Toutes ces optimisations ne valent rien si vous ne savez pas si elles ont réellement fonctionné. Configurez un outil de Real User Monitoring (Surveillance des utilisateurs réels) afin de pouvoir voir comment les vrais visiteurs expérimentent votre site, et non pas seulement la note que Lighthouse lui attribue dans un laboratoire. Les scores de laboratoire sont utiles pour le débogage, mais ce sont les données de terrain des vrais visiteurs que Google utilise pour le classement. CoreDash suit les Core Web Vitals des vrais utilisateurs et vous dira exactement où vous en êtes.