J'ai passé pas mal de temps à optimiser les performances de ce site, et dans le cadre des travaux en cours je veille sur les nouvelles technologies qui pourraient aider à améliorer la vitesse pour les visiteurs. J'ai suivi l'adoption des formats d'image de nouvelle génération pendant un certain temps et avec la prise en charge par les navigateurs Web maintenant assez répandue, il était temps de comprendre comment utiliser ces nouveaux formats dans wordpress.
Il y a plusieurs étapes requises que j'ai décomposées en titres ci-dessous
Activer la prise en charge dans nginx
La première étape consiste à activer votre serveur Web (dans mon cas nginx) reconnaître les types mime des nouveaux formats. Pour ce faire, vous devez éditer mime.types qui se trouve probablement dans /etc/nginx/mime.types. J'ai ajouté la section suivante
1 2 3 4 5 6 7 | image/heic heic; image/heif heif; image/heic-sequence heics; image/heif-sequence heifs; image/avif avif; image/avif-sequence avis; image/jxl jxl; |
Servir automatiquement les fichiers là où ils sont disponibles
L'étape suivante consiste à dire à nginx de servir les fichiers automatiquement chaque fois qu'ils existent (et de revenir aux anciens formats où un nouveau fichier de format n'existe pas)
Pour ce faire, modifiez d'abord le fichier de configuration principal de nginx (généralement /etc/nginx/nginx.conf) et ajoutez la section suivante à l'intérieur du http{} partie de la configuration
1 2 3 4 5 6 7 | map $http_accept $img_ext { ~image/jxl ‘.jxl’; ~image/avif ‘.avif’; ~image/webp ‘.webp’; default ”; } |
Notez que j'essaie seulement de servir jxl (JPEG-XL) ou fichiers avif, vous pouvez ajouter plus d'options (par ordre de préférence!) si vous le souhaitez.
Suivant, vous devez ajouter ce qui suit sous le serveur{} section de la configuration nginx (qui peut être dans le fichier de configuration principal ou dans un fichier de configuration séparé selon la façon dont vous avez configuré votre structure de configuration nginx)
1 2 3 4 5 | location ~* ^.+\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$img_ext $uri =404; } |
Maintenant, nginx recherchera image.jpg.jxl, puis image.jpg.avif, puis image.jpg.webp et enfin image.jpg lorsqu'il sera demandé pour image.jpg par tous les navigateurs prenant en charge les formats les plus récents.. Ensuite, nous devons les activer dans wordpress
activer les formats de nouvelle génération dans wordpress
Ajoutez le code suivant à votre functions.php (Idéalement, faites-le dans un thème enfant afin que lorsque vous mettez à jour votre thème, vos modifications ne soient pas écrasées)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /***************************************************\ * Enable SVG support and other modern image formats * \***************************************************/ function cc_mime_types( $mimes ) { $mimes[‘svg’] = ‘image/svg+xml’; $mimes[‘webp’] = ‘image/webp’; $mimes[‘heic’] = ‘image/heic’; $mimes[‘heif’] = ‘image/heif’; $mimes[‘heics’] = ‘image/heic-sequence’; $mimes[‘heifs’] = ‘image/heif-sequence’; $mimes[‘avif’] = ‘image/avif’; $mimes[‘avis’] = ‘image/avif-sequence’; $mimes[‘jxl’] = ‘image/jxl’; return $mimes; } add_filter( ‘upload_mimes’, ‘cc_mime_types’ ); |
Notez que j'ai également activé le support pour SVG images en même temps
Vous pouvez désormais télécharger des images au format de nouvelle génération et les utiliser directement dans wordpress si vous le souhaitez., mais je ne le recommande pas car de nombreux navigateurs plus anciens ne les prennent pas encore en charge - et nous avons déjà configuré nginx pour les servir intelligemment, nous devrions donc en faire usage. Ce que nous voulons faire, c'est générer automatiquement les nouveaux formats lorsque nous téléchargeons des images (il existe déjà des plugins qui le font pour webp, mais rien qui le fasse pour jxl ou avif pour le moment).
Installer libheif
Cette étape nécessite un accès à la ligne de commande de votre hébergeur, ce qui est simple si vous exécutez un VPS, mais peut-être pas si simple si vous êtes sur un hébergement mutualisé, auquel cas vous devrez peut-être demander de l'aide à votre hébergeur
Exécutez les commandes bash suivantes (ceux-ci sont sélectionnés pour CentOS 8, d'autres distributions peuvent être un peu différentes)
1 2 | dnf -y install –nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release‑8.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release‑8.noarch.rpm dnf -y install libheif |
Ajouter une fonction personnalisée à wordpress functions.php pour compresser toutes les images téléchargées (et leurs miniatures) au format avi
Comme pour l'étape précédente de functions.php, je recommande de l'ajouter dans un thème enfant
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } //dont forget to delete the avifs if the attachments are deleted function jps_delete_avif($attachment_id) { $all_images= get_intermediate_image_sizes($attachment_id); foreach($all_images as $each_img) { $each_img_det= wp_get_attachment_image_src($attach_id,$each_img); $each_img_path= ABSPATH.‘wp-content’.substr($each_img_det[0],strpos($each_img_det[0],”/uploads/”)).’.avif’; shell_exec(“rm ‑f $each_img_path”); } } add_action( ‘delete_attachment’, ‘jps_delete_avif’ ); |
À l'heure actuelle, c'est tout - toutes les images que vous téléchargez seront converties en copies avif (avec les originaux conservés). Vous pouvez régénérer toutes vos images pour créer les fichiers avif en utilisant un plugin. Remarque : je n'ai pas encore configuré JPEG-La compression XL car sa prise en charge n'est pas encore disponible dans les navigateurs grand public (bien qu'il soit dans les navigateurs préliminaires, il arrive donc très bientôt).
Pendant que je couvre les formats et l'optimisation de nouvelle génération, j'ai un dernier conseil : pour compresser SVG images avec gzip (ou encore mieux zopfli et brotli). Pour ce faire, il faut une autre fonction personnalisée…
Prime: SVG compression
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /*************************************************\ * Compress SVG images more with brotli and zopfli * \*************************************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_vectors’, 10, 2 ); function jps_compress_vectors( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file an svg if(pathinfo($filepath, PATHINFO_EXTENSION)==“svg”) { // If so, run compression of it using zopfli and brotli shell_exec(“zopfli –gzip $filepath”); shell_exec(“brotli –best –output=$filepath.br $filepath”); } // give back what we got return $metadata; } |
Notez que vous aurez besoin de gzip_static et brotli_static activés dans votre configuration nginx.
Auto-compilation pour une version plus récente
J'ai trouvé que sur Centos la dernière version de heif-enc est 1.7 qui a pas mal de bugs lors de la création d'avifs. J'ai donc choisi de compiler mon propre plus récent (1.12) construire et utiliser cela à la place. Cela était un peu compliqué car cela nécessitait le codec aom en tant que bibliothèque partagée. Pour ce faire, exécutez les commandes bash suivantes. Assurez-vous de les exécuter en tant qu'utilisateur normal, pas en tant qu'utilisateur root. Notez également que certaines de ces commandes peuvent ne pas être strictement nécessaires, il m'a fallu un certain temps pour que cela fonctionne et je viens de noter ce qui a fonctionné - je ne suis en aucun cas un expert Linux!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | dnf install x265 x265-devel svt-av1 export CXXFLAGS=”$CXXFLAGS ‑fPIC” cd ~ git clone https://aomedia.googlesource.com/aom mkdir -p aom_build cd aom_build cmake ~/aom -DBUILD_SHARED_LIBS=true make sudo make install cp ./libaom.so.3 /usr/bin/local/libaom.so.3 cd ~ export PKG_CONFIG_PATH=~/aom_build/ LD_LIBRARY_PATH=$LD_LIBRARY_PATH:~/aom_build/ export LD_LIBRARY_PATH git clone –recurse-submodules –recursive https://github.com/strukturag/libheif.git cd libheif ./autogen.sh ./configure make sudo make install LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/bin/ export LD_LIBRARY_PATH |
Une fois que vous avez fait cela, assurez-vous que cela fonctionne en exécutant php -a et en exécutant la commande suivante
1 | shell_exec(“/usr/local/bin/heif-enc ‑A”); |
Vous devriez obtenir une sortie complète, pas seulement un 1 erreur de ligne. En supposant que cela fonctionne, vous pouvez modifier votre functions.php afin que chacune des références shell-exec pointe vers /usr/local/bin/heif-enc au lieu de simplement heif-enc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“/usr/local/bin/heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“/usr/local/bin/heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } |
Nous avons trouvé cet utile? S'il vous plaît ne laissez-nous savoir en laissant tomber un commentaire ci-dessous. Si vous souhaitez vous abonner s'il vous plaît utiliser le lien d'abonnement dans le menu en haut à droite. Vous pouvez également partager avec vos amis en utilisant les liens sociaux ci-dessous. À votre santé.
Dhev sur Résoudre Rich Snippets Testing Tool erreurs de Google: “Merci pour le partage de cette information... J'essaierais certainement cette méthode.”
Laisser un commentaire