Vous souhaitez 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 augmenter les performances.
Vous avez probablement entendu dire que la vitesse de WordPress est importante pour le référencement. Un site plus rapide a un meilleur engagement des utilisateurs, plus de pages vues et de meilleures ventes. Dans une étude de cas Strangeloop, ils ont découvert qu’un retard d’une seconde peut vous coûter 7 % des ventes, 11 % de pages vues en moins et 16 % de moins de 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 façon dont nous avons tout accompli.
Aperçu
Liste25 est un blog de divertissement lancé par notre fondateur Syed Balkhi. Le site compte plus de 1,5 million d’abonnés et le Chaîne Youtube a plus d’un quart MILLIARD vues.
Le contenu du site est principalement composé d’images et de vidéos qui occupent des téraoctets de bande passante. L’optimisation globale de la vitesse était donc cruciale pour nous afin de réduire les coûts, de réduire les abandons de pages et d’améliorer le temps passé sur le site.
Avant de commencer l’optimisation, notre page d’accueil prenait 2,21 secondes à charger selon Pingdom. Une fois que nous avons terminé, le temps de chargement de notre 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.
Jetons un coup d’œil aux techniques d’optimisation qui nous ont aidés à accélérer notre site WordPress.
Hébergement WordPress
Avoir un bon hébergeur est crucial pour la vitesse de votre site Web. Au fur et à mesure que notre site est devenu plus populaire, nous avons simplement dépassé notre ancienne société d’hébergement (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 idéal 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 utilisé SiteGround pour héberger List25, car ils offraient la meilleure valeur globale pour ce site.
Vous pouvez voir l’amélioration du temps de réponse de notre serveur immédiatement. Nous sommes passés d’un temps de réponse maximal de 442 ms à 172 ms. C’est une amélioration de 256%.
Siteground a construit des boosters de performances pour des plateformes spécifiques comme WordPress, Joomla et Magento. Basés sur la plate-forme de votre site, ils optimisent spécialement vos serveurs, ce qui se traduit par une meilleure performance globale.
Nous avons écrit un article sur le moment où vous devriez changer d’hébergement Web, qui parle des 7 indicateurs clés.
Si vous cherchez à changer d’hôte, essayez certainement SiteGround. Les utilisateurs de Themelocal bénéficient d’une remise exclusive de 60% sur l’hébergement + domaine gratuit.
Plugin de mise en cache
Lorsqu’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 vient 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 la montre au visiteur. Cela prend 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, pensez à la mise en cache comme à la création d’un raccourci sur le bureau qui vous aide à accéder plus rapidement au fichier.
Pour le site List25, nous utilisons SiteGround SuperCacher, un plugin qu’ils ont spécialement conçu pour leurs clients. En plus de cela, ils ont ajouté des options avancées de mise en cache dynamique à l’aide de Varnish (partie de leur booster de performances).
Si vous n’êtes pas sur Siteground, ne vous inquiétez pas. Vous pouvez configurer le cache sur votre site WordPress en utilisant l’une des nombreuses solutions disponibles comme W3 Total Cache ou WP Super Cache.
Chez Themelocal, nous utilisons W3 Total Cache qui fournit 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.
Au fur et à mesure que de plus en plus de sociétés d’hébergement se spécialiseront pour WordPress, nous verrons plus de solutions de mise en cache personnalisées construites. 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 à augmenter la vitesse de votre site Web. Nous utilisons MaxCDN depuis le début de List25, donc cette partie n’a pas changé.
Nous avons écrit un article complet sur ce qu’est un CDN et pourquoi vous en avez besoin, ainsi qu’une infographie.
Le CDN nous permet de servir tous les CSS, Javascript et images d’un réseau de diffusion de contenu. Cela fonctionne en déterminant l’emplacement du visiteur du site et en diffusant du 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
Au fur et à mesure que vous ajoutez d’autres plugins, ils ajoutent souvent leurs propres fichiers JavaScript et CSS. Chaque fichier supplémentaire est une nouvelle requête HTTP.
Nous avons combiné ces fichiers JavaScript et CSS en un seul fichier pour chacun afin de réduire les demandes et d’accélérer le temps de chargement. Vous pouvez voir plus de détails à ce sujet sur la façon dont les plugins WordPress affectent le temps de chargement.
Alors que nous chargeons maintenant quelques petites fonctionnalités dont nous n’avons peut-être pas besoin sur une section particulière du site, ce code est mis en cache sur le CDN, et les résultats montrent que moins de demandes de fichiers offrent de meilleures performances que le chargement de plusieurs fichiers JS plus petits.
C’est quelque chose que vous devez faire régulièrement car les plugins que vous utilisez changent au fil du temps.
Sprites d’images
Nous avons utilisé un sprite d’image qui combinait plusieurs icônes sociales et de site en une seule image :
Chaque fois que nous devions afficher une icône particulière, nous utilisions CSS pour :
- Charger l’image comme image de fond
- Définissez la largeur et la hauteur de l’élément pour lequel nous avons besoin de l’icône
- Définissez la position d’arrière-plan de notre image pour charger l’icône nécessaire
Par exemple, pour charger les icônes de réseaux 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; }
le background-position
, width
et height
Les propriétés CSS nous aident à cibler la section spécifique de l’image que nous voulons générer :
Par conséquent, seule la première demande de ce fichier image utilise la bande passante. Les demandes 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 demander une seule image contre 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 minimisation du code consiste à supprimer les espaces et les sauts de ligne pour réduire la taille du fichier, ce qui accélère le chargement sur demande.
Pour List25, nous utilisons SCSS, une feuille de style basée sur la syntaxe (Intro to Sass). Cela nous permet de structurer nos fichiers CSS dans plusieurs domaines de développement dans une mise en page facile à lire :
Nous utilisons CodeKit pour compiler ensuite les fichiers SCSS en un seul fichier CSS. CodeKit supprime également les espaces et les sauts de ligne pour garantir que le fichier est 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 pour savoir comment enregistrer des images optimisées pour le Web.
Partage social sans Javascript
Le partage social pour List25 est vraiment important comme n’importe quel autre site Web. Cependant, les plugins de partage social peuvent ralentir considérablement votre site.
Si l’intégration de ces quatre scripts de réseaux sociaux n’a pas eu d’impact sur le temps de chargement des pages dans nos tests, elle a visiblement ralenti le site web lors de la visualisation sur un appareil mobile. Les boutons de partage social prendraient quelques secondes pour apparaître, malgré le chargement asynchrone des scripts, ce qui entraînerait le déplacement du contenu de la publication au fur et à mesure que les boutons se chargeaient.
Pour résoudre ce problème, nous sommes passés à une solution (presque) sans Javascript. Chacun des boutons de partage du réseau social 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 d’une publication 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 le nombre de partages sociaux de chaque réseau social dans la table méta Post. Ces décomptes sont mis à jour toutes les 24 heures, garantissant que les requêtes fastidieuses ne sont pas constamment exécutées.
Vous pouvez soit utiliser une API comme Partager ou disséquer le Bar social flottant pour la personnalisation.
En utilisant le RUM (Real User Monitoring) de Pingdom, ce nouveau plugin de partage a réduit le temps de chargement de la «vraie» page de 6 secondes à un peu plus de 2 secondes. Cela nous a également permis de réduire le nombre de demandes de 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 secondes.
Nous avons pu réduire considérablement le temps de réponse de notre serveur.
Cela a permis de réduire le temps passé à télécharger une page par le bot Google, ce qui a aidé 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 de serveur.
Comme vous pouvez l’imaginer avec le taux de rebond inférieur, le temps passé sur le site a également augmenté de plus de 30 secondes.
Conclusion
Comme vous pouvez le voir, un site Web à chargement plus rapide peut améliorer l’engagement des visiteurs. Les techniques dont nous avons discuté ont couvert une gamme d’améliorations de base 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 pouvez également consulter notre article sur les 20 plugins WordPress indispensables pour 2015.