La plupart d’entre nous savent maintenant que l’optimisation des images est très importante car elle joue un rôle énorme dans les temps de chargement totaux de votre site Web WordPress. Aujourd’hui, nous souhaitons partager avec vous une alternative simple sur la façon d’intégrer les fichiers WebP de Google dans votre site WordPress. Certains utilisateurs ont constaté des réductions de taille de fichier image de plus de 70 % !
Qu’est-ce que WebP ?
Si vous n’êtes pas familier avec WebP, il s’agit d’un format de fichier image créé par l’équipe de performances Web de Google dans le but de créer des images plus petites et plus rapides. Il a été annoncé pour la première fois en 2010 et propose des méthodes de compression avec et sans perte. Les images sont livrées au navigateur Web à partir d’un serveur Web en fonction du type MIME qu’il utilise, qui est image/webp
.
Les images sans perte WebP sont 26% plus petit en taille par rapport aux PNG et les images avec perte WebP sont 25-34% plus petit que les JPEG.
Des entreprises comme YouTube et eBay utilisent déjà WebP pour alimenter en silence un grand nombre de leurs sites. Vous trouverez ci-dessous un exemple d’eBay, où sur leur page d’accueil, ils contiennent en moyenne environ 30 fichiers WebP.
Pourquoi WebP est-il si important ? Selon httparchive, en août 2016, les images représentent plus de 64 % du poids moyen d’une page Web. En général, c’est plus que vos CSS, JS et HTML combinés. Il est donc crucial de choisir une méthode d’optimisation d’image et un format d’image robustes tels que WebP afin de réduire autant que possible le poids de votre page. En règle générale, plus votre page est petite, plus elle se chargera rapidement. Et cela plaira non seulement à vos visiteurs, mais aussi à Google, comme la vitesse de la page est un facteur de classement.
Support WebP
Maintenant que WebP est très excitant, il est également important de mentionner la prise en charge du navigateur. Tous les navigateurs modernes ne prennent pas en charge WebP pour le moment. Selon puis-je utiliser, WebP est actuellement pris en charge dans Chrome 23+, Opera 39+, toutes les versions d’Opera mini, le navigateur Android 4.3+ et Chrome pour Android.
Mais attendez! Ne soyez pas trop déçu, car dans le tutoriel que nous allons vous montrer ci-dessous, il existe une méthode pour fournir des fichiers WebP aux navigateurs pris en charge et aux JPG/PNG comme solution de secours. Cela signifie que les navigateurs non pris en charge ne verront pas une image cassée, ils verront simplement ce qu’ils voyaient auparavant. Considérez WebP comme un ajout à votre site WordPress, plutôt que comme une migration.
Selon W3Écoles, Chrome détient le monopole de la part de marché des navigateurs à un peu plus de 70 %. Mais ne considérez pas simplement la part de marché comme une preuve solide, examinez les données de vos propres visiteurs et voyez quels navigateurs ils utilisent, car cela peut différer en fonction de votre créneau. Vous pourriez être surpris de voir à quel point les statistiques sont biaisées. Dans Google Analytics, sous « Audience », vous pouvez cliquer sur « Navigateur et système d’exploitation » et voir quels navigateurs les gens utilisent lorsqu’ils visitent votre site. Nous avons tiré un site Web au hasard et comme vous pouvez le voir ci-dessous, 67% des visiteurs viennent de Chrome et un autre 1% d’Opera. Alors 68% de ces personnes peuvent visualiser et bénéficier du WebP format de fichier image !
Comment utiliser les fichiers WebP dans WordPress
Dans l’exemple d’aujourd’hui, nous allons utiliser une combinaison de deux plugins WordPress différents pour que WebP soit opérationnel dans WordPress. Ceux-ci sont créés et développés par l’équipe de KeyCDN, qui est un réseau mondial de diffusion de contenu (CDN).
- [premium] Optimus d’image Optimus: Plugin de compression d’image sans perte pour WordPress, convertit les images en WebP
- [free] Activateur de cache WordPress: plugin de mise en cache qui vous permet de servir WebP vers les navigateurs pris en charge
Optimus d’image Optimus
Vous pouvez télécharger Optimus Image Optimizer à partir du Référentiel WordPress, à partir de optimus.io, ou depuis le tableau de bord de votre plugin. Remarque : une licence premium est requise si vous souhaitez convertir vos images en WebP. Une fois installé, vous pouvez activer la « Création de fichiers WebP » dans les paramètres du plugin.
Une fois WebP activé, cela crée essentiellement une image supplémentaire pour tout ce qui est converti. Ainsi, si vous téléchargez un fichier PNG ou JPG, il existe également désormais une version .webp de votre image. N’oubliez pas que les fichiers PNG/JPG sont toujours nécessaires car ils sont toujours utilisés pour servir aux navigateurs non pris en charge. Optimus effectue une compression sans perte, de sorte que vos fichiers PNG et JPG sont également compressés.
Il existe également une option d’optimisation en masse au cas où vous auriez déjà compressé vos images auparavant et que vous auriez encore besoin de les convertir en WebP.
Activateur de cache WordPress
Alors maintenant que vous avez des images WebP, vous avez besoin d’un moyen de dire à WordPress de fournir des images WebP aux navigateurs pris en charge et PNG/JPG aux autres navigateurs. Cela peut être accompli avec le plugin gratuit WordPress Cache Enabler. Vous pouvez télécharger le plugin à partir du Référentiel WordPress ou installez-le à partir du tableau de bord de votre plugin. Une fois installé, vous pouvez activer « Créer une version mise en cache WebP supplémentaire » dans les paramètres du plug-in.
Une fois que vous avez activé cette option, une version WebP supplémentaire en cache de votre page est créée.
Et c’est tout ! Vous devriez maintenant avoir des fichiers WebP en cours d’exécution sur votre site Web WordPress.
Comparaison JPG à WebP
Nous avons effectué une comparaison de JPG en WebP pour montrer les différences que vous pouvez réaliser.
NOM DE FICHIER | ORIGINAL JPG | JPG COMPRIMÉ | FORMAT WEBP | DIFFÉRENCE DE TAILLE % |
---|---|---|---|---|
jpg-vers-webp-1.jpg | 758 Ko | 685 Ko | 109 Ko | 86% |
jpg-vers-webp-2.jpg | 599 Ko | 529 Ko | 58,8 Ko | 90% |
jpg-vers-webp-3.jpg | 960 Ko | 881 Ko | 200 Ko | 79% |
jpg-vers-webp-4.jpg | 862 Ko | 791 Ko | 146 Ko | 83% |
jpg-vers-webp-5.jpg | 960 Ko | 877 Ko | 71,7 Ko | 93% |
WebP a entraîné un Baisse de 85,87 % de la taille moyenne de l’image.
Comparaison PNG à WebP
Encore une fois, nous avons également effectué une comparaison de PNG en WebP pour montrer les différences que vous pouvez réaliser.
Nom de fichier | PNG d’origine | PNG compressé | Format WebP | Différence de taille % |
---|---|---|---|---|
png-vers-webp-1.png | 44 Ko | 34 Ko | 30 Ko | 32% |
png-to-webp-2.png | 46 Ko | 35 Ko | 33 Ko | 28% |
png-to-webp-3.png | 43 Ko | 31 Ko | 25 Ko | 42% |
png-vers-webp-4.png | 30 Ko | 24 Ko | 18 Ko | 40% |
png-vers-webp-5.png | 15 Ko | 11 Ko | 8 Ko | 47% |
png-vers-webp-6.png | 34 Ko | 24 Ko | 18 Ko | 47% |
png-vers-webp-7.png | 15 Ko | 13 Ko | 8 Ko | 47% |
png-to-webp-8.png | 63 Ko | 47 Ko | 44 Ko | 30% |
png-vers-webp-9.png | 48 Ko | 36 Ko | 33 Ko | 31% |
png-vers-webp-10.png | 17 Ko | 14 Ko | 11 Ko | 35% |
png-vers-webp-11.png | 18 Ko | 13 Ko | 9 Ko | 50% |
png-vers-webp-12.png | 61 Ko | 45 Ko | 39 Ko | 36% |
png-to-webp-13.png | 32 Ko | 25 Ko | 21 Ko | 35% |
png-vers-webp-14.png | 26 Ko | 21 Ko | 17 Ko | 35% |
png-vers-webp-15.png | 14 Ko | 12 Ko | 9 Ko | 36% |
png-vers-webp-16.png | 36 Ko | 27 Ko | 24 Ko | 33% |
png-vers-webp-17.png | 14 Ko | 12 Ko | 8 Ko | 43% |
png-to-webp-18.png | 21 Ko | 18 Ko | 13 Ko | 38% |
png-to-webp-19.png | 42 Ko | 30 Ko | 27 Ko | 36% |
png-vers-webp-20.png | 23 Ko | 20 Ko | 18 Ko | 22% |
WebP a entraîné un Diminution de 42,8% de la taille moyenne de l’image.
Résumé
Comme vous pouvez le voir, WebP est très facile à implémenter sur votre site WordPress et vous pouvez obtenir des tailles de fichier image considérablement plus petites ! Il n’y a pas de compression d’image comparable aux économies de WebP. Oh, et avons-nous mentionné que WebP a la possibilité d’utiliser une compression sans perte ? Cela signifie que vous ne verrez aucune perte de qualité notable. Si vous cherchez un meilleur moyen d’accélérer WordPress, WebP peut être une excellente solution.