Accélérer WordPress : Comment nous avons optimisé les performances de List25 de 256%

Vous voulez accélérer votre site WordPress ? Vous voulez connaître les astuces d'optimisation WordPress qui peuvent vous aider à réduire le temps de chargement de votre site ? Dans cet article, nous allons vous montrer comment accélérer WordPress en partageant comment nous avons optimisé notre site List25 pour améliorer ses performances.

Vous avez probablement entendu dire que la vitesse de WordPress est importante pour le SEO. Un site plus rapide a un meilleur engagement des utilisateurs, plus de pages vues et de meilleures ventes. Dans une étude de cas de strangeloop, ils ont constaté qu'un délai d'une seconde peut vous coûter 7 % des ventes, 11 % de pages vues en moins et une diminution de 16 % de la satisfaction client.

Alors, comment accélérer réellement WordPress ?

Eh bien, au lieu de simplement partager une liste de conseils de vitesse, nous avons décidé de faire une étude de cas complète pour vous montrer les résultats de notre site List25 ainsi que la manière dont nous avons tout accompli.

Aperçu

List25 est un blog de divertissement créé par notre fondateur Syed Balkhi. Le site compte plus de 1,5 million d'abonnés, et la chaîne YouTube a plus d'un quart de MILLIARD de vues.

Le contenu du site est principalement composé d'images et de vidéos, ce qui consomme des téraoctets de bande passante. L'optimisation globale de la vitesse était donc cruciale pour nous afin de réduire les coûts, d'éviter l'abandon de page et d'améliorer le temps passé sur le site.

Avant de commencer l'optimisation, notre page d'accueil mettait 2,21 secondes à se charger selon Pingdom. Une fois terminé, notre temps de chargement de page est tombé à 1,21 seconde (~45 % plus rapide).

Au cours de cette optimisation, nous avons pu accélérer le temps de réponse de notre serveur, améliorer notre score de performance de vitesse de page, réduire le nombre total de requêtes et améliorer le temps de chargement global.

Examinons les techniques d'optimisation qui nous ont aidés à accélérer notre site WordPress.

Hébergement WordPress

Avoir un bon hébergeur web est crucial pour la vitesse de votre site. Alors que notre site devenait plus populaire, nous avons simplement dépassé notre hébergeur précédent (HostGator).

Leurs serveurs ne pouvaient tout simplement pas gérer un site de cette taille car List25 reçoit des dizaines de millions de pages vues. HostGator est excellent pour les petits sites, mais pas pour quelque chose de cette ampleur.

Nous avons examiné diverses options d'hébergement WordPress géré, et avons finalement choisi SiteGround pour héberger List25 car ils offraient le meilleur rapport qualité-prix global pour ce site.

Vous pouvez voir l'amélioration de notre temps de réponse serveur immédiatement. Nous sommes passés d'un temps de réponse maximum de 442 ms à 172 ms. C'est une amélioration de 256%.

Siteground a intégré des optimiseurs de performance pour des plateformes spécifiques comme WordPress, Joomla et Magento. En fonction de la plateforme de votre site, ils optimisent spécialement vos serveurs, ce qui se traduit par de meilleures performances globales.

Nous avons écrit un article sur quand changer votre hébergement web qui parle des 7 indicateurs clés.

Si vous cherchez à changer d'hébergeur, alors essayez absolument SiteGround. Les utilisateurs de WPBeginner bénéficient d'une réduction exclusive de 60 % sur l'hébergement + un nom de domaine gratuit.

Plugin de mise en cache

Quand il s'agit d'accélérer WordPress, la mise en cache est le deuxième facteur le plus important après votre hébergement web.

Normalement, lorsqu'un visiteur arrive sur votre site WordPress, votre serveur transmet la requête PHP à la base de données MySQL qui trouve la page demandée, la génère à la volée et l'affiche au visiteur. Cela consomme beaucoup de ressources. Lorsque vous avez la mise en cache, cela permet d'économiser du temps et des ressources.

Le schéma ci-dessous met en évidence le processus. En termes simples, considérez la mise en cache comme la création d'un raccourci sur le bureau qui vous permet d'accéder plus rapidement au fichier.

Pour le site List25, nous utilisons le SiteGround SuperCacher, un plugin qu'ils ont spécialement conçu pour leurs clients. En plus de cela, ils ont ajouté des options de mise en cache dynamique avancées utilisant Varnish (qui fait partie de leur accélérateur de performance).

Si vous n'êtes pas chez Siteground, alors ne vous inquiétez pas. Vous pouvez configurer la mise en cache sur votre site WordPress en utilisant l'une des nombreuses solutions disponibles comme W3 Total Cache ou WP Super Cache.

Chez WPBeginner, nous utilisons W3 Total Cache qui offre un certain nombre d'options de mise en cache de pages, de mise en cache de base de données et de mise en cache d'objets.

À mesure que de plus en plus d'hébergeurs se spécialisent pour WordPress, nous verrons davantage de solutions de mise en cache personnalisées être développées. Pagely et WPEngine proposent également leur propre système de mise en cache intégré.

CDN

Les réseaux de diffusion de contenu (CDN) peuvent vous aider à améliorer la vitesse de votre site Web. Nous utilisons MaxCDN depuis le début de List25, donc cette partie n'a pas changé.

Nous avons rédigé un article complet sur ce qu'est un CDN et pourquoi vous en avez besoin, accompagné d'une infographie.

Le CDN nous permet de servir tous les fichiers CSS, Javascript et images à partir d'un réseau de diffusion de contenu. Cela fonctionne en déterminant l'emplacement du visiteur du site et en servant le contenu à partir d'un serveur le plus proche du visiteur.

Si vous n'êtes pas à la recherche d'une solution CDN premium, vous pouvez utiliser Cloudflare.

Combinaison de fichiers pour réduire les requêtes HTTP

Lorsque vous ajoutez plus de plugins, ils ajoutent souvent leurs propres fichiers JavaScript et CSS. Chaque fichier supplémentaire représente une nouvelle requête HTTP.

Nous avons combiné ces fichiers JavaScript et CSS en un seul fichier pour chacun afin de réduire les requêtes et d'accélérer le temps de chargement. Vous pouvez trouver plus de détails à ce sujet dans la façon dont les plugins WordPress affectent le temps de chargement.

Bien que nous chargions maintenant une petite fonctionnalité dont nous pourrions ne pas avoir besoin dans une section particulière du site, ce code est mis en cache sur le CDN, et les résultats montrent que moins de requêtes de fichiers offrent de meilleures performances que le chargement de plusieurs petits fichiers JS.

C'est quelque chose que vous devez faire régulièrement car les plugins que vous utilisez changent avec le temps.

Sprites d'images

Nous avons utilisé un sprite d'image qui a combiné plusieurs icônes sociales et de site en une seule image :

Chaque fois que nous avions besoin d'afficher une icône particulière, nous utilisions le CSS pour :

1. Charger l'image comme image d'arrière-plan
2. Définir la largeur et la hauteur de l'élément pour lequel nous avons besoin de l'icône
3. Définir la position de l'arrière-plan de notre image pour charger l'icône nécessaire

Par exemple, pour charger les icônes des médias sociaux de la barre latérale, nous utilisons :

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

Les propriétés CSS background-position, width et height nous aident à cibler la section spécifique de l'image que nous voulons afficher :

En conséquence, seule la première requête pour ce fichier image utilise de la bande passante. Les requêtes ultérieures au CDN pour l'image entraîneront le chargement de la version mise en cache (généralement locale), ainsi que la nécessité de ne demander qu'une seule image au lieu de 6 icônes sociales différentes.

En combinant JavaScript, CSS et images, nous avons considérablement réduit le nombre de requêtes.

Minification du code

La minification du code consiste à supprimer les espaces blancs et les sauts de ligne afin de réduire la taille du fichier, ce qui permet un chargement plus rapide lors des requêtes.

Pour List25, nous utilisons SCSS, une feuille de style basée sur la syntaxe (Intro à Sass). Cela nous permet de structurer nos fichiers CSS dans plusieurs domaines de développement dans une disposition facile à lire :

Nous utilisons CodeKit pour compiler ensuite les fichiers SCSS en un seul fichier CSS. CodeKit supprime également les espaces blancs et les sauts de ligne pour garantir que le fichier soit aussi petit que possible :

En conséquence, nous avons pu réduire la taille de notre fichier CSS de 28%.

Optimisation des images

Nous avons optimisé nos images dans deux domaines : notre thème WordPress et le contenu téléchargé.

Pour notre thème WordPress, nous avons utilisé CodeKit pour nous assurer que toutes les images étaient compressées sans perte. Cela garantit que la taille des fichiers est aussi petite que possible, sans perte de qualité.

Nous avons également sensibilisé tous nos rédacteurs à l'importance d'enregistrer des images optimisées pour le web. Consultez notre guide sur comment enregistrer des images optimisées pour le web.

Partage social sans Javascript

Le partage social pour List25 est vraiment important, comme pour tout autre site web. Cependant, les plugins de partage social peuvent ralentir considérablement votre site.

Bien que l'intégration des scripts de ces quatre réseaux sociaux n'ait pas eu d'impact sur le temps de chargement des pages lors de nos tests, cela a visiblement ralenti le site web lors de la consultation sur un appareil mobile. Les boutons de partage social prenaient quelques secondes à apparaître, malgré le chargement asynchrone des scripts, ce qui entraînait le déplacement du contenu du post pendant que les boutons apparaissaient.

Pour résoudre ce problème, nous sommes passés à une solution (presque) sans Javascript. Chacun des boutons de partage des réseaux sociaux est rendu par notre plugin WordPress personnalisé, et le Javascript du thème n'est utilisé que pour ouvrir la fenêtre du navigateur web lorsque l'utilisateur clique sur un bouton.

Cependant, nous voulions toujours afficher le nombre total de partages qu'un post avait sur tous les réseaux sociaux. Pour ce faire, nous avons produit un petit plugin WordPress personnalisé pour récupérer et mettre en cache les comptes de partage social de chaque réseau social dans la table des métadonnées du post. Ces comptes sont mis à jour toutes les 24 heures, garantissant que les requêtes chronophages ne s'exécutent pas constamment.

Vous pouvez soit utiliser une API comme Sharre, soit disséquer le Floating Social Bar pour la personnalisation.

En utilisant le RUM (Real User Monitoring) de Pingdom, ce nouveau plugin de partage a réduit le temps de chargement réel de la page de 6 secondes à un peu plus de 2 secondes. Il a également permis de réduire le nombre de requêtes effectuées pour les scripts tiers.

Résultat

Nous avons considérablement amélioré la vitesse de notre site. Le temps de chargement est passé de 2,2 secondes à 1,22 seconde.

Nous avons pu réduire considérablement notre temps de réponse serveur.

Cela a contribué à réduire le temps passé par Google bot à télécharger une page, ce qui a amélioré notre taux d'exploration.

Notre taux de rebond global a chuté de 7 % car le site se chargeait plus rapidement, et en changeant d'hébergeur, nous avons pu réduire les erreurs serveur.

Comme vous pouvez l'imaginer, avec un taux de rebond plus bas, le temps passé sur le site a également augmenté de plus de 30 secondes.

Conclusion

Comme vous pouvez le constater, un site web qui se charge plus rapidement peut améliorer l'engagement des visiteurs. Les techniques que nous avons abordées couvrent une gamme d'améliorations basiques et intermédiaires que vous pouvez mettre en œuvre pour optimiser votre site WordPress. 

Nous espérons que cet article vous a aidé à accélérer votre site WordPress. Vous pourriez également consulter notre article sur 20 plugins WordPress indispensables pour 2015.

Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.