4shared

Accélérer WordPress: Comment optimiser la vitesse de son site

By  |  0 Comments

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

Vitesse WordPress

Vous avez probablement entendu est important pour le référencement. Un site plus rapide a une meilleure participation des utilisateurs, plus de pages vues et de meilleures ventes. Dans une étude de cas Strangeloop, ils ont constaté qu’un délai d’une seconde peut vous coûter 7% du chiffre d’affaires, 11% moins de pages vues, et 16% de baisse de la satisfaction client.

Accélérer WordPress

Alors, comment avez-vous fait accélérer jusqu’à 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 le long de la façon dont nous avons accompli tout cela.

Aperçu

List25 est un blog de divertissement commencé par notre fondateur Syed Balkhi. Le site compte plus de 1,5 million d’abonnés, et le canal YouTube a plus d’un quart milliards vues.

Le contenu du site est principalement des images et des vidéos qui prend téraoctets de bande passante, l’optimisation de la vitesse de manière globale était crucial pour nous de garder les coûts, de réduire la page abandon et améliorer le temps sur place.

Avant de commencer l’optimisation, notre page d’accueil a pris 2,21 secondes à charger selon la Pingdom. Après nous avons fait, notre temps de chargement des pages est tombé à 1,21 secondes (~ 45% plus rapide) .

Lors de cette optimisation, nous avons été en mesure d’accélérer notre temps de réponse du serveur, améliorer notre score de performance de vitesse de la page, réduire le nombre de demande totale, et d’améliorer le temps de charge globale.

Jetons un regard sur les techniques d’optimisation qui nous ont aidés à accélérer notre site WordPress.

WordPress hébergement

Avoir un bon hébergeur est crucial pour la vitesse de votre site. Comme notre site est devenu plus populaire, nous devenu trop grand pour tout simplement notre société d’hébergement précédente (HostGator).

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

Nous avons examiné diverses options WordPress hébergement géré, et finalement fini par utiliser SiteGround pour accueillir List25 parce qu’ils offraient la meilleure valeur globale pour ce site.

Vous pouvez voir l’amélioration de notre temps de réponse du serveur immédiatement. Nous sommes passés de 442ms à 172ms max temps de réponse. Ce est une amélioration de 256%.

Accélérer WordPress

 

Siteground a construit boosters de performance pour les plates-formes spécifiques comme WordPress, Joomla, Magento et. Basé sur la plateforme de votre site, ils optimisent spécialement vos serveurs qui se traduit par une meilleure performance globale.

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 cherchez à passer hôtes, puis certainement donner SiteGround un essai. WPBeginner utilisateurs obtiennent une exclusivité de 60% de réduction sur l’hébergement + nom de domaine gratuit.

Caching Plugin

Quand il se 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, quand un visiteur vient à votre site WordPress, votre serveur transmet la demande de PHP à la base de données MySQL qui trouve la page qui est demandé, génère à la volée, et de montrer au visiteur. Cela prend beaucoup de ressources. Lorsque vous avez un cache, il fait gagner du temps et des ressources.

Le schéma ci-dessous met en évidence le processus. En termes simples, penser à la mise en cache que de créer un raccourci sur le bureau qui vous aide à obtenir le fichier plus rapide.

What is Page Cache? - Accélérer WordPress

Pour le site List25, nous utilisons le SiteGround SuperCacher, un plugin qu’ils spécialement construites pour leurs clients. En plus de cela, ils ont ajouté des options de mise en cache dynamique avancés à l’aide de vernis (une partie de leur rappel de la performance).

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

Au WPBeginner, nous utilisons W3 totale du cache qui fournit un certain nombre d’options de mise en cache, la page mise en cache de base de données et l’objet de mise en cache.

Comme plusieurs sociétés d’hébergement spécialisés pour WordPress, nous verrons plus de solutions de mise en cache personnalisé construits. Pagely et WPEngine offrent également leur propre système de cache intégré.

CDN

Réseaux contenu de livraison (CDN) peuvent vous aider à augmenter votre vitesse de 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 qui est un CDN et pourquoi vous en avez besoin avec une infographie.

What is a CDN - Accélérer WordPress

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

Si vous n’êtes pas dans le marché pour une solution CDN premium, vous pouvez alors utiliser Cloudflare.

La combinaison de fichiers pour réduire les demandes HTTP

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

Nous combiné ces fichiers JavaScript et CSS dans un seul fichier pour chaque pour 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 affecter le temps de charge.

Alors que nous sommes en train de chargement de certains petite fonctionnalité que nous ne pourrions 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 de charger plusieurs fichiers JS petits.

Ce est quelque chose que vous avez à faire sur une base régulière parce que les plugins que vous utilisez le changement des heures supplémentaires.

Image lutins

Nous avons fait usage d’un sprite d’image qui combine plusieurs icônes sociaux et des sites en une seule image:

List25 Sprite - Accélérer WordPress

Chaque fois que nous avions besoin pour afficher une icône particulière, nous aimerions utiliser les CSS pour:

  1. Charge l’image comme une image de fond
  2. Définir la largeur et la hauteur de l’élément que nous devons l’icône
  3. Régler la position de fond pour notre image pour charger l’icône nécessaires

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

 li.widget_social_icons li ul {float: left; largeur: 36px; hauteur: 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 , Largeur et Hauteur propriétés CSS nous aide à cibler la section spécifique de l’image que nous voulons à la sortie:

List25 Sprite, Edited - Accélérer WordPress

En conséquence, seule la première demande pour ce fichier d’image utilise la bande passante. Les demandes ultérieures à la CAN pour l’image se traduira dans le cache (typiquement locale) La version en cours de chargement, ainsi que seulement besoin de demander une seule image vs 6 icônes sociaux différents.

En combinant JavaScript, CSS et les images ensemble, nous avons réduit le nombre de demandes de manière significative.

code Minification

code minification consiste à enlever les espaces et les sauts de ligne pour réduire la taille du fichier rendant plus rapide pour charger à la demande.

Pour List25, nous utilisons SCSS, une feuille de style à base de syntaxe (Intro Sass). Cela nous permet de structurer nos fichiers CSS dans plusieurs domaines de développement dans une mise en page facile à lire:

List25 SCSS - Accélérer WordPress

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

En conséquence, nous avons été en mesure de 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 de WordPress et téléchargé du contenu

Pour notre thème WordPress, nous avons utilisé CodeKit pour se assurer que toutes les images ont été compressés sans perte. Cela garantit que les tailles des fichiers sont aussi petits que possible, sans perte de qualité.

List25 Image Optimisation - Accélérer WordPress

Nous avons également instruits tous nos écrivains sur l’importance de l’enregistrement des images optimisées pour le web. Voir notre guide sur la façon d’enregistrer des images optimisées pour le web.

Partage social

Javascript sans

Partage social pour List25 est vraiment important, tout comme ne importe quel autre site. Cependant partage social plugins peuvent considérablement ralentir votre site.

List25 Social Sharing Buttons - Accélérer WordPress

Alors que l’intégration de ces quatre scénarios de réseau social n’a eu aucune incidence temps de chargement lors de nos tests, visiblement ralenti le site Web lors de l’affichage sur un appareil mobile. Boutons de partage social seraient prendre quelques secondes avant d’apparaître, malgré les scripts de chargement asynchrone, ce qui entraîne le contenu du message se déplacer que les boutons chargés en vue.

Pour se attaquer à ce problème, nous avons déménagé à (presque) sans solution Javascript. Chacun des boutons de partage du réseau social sont rendus par notre coutume WordPress Plugin, et Javascript du thème ne est utilisé pour ouvrir la fenêtre de navigateur Web lorsque l’utilisateur clique sur un bouton.

Cependant, nous voulions encore pour afficher le nombre total d’actions avait un poste sur tous les réseaux sociaux. Pour ce faire, nous avons produit un petit personnalisé WordPress Plugin pour récupérer et mettre en cache les chiffres de parts sociales de chaque réseau social dans le méta tableau poste. Ces chiffres sont mis à jour toutes les 24 heures, assurant temps requêtes ne sont pas constamment en cours d’exécution.

vous pouvez soit utiliser une API comme Sharre ou disséquer le Social Bar flottant pour la personnalisation.

Utilisation de Pingdom RUM (surveillance de l’utilisateur réel), ce nouveau plug-in part diminué la «vraie» temps de chargement de six secondes à un peu plus de deux secondes. Il a également veillé à ce que nous avons réduit le nombre de demandes faites pour des scripts tiers.

Résultat

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

6 - Accélérer WordPress

Nous avons été en mesure de réduire notre temps de réponse du serveur de manière significative.

List25 Server Response Time After Switching to SiteGround - Accélérer WordPress

Il a contribué à réduire le temps passé à télécharger une page par Google bot qui a contribué à notre vitesse d’exploration.

Webmaster Tools time spent crawling page - Accélérer WordPress

Notre taux de rebond globalement diminué de 7% parce que le site a été un chargement plus rapide, et par commutation hôtes nous avons pu réduire les erreurs de serveur.

List25 Bounce Rate - Accélérer WordPress

Comme vous pouvez l’imaginer avec le faible taux de rebond, le temps passé sur le site monta ainsi par plus de 30 secondes.

Conclusion

Comme vous pouvez le voir un site web de chargement plus rapide peut améliorer l’engagement des visiteurs. Les techniques que nous avons discuté ont couvert une série 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.

Accélérer WordPress
Accélérer WordPress

Accélérer WordPress

Leave a Reply

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>