Après avoir installé plusieurs plugins WordPress et corrigé quelques bugs simples, j’ai augmenté la vitesse de chargement de mon site de 1,61 à 583 millisecondes. C’est une augmentation de 70,39% sans aucune modification de la vision du site.
Selon une étude réalisée par Akamai en 2009, 47% des visiteurs s’attendent à ce qu’une page se charge en moins de deux secondes et 57% d’entre eux quitteront la page après plus de trois secondes de chargement. En plus de cette étude, il y a eu de nombreux cas où les temps de chargement ont un impact sur les ventes.
En 2006, Amazon a rapporté que chaque augmentation de 100 millisecondes du temps de chargement des pages Web entraînait une augmentation de 1% des revenus. Quelques années plus tard, Google a annoncé dans un article de blog qu’il envisageait d’ajouter la vitesse du site à l’algorithme de classement du site.
Comment accélérer votre site WordPress
Alors, comment accélérer votre site WordPress?
Voici 12 façons rapides d’améliorer considérablement le temps de chargement de votre site Web, notamment:
Découvrez quels plugins ralentissent votre site Web;
Compresser automatiquement les pages Web, les images, les fichiers JavaScript et CSS;
Gardez la base de données de votre site Web propre et concise;
Configurez la bonne façon de mettre en cache votre navigateur.
Faire une bonne base
Lorsque votre maison commence à tomber dans le sol, vous n’allez pas essuyer les fenêtres – au lieu de cela, vous réparez les fondations. Il en va de même pour votre site Web. Si le site est hébergé sur un serveur lent ou utilise un thème gonflé, une méthode rapide ne vous aidera pas. Vous devez réparer la base.
Alors, commençons par construire une bonne base et comment faire fonctionner notre site Web à la vitesse de l’éclair.
Choisir un bon hôte
Votre société d’hébergement et votre logiciel d’hébergement ont une grande influence sur votre site Web, qui comprend de nombreux autres aspects importants liés aux performances. J’avais l’habitude d’être attiré par l’hébergement gratuit et bon marché, mais après j’ai réalisé que l’hébergement n’était pas un endroit où il fallait lésiner.
Pour bien comprendre cela, 2 de mes clients ont des sites similaires mais des hébergeurs très différents. L’un utilise wpengine (un excellent fournisseur d’espace) et l’autre installe son site Web sur un serveur partagé bon marché.
Le temps de réponse DNS (temps de connexion du navigateur au serveur hôte) pour les clients utilisant wpengine est de 7 millisecondes. Le temps de réponse DNS pour les clients utilisant un hébergement partagé bon marché est de 300 millisecondes.
Si vous voulez que votre site web fonctionne rapidement, commencez par un bon fournisseur d’hébergement et un bon logiciel.
Choisir un bon thème
Malheureusement, tous les thèmes wordpress ne sont pas les mêmes. Alors que certains sont rapides et bien codés, d’autres sont « polyvalents et personnalisables», gonflés par des fonctionnalités fantaisistes.
Il y a quelques années, Julian Fernandes de Synthesis a fait un cas de recherche intéressant où il a mis à jour son thème du thème par défaut WordPress au Framework Genesis et a surveillé la vitesse du site. Il a remarqué que le seul changement de thème était Genesis et que sa vitesse de chargement était passée de 630 MS à 172 Ms.
Lorsque vous choisissez un thème, vérifiez la vitesse de la page Web de la présentation du thème suivant, utilisez un outil tel que pingdom pour voir à quelle vitesse il s’exécute sans rien attacher. Cela devrait vous donner une référence pour savoir si le codage est bon ou non.
Utiliser un réseau de distribution de contenu (Content Delivery Network)
J’ai récemment commencé à utiliser un réseau de distribution de contenu (CDN) pour l’un de mes sites Web et j’ai constaté une réduction de 55% de l’utilisation de la bande passante et une augmentation considérable de la vitesse de chargement des pages Web.
Un CDN stocke vos fichiers via un vaste réseau de serveurs dans le monde entier. Si un utilisateur d’Argentine visite votre site Web, il téléchargera le fichier à partir du serveur le plus proche. Parce que votre bande passante est distribuée sur de nombreux serveurs différents, la charge d’un seul serveur est également réduite.
La configuration d’un CDN peut prendre plusieurs heures, mais c’est généralement l’un des moyens les plus rapides d’augmenter considérablement la vitesse de chargement de vos pages Web.
12 façons d’accélérer WordPress rapidement
Maintenant que nos bases sont en place, nous pouvons commencer à peaufiner notre site Web.
Une bonne façon de commencer à accélérer votre site Web est de voir ce qui peut être enlevé. Plusieurs fois, un site Web est lent non pas parce qu’il manque quelque chose, mais parce qu’il l’a déjà.
1. Trouver les plugins qui ralentissent votre site
P3 est l’un de mes plugins de diagnostic préférés, car il vous montre l’impact des autres plugins sur le temps de chargement de vos pages Web. Cela rend très facile de trouver les plugins qui ralentissent votre site Web.
Comment accélérer votre site WordPress
(voir l’image en grand)
Un coupable commun est les plugins de partage social, dont la plupart provoquent un gonflement du temps de chargement de la page, et il est facile d’utiliser des boutons sociaux intégrés au lieu d’ajouter au code source du thème.
Une fois que vous savez quel plugin ralentit votre site Web, vous pouvez décider de les conserver, de les remplacer ou de les supprimer complètement en fonction de la situation.
2. Compressez votre site Web
Lorsque vous Compressez un fichier au format zip sur votre ordinateur, la taille totale du fichier diminue, ce qui le rend beaucoup plus facile et rapide à envoyer à quelqu’un d’autre. Gzip fonctionne exactement de la même manière, sauf qu’il compresse vos fichiers Web.
Une fois installé, GZIP compresse automatiquement les fichiers de votre site Web en fichiers Zip, économisant de la bande passante et accélérant le temps de chargement des pages. Lorsqu’un utilisateur visite votre site Web, son navigateur décompresse automatiquement le fichier et affiche son contenu. Cette méthode de transfert de contenu du serveur vers le navigateur est beaucoup plus efficace et économise beaucoup de temps.
Comment accélérer votre site WordPress
(voir l’image en grand)
L’installation de Gzip a peu d’effets négatifs, alors que la vitesse de levage peut être assez importante. Comme le montre la capture d’écran ci – dessus, musiclawcontracts.com a été réduit de 68 ko à seulement 13 ko après l’installation de Gzip.
Bien que certains plugins ajoutent automatiquement Gzip à votre site Web en appuyant simplement sur un bouton, l’installation manuelle est également simple. Ouvrez votre fichier.Htaccess (qui se trouve à la racine de votre serveur) et ajoutez le code suivant:
Addoutputfilterbytype Deflate texte / plaine
Addoutputfilterbytype Deflate texte / html
Addoutputfilterbytype Deflate texte / XML
Addoutputfilterbytype Deflate texte / CSS
Addoutputfilterbytype Deflate application / XML
Addoutputfilterbytype Deflate application / XHTML + XML
Addoutputfilterbytype Deflate application / RSS + XML
Addoutputfilterbytype Deflate application / javascript
Addoutputfilterbytype Deflate application / X – JavaScript
Une fois que vous avez ajouté ce code au fichier.Htaccess, testez si Gzip fonctionne en exécutant check Gzip compression. Si le code ci – dessus ne fonctionne pas pour une raison quelconque, essayez l’autre méthode décrite par Patrick Sexton dans son article activer Gzip.
3. Images compressées
Les images prennent la majeure partie de la bande passante de la grande majorité des sites Web. WP smush.it est un autre plugin puissant qui compresse automatiquement les images lorsque vous les téléchargez dans votre médiathèque. Toute la compression est « sans perte », ce qui signifie que vous n’avez pas à vous soucier de la qualité de vos images.
Une bonne chose à propos de WP smush.it est qu’il fonctionne en arrière. Si vous avez déjà des milliers d’images enregistrées dans votre médiathèque, vous pouvez obtenir une taille plus facile à gérer en compressant toutes les images avec un plugin.
4. Utiliser le cache du Navigateur
Le cache du navigateur est un problème délicat. Il existe de nombreux plugins puissants à utiliser, mais s’ils sont mal configurés, ils peuvent faire plus de mal que de bien.
Expires headers indique au navigateur s’il demande un fichier spécifique à partir du serveur ou du cache du navigateur. Bien sûr, cela ne fonctionne que si l’utilisateur a déjà une version du fichier de la page Web stockée dans le cache; Donc, cette technologie ne fera qu’augmenter la vitesse du site pour ceux qui l’ont déjà visité.
Accélérer un site Web de 2 façons. Tout d’abord, ils réduisent les visiteurs à télécharger le même fichier deux fois à partir de votre serveur. Deuxièmement, ils ont réduit le nombre de requêtes http générées.
Pour ce faire, je recommande WP super cache. Cependant, il est fortement recommandé de suivre le Guide d’installation pour vous assurer qu’il est correctement configuré. Vous pouvez également ajouter des en – têtes expires en ajoutant le code suivant à votre fichier.Htaccess:
* associate.js avec le type “text / javascript” (si pas présent dans mime.conf)
Addtype texte / javascript.js
Configure mod – expires
L’URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
Expiresactive sur
Expiresdefault « Access plus 1 seconds »
Expiresbytype image / X – icon “accès plus 2692000 secondes”
Expiresbytype image / JPEG “accès plus 2692000 secondes”
Expiresbytype image / PNG “accès plus 2692000 secondes”
Expiresbytype image / gif “accès plus 2692000 secondes”
Expiresbytype application / X – shockwave – flash “accès plus 2692000 secondes”
Expiresbytype text / CSS “accès plus 2692000 secondes”
Expiresbytype text / javascript “accès plus 2692000 secondes”
Expiresbytype application / X – javascript “Access plus 2692000 seconds”
Expiresbytype text / html “accès plus 600 secondes”
Expiresbytype application / XHTML + XML “accès plus 600 secondes”
Configure mod headers
L’URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
Header set cache – control “max – age = 2692000, public”
Header set cache – control “max – age = 600, Private, must – validate”
Header unset ETAG
Header unset last – modifié
5. Nettoyage de la base de données
Je suis un fan qui utilise régulièrement la fonctionnalité de sauvegarde automatique de WordPress, mais l’inconvénient est que votre base de données sera rapidement remplie de milliers de révisions d’articles, de notifications de citations (Trackbacks, Pingbacks), de commentaires en attente et de projets de corbeille.
Cette solution est un plugin fantastique appelé WP – Optimize qui nettoie régulièrement vos déchets de base de données, garde votre base de données efficace et ne conserve que les données qui doivent être stockées. Bien sûr, avant de faire quoi que ce soit sur votre base de données, assurez – vous de la sauvegarder.
6. Compresser les fichiers CSS et JavaScript
Lorsque vous avez installé un certain nombre de plugins, peut – être que chaque page de votre site Web a été introduite dans 10 à 20 feuilles de style et fichiers JavaScript individuels. Ce n’est pas bon. Combiner tout le javascript en un seul fichier javascript et tout le CSS en un seul fichier CSS sera fructueux.
Ensuite, les plugins tels que better WordPress minify fusionnent toutes les feuilles de style et les fichiers JavaScript dans un seul fichier, réduisant ainsi le nombre de requêtes que votre navigateur doit générer.
Je préfère better WordPress minify car il fait la même chose mais n’est pas aussi radical que certains autres plugins (certains causent des problèmes, comme Hristo pandjarov outlines).
Éteignez Pingbacks et Trackbacks
Pingbacks et Trackbacks sont utilisés par wordpress pour informer les autres blogs que vos articles sont référencés. Fait intéressant, ils peuvent consommer la vitesse de la page et il est généralement recommandé de l’éteindre. Vous pouvez les désactiver dans l’onglet discussions dans le menu paramètres.
8. Spécifiez la taille de l’image et le jeu de caractères
Avant que le navigateur d’un visiteur puisse afficher votre page Web, il doit déterminer comment mettre en page le contenu autour de l’image. Si les dimensions de ces images ne sont pas connues, le navigateur doit les calculer, ce qui rend son travail plus compliqué et prend plus de temps.
Spécifier la taille de l’image permet au navigateur de sauter cette étape et d’accélérer l’efficacité de l’exécution.
Pour la même raison, il est également utile de spécifier un jeu de caractères dans l’en – tête de votre réponse http afin que le navigateur n’ait pas besoin de prendre plus de temps pour savoir lequel vous utilisez. Ajoutez simplement un jeu de caractères à la section en – tête de votre site Web.
9. Déplacer CSS vers le haut, javascript vers le bas
Placer le lien de votre feuille de style plus près du Haut de la page est préférable, car les navigateurs ne rendent pas la page avant de rendre le fichier CSS. D’autre part, javascript doit être placé plus près du pied de page, mieux c’est, car il empêchera le navigateur d’analyser quoi que ce soit jusqu’à ce qu’il soit complètement chargé.
Dans la plupart des cas, cette opération simple augmente la vitesse de chargement des pages en forçant un ordre optimal de téléchargement des fichiers. Mais cela peut causer des problèmes sur les sites Web qui dépendent fortement de JavaScript et qui doivent charger des fichiers JavaScript avant que les utilisateurs ne voient la page.
Utilisation de CSS sprites
Un diagramme de Sprite est essentiellement un grand diagramme contenant toutes les images indépendantes disposées côte à côte. Avec CSS, vous pouvez masquer toute partie de l’image dont vous n’avez pas besoin en spécifiant un ensemble de coordonnées.
Parce que le chargement d’un grand graphique est beaucoup plus rapide que le chargement d’un tas de petits graphiques, les graphiques CSS Sprite peuvent accélérer votre site Web.
Comment accélérer votre site WordPress
(voir l’image en grand)
Le moyen le plus simple est spriteme, un outil qui peut fusionner toutes vos images en un seul diagramme Sprite CSS.
Gardez à l’esprit que Safari ne charge pas les graphiques Sprite surdimensionnés, alors utilisez le calculateur de William Malone pour déterminer si votre graphique Sprite est surdimensionné.
Activer keep Alive (connexion persistante)
Http keep Alive concerne les messages envoyés entre la machine du client et le serveur réseau demandant l’autorisation de télécharger un fichier. L’activation de keep Alive permet aux machines clientes de télécharger plusieurs fichiers sans demander des autorisations à plusieurs reprises, ce qui permet d’économiser de la bande passante.
Pour activer keep Alive, copiez et copiez simplement le code suivant dans votre fichier.Htaccess.
Header set connexion keep – Alive
12. Utilisation appropriée de HTML statique pour remplacer PHP
Php peut être utilisé pour créer des sites Web de manière efficace et réduire le nombre de fois où les mêmes informations sont saisies. Cependant, appeler des informations via PHP pour utiliser les ressources du serveur, vous devez utiliser une alternative HTML statique sans gagner de temps.