Réduire l'hébergement wordpress largeur de la page
Voulez-vous accélérer votre site WordPress? Vous voulez connaître les astuces d'optimisation WordPress qui peuvent vous aider à réduire votre temps de chargement du site? Dans cet article, nous allons vous montrer comment accélérer WordPress en partageant la façon dont nous avons optimisé notre site List25 pour améliorer les performances.
Vous avez probablement entendu la vitesse WordPress est important pour le référencement. Un site plus rapide a un meilleur engagement des utilisateurs, plus de pages vues, et 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 diminution de la satisfaction des clients.
Alors, comment trouvez-vous réellement accélérer WordPress?
Eh bien, au lieu de partager juste 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 accompli tout cela.
List25 est un blog de divertissement a 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 la plupart du temps des images et des vidéos qui prend téraoctets de bande passante, donc l'optimisation de la vitesse globale nous a été cruciale pour maintenir les coûts vers le bas, réduire l'abandon de page et d'améliorer le temps sur place.
Avant de commencer l'optimisation, notre page d'accueil a pris 2,21 secondes pour charger selon Pingdom. Après que nous avons fait, notre temps de chargement de la page a chuté à 1,21 secondes (
Au cours de cette optimisation, nous avons pu accélérer notre temps de réponse du serveur, améliorer notre vitesse page score de performance, réduire le nombre de demande totale, et d'améliorer le temps global de charge.
Jetons un coup d'oeil sur les techniques d'optimisation qui nous ont aidés à accélérer notre site WordPress.
Avoir un bon hébergeur web est crucial pour la vitesse de votre site web. Comme notre site est devenu plus populaire, nous avons tout simplement devenu trop grand pour notre société d'hébergement précédente (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 de WordPress gérés, et finalement fini par utiliser SiteGround pour l'hébergement List25 car ils ont offert 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 max 442ms à 172ms temps de réponse. C'est une amélioration de 256%.
Siteground a construit boosters de performance pour les plates-formes spécifiques comme WordPress, Joomla et Magento. Sur la base de la plate-forme de votre site, ils optimisent spécialement vos serveurs qui se traduit par une meilleure performance globale.
Nous avons écrit un article quand vous devez changer votre hébergement web qui parle des 7 indicateurs clés.
Si vous cherchez à passer des hôtes, puis certainement donner SiteGround essayer. les utilisateurs WPBeginner obtenir un rabais exclusif de 60% sur l'hébergement + domaine gratuit.
En ce qui concerne l'accélération de WordPress, la mise en cache est le deuxième facteur le plus important après votre hébergement web.
Normalement, quand un visiteur vient sur votre site WordPress, votre serveur transmet la demande de PHP à la base de données MySQL qui trouve la page qui est demandée, elle génère à la volée, et le montrer au visiteur. Cela prend beaucoup de ressources. Lorsque vous avez la mise en cache, il fait gagner du temps et des ressources.
Le diagramme ci-dessous met en évidence le processus. En termes simples, penser à la mise en cache en créant un raccourci sur le bureau qui vous permet d'obtenir le fichier plus rapide.
Pour le site List25, nous utilisons le SiteGround SuperCacher, un plug-in qu'ils spécialement construits pour leurs clients. En plus de cela, ils ont ajouté des options de mise en cache dynamique avancées à l'aide Varnish (partie de leur rappel de performance).
Si vous n'êtes pas sur Siteground. alors ne vous inquiétez pas. Vous pouvez mettre en cache de configuration sur votre site WordPress en utilisant l'une des nombreuses solutions disponibles comme W3 Total Cache ou WP Super Cache.
À WPBeginner, nous utilisons W3 Total Cache qui fournit un certain nombre d'options de mise en cache de la page, la mise en cache de base de données et la mise en cache d'objets.
De plus en plus de sociétés d'hébergement spécialisées pour WordPress, nous verrons plus de solutions de mise en cache personnalisée construite. Pagely et WPEngine offrent également leur propre système de mise en mémoire cache intégré.
Content Delivery Networks (CDN) peuvent vous aider à augmenter votre vitesse de site Web. Nous utilisons MaxCDN depuis le début de List25, de sorte que 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 un infographique.
CDN nous permet de servir tous les CSS, Javascript et images à partir d'un Content Delivery Network. Cela fonctionne en déterminant l'emplacement du visiteur du site et du contenu au service d'un serveur le plus proche du visiteur.
Si vous n'êtes pas sur le marché d'une solution de CDN premium, vous pouvez utiliser Cloudflare.
Comme vous ajoutez d'autres plugins, souvent ils ajoutent 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 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 chargement.
Alors que nous chargions maintenant une petite fonctionnalité que nous pourrions ne pas avoir besoin d'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 petits fichiers JS.
C'est quelque chose que vous devez faire sur une base régulière parce que les plug-ins que vous utilisez des heures supplémentaires de changement.
Nous avons fait usage d'un sprite d'image qui combine plusieurs icônes sociales et du site en une seule image:
Chaque fois que nous avions besoin d'afficher une icône particulière, nous utiliserions CSS:
- Charger l'image comme une image d'arrière-plan
- Définir la largeur et la hauteur de l'élément dont nous avons besoin l'icône
- Définir la position d'arrière-plan 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:
La position d'arrière-plan. propriétés CSS largeur et de la hauteur nous permet de cibler la section spécifique de l'image que nous voulons sortie:
En conséquence, seule la première demande de ce fichier d'image utilise la bande passante. Les demandes suivantes au CDN pour l'image se traduira par la mise en cache la version (généralement locale) en cours de chargement, ainsi que seulement besoin de demander une seule image par rapport à 6 icônes sociales différentes.
En combinant JavaScript, CSS et images ensemble, nous avons réduit le nombre de demandes de manière significative.
Code minification implique la suppression des espaces et des sauts de ligne pour réduire la taille du fichier rendant plus rapide à charger sur demande.
Pour List25, nous utilisons des SCRT, une feuille de style syntaxiques (Introduction à Sass). Cela nous permet de structurer nos fichiers CSS dans plusieurs domaines de développement dans un format facile à lire la mise en page:
Nous utilisons CodeKit pour compiler ensuite les fichiers SCSS dans un seul fichier CSS. CodeKit supprime également pauses et en ligne pour les espaces blancs que le fichier soit aussi faible que possible:
En conséquence, nous avons pu réduire la taille de notre fichier CSS de 28%.
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 faire en sorte que toutes les images ont été compressés sans perte. Cela garantit que la taille des fichiers sont aussi petits que possible, sans perte de qualité.
Nous avons aussi 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 pour List25 est vraiment important comme tout autre site Web. Cependant plugins de partage social peuvent considérablement ralentir votre site.
Alors que l'intégration de ces quatre scripts de réseau social n'a pas un impact sur le temps de chargement de page dans nos tests, il a ralenti visiblement sur le site Web lors de l'affichage sur un appareil mobile. boutons de partage social prendrait quelques secondes pour apparaître, malgré les scripts de chargement de manière asynchrone, ce qui dans le contenu du message se déplacer comme les boutons chargés en vue.
Pour résoudre ce problème, nous sommes passés à un (presque) solution sans Javascript. Chacun des boutons de partage de réseaux sociaux sont rendus par notre coutume WordPress Plugin, et est utilisé uniquement Javascript du thème pour ouvrir la fenêtre du navigateur lorsque l'utilisateur clique sur un bouton.
Cependant, nous voulions encore afficher le nombre total d'actions d'un poste avait sur tous les réseaux sociaux. Pour ce faire, nous avons produit un petit plugin WordPress personnalisée pour récupérer et mettre en cache les comptes sociaux d'actions de chaque réseau social dans la table méta Post. Ces comptes sont mis à jour toutes les 24 heures, assurant des requêtes chronophages ne sont pas constamment en cours d'exécution.
Vous pouvez utiliser une API comme Sharre ou disséquer le Social Bar flottant pour la personnalisation.
L'utilisation rhums Pingdom (Monitoring Real User), ce nouveau plugin part a diminué le temps de chargement de la page « true » de 6 secondes à un peu plus de 2 secondes. Il a également veillé à ce que nous avons réduit le nombre de demandes pour les scripts de tiers.
Nous avons amélioré considérablement notre vitesse du site. Le temps de chargement est passé de 2,2 secondes à 1,22 secondes.
Nous avons pu réduire notre temps de réponse du serveur de manière significative.
Cela a permis de réduire le temps passé pour le téléchargement d'une page par bot Google qui a contribué à notre vitesse d'exploration.
Notre taux de rebond a chuté de 7% parce que le site a été un chargement plus rapide, et par les hôtes de commutation, 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 été mis en place ainsi par plus de 30 secondes.
Comme vous pouvez le voir un site web de 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 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 20 doit avoir des plugins WordPress pour 2015.
Si vous avez aimé cet article, alors s'il vous plaît abonner à notre chaîne YouTube pour WordPress tutoriels vidéo. Vous pouvez aussi nous trouver sur Twitter et Facebook.
Articles Liés
A demandé: 25/07/2014 11:58 EST Navigation sur le site d'administration de WordPress est extrêmement lent. Peu importe quelle page je vais ou le menu que je clique sur, il faut 8-10 secondes pour charger la page. Peu importe ...
Aujourd'hui, je veux jeter un oeil à combien des sociétés d'hébergement WordPress top à la hauteur de purement un point de vue de la performance. Maintenant, je serai le premier à admettre que d'avoir les serveurs les plus rapides ...
Aujourd'hui, je veux jeter un oeil à combien des sociétés d'hébergement WordPress top à la hauteur de purement un point de vue de la performance. Maintenant, je serai le premier à admettre que d'avoir les serveurs les plus rapides ...
Nous avons eu beaucoup de nos clients et utilisateurs de WordPress ont en général un problème où leur site montre une page blanche. Cette page blanche est généralement causé par une erreur de PHP. Si vous avez votre ...
Dans WordPress, vous pouvez mettre du contenu sur votre site soit comme un « post » ou une « page ». Lorsque vous écrivez une entrée de blog régulièrement, vous écrivez un message. Messages, dans une configuration par défaut, apparaissent dans le sens inverse ...