La plupart d’entre nous savent déjà 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 WordPress. Aujourd’hui, nous voulons partager avec vous une alternative simple sur la façon d’intégrer les fichiers Google WebP 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 envoyées au navigateur Web à partir d’un serveur Web en fonction du type MIME qu’il utilise, à savoir image / webp.
Les images WebP sans perte sont 26% plus petites que les PNG, et les images WebP avec perte sont 25% à 34% plus petites que les JPEG.
Des entreprises comme YouTube et eBay utilisent déjà WebP pour alimenter discrètement bon nombre de leurs sites. Voici un exemple d’eBay, où ils ont en moyenne environ 30 fichiers WebP sur leur page d’accueil.
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. C’est généralement plus que CSS, JS et HTML combinés. Par conséquent, le choix d’une méthode d’optimisation d’image robuste et d’un format d’image comme WebP est crucial afin de réduire au maximum 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, car la vitesse de la page est un facteur de classement.
Prise en charge de WebP
Maintenant, si WebP est très intéressant, il est également important de mentionner la compatibilité du navigateur. Tous les navigateurs modernes ne sont actuellement pas compatibles avec WebP. Selon caniuse, WebP prend actuellement en charge 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 JPG / PNG en tant que sauvegarde. Cela signifie que les navigateurs non pris en charge ne verront pas une image cassée, ils ne verront que ce qu’ils voyaient auparavant. Considérez WebP comme un ajout à votre site WordPress, plutôt que comme une migration.
Selon W3Schools, Chrome détient un monopole sur 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 ils peuvent différer en fonction de votre créneau. Cependant, 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 viennent sur votre site. Nous avons sorti un site Web au hasard et, comme vous pouvez le voir ci-dessous, 67% des visiteurs viennent de Chrome et 1% d’Opera. Ensuite 68% de ces personnes peuvent voir et bénéficier de 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 sur 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 Image Optimizer – Plugin de compression d’images sans perte pour WordPress, convertir des images en WebP
- [free] WordPress Cache Enabler – Plugin de mise en cache qui vous permet de servir WebP aux navigateurs pris en charge
Optimus d’image Optimus
Vous pouvez télécharger Optimus Image Optimizer depuis le référentiel WordPress, depuis optimus.io ou depuis le tableau de bord de votre plugin. Remarque : Nécessite une licence premium si vous souhaitez convertir vos images en WebP. Une fois installé, vous pouvez activer “WebP File Creation” 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 désormais également une version .webp de votre image. N’oubliez pas que les fichiers PNG / JPG sont toujours requis car ils sont toujours utilisés pour des 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 et que vous deviez encore les convertir en WebP.
Activeur 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 à d’autres navigateurs. Ceci peut être réalisé avec le plugin gratuit WordPress Cache Enabler. Vous pouvez télécharger le plugin à partir du référentiel WordPress ou l’installer à partir de votre panneau de configuration de plugin. Une fois installé, vous pouvez activer “Créer une version supplémentaire en cache de WebP” dans les paramètres du plugin.
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 effectuons une comparaison JPG vs WebP pour montrer les différences qu’il peut atteindre.
| NOM DE FICHIER | JPG ORIGINAL | JPG COMPRIMÉ | FORMAT WEBP | DIFFÉRENCE DE TAILLE % |
|---|---|---|---|---|
| jpg-a-webp-1.jpg | 758 Ko | 685 Ko | 109 Ko | 86% |
| jpg-a-webp-2.jpg | 599 Ko | 529 Ko | 58,8 Ko | 90% |
| jpg-a-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 abouti à un Baisse de 85,87 % de la taille moyenne de l’image.
Comparaison PNG à WebP
Encore une fois, nous avons également fait une comparaison PNG vs WebP pour montrer les différences qu’il peut atteindre.
| 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-vers-webp-2.png | 46 Ko | 35 Ko | 33 Ko | 28% |
| png-vers-webp-3.png | 43 Ko | 31 Ko | 25 Ko | 42% |
| png-a-webp-4.png | 30 Ko | 24 Ko | 18 Ko | 40% |
| png-to-webp-5.png | 15 Ko | 11 Ko | 8 Ko | 47% |
| png-a-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 | cinquante% |
| png-vers-webp-12.png | 61 Ko | 45 Ko | 39 Ko | 36% |
| png-a-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-a-webp-18.png | 21 Ko | 18 Ko | 13 Ko | 38% |
| png-vers-webp-19.png | 42 Ko | 30 Ko | 27 Ko | 36% |
| png-a-webp-20.png | 23 Ko | 20 Ko | 18 Ko | 22% |
WebP a abouti à 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 peut atteindre 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.
