Vitesse de chargement avec un budget limité : Stratégies rentables pour booster les performances web

Vitesse de chargement avec un budget limité

En tant que consultant Core Web Vitals, je reçois beaucoup de demandes d'assistance pour la vitesse de page. Et oui, parfois le budget est limité. Dans ce cas, je dois être encore plus efficace avec mon temps et n'effectuer que des optimisations à fort impact et faible effort. Dans cet article, nous explorerons des stratégies pratiques et rentables pour améliorer les performances du site Web et offrir une expérience utilisateur fluide.

ASTUCE Core Web Vitals : Le service le plus économique que je propose est l'assistance Core Web Vitals de 2 heures ! En 2 heures, je vous aiderai à mettre en place une stratégie efficace qui résoudra les problèmes les plus urgents et vous offrira le meilleur rapport qualité-prix !

Réservez maintenant !

Identifier les problèmes d'abord

Lorsque l'on optimise les performances web avec un budget limité, nous devons être absolument sûrs d'optimiser aussi efficacement que possible. Cela signifie que nous devons d'abord savoir quel est le vrai 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 car c'est celle que Google utilise.

Données CrUX validées !

Données CrUX échouées !

Sous le score CrUX, vous verrez un audit Lighthouse. 

Soyons clairs sur l'audit Lighthouse ! À ce stade, nous ne nous soucions pas de Lighthouse. 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 comme nous avons un budget limité, nous voulons valider les Core Web Vitals. Nous ne cherchons pas à réussir des tests synthétiques pour le moment !

Retour aux données CrUX. Voici quelques directives à suivre si vous avez un budget limité ! Commencez par enquêter sur les Core Web Vitals dans cet ordre exact et concentrez-vous d'abord sur ces problèmes !

• Si vous échouez au Time to First Byte, corrigez cela en premier !
• Si vous échouez au First Contentful Paint, corrigez les ressources bloquant le rendu (différez les scripts et optimisez les styles)
• Si vous échouez au Largest Contentful Paint, priorisez les ressources nécessaires 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, vous utilisez probablement trop de JavaScript au mauvais moment. Supprimez les scripts/plugins inutiles, utilisez un outil RUM comme Core/Dash pour trouver les scripts les plus lents

Optimiser les images de manière responsable

Les images contribuent aux Core Web Vitals de plusieurs manières. Elles sont souvent les plus grands contributeurs à la taille de la page web. En tirant parti de techniques efficaces de compression d'images et en utilisant des formats d'image modernes comme WebP, les propriétaires de sites peuvent maintenir la qualité visuelle tout en réduisant considérablement les temps de chargement. Souvent, les images deviendront l'élément Largest Contentful Paint. Cela signifie que nous devons prioriser ces images LCP importantes et déprioriser les images moins importantes et situées en dessous de la ligne de flottaison.

1. Convertir les images en WebP gratuitement

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

2. Implémenter le Lazy loading

Le Lazy loading signalera au navigateur qu'une image ne doit pas être chargée tant qu'elle n'est pas (presque) dans la fenêtre visible (la partie visible de la page). Si vous avez 15 images sur une page et que seulement 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 visible. 

Il existe 2 façons de traiter cela. La première est d'activer le lazy loading dans votre CMS. Cela ajoutera le lazy loading à toutes les images. Ensuite, consultez la documentation sur la façon de supprimer le lazy loading pour les images qui sont visibles et importantes. L'autre façon est d'ajouter manuellement loading="lazy" aux images en dessous de la ligne de flottaison.

<img loading="lazy" src="image.jpg">

3. Configurer fetchpriority pour les images

En ajoutant fetchpriority = "high" à une balise image, nous pouvons signaler au navigateur que cette image est plus importante que les autres et doit être téléchargée avec une haute fetchpriority. Et bien que je sois conscient qu'il existe de meilleures méthodes incluant le préchargement d'image et les 103 early hints, définir la fetchpriority est simple, rapide et efficace ! Le processus est simple : identifiez simplement l'image la plus importante sur votre page, modifiez le modèle de la page elle-même et ajoutez fetchpriority = "high" à l'image. Cela ressemblera à quelque chose comme

<img fetchpriority="high" src="image.jpg">

2. Tirer parti de la mise en cache du navigateur pour la cohérence

Si vous utilisez un hébergement économique, il est probable 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.  La mise en cache du navigateur permet de stocker localement les ressources fréquemment consultées comme les images, les scripts et les feuilles de style, réduisant ainsi les temps de chargement pour les visiteurs récurrents. Configurez les en-têtes de cache pour trouver un équilibre entre des performances optimales et l'assurance que les utilisateurs reçoivent les dernières mises à jour de contenu.

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

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

Si vous utilisez un serveur web différent comme NGINX, veuillez contacter votre hébergeur et dirigez-le vers cet article !

3. Envisagez un CDN gratuit ou économique comme CloudFlare

Explorez les avantages des réseaux de diffusion de contenu (CDN) pour distribuer du contenu statique sur des serveurs dans le monde entier. Bien que les CDN premium offrent des fonctionnalités avancées, même les options gratuites ou économiques peuvent apporter une amélioration significative de la vitesse de page et de la fiabilité.

Sur le plan gratuit :

Sur le plan gratuit, vous obtiendrez beaucoup de 'bonnes choses' comme 

1. DNS super rapide. Les serveurs DNS CloudFlare sont gratuits et surpasseront probablement les serveurs DNS de votre hébergeur économique. Pour cette seule raison, c'est une excellente idée de passer à CloudFlare 
2. HTTP/3. 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. Mise en cache du navigateur cohérente. CloudFlare a un très bon historique en matière de mise en cache des ressources statiques. La configuration prête à l'emploi est probablement meilleure que celle que vous avez actuellement !
4. Mise en cache en périphérie (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 en périphérie. Cela élimine le besoin d'allers-retours vers votre serveur d'origine.
5. Rocket loader. Rocket loader différera le chargement des scripts et gérera toutes les complications qui en découlent. Rocket loader est une méthode brute mais si vous ne pouvez pas différer les scripts manuellement, cela améliorera probablement les métriques de peinture comme le Largest Contentful Paint.

Sur le plan Pro

L'une des premières choses que je dis toujours quand je vois un plan CloudFlare gratuit est 'passez pro !'. Si les 25 $ sont quelque chose 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 plan pro inclut toutes les fonctionnalités gratuites.
2. CloudFlare APO pour WordPress. APO pour WordPress est une solution complète qui mettra en cache vos pages sur le réseau en périphérie si les visiteurs ne sont pas connectés. Cela peut accélérer énormément le Time to First Byte. 
3. Optimisation d'image sans perte et avec perte. L'un des principaux avantages de l'utilisation de la version pro de CloudFlare est son optimisation d'image. CloudFlare convertira et mettra en cache les images au format webp et les servira uniquement aux visiteurs qui acceptent ces formats.

4. Auto-hébergez autant que vous le pouvez !

Une autre optimisation simple et efficace est l'auto-hébergement des 'ressources statiques'. Sur de nombreux sites, les ressources statiques sont hébergées sur des CDN externes (ne confondez pas cela avec votre propre CDN). 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 faciles et rapides mais les utiliser est en fait une assez mauvaise idée et ralentira votre site !

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

La solution est d'auto-héberger ces fichiers tiers. C'est facile à faire, téléchargez simplement le fichier, placez-le sur votre serveur et changez la référence vers ce fichier.

5. Chargement asynchrone des scripts

Un énorme goulot d'étranglement peut être les 'scripts bloquants' dans l'en-tête de la page. Ces scripts peuvent parfois retarder le chargement de la page jusqu'à 20 secondes ! Maintenant, différer ces scripts n'est pas difficile du tout. Ajoutez simplement defer à la balise script et vous avez terminé. Si vous le pouvez, faites-le ! Modifiez le modèle et changez 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 de 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 JavaScript pour corriger tous les problèmes qui pourraient survenir. Alors s'il vous plaît, essayez de différer vos scripts et vérifiez les erreurs (appuyez sur Ctrl-Shift-I dans Chrome et vérifiez l'onglet console). S'il n'y a pas de problèmes après le test... vous faites partie des quelques chanceux ! S'il y a des problèmes, vous devriez probablement recourir à l'une des solutions suivantes :

Utilisez Rocket loader 

Comme discuté, la version gratuite de CloudFlare vous donnera accès à Rocket Loader. Cela différera tous les scripts sur une page. Ce n'est en aucun cas parfait mais la plupart du temps, cela fera un assez bon travail.

Utilisez un plugin

La plupart des sites basés sur un CMS ont un énorme 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 le report des scripts.

6. Mise en cache, mise en cache, mise en cache !

Lorsque vous avez un budget limité 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 pour 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 être effectuée à différents niveaux. 

Cache côté client : Configurez votre serveur web pour demander au navigateur de mettre en cache autant de ressources statiques que possible. Cela diminuera la charge sur votre serveur.

Cache d'objet :  Le cache d'objet peut être utilisé pour stocker des données qui pourraient être coûteuses en calcul à régénérer, comme le résultat de requêtes de base de données complexes. Demandez à votre hébergeur d'installer Redis ou Memcached.

Cache de page complète : 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

7. 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. Généralement, vous recherchez un plan d'hébergement optimisé pour votre CMS car un touche-à-tout n'est maître de rien !  Cherchez des fournisseurs offrant des serveurs optimisés. Un choix d'hébergement stratégique peut faire une différence considérable dans la vitesse du site Web.

8. Surveillance et analyse continues

Mettez en œuvre une stratégie de surveillance robuste avec des outils abordables comme [url =https://coredash.app]CoreDash[/url] Auditez régulièrement les performances de votre site Web pour identifier de nouvelles opportunités d'optimisation et assurer des améliorations de vitesse cohérentes.