Aujourd’hui, je partage avec vous 2 astuces WordPress très simples à mettre en place qui vont accélérer considérablement la vitesse de votre site. La première astuce consiste à décharger l’affichage des images… la seconde offre la possibilité de charger en différé les JavaScripts. Ces 2 astuces vont vous faire gagner de précieuses millisecondes… voire une bonne seconde. Améliorez facilement votre score dans les principaux outils : GTmetrix, PageSpeed Insights, Pingdom…
Vitesse d’un site
Comme vous le savez, la vitesse d’un site est très importante pour vos lecteurs dans un premier temps… mais aussi pour le référencement. Ce n’est pas nouveau, on en parle depuis des années. Quelques notions importantes sur le chargement d’une page :
- Perdre 500ms sur le chargement d’un site, c’est perdre 20% de trafic Google
- Réduire de 30% le poids d’une page, c’est gagner 30% de visiteurs à moyen terme
- Ajouter 100ms de latence pour Amazon, c’est 1 % des ventes en moins
- Perdre 400ms sur le chargement d’une page, 5 à 9% d’abandon supplémentaire pour Yahoo!
Pour les images, ce qui pèse le plus lourd… je vous en avais parlé dans cet article précédemment.
Lazy Load
Lazy Load (ou charge paresseuse en français), c’est l’action d’afficher un contenu d’un site seulement lorsqu’il y en a besoin. Cette technologie est très importante pour les images (pour rappel, le plus lourd généralement sur un site). Il existe plusieurs plug-ins pour WordPress. J’en ai noté 2 particulièrement efficaces : a3 Lazy Load et Lazy Load by WP Rocket.
La première solution a3 est très (trop?) complète et le paramétrage est très fin. La seconde est beaucoup plus simple (de 1 à 3 cases à cocher), très légère et tout aussi efficace. J’avais un système Lazy Load déjà embarqué dans mon thème WordPress… mais celui-ci était bien moins efficace que ces 2 choix.
defer async
Lorsqu’un script est intégré dans une page HTML, vous devez faire attention aux performances de chargement de la page. En effet, en fonction de l’endroit et la façon dont vous ajoutez vos scripts à une page HTML, le temps de chargement sera plus ou moins influencé. Sauf que sur WordPress, vous n’avez pas forcément la main entre le thème et les plug-ins. Il existe des solutions de cache en local ou via un CDN. C’est fastidieux et parfois très gourmand en ressource.
Il existe deux attributs HTML qui permettent de modifier le comportement d’une balise <script> et de façon plus général, le chargement des ressources JavaScript :
- async : chargement de façon asynchrone ;
- defer : différer à la fin du chargement du document.
Les 2 attributs auront un effet similaire… cependant, async offre plus de souplesse dans l’exécution puisque chaque script est exécuté dès qu’il est disponible. Cependant, selon mes tests le defer est plus efficace (en tout cas pour mon site) mais la différence est vraiment minime. Je vous recommande de faire des tests par vous-même. Voici mon code à ajouter dans le site et plus précisément dans le function.php de votre thème WordPress :
// Ajout defer pour tous les appels JavaScript
function ajout_defer( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) {
return $url; // Pas notre fichier
}
if (is_user_logged_in()===TRUE) {
return $url; // Pas de defer pour les utilisateurs connectés
}
return "$url' defer='defer";
}
add_filter( 'clean_url', 'ajout_defer', 11, 1 );
Conclusion
Nous voici à la fin de cet article. Nous avons vu que 2 petites actions permettent de gagner simplement et rapidement plusieurs millisecondes sur un site WordPress. Nul doute que cela vous permettra d’améliorer l’expérience utilisateur… mais aussi votre référencement chez Google.