TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment servir des images WebP dans SiteGround ?

2

SiteGround est l’une des sociétés d’hébergement recommandées par WordPress.org officiel. Ces dernières années, l’ hébergement SiteGround est passé à différents niveaux. Ils ont remplacé la configuration traditionnelle de cPanel et ont migré tous les comptes existants vers leur configuration personnalisée des outils de site. Avec cela, vous pouvez servir des images WebP au lieu de PNG ou JPEG pour augmenter la vitesse de chargement de votre site Web. Dans cet article, nous expliquerons comment servir des images WebP dans SiteGround et vérifier dans le navigateur.

Connexe : Comment utiliser WebP dans WordPress pour corriger l’erreur de diffusion d’images dans les formats de nouvelle génération dans l’outil Google PageSpeed ​​Insights ?



Pourquoi WebP Images ?

Chaque fois que vous vérifiez le score de vitesse de la page dans l’ outil Google PageSpeed ​​Insights, il vous montrera de nombreuses opportunités qui peuvent améliorer la vitesse du site. L’une des suggestions importantes que vous ne pouvez pas résoudre facilement est "Servez les images dans des formats de nouvelle génération". Les formats de nouvelle génération incluent WebP, JPEG 2000 ou JPEG XR pour remplacer les formats d’image traditionnels PNG et JPEG.

Comment servir des images WebP dans SiteGround ?

Servir des images dans des formats de nouvelle génération

Par conséquent, servir l’image WebP vous aidera à résoudre le problème de Google PageSpeed ​​Insights. De plus, il réduit la taille de l’image à plus de 75 % de moins avec la même qualité, améliorant ainsi la vitesse de chargement des pages.

Comment ça marche avec SiteGround ?

SiteGround propose le plugin SG Optimizer qui vous permet d’activer la conversion de toutes vos images au format WebP. La bonne partie est que vous n’avez besoin d’aucune autre configuration.

  • Toutes les images WebP sont stockées côté serveur et vous ne pouvez pas les afficher dans votre médiathèque ou en utilisant FTP.
  • Vous pouvez vérifier si les images WebP se chargent lors de la visualisation du site dans le navigateur.
  • Vous devez activer WebP pour chaque site sur votre compte d’hébergement.

Comment servir des images WebP dans SiteGround ?

Si vous n’utilisez pas SG Optimizer, vous devez d’abord installer le plugin.

  • Connectez-vous à votre site WordPress et accédez à la section « Plugins > Ajouter un nouveau ».
  • Recherchez « SG Optimizer » pour trouver le plugin.
  • Installez et activez le plugin sur votre site.

Comment servir des images WebP dans SiteGround ?

Installer le plug-in SG Optimizer

Après avoir installé SG Optimizer, allez dans le menu «SG Optimizer» puis dans la section «Media Optimization ». Ici, vous avez les options pour activer les images WebP sur votre site.

N’oubliez pas que si vous utilisez déjà des plug-ins de mise en cache, vous ne devez pas activer d’autres options dans le plug- in SG Optimizer. Assurez-vous de ne pas activer les mêmes options dans deux plugins et de casser le site.

Activer WebP pour les nouvelles images

Activez d’abord l’option "Générer des copies WebP de nouvelles images". Choisissez le type d’optimisation pour choisir la qualité de vos images WebP. L’option sans perte vous aide à conserver la qualité et l’option avec perte de réduire la taille beaucoup plus bas en réduisant la qualité de l’image.

Comment servir des images WebP dans SiteGround ?

Générer des images WebP dans SiteGround

Nous vous recommandons de sélectionner sans perte pour conserver la qualité avec une réduction nominale de la taille. Cependant, si vous avez des images plus grandes sur votre site et que la réduction de la qualité est acceptable pour vous, choisissez l’option avec perte. Pour l’option avec perte, vous pouvez sélectionner le pourcentage de qualité en faisant glisser le curseur.

Comment servir des images WebP dans SiteGround ?

Générer des WebP avec perte dans SiteGround

Téléchargez une nouvelle image et vérifiez la qualité de quelques images sur le navigateur (voir la section ci-dessous à ce sujet) avant de traiter en bloc toutes les images existantes.

Générer en masse des fichiers WebP

Une fois que vous avez décidé et configuré la qualité, cliquez sur le bouton « Générer en bloc des fichiers WebP ». Cela régénérera la version WebP pour toutes vos images existantes. Contrairement à l’ option d’ optimisation d’image normale, la création d’images WebP ne prendra que moins de temps en fonction du nombre d’images sur votre site. Dans notre cas, nous avons des images 14K qui ont pris à peine moins d’une minute.

Changer la qualité

À tout moment, vous pouvez décider de changer la qualité de sans perte à avec perte ou vice versa. Vous pouvez également modifier la qualité des images WebP avec perte à tout moment ultérieurement. Chaque fois que vous modifiez la qualité, cliquez sur le lien « régénérer » pour régénérer les images avec une nouvelle qualité. Vous pouvez également cliquer sur le bouton « Supprimer tous les fichiers WebP », puis sur « Générer en bloc des fichiers WebP » pour régénérer les images avec une nouvelle qualité.

Test des images WebP dans le navigateur

Ouvrez votre site dans Google Chrome et vérifiez le code source de la Developer Console. Vous verrez toujours des images PNG ou JPEG se charger à la place des images WebP. Cependant, ce n’est pas la bonne façon de vérifier.

Comment servir des images WebP dans SiteGround ?

Source montrant l’image PNG

Étant donné que vous ne pouvez pas voir les images WebP dans le serveur d’hébergement ou à partir de la médiathèque, vous pouvez ne pas savoir si cela fonctionne sur votre site ou non. Suivez les instructions ci-dessous afin de confirmer que votre site fonctionne avec des images WebP.

  • Ouvrez Google Chrome et ouvrez la section Outils de développement Chrome. Vous pouvez accéder aux outils de développement en appuyant sur F12 sous Windows et en allant dans "Option + Commande + I" sous Mac.
  • Cliquez sur l’onglet "Réseau" et ouvrez la page Web dans la barre d’adresse. Si vous avez déjà ouvert la page, cliquez sur le bouton d’actualisation pour recharger la page.
  • Maintenant, vous pouvez voir que les activités du réseau sont enregistrées et cliquez sur l’onglet "Img".
  • Ici, vous pouvez voir le type de ressource chargée depuis votre site.
  • Vous pouvez trier la colonne "Nom" ou "Type" pour vérifier le type d’image. Il devrait apparaître comme « WebP ».
  • C’est le moyen de confirmer que les images WebP sont servies à partir de votre site Web.

Comment servir des images WebP dans SiteGround ?

Vérifiez SiteGround WebP dans le navigateur

Autre méthode de test

L’autre façon de tester est simple.

  • Ouvrez votre page Web sur Chrome et faites un clic droit sur l’une des images.
  • Sélectionnez l’option "Enregistrer l’image sous…".

Comment servir des images WebP dans SiteGround ?

Enregistrer l’image sous

  • Vous devriez voir le format d’image comme "Google WebP".

Comment servir des images WebP dans SiteGround ?

Enregistrer l’image WebP

Bien que l’image d’origine soit PNG (ou JPEG), vous devriez voir le format comme "Google WebP" car il s’agit du format d’image disponible sur votre site.

Images WebP mises en cache

Certains plugins de mise en cache comme WP Rocket vous permettent de mettre en cache des images WebP. Si vous cachez des images WebP, vous pouvez trouver les versions .png.webp ou .jpg.webp sur votre serveur d’hébergement sous le répertoire des téléchargements. Ce n’est pas le comportement par défaut du service SiteGround WebP et lorsque vous désactivez le plug-in de mise en cache, la génération de cache s’arrête et vous devez utiliser l’une des méthodes ci-dessus pour vérifier.

Comment servir des images WebP dans SiteGround ?

Mise en cache WebP dans WP Rocket

Quelle taille puis-je économiser ?

Cela dépend vraiment de la qualité que vous choisissez pour vos images WebP. Dans notre cas, nous choisissons l’option sans perte et avons une économie de plus de 77% pour une seule image.

  • Taille de l’image PNG d’origine – 139 Ko
  • Taille de l’image WebP – 31 Ko

Test de retour avec Google PageSpeed ​​Insights

Maintenant, revenez à l’outil Google PageSpeed ​​Insights et testez l’une de vos pages Web. La suggestion de diffuser des images au format nouvelle génération devrait disparaître maintenant.

Points à prendre en compte

Veillez à respecter les points suivants lorsque vous utilisez WebP sur votre site :

  • Tous les navigateurs ne prennent pas en charge WebP, assurez-vous de vérifier votre site sur Google Chrome ou tout navigateur pris en charge.
  • Des plugins de mise en cache comme WP Rocket proposent de mettre en cache les images WebP pour booster la vitesse de chargement des pages. Cependant, ces plugins de mise en cache ne détecteront pas les images WebP sur le serveur SiteGround. Vous pouvez confirmer avec le développeur du plugin avant d’activer la mise en cache des images WebP.
  • Les services CDN comme Cloudflare fonctionneront de manière transparente avec SiteGround. Cependant, si vous disposez d’une configuration CNAME distincte pour diffuser des fichiers multimédias via CDN, vérifiez auprès de votre fournisseur CDN s’il peut diffuser des images WebP.
  • L’option WebP n’est pas disponible pour les sites utilisant encore la configuration de cPanel. Vous avez attendu que SiteGround migre votre compte vers Site Tools.
  • Vous devez utiliser le plugin SG Optimizer pour activer WebP, sans le plugin, vous ne pouvez pas l’activer à partir de votre compte d’hébergement.
  • Assurez-vous de régénérer les images chaque fois que vous modifiez la qualité des images WebP.

Derniers mots

La vitesse du site devient un facteur important avec l’annonce par Google de Core Web Vitals qui influencera le classement à l’avenir. Les sites Web SiteGround sont déjà sur la plate-forme Google Cloud et avec WebP, vous serez bien en avance sur vos concurrents hébergés sur d’autres sociétés.

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'acceptePlus de détails