Partager:
Accélération de WordPress Comment avons-nous optimisé les performances de la liste25 de 256%
Voulez-vous accélérer votre site WordPress? Vous voulez connaître les astuces d'optimisation de 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 expliquant comment nous avons optimisé notre site List25 pour améliorer les performances..
Vous avez probablement entendu dire que la vitesse de WordPress est importante pour le référencement. Un site plus rapide implique un meilleur engagement des utilisateurs, davantage de pages vues et de meilleures ventes. Dans une étude de cas strangeloop, ils ont constaté qu'un délai d'une seconde pouvait coûter 7% des ventes, 11% de pages vues en moins et une baisse de 16% de la satisfaction client..
Alors, comment accélérez-vous WordPress??
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 et la manière dont nous avons tout accompli..
Vue d'ensemble
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 en compte plus d’un trimestre. MILLIARD vues.
Le contenu du site est principalement constitué 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 le nombre de pages abandonnées et d’accroître 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 a chuté à 1,21 secondes. (~ 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 en vitesse de page, réduire le nombre de requêtes totales et améliorer le temps de chargement global..
Jetons un coup d'œil aux techniques d'optimisation qui nous ont permis d'accélérer notre site WordPress.
Hébergement WordPress
Avoir un bon hébergeur est crucial pour la vitesse de votre site Web. Comme notre site est devenu plus populaire, nous avons tout 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 recevait 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ées et avons finalement utilisé SiteGround pour l'hébergement List25 car elles 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 créé des boosters de performances pour des plates-formes spécifiques telles que WordPress, Joomla et Magento. Basés sur la plate-forme de votre site, ils optimisent spécialement vos serveurs, ce qui se traduit par de meilleures performances globales..
Nous avons écrit un article sur le moment où vous devriez changer votre hébergement Web, qui parle des 7 indicateurs clés..
Si vous souhaitez changer d'hôte, essayez définitivement SiteGround. Les utilisateurs de WPBeginner bénéficient d'une réduction exclusive de 60% sur l'hébergement + le domaine gratuit.
Caching Plugin
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 visite 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, vous gagnez du temps et des ressources.
Le diagramme ci-dessous illustre le processus. En termes simples, pensez à 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 SiteGround SuperCacher, un plugin 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 (un élément de leur booster de performance).
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 telles que W3 Total Cache ou WP Super Cache..
Chez WPBeginner, nous utilisons W3 Total Cache qui fournit un certain nombre d’options de mise en cache de page, de mise en cache de base de données et de mise en cache d’objet..
À mesure que de plus en plus de sociétés d’hébergement se spécialiseront dans WordPress, de plus en plus de solutions de cache personnalisées seront créées. Pagely et WPEngine offrent é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, cette partie n'a donc pas changé.
Nous avons écrit un article complet sur ce qu'est un CDN et pourquoi vous en avez besoin avec une infographie..
CDN nous permet de servir tous les fichiers CSS, Javascript et les images d'un réseau de diffusion de contenu. Cela fonctionne en déterminant l'emplacement du visiteur du site et en diffusant le contenu à partir du serveur le plus proche du visiteur..
Si vous ne recherchez pas 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 des 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 dans un fichier unique 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 manière dont les plugins WordPress affectent le temps de chargement.
Alors que nous chargeons actuellement quelques petites fonctionnalités dont nous n’aurions 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 de temps supplémentaire..
Image Sprites
Nous avons utilisé un sprite d’image combinant plusieurs icônes de réseaux sociaux et de sites en une seule image:
Chaque fois que nous avions besoin d'afficher une icône particulière, nous utilisions CSS pour:
- Charger l'image en tant qu'image d'arrière-plan
- Définir la largeur et la hauteur de l'élément pour lequel nous avons besoin de l'icône
- Définir la position de fond pour notre image pour charger l'icône nécessaire
Par exemple, pour charger les icônes de médias sociaux de la barre latérale, nous utilisons:
li.widget_social_icons ul li float: left; largeur: 36px; hauteur: 36px; marge: 0 10px 10px 0; rembourrage: 0; fond: 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 position de fond, largeur et la taille 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 de la bande passante. Les requêtes ultérieures adressées au CDN pour l'image entraîneront le chargement de la version en cache (généralement locale), ainsi que le besoin de ne demander qu'une seule image par rapport à 6 icônes sociales différentes..
En combinant JavaScript, CSS et les images, nous avons considérablement réduit le nombre de demandes..
Minification de code
La minification de code implique la suppression des espaces et des sauts de ligne pour réduire la taille du fichier, ce qui facilite son chargement à la 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 sur plusieurs domaines de développement dans une présentation facile à lire:
Nous utilisons CodeKit pour ensuite compiler les fichiers SCSS en un seul fichier CSS. CodeKit supprime également les espaces et les sauts de ligne pour 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 de l'image
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 sont compressées sans perte. Cela garantit que les tailles de fichiers sont aussi petites que possible, sans perte de qualité.
Nous avons également sensibilisé tous nos rédacteurs à l’importance de la sauvegarde des images optimisées pour le Web. Consultez notre guide sur la sauvegarde des images optimisées pour le Web..
Partage social sans Javascript
Le partage social pour List25 est très important, comme tout autre site Web. Cependant, les plugins de partage social peuvent considérablement ralentir votre site.
L'intégration des scripts de ces quatre réseaux sociaux n'a pas eu d'impact sur le temps de chargement des pages dans nos tests, mais elle a visiblement ralenti le site Web lors de l'affichage sur un appareil mobile. Les boutons de partage social prendraient quelques secondes à s'afficher, malgré le chargement asynchrone des scripts, ce qui ferait déplacer le contenu de la publication au fur et à mesure que les boutons seraient chargés..
Pour résoudre ce problème, nous avons opté pour une solution (presque) sans Javascript. Chacun des boutons de partage du réseau social est rendu par notre plugin WordPress personnalisé, et le code 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 parts d'un message sur tous les réseaux sociaux. Pour ce faire, nous avons créé un petit plugin WordPress personnalisé permettant de récupérer et de mettre en cache le nombre de partages sociaux de chaque réseau social dans la table méta Post. Ces comptes sont mis à jour toutes les 24 heures, ce qui garantit que les requêtes qui prennent beaucoup de temps ne sont pas exécutées en permanence.
Vous pouvez utiliser une API telle que Sharre ou disséquer la barre sociale flottante pour la personnalisation..
En utilisant RUM (Real User Monitoring) de Pingdom, ce nouveau plug-in de partage a réduit le temps de chargement de la page "vraie" 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 Google bot, ce qui a contribué à notre taux d'analyse..
Notre taux de rebond global a chuté de 7% car le chargement du site était plus rapide et en changeant d'hôtes, nous avons pu réduire les erreurs de serveur..
Comme vous pouvez l'imaginer avec le faible taux de rebond, le temps passé sur le site a également augmenté de plus de 30 secondes..
Conclusion
Comme vous pouvez le constater, un site Web à chargement plus rapide peut améliorer l'engagement des visiteurs. Les techniques dont nous avons parlé ont couvert une série d'améliorations de base et intermédiaires que vous pouvez implémenter 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 20 plugins WordPress obligatoires pour 2015.
Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.