16 façons d'accélérer votre site Web WordPress dès aujourd'hui !
Publié: 2014-12-31Accélérer votre site Web est le seul moyen garanti d'obtenir plus de trafic et de réaliser plus de ventes.
En 2010, Google a confirmé que la vitesse du site est l'un des plus de 200 indicateurs qui ont un impact sur les classements de recherche. Leurs données montrent que lorsque les pages se chargent lentement, les gens passent moins de temps. Pourtant, la plupart d'entre nous accordons peu d'importance à l'accélération de nos sites Web.
Peut-être que le réglage fin des déclencheurs de vitesse internes de votre site Web WordPress est trop intimidant.
Pour faire la lumière sur la réduction de moitié de votre temps de chargement, nous avons invité Stavros Papadakis à présenter son processus d'accélération des sites Web des clients.
Si votre temps de chargement est supérieur à 3 secondes ou si la taille de votre page est supérieure à 2 Mo, cela peut être un gros problème qui vous coûtera de l'argent, à la fois en ventes perdues et en frais de serveur.
Il existe de nombreux outils en ligne gratuits tels que WebPageTest, GTmetrix, Google PageSpeed Insights et Pingdom qui peuvent vous aider à identifier les problèmes qui entraînent des temps de chargement lents et une mauvaise expérience utilisateur pour votre site.
Voici comment prendre en charge les performances de votre site Web.
1. Activer la compression
La compression de vos fichiers CSS et Javascript aidera les navigateurs à les télécharger plus rapidement.
La compression Gzip peut facilement réduire la taille des fichiers de 200+Ko (non compressés) à moins de 40Ko (compressés). Tant que votre serveur a activé la compression, profitez-en.
Vous pouvez être sûr que vos utilisateurs connaîtront une accélération drastique de votre site pour les ordinateurs de bureau et les mobiles en activant la compression sur votre serveur.
Ajoutez l'extrait de code suivant à votre fichier .htaccess afin d'activer la compression des fichiers statiques.
AddOutputFilterByType DEFLATE application/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] sans gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
En-tête ajouter Vary User-Agent
2. Optimisez vos images
Les images sont le principal responsable du ralentissement d'un site Web. Optimisez toujours vos images (en particulier celles de plus de 50 Ko) avant de les télécharger sur votre site Web.
La meilleure façon de les optimiser est d'utiliser Photoshop ou tout autre logiciel de manipulation d'images. Enregistrez des images pour le Web avec une qualité d'image jusqu'à 60 %.
Vous devez également utiliser des images progressives pour les fichiers JPG, car le rendu progressif des images offre une expérience utilisateur plus fluide.
Veuillez vérifier les deux images suivantes, elles se ressemblent mais celle de gauche n'est pas optimisée et fait 80 Ko et celle de droite est optimisée et elle ne fait que 18 Ko, 4 fois plus petite.
Image non optimisée
3. Déplacez les fichiers Javascript vers le pied de page
Bien que les bibliothèques Javascript telles que jQuery, Mootools et Prototype soient géniales car elles étendent les fonctionnalités de votre site Web, elles peuvent également bloquer le rendu de vos pages.
Les navigateurs ne commencent pas à charger le contenu tant que tous les fichiers Javascript dans l'en-tête de la page n'ont pas été téléchargés.
Un moyen simple de résoudre ce problème consiste à déplacer vos fichiers Javascript, ceux qui ne sont pas nécessaires lors du rendu initial de la page, de l'en-tête vers le pied de page.
Si vous utilisez Wordpress, vous pouvez déplacer les appels de script de header.php vers footer.php dans votre thème et utiliser true comme quatrième paramètre chaque fois que vous utilisez la fonction wp_enqueue_script.
Déplacer les scripts JS vers le pied de page de la page
4. Assurez-vous que KeepAlive est activé
Apache (le serveur le plus couramment utilisé pour les plans d'hébergement partagé chez les sociétés d'hébergement à faible coût) a une grande "fonctionnalité" appelée KeepAlive qui maintient les connexions ouvertes pour plus d'une requête HTTP.
Assurez-vous que KeepAlive est activé chez votre hébergeur.
Si vous avez accès à votre fichier httpd.conf, activez KeepAlive en vous assurant que "KeepAlive On" s'y trouve, sinon ajoutez simplement le morceau de code suivant dans votre fichier .htaccess.
<ifModule mod_headers.c> Jeu d'en-tête Connection keep-alive </ifModule>
Activer KeepAlive pour votre site
5. Fusionner les fichiers CSS – Petits fichiers CSS en ligne
Les navigateurs ne gèrent qu'un nombre limité de requêtes HTTP en même temps. Lorsque cette limite est atteinte, certains fichiers attendent pendant que d'autres sont téléchargés.
En fusionnant tous vos fichiers CSS en un seul fichier CSS, la page s'affiche beaucoup plus rapidement.
Si vous avez des fichiers CSS de moins de 2 Ko, vous devez les intégrer au lieu de faire une requête HTTP supplémentaire.
Wordpress a quelques excellents plugins tels que Autoptimize et Better WordPress Minify qui peuvent vous aider à fusionner ou même à aligner vos feuilles de style CSS.
Fusionner des fichiers CSS et les incorporer
6. Activer la mise en cache
La mise en cache améliore considérablement le temps de chargement des pages qui ne changent pas souvent.
En activant la mise en cache sur votre site, votre code ne génère pas la même page encore et encore. De cette façon, l'expérience utilisateur est bien meilleure et votre serveur peut gérer plus de trafic.
W3 Total Cache, WP Super Cache et WP Fastest Cache ne sont qu'une courte sélection de plugins Wordpress gratuits qui fournissent différents types de mise en cache, par exemple la mise en cache des pages, la mise en cache des bases de données et la mise en cache des objets, entre autres.
Le plug-in W3 Total Cache fournit la mise en cache des pages, de la base de données et des objets
7. Utilisez un réseau de diffusion de contenu
Que vous utilisiez un CMS comme Wordpress, Joomla, Magento, Drupal ou un site PHP ou HTML sur mesure, je vous recommande fortement de configurer un Content Delivery Network (CDN).
Un CDN est un système distribué de serveurs déployés dans plusieurs centres de données sur Internet.
Lorsqu'un client visite votre site, le contenu statique comme les images et les fichiers CSS sont servis à partir du serveur qui est géographiquement le plus proche d'eux afin qu'ils soient rendus beaucoup plus rapidement.
D'ailleurs, la charge sur votre serveur est également considérablement réduite grâce à un CDN.
CloudFlare est un fournisseur CDN et DNS gratuit, entre autres. MaxCDN est également une excellente option abordable pour optimiser le temps de chargement de votre site. Ils sont tous les deux aussi bons qu'ils peuvent l'être.
CloudFlare est un réseau de diffusion de contenu gratuit
8. Minimisez le nombre de requêtes HTTP
Plus vous avez de requêtes HTTP, plus le temps de chargement de votre site sera lent.
Combinez vos fichiers CSS, fusionnez des fichiers Javascript et combinez des images dans des sprites de données, entre autres, pour effectuer le moins de requêtes HTTP possible.
Lorsque je travaille sur le site d'un client, l'un de mes principaux objectifs est de minimiser le nombre de requêtes HTTP chargées par page.
Fusionnez des fichiers CSS, utilisez des sprites de données ou des URI de données afin de réduire le nombre de requêtes HTTP
9. Choisissez le bon type de fichier pour vos images
Utilisez JPG par défaut. C'est le type de fichier le plus petit et le plus rapide à charger.
Utilisez PNG uniquement pour les images avec du texte (JPG pixellise le texte, ce qui le rend flou) ou si vous avez besoin d'un arrière-plan transparent.
Minimisez ou même éliminez les fichiers GIF lourds car ils peuvent considérablement ralentir le temps de chargement de votre site.
Bien que les deux images suivantes se ressemblent, il existe une énorme différence entre elles. Celui de gauche est enregistré sous forme de fichier png et pèse 102 Ko et l'autre est un fichier JPG d'une taille de 18 Ko, c'est vrai, 6 fois plus léger !
Image enregistrée au format PNG
Image enregistrée au format JPG
10. Corrigez vos erreurs 404
Croyez-le ou non, tout fichier manquant génère une erreur HTTP 404 et va certainement ralentir le temps de chargement de votre site.
Vérifiez toujours les erreurs 404 lors du rendu de vos pages pour obtenir le temps de chargement le plus rapide.
Si votre "cascade" (la façon dont le navigateur affiche votre site) ressemble à cela (attention aux lignes rouges), alors les erreurs 404 ruinent le temps de chargement de votre site.
Les erreurs 404 peuvent ruiner le temps de chargement de votre site
11. Faites attention à la taille de votre page
Bien qu'il soit tentant d'afficher beaucoup de contenu sur chaque page, vous devriez essayer de garder la taille de votre page au minimum.
Ceci est encore plus crucial pour les mobiles. Devoir charger un site de 2 Mo via mobile dans une connexion 3G est une recette pour un désastre. Tenez compte du fait que les utilisateurs n'aiment pas attendre plus de 2-3 secondes pour qu'une page s'affiche.
Une nouvelle image ajoute-t-elle de la valeur au site ? Si ce n'est pas le cas, vous ne devez pas l'ajouter à votre site. Aussi simple que ça.
Réduire la taille de la page
12. Images à l'échelle
Ne redimensionnez jamais les images à la volée en HTML. Créez une vignette de l'image dont vous avez besoin aux dimensions exactes qui seront utilisées dans vos pages.
Par exemple, si vous avez une image de 1200px x 675px et que vous souhaitez utiliser une version "mise à l'échelle" à 480px x 270px, créez une nouvelle version redimensionnée de l'image d'origine et utilisez-la à la place.
Cette image est liée à une "grande" version de l'image à l'aide d'une vignette à l'échelle au lieu de modifier les dimensions de l'image en HTML.
Vignette (image à l'échelle) Liens vers une image de grande taille
13. Tirez parti de la mise en cache du navigateur
Google recommande une durée de mise en cache minimale d'une semaine et de préférence jusqu'à un an pour les actifs qui changent rarement.
Définissez une politique de mise en cache pour toutes les réponses du serveur aux fichiers statiques (images, CSS et Javascript) afin que le navigateur puisse déterminer s'il peut réutiliser ou non un fichier précédemment chargé.
Cela se fait généralement en ajoutant cet extrait de code au fichier .htaccess pour les plans d'hébergement partagé
<ifmodule mod_expires.c>
ExpireActif le
ExpiresByType text/html "accès plus 7200 secondes"
ExpiresByType image/gif "accès plus 864000 secondes"
ExpiresByType image/jpg "accès plus 864000 secondes"
ExpiresByType image/png "accès plus 864000 secondes"
ExpiresByType text/css "accès plus 864000 secondes"
ExpiresByType text/javascript "accès plus 864000 secondes"
Application ExpiresByType/javascript "accès plus 864000 secondes"
</ifmodule>
14. Optimisez votre base de données
Tant que vous avez un site basé sur une base de données (qui inclut WordPress et tous les autres sites basés sur CMS), assurez-vous d'optimiser votre base de données.
Surveillez votre code pour les requêtes lentes. Si vous êtes sur un VPS ou un serveur dédié, activez la mise en cache des requêtes et optimisez la configuration de votre serveur de base de données.
Bien que l'optimisation complète de la base de données puisse être un processus très délicat et chronophage, phpMyAdmin vous propose quelques options d'optimisation de base en "optimisant vos tables".
Optimisez votre base de données via phpMyAdmin
15. Sélectionnez judicieusement votre hébergeur
Choisissez un plan d'hébergement qui répond aux besoins de votre site.
La plupart des sociétés d'hébergement appliquent des limitations à leurs plans d'hébergement partagé et hébergent des centaines de sites par serveur pour maintenir les frais au minimum.
En avoir pour son argent. Si vous avez un site de commerce électronique, un CMS lourd, beaucoup de trafic ou des pics de trafic, évitez les plans d'hébergement mutualisé.
Je recommande fortement la société d'hébergement Wordpress gérée par WPEngine pour tout site WordPress de commerce électronique ou tout site WordPress avec des pics de trafic.
16. Engagez un expert
Mon objectif est de vous donner suffisamment d'informations pour commencer à optimiser la vitesse de votre site Web.
Mais comme vous le savez, il est préférable d'engager un expert lorsqu'il est important de bien faire les choses.
Un de mes clients m'a contacté afin d'optimiser le temps de chargement de son site internet. Les pages du site Web mettaient beaucoup de temps à se charger et les visiteurs se plaignaient parce que l'expérience utilisateur était mauvaise.
J'ai mis à jour WordPress vers sa dernière version, migré le site Web vers une société d'hébergement fiable et appliqué des ajustements d'optimisation de la vitesse pour obtenir le meilleur temps de chargement possible.
Le temps de chargement est passé de 8,2 à 2,6 secondes. Le temps de rendu du premier octet et du démarrage a été optimisé à 0,147 et 0,384 seconde respectivement et le nombre de requêtes HTTP a été réduit de 96 à 78. Google PageSpeed Insights a également été optimisé à 88 %.
Le taux de rebond a diminué d'environ 10 % en quelques semaines. Le client et, plus important encore, les utilisateurs du site Web étaient satisfaits et la maintenance du site est devenue une expérience formidable.
Pour résumer, optimiser le temps de chargement de votre site est une situation gagnant-gagnant pour vous et vos clients potentiels.
Imaginez à quel point vos utilisateurs seront heureux de voir des temps de chargement ultra rapides !
Si vous voulez m'embaucher, je suis heureux de vous aider. Consultez mon portfolio et contactez-moi sur AwesomeWeb dès aujourd'hui !
Conclusion
Tout s'améliore lorsque votre site se charge plus rapidement.
Google vous classe plus haut. Les utilisateurs sont plus satisfaits. Les taux de rebond diminuent. Les taux de conversion augmentent. Et vous faites plus de ventes.
Arrêtez de perdre du trafic et de l'argent. Commencez dès aujourd'hui à optimiser le temps de chargement de votre site.
Aujourd'hui, j'offre un forfait spécial de 497 $ pour les lecteurs de IncomeDiary. C'est la moitié de mon tarif normal. Si votre site répond à mes qualifications minimales, je m'occuperai de tout ce qui est indiqué dans cet article. Mentionnez IncomeDiary dans votre message et je vous contacterai sous peu. Commencez 2015 avec le site Web le plus rapide que vous puissiez avoir !
Engagez-moi ici ou trouvez d'autres pigistes en optimisation de vitesse sur AwesomeWeb ici.