Optimisez vos images
Bien souvent, les poids le plus lourd dans vos page Web provient de vos images, il convient donc d’en optimiser le chargement
1. Utilisez des images au format svg pour vos formes vectorielles
Le format SVG est un format adapté au dessin vectoriel, l’un des avantages de ce format vient avant tout de sa légèreté.
Il est donc recommandé d’utiliser des SVG à la place de vos PNG quand il s’agit de dessins vectorielles, illustrations, etc.
WordPress ne supporte pas nativement l’upload de SVG, afin de résoudre celà, vous pouvez copier cette fonction dans votre fichier de theme functions.php
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail:not(.thumbnail-image) img {
width: 100%!important;
height: auto!important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
Si vous n’êtes pas à l’aise avec le code vous pouvez aurez besoin d’une extension comme svg support
Toujours dans un souçis d’optimisation, si le code de vos images SVG n’est pas trop long, vous pouvez directement l’intégrer dans votre thème (si vous n’administré pas certains svg dans votre theme) plutôt que d’utiliser une balise <img>, ça économisera des requêtes.
Bien sûr faites attention à la longeur du code svg afin de ne pas trop polluer le code de votre theme.
Exemple :
le code SVG ci-dessous n’est pas trop encombrant et vous pouvez vous permettre de l’utiliser.
<svg xmlns="http://www.w3.org/2000/svg" width="36.676" height="42.252" viewBox="0 0 36.676 42.252">
<g id="arrow-down-black" transform="translate(-1117.086 -2005.5)">
<path id="Tracé_27" data-name="Tracé 27" d="M1683.941,5142.382l-1.414-1.415-16.924-16.924,2.828-2.828,15.51,15.509,15.51-15.509,2.828,2.828Z" transform="translate(-548.518 -3094.63)" fill="#1e1e1e"/>
<path id="Ligne_22" data-name="Ligne 22" d="M2,39H-2V0H2Z" transform="translate(1135.5 2005.5)" fill="#1e1e1e"/>
</g>
</svg>
Le code SVG ci-dessous est assez encombrant pour le code, utiliser donc plutôt un appel via la balise <img>
<svg xmlns="http://www.w3.org/2000/svg" width="87.559" height="64.07" viewBox="0 0 87.559 64.07">
<g id="logo-blog-white" transform="translate(-78.965 -35)">
<g id="Groupe_64" data-name="Groupe 64">
<path id="Tracé_1" data-name="Tracé 1" d="M3355.559,3022.916a7.867,7.867,0,0,1-3.2,3.2,10.564,10.564,0,0,1-4.763,1.214v-4.277q4.671-.244,4.671-5.157v-17.533h4.429v17.624A10.113,10.113,0,0,1,3355.559,3022.916Z" transform="translate(-3268.631 -2965.242)" fill="#fff"/>
<path id="Tracé_5" data-name="Tracé 5" d="M4845.352,3001.77a3.833,3.833,0,0,0-2.26.577,1.991,1.991,0,0,0-.8,1.729,2.273,2.273,0,0,0,1.168,1.865,14.592,14.592,0,0,0,3.108,1.531,12.908,12.908,0,0,1,2.7,1.32,5.9,5.9,0,0,1,1.866,2.048,6.616,6.616,0,0,1,.743,3.306,6.054,6.054,0,0,1-.895,3.2,6.245,6.245,0,0,1-2.624,2.336,9.134,9.134,0,0,1-4.125.864,13.766,13.766,0,0,1-3.974-.591,12.4,12.4,0,0,1-3.67-1.805l1.941-3.427a10.523,10.523,0,0,0,2.639,1.4,7.844,7.844,0,0,0,2.669.546,4.794,4.794,0,0,0,2.427-.592,2.05,2.05,0,0,0,1.031-1.927q0-1.729-3.245-3a28.76,28.76,0,0,1-3.186-1.456,6.557,6.557,0,0,1-2.2-2,5.528,5.528,0,0,1-.925-3.277,6.031,6.031,0,0,1,1.9-4.641,7.7,7.7,0,0,1,5.05-1.911,13.193,13.193,0,0,1,4.155.561,14.231,14.231,0,0,1,3.245,1.593l-1.667,3.366A10.875,10.875,0,0,0,4845.352,3001.77Z" transform="translate(-4685.563 -2962.858)" fill="#fff"/>
<path id="Tracé_6" data-name="Tracé 6" d="M3445.273,3537.727l-1.638-2.184a7.016,7.016,0,0,1-2.518,1.865,8.657,8.657,0,0,1-3.579.683,8.211,8.211,0,0,1-3.807-.88,6.778,6.778,0,0,1-2.7-2.442,6.481,6.481,0,0,1-.986-3.533,6.028,6.028,0,0,1,1.562-4.05,8.765,8.765,0,0,1,3.9-2.594l-.061-.091a11.6,11.6,0,0,1-1.289-2.184,5.944,5.944,0,0,1-.591-2.518,5.127,5.127,0,0,1,2.624-4.444,6.165,6.165,0,0,1,3.17-.773,8.1,8.1,0,0,1,6.4,3l-2.215,2.942a12.325,12.325,0,0,0-1.865-1.668,2.867,2.867,0,0,0-1.623-.577,1.821,1.821,0,0,0-1.456.562,2.035,2.035,0,0,0-.486,1.38,4.955,4.955,0,0,0,1.031,2.4l4.034,5.429,1.517-3.913h4l-2.942,7.4,4.61,6.188Zm-3.913-5.248-3.64-4.884a3.462,3.462,0,0,0-3.124,3.4,2.867,2.867,0,0,0,1.016,2.275,3.729,3.729,0,0,0,2.533.88A3.509,3.509,0,0,0,3441.36,3532.479Z" transform="translate(-3347.091 -3454.577)" fill="#fff"/>
</g>
<path id="Tracé_42" data-name="Tracé 42" d="M-36.67-1.31h2.28V0h-3.99V-7.07h1.71Zm4.78-4.4v1.48h2.39v1.29h-2.39v1.57h2.69V0h-4.4V-7.07h4.4v1.36Zm9.9,2.07a1.77,1.77,0,0,1,1.015.62A1.7,1.7,0,0,1-20.6-1.93a1.756,1.756,0,0,1-.6,1.42A2.621,2.621,0,0,1-22.94,0h-3.29V-7.07h3.21a2.621,2.621,0,0,1,1.67.47,1.614,1.614,0,0,1,.59,1.34A1.651,1.651,0,0,1-21.1-4.2,1.567,1.567,0,0,1-21.99-3.64Zm-2.53-.54h1.12q.89,0,.89-.76t-.91-.76h-1.1Zm1.22,2.79q.95,0,.95-.78a.743.743,0,0,0-.25-.6,1.057,1.057,0,0,0-.71-.215h-1.21v1.59Zm5.31.08h2.28V0H-19.7V-7.07h1.71Zm6.43-5.87a3.6,3.6,0,0,1,1.815.465A3.388,3.388,0,0,1-8.46-5.425,3.7,3.7,0,0,1-7.99-3.56a3.7,3.7,0,0,1-.475,1.87A3.414,3.414,0,0,1-9.755-.4,3.578,3.578,0,0,1-11.56.07a3.578,3.578,0,0,1-1.8-.465,3.414,3.414,0,0,1-1.29-1.3,3.7,3.7,0,0,1-.475-1.87,3.67,3.67,0,0,1,.475-1.865,3.424,3.424,0,0,1,1.29-1.29A3.578,3.578,0,0,1-11.56-7.18Zm0,1.59a1.714,1.714,0,0,0-1.335.545A2.126,2.126,0,0,0-13.39-3.56a2.13,2.13,0,0,0,.495,1.48,1.707,1.707,0,0,0,1.335.55,1.71,1.71,0,0,0,1.33-.55,2.116,2.116,0,0,0,.5-1.48,2.13,2.13,0,0,0-.5-1.48A1.707,1.707,0,0,0-11.56-5.59Zm7.84-1.55a3.531,3.531,0,0,1,2.19.65A2.769,2.769,0,0,1-.46-4.73H-2.27a1.4,1.4,0,0,0-.55-.605,1.681,1.681,0,0,0-.89-.225,1.663,1.663,0,0,0-1.3.545A2.124,2.124,0,0,0-5.5-3.54a2.159,2.159,0,0,0,.515,1.55,1.929,1.929,0,0,0,1.465.54,1.769,1.769,0,0,0,1.07-.335A1.785,1.785,0,0,0-1.8-2.74H-3.96V-3.97H-.37v1.69a3.448,3.448,0,0,1-.64,1.15,3.3,3.3,0,0,1-1.125.86A3.563,3.563,0,0,1-3.7.06,3.718,3.718,0,0,1-5.57-.4,3.117,3.117,0,0,1-6.8-1.67,3.929,3.929,0,0,1-7.24-3.54,3.929,3.929,0,0,1-6.8-5.41a3.126,3.126,0,0,1,1.23-1.275A3.67,3.67,0,0,1-3.72-7.14Z" transform="translate(159.5 99)" fill="#ccc"/>
</g>
</svg>
Pour finir avec les SVG, privilégier la création de formes en CSS pour les formes simple et reproductible via CSS.
2. Compressez le poids de vos images
Afin d’optimiser le poids originale de vos images, il convient préalablement de les compresser.
L’objectif de la compression est de trouver un équilibre entre qualité d’image et poid du fichier, si la compression est trop importante, vos images perdront en qualité et seront pixélisé, ce n’est pas le but.
Il existe des convertisseurs en ligne, chez Fourmix, nous recommandons tinypng pour vos png/jpg/webp (si vous voulez configurer vous même la tolérance de compression utilisez squoosh) et svgoptimizer pour vos svg.
Des plugins rendent aussi possible l’automatisation de cette tache:
3. Utilisez des dimensions d’images adaptées
Afin de gagner en performances, le plus optimal est de charger vos jpg/png avec des tailles adaptés aux différents supports d’écran.
Lors de chaque upload d’image, WordPress crée automatiquement 4 tailles d’images:
- Thumbnail (150 x 150 pixels)
- Medium (maximum 300 x 300 pixels)
- Large (maximum 1024 x 1024 pixels)
- Full (taille originale lors de l’upload)
Vous pouvez donc vous servir de ses différents types d’images pour charger des tailles d’images réduire pour mobile ou plus grande pour Desktop, c’est un gain de performances sur les différents support indéniable.
Avec WordPress vous avez la possibilité de configurer vos propres tailles d’images grâce à la fonction add_image_size()
Si par exemple vous utilisez une image qui s’affiche en 1200px*800px sur desktop, vous pouvez donc définir une taille personnalisée et l’afficher ensuite selon le support.
Pour se faire vous pouvez vous servir de la balise picture couplé à srcset
<picture>
<source srcset="img_desktop_url" media="(min-width: 768px)">
<source srcset="img_mobile_url" media="(min-width: 1px)">
<img src="img_desktop_url" alt="thumbnail">
</picture>
Ci-dessus on affichera l’image adapté à la taille desktop à partir de 768px et la mobile sera chargée avant 767px.
Attention à ne pas crée toutefois trop d’image personalisée avec add_image_size car chaque image uploadé sera dupliqué autant de fois que d’images personalisée existe, ce qui peut rapidement prendre de la place.
Cette méthode peut être adaptée pour les Images à la une dans les listes d’articles afin que la taille d’affichage soit la même que la taille au chargement.
Si vous avez une seule image avec une taille particulière, autant ne pas utiliser add_image_size vous pouvez directement créer deux champs personnalisée afin d’upload une image pour mobile et une image pour desktop par exemple.
4. Utilisez du lazyload pour optimiser le chargement des images
Le Lazyload est une technique moderne qui améliore grandement la vitesse de chargement, elle permet de différer le chargement de vos images, grâce au Lazyload les utilisateurs peuvent charger plus rapidement les autres ressources de la page, généralement les images se chargent ensuite au scroll.
Depuis la 5.5, WordPress a implémenter nativement le lazyload via l’attribut loading= »lazy » à placer dans vos balises <img/>
D’autres extension peuvent s’occuper à vos place du Lazyload.
Si vous préféré laisser une autre extension s’occuper du Lazyload vous pouvez désactiver le lazyload natif WordPress via cette fonction dans votre fichier functions.php
add_filter( 'wp_lazy_loading_enabled', '__return_false' ) ;
à noter que WP Rocket (nous reviendrons plus tard sur ce plugin) désactive automatiquement le Lazyload natif WordPress (vous n’aurez donc pas à utiliser la fonction ci-dessus) lorsque le Lazyload de WP Rocket est activé afin d’éviter tout conflit potentiel.
Si vous utilisez WP Rocket je vous conseil donc d’utiliser le Lazyload proposé par le plugin, car il propose des options supplémentaires pour implémenter du chargement différé sur les iframes/videos etc.
5. Passez vos JPG/PNG aux formats modernes WEBP ET AVIF
Profitez des formats d’images modernes pour gagner en performance !
Webpexpress convertissez en un clin d’œil
Depuis 2010 le format WebP permet d’avoir des images plus légères, c’est un format à adopter impérativement.
Le webp est supporté sur presque tout les navigateurs (BOUH IE)
https://caniuse.com/webp
Webpexpress est un plugin qui va vous permettre de convertir automatiquement et le plus simplement du monde vos images png/jpg au format webp, le plugin s’occupera aussi de conditionné la conversion en fonction du navigateur, sur IE par exemple, le plugins ne convertira pas afin qu’il n’y est aucun problème de chargement.
Avif, le format futuriste
En 2022 le tout nouveau format AVIF va tendre à se démocratiser.
Google recommande le format WebP mais le format AVIF propose des meilleurs performances.
D’après notre récent calcul, WebP vous permettra de gagner entre 30 et 35% par apport à une version JPG et le format AVIF entre 50 et 55% !
Avif est un nouveau format d’image dérivé de la vidéo AV1, il est cependant encore assez peut supporté par les navigateurs mais les dernières version de chrome/safariet firefox le supporte.
Vous pouvez donc dès à présent utiliser la balise Picture pour conditionner l’affichage en fonction du navigateur
<picture> <source type="image/avif" srcset="url_image.avif"> <!-- Si le type est supporté alors on utilise l'image .AVIF--> <img alt="Hut in the snow" src="url_image.jpg"> <!-- Sinon on utilise cette image--> </picture>
Il manque encore cependant un plugin gratuit aussi fiable que WebpExpress pour convertir automatiquement vos jpg/png/webp au format AVIF.
Voici deux plugins qui travaille dessus:
N’utilisez pas de vidéos locale
Utiliser une vidéo auto-hébergée présente certains avantage comme le contrôle total sur le balisage et l’interface mais cela représente aussi une perte de performances.
Le téléchargement de la vidéo sera plus lent sur votre serveur, des services comme YouTube feront un meilleur travail et optimiseront la visualisation en ligne.
Il est donc recommandé d’héberger sur Vimeo ou Youtube vos contenus videos, servez vous des embed (attention donc dans ce cas à ne pas les désactiver) ou encore utiliser des librairies comme https://plyr.io/ pour plus de customisation.
Optimisez vos polices/fonts
L’optimisation de la taille et du chargement de vos fonts est une étape importante dans la recherche d’optimisation des performances de votre site WordPress.
1. Charger vos fonts localement
Il y a encore quelques années, il était à la mode d’utiliser un CDN et d’appeler des fonts, souvent les google font étaient donc appelé via des balises comme ceci :
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
Vous pouviez ainsi gagner en performance si l’utilisateur avait déjà en cache la police en ayant visité un site qui utilise la même font que vous.
Depuis les restrictions RGPD récente, utiliser un CDN est devenu obsolète, on préconise toujours de charger localement nos polices, de plus les règles font-face peuvent peuvent être optimiser pour avoir un avantage de gain en performance.
De nos jours, non seulement le chargement local est privilégié pour le RGPD mais il est aussi plus performant, je vous invite à consulter cette article pour en savoir plus.
2. Délayez le chargement de vos fonts
Délayer le chargement de vos polices est une bonne solution pour afficher du texte plus rapidement tant que la police n’est pas chargée.
Vous pouvez utiliser la propriété css font-display: swap sur vos chargement font-face.
Swap permet d’indiquer au navigateur d’utiliser une police de remplacement déjà disponible sur le navigateur en attendant le chargement de la police voulu.
Exemple:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
3. Passez au format WOFF2
Notez que woff2 n’est pas supporté par IE11, il vous suffira donc d’utiliser le format woff, l’ordre est important dans la règle font-face, il faudra donc mettre en premier l’url woff2 et en second l’url woff.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); // support pour IE11
font-display: swap;
}
4. Utilisez la fonction local()
La fonction css local() est une fonction assez utile, elle permet à vos utilisateurs de charger la copie locale de la font directement présente sur leurs système d’exploitation plutôt que celle présente sur votre serveur.
La fonction ne marche bien sûr que si l’utilisateur possède déjà la font sur son périphérique.
Exemple concret: la police Arial est présent par défaut sur windows, local() permettra donc de charger encore plus rapidement la page pour certains utilisateurs.
@font-face {
font-family: 'MyWebFont';
src: local('nom de la font'),
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); // support pour IE11
font-display: swap;
}
5. Le font subsetting avec unicode-range !
L’une des propriétés CSS les plus sous estimés pour le chargement des polices est unicode-range.
Cela peut vraiment aider à réduire les temps de chargement, unicode-range sert à définir les caractères pris en charge par la police lors de son chargement.
Pour comprendre comment fonctionne une font il vaut savoir ce qu’il s’y trouve à l’intérieur, la majorité d’un fichier de font est occupée par des caractères, ces derniers sont identifié grâce à un code numérique, la lettre D par exemple aura le code hexadécimal 41 (et ce quelle que soit la police).
Les fonts contiennent donc des caractères de langues que vous n’utilisez pas forcément, et unicode-range va nous permettre des les ignorer, c’est ce que l’on appel le font subsetting !
Souvent les polices utilisent ce que l’on appelle des variations de caractères, les graphistes ajoute des variations de différents caractères, c’est pourquoi le font subsetting va nous aider, il va parfois nous permettre d’ignorer plusieurs centaines/milliers de variations de caractères.
La propriété unicode-range s’utilise dans votre règle font-face, elle attend comme valeur une liste de codes de caractères, vous pouvez vous référer à la table des caractères unicode pour choisir les codes que vous allez utiliser.
Pour un site français on utilisera les codes suivants.
@font-face {
font-family: 'MyWebFont';
src: local('nom de la font'),
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'), // support pour IE11
font-display: swap;
unicode-range: U+0000-007F,U+0080-00FF,U+0153,U+20AC;
}
Unicode-range doit être utilisé avec attention, si vous souhaitez en apprendre un peu plus sur le font-subsetting vous pouvez consulter cette article.
7. Les variable fonts
Prochainement…
8. Éviter de charger un trop grand nombre de font
Trop souvent, les designers néglige la performance au profit du visuel, il est important de garder une cohérence lors de la construction de son site, chez Boeki, nous préconisons de charger 3 fonts par site, et d’évitez au maximum de charger plus de 6 fonts.
Utilisez un plugin de cache
Vous avez sans aucun doute entendu parler de plugin de mise en cache, en 2022 mettre en place un système de cache est obligatoire si vous souhaité réduire vos temps de chargement et améliorer vos scores Speed test.
Sans mise en cache, le navigateur charge tous les contenus/fichiers à chaque chargements, la mise en cache permet de générer une copie de tous les éléments de votre page pour les afficher instantanément !
WP Rocket c’est un plugin fiable (8 ans d’existence), il est simple d’utilisation (surement le plus simple du marché) vous pouvez littéralement mettre en place un bon système de cache en quelques minutes sans compétences.
Il est un des deux meilleurs plugins de cache en terme de performances avec LiteSpeed cache, il assure aussi un très bon support ce qui n’est pas à négligé sur vos temps de productions, de plus, c’est un plugin Made in France !
LA COMPRESSION GZIP
Pour sa mise en cache, l’agence Boeki utilise WP Rocket.
La compression GZIP compresse le contenu HTML, CSS et JS afin d’alléger le poid des fichiers envoyés par le serveur. La compression des fichiers équivaut à un téléchargement de la page plus rapide et et améliorera le temps de chargement de vos page.
WP Rocket gère la compression Gzip, vous pouvez vérifier que votre site utilise la compression Gzip ici
Si ce n’est pas le cas, il faut jeter un coup d’œil du coté de votre hébergeur, mod_deflate doit être activé sur le serveur.
Si vous ne souhaitez pas utiliser de plugins de cache ou gzip vous pouvez activer la compression GZIP sur WordPress via le fichier .htacess (si votre serveur utilise Web Apache)
<IfModule mod_deflate.c> # Enables GZIP compression AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs in old browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Minifiez vos fichiers
Minifier ses fichiers JS et CSS est devenu un standard en 2022, la minification permet tout simplement de réduire le poids des fichiers en supprimant les commentaires et les espaces vides.
Certains outils (comme gulp) ou plugins peuvent automatiser cette tache pour vous, c’est le cas de WP Rocket, il existe aussi des minifier online https://www.minifier.org/
Fusionnez vos fichiers JS et CSS
Combiner vos différents fichier JS ou CSS est une très bonne methode pour réduire le nombre de requêtes HTTP, au lieu de faire 10 ou 20 appels de fichier, il n’y en aura plus qu’un ou deux (css+js).
Des plugins comme autoptimize permet la concaténation mais WP Rocket gère aussi cela.
Cependant, ces réglages ne sont pas forcément recommandés si votre site utilise HTTP/2. Plus d’infos
Pour finir restez vigilant sur son utilisation, faites des tests, il peut parfois y’avoir des problèmes de compatibilité avec certains thèmes ou plugins.
Différez l’exécution de vos fichiers JS
Les fichiers volumineux peuvent ralentir le chargement de votre site Web et vous devez vous assurer qu’ils se chargent après tous les autres composants.
Le report des fichiers volumineux sur votre site Web permet d’améliorer les performances, car les composants nécessaires se chargent plus rapidement
Encore une fois WP rocket propose cette option, mais si vous n’utilisez pas de plugin vous pouvez utilisez l’attribut defer, rendez-vous dans votre fichier functions.php
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
Ce bout de code ajoute l’attribut defer à vos fichiers JS sauf jQuery.
Comme pour la combinaison/fusion réalisé des tests et faites attention à ce que rien ne plante sur votre site.
Placez le CSS de la ligne de flottaison
Souvent, le css au dessus de la ligne est critique, c’est en effet les styles associés aux éléments de la première vue visible qui doivent être chargé le plus rapidement possible.
L’astuce consiste donc à ouvrir une balise style au dessus de la fonction wp_head() et juste en dessous de vos meta.
Insérez ensuite les css associés à vos éléments de la ligne de flottaison, attention tout de même à appliquer cette technique avec parcimonie, l’objectif n’est pas de se retrouver avec 400 lignes de codes à cette endroit, stylisé uniquement les éléments les plus importants de votre projet.
<style media="screen">/*Exemple d'optimisation de la ligne de flottaison*/
header{background: black}
header nav a{color: white;}
header .element{display: :none;}
@media screen and (max-width: 767px){ /*mobile*/
header .element{display: block;}
}
</style>
<?php wp_head(); ?>
N’oubliez pas de minifier ensuite votre inline css.
<style>header{background:#000}header nav a{color:#fff}header .element{display::none}@media screen and (max-width:767px){header .element{display:block}}</style>
<?php wp_head(); ?>
Utilisez un CDN
Un CDN, c’est un réseau de serveurs répartis à travers le globe, votre site est copé sur tous les serveurs du réseau, cela empêchera la latence si des utilisateurs consultent votre site dans différents pays.
Le CDN est donc un bon choix si votre public est international.
Vous pouvez mettre en place des CDN comme CLOUDFARE ou encore WP RocketCDN (il vous faudra ajouter un coût mensuel en plus de l’achat du plugin)… à savoir que les deux CDN peuvent cohabiter.
Vous pouvez utiliser RocketCDN et Cloudflare ensemble, il vous suffit d’activer et configurer l’add-on Cloudflare de WP Rocket.
Cloudflare beaucoup de fonctionnalités différentes, y compris des fonctions de sécurité.
RocketCDN gèrera lui la partie CDN des ressources (js, css, images), RocketCDN est très simple à mettre en place et tout sera automatisé en quelques cliques.
Si vous souhaitez en apprendre plus sur cloudfare pour coupler les deux, vous pouvez suivre ce très bon tutoriel
Optimisation des requêtes et fichiers
OPTIMISEZ LE CHARGEMENT DES FICHIERS
Après les images, c’est bien souvent les différents fichiers chargé par les plugins et votre theme qui prend le plus de place, c’est donc un process important pour grandement améliorer la vitesse de votre site WordPress.
Pour se faire nous allons avoir besoin d’analyser notre site, et de nous plonger dans le fichier functions.php de votre theme.
La première étape va consister à chercher les fichiers qui ne sont pas utilisé dans vos différentes pages, par exemple si vous utilisez contact form 7, les scripts de cf7 seront chargés sur toutes vos pages, mais pourtant vous n’en avez besoin que dans votre page de contact, il faudra donc retirer les scripts partout sauf sur la page de contact.
Mais comment trouver ces fichiers ? très simple, il suffit d’ouvrir votre console et de fouiller un peu dans vos elements.
Sur les deux screens ci-dessus on constate donc que cf7 charge deux fichiers don on pourrait se passer index.js et style.css présent dans les dossiers du plugins.
Il nous suffit ensuite de les retirer.
Pour se faire nous allons utiliser la fonction wp_dequeue_script() et wp_dequeue_style() avec le hook wp_print_scripts() pour retirer nos fichiers JS et CSS, ensuite nous n’aurons plus qu’à utiliser les fonctions conditionnelles de WordPress… exemple ci-dessous.
function my_dequeue_scripts() {
if (!is_page('contact')) {
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script( 'contact-form-7' );
}
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_scripts', 1000 );
Et voilà, plus de scripts cf7 sur nos pages en dehors de votre page avec le titre/slug « contact », vous pouvez bien sûr utiliser tout un tas de condition selon votre besoin, que ce soit pour les model de page, la page d’accueil, les single etc.
Pour bien comprendre pourquoi j’ai utilisé ‘contact-form-7’ dans mes fonctions wp_dequeue c’est assez simple, on utilise seulement le nom qu’à utiliser le plugin quand il a déclaré ses scripts, il y’a une norme qui est souvent respecté par les plugins, c’est de mettre en id le nom du script suivie de son format, par exemple si l’on revient au script plus haut on retrouve contact-form-7-js pour le script js… ce qui veut dire que le script à été enregistrer avec le nom « contact-form-7″… dans l’id du script on aurait vu un bannane-cf7-js il y’a de forte chance que l’on doivent utiliser
wp_dequeue_script( ‘bannane-form-7’ );
parfois cette norme n’est pas respecté, si les fichiers continue d’être chargé dans votre DOM, vous devrez alors fouiller dans le code source du plugin pour trouver sous quel nom le script ou le style a été déclaré (chercher les wp_enqueue_style et wp_enqueue_script ).
Pour finir, l’idée, c’est de mettre ce process en place sur l’ensemble des pages/model de pages de votre site afin d’alléger au maximum votre site, vous retirer les fichiers don vous n’avez pas besoin sur x ou y pages et votre site décolle sur la lune !
Il y’a aussi certains scripts qui sont chargés nativement par WordPress (Embed/Emoji etc), souvent nous n’en auront pas besoin mais c’est bien sûr à vous de regarder en fonction de vos besoins.. tour d’horizon:
1. Embed
2. Emoji
3. RSD links
4. Retirer les query strings
5. XML-RPC
6. WLmanifest link
7. Self pingback
8. Désactiver Heartbeat
CHARGEZ UNIQUEMENT LES STYLES DE BLOCS GUTENBERG UTILISÉS
Si vous utilisez l’éditeur moderne (aussi appelée Gutenberg) un fichier css est chargé par défaut, c’est le
wp-includes/css/dist/block-library/style.css
Depuis la 5.8 un nouveau filtre a vu le jour pour générer à la place un fichier css aléger qui reprend uniquement les styles de blocs que vous utilisez.
add_filter('should_load_separate_core_block_assets', '__return_true'); // Ajoutez ceci dans functions.php
Et voilà, désormais un nouveau fichier optimisé apparait dans le DOM
wp-includes/css/dist/block-library/common.css
Attention cependant, ce filtre vient tout juste d’être débuggé et sera disponible uniquement à partir de la version 5.9 de WordPress.
OPTIMISEZ VOS REQUETES WP_QUERY()
N’hésitez pas à utiliser des requetés wp_query optimisé pour accélérer vos requete
Une chose que WordPress fait par défaut, qui peut avoir un impact négatif sur les performances, est qu’il essaie d’apporter des messages persistants et de calculer le nombre de lignes trouvées sur la requête.
Souvent, cependant, nous n’avons pas vraiment besoin de cette information. L’ajout de ces deux paramètres désactivera ces fonctionnalités et accélérera notre requête :
$query = new WP_Query( array( 'ignore_sticky_posts' => true, 'no_found_rows' => true ) );
Si vous n’utilisez pas de pagination, vous pouvez mettre le paramètre no_found_rows sur true.
D’autres paramètre d’optimisation existe comme
'update_post_meta_cache' => false // à utiliser si la table post meta n'a pas besoin d'être consulter
'update_post_term_cache' => false // à utiliser si vous n'afficher pas de terms de taxonomy dans la bouche
Si les deux paramètres peuvent être mis sur false vous pouvez à la place des deux prams utiliser directement la ligne ci-dessous:
'cache_results' => false
Logique d’intégration
Les gains en performances passe aussi par des logiques d’intégration, voici quelques conseils à mettre en place lors de votre développement.
1. Utiliser le template hiérarchie
Si vous développer vous mêmes des thèmes sur mesures alors utiliser le template hiérarchie est vital pour aller chercher une performance optimale.
Grossièrement le Template hierarchie permet à WordPress de savoir quel fichier traitée en fonction de la page demandée, on peut utiliser plusieurs fichiers pour le même résultat, mais selon le fichier utilisée, WordPress le lira en premier et l’affichage sera donc plus rapide (exemple: pour lire vos articles, le fichier single-post.php sera traité plus rapidement que single.php)
Je vous redirige vers cette très bonne conférence dispensée par WP-marmite pour comprendre le template hiérarchie en détail.
2. Utiliser des paginations
Réaliser un site rapide, c’est aussi penser à son ux et au poid HTML de chaque page, souvent les pages de catégories ou de liste affiche un grand nombre de post/div qui elles mêmes possède des images.
Afficher les 500 derniers posts de votre blog sans pagination prendra probablement plusieurs secondes, il est important de mettre en place une pagination sur vos listes, il en va de même pour les commentaires dans les articles si votre site est beaucoup consultés.
Il n’y a pas de nombre de post maximum à afficher par page obligatoire mais nous conseillons d’afficher en moyenne entre 20 et 30 post maximum page pages dans vos pages listes/taxonomy/catégories de post et 10 à 20 commentaires par pages dans vos post/cpt.
3. Diviser les articles et soyez attentif à la taille du DOM
Toujours dans la même logique, Google n’aime pas trop les pages avec un nombre très élevés de balise HTML, c’est le fameux « Avoid an excessive DOM size« .
Plus la taille du DOM est excessive, plus le navigateur mettra du temps à l’interpréter.
Si vous avez des articles très long n’hésitez pas à les diviser en plusieurs articles qui feront objet de chapitres (vous renseignerez ensuite des cta lire la suite en bas de chaque chapitre d’article).
Généralement on recommandera une taille inférieur à 1500 éléments (remarquez que cette article ne respecte pas cette règle BOUH ! mais il faut aussi parfois faire vos propres choix, tout condensé dans un seul article n’est t’il parfois pas plus pertinent pour vous… il faut trouver le bon équilibre. )
Utilisez une version PHP récente
Un des problèmes récurrents des sites WordPress lent se retrouve dans la version PHP utilisée.
En 2022 il est vitale que votre version PHP soit au minimum en 7.3 voir 7.4, la version 8 de PHP est désormais supportée par WordPress depuis sa version 5.6, toutefois, restez vigilants, à ce jour il n’y a pas encore de compatibilité totale entre PHP 8 et l’écosystème WordPress (Certains plugins pourraient provoquer des erreurs).
Pour résumé, les dernières versions PHP permettent d’exécuter beaucoup plus de requêtes par secondes qu’auparavant.
Trop de sites WordPress tourne encore sur de vielles versions, 7.2, 7.1… quand on ne retrouve pas des sites en version PHP 5 (BOUH ! ).
En plus d’avoir une administration et un site plus lent vous risquez une incompatibilité avec beaucoup de plugins !
Optimisation du fichier wp_config
Le fichier wp_config se situe à la racine de votre WordPress, c’est le fichier qui sert principalement à vous connecter à votre base de donnée… mais pas seulement !
C’est un fichier assez mal connu qui dispose de nombreuses constantes utilisable, certaines d’entres elles peuvent vous aider à améliorer les performances de votre site WordPress.
wp_max_memory_limit et wp_memory_limit
Utiliser des extensions demandent parfois beaucoup de ressource, c’est le cas de Woocommerce.
Php a donc parfois besoin de plus de mémoire que celle octroyer par défaut par WordPress, on peut donc augmenter la quantité de mémoire allouée via ses constantes.
Copier ceci dans votre fichier wp-config.php
define('WP_MEMORY_LIMIT', '128M');define( 'WP_MAX_MEMORY_LIMIT', '256M' );
wp_post_revisions
Grâce à wp_post_revisions il est possible de limiter le nombre de révisions autorisées par article, c’est pratique pour ne pas surchargée votre base de données, nous conseillons chez Boeki de limiter à 3 révisions par post.
define('WP_POST_REVISIONS', 3 ); // à copier aussi dans votre fichier wp_config
Il est aussi possible de désactiver totalement les révisions via
define('WP_POST_REVISIONS', false );
empty_trash_days
WordPress stock dans sa corbeille les contenus supprimer, si vous souhaitez supprimer automatiquement tous les X jours votre corbeille, la constante empty_trash_days est tout indiqué, elle permettra d’éviter de laisser certaines post dans la corbeille pendant des mois voir des années !
Define ('EMPTY_TRASH_DAYS', 3); // Vide la corbeille au bout de trois jours
Optimiser votre base de données
Certaines astuces vue dans le fichier wp_config permettre d’optimiser votre base de données, mais pour aller un peu plus loin, vous pouvez utiliser des plugins comme Advanced Database Cleaner qui vous permettra de nettoyer régulièrement votre base de données.
Il est à noter que WP Rocket dispose de certaines options pour optimiser votre BDD, nettoyage des contenus automatique, commentaires, réduction des tables (attention à faire une copie avant de l’activer), nettoyage des transients.
Nettoyer votre Base de données est important, car sinon, vous risquez d’alourdir votre base, et de ralentir notamment votre administration.
Désactivez le hotlinking
Le hotlinking peut se traduire par le fait qu’un site utilise vos propres ressources, si une personne copie une image hébergé sur votre site et l’affiche sur le sien il consomme votre bande passante et les ressources de votre serveur.
Il est possible de bloquer le hotlinking pour être préventif. et améliorer la vitesse de votre site.
Rendez-vous dans le fichier .htaccess
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?votrenomdedomaine.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
Trouvez le bon hébergeur
Il est important de choisir un hébergeur décent pour booster la vitesse de vos sites.
Vous trouverez bon nombre de comparatif sur le net, de notre propre expérience, les hébergeurs qui sorte du lot dans la communauté WordPress sont:
- O2switch (mutualisée) pour vos blogs/petits sites e-commerce, O2switch est probablement ce se qui fait de mieux en rapport qualité/prix.
- Kinsta ou WP Serveur (infogéré) pour vos projets les plus sérieux et visités.
Bonus: optimisation ACF
1. Json sync
implémenter lors de la version 5 d’ACF le JSON local vous permet d’enregistrer les paramètres de vos groupes de champs au format json dans votre thème.
Cela va vous permettre d’économiser des requêtes vers votre base de données, voyez ça comme de la mise en cache.
Il vous suffit de créer un dossier acf-json n’oubliez pas de donner des autorisations d’écriture pour que le serveur puisse jouer avec le dossier (755 fonctionnera d’après ACF).
Dès que le dossier sera crée, il vous suffira de mettre à jour via la sauvegarde chacun de vos groupes de champs pour les synchroniser.
2. Php sync
PHP sync est inspiré de JSON Sync et est proposé par l’extension acf-extended, le SYNC php est encore plus rapide que le format json !
Il vous suffira de créer un dossier acfe-php et de synchroniser ensuite vos groupes de champs en cochant dans ces derniers « Auto sync => php », le reste sera automatiser et votre site gagnera en performance.
3. Réduisez les requêtes des champs d’options avec autoload
Par défaut, ACF enregistre les données dans la table des options avec la colonne ‘autoload’ définie sur ‘no’. Cela signifie que toutes les données extraites de la table d’options sont servies sans mise en cache, plutôt que d’utiliser l’excellente API de mise en cache de WordPress. Bien que ce ne soit pas la solution la plus simple, sautez dans votre logiciel de gestion de base de données, sauvegardez la base de données et pour chaque option servie via ACF à chaque chargement de page (qu’il s’agisse du numéro de téléphone de l’entreprise ou de l’adresse enregistrée), remplacez la valeur de chargement automatique de « non » à « oui ‘. Cela réduira de deux requêtes par champ à chaque chargement de page !
'autoload' => false,
Publié par kevin
test