Optimiser la vitesse WordPress

Optimiser la vitesse Wordpress

Optimiser la vitesse WordPress

Tout d’abord, il est important de noter que la plupart des ajustements présentés ici peuvent également être appliqués à d’autres types de sites Web, qu’il s’agisse d’un autre CMS ou d’une solution maison. Vous pouvez tester avant et après l’optimisation à l’aide de divers outils tels que :

  • Webpage test
  • GT metrix
  • Google page speed online

I. L’OPTIMISATION PHP

La première étape d’optimisation de votre thème WordPress va se décomposer en plusieurs parties : le but est de réduire le temps de calcul pour générer des pages et supprimer tous les éléments inutiles ou gênants.

1.1. TEMPLATE HIERACHY

Chaque type de contenu de votre blog WordPress utilisera le modèle correspondant qui existe (ou n’existe pas) dans le répertoire du thème :

    • category.php pour une catégorie
    • tag.php pour un mot clé
    • single.php pour un article

C’est ce qu’on appelle une « hiérarchie de modèles« . Un peu plus sophistiqué, il permet de varier et d’affiner sa charte graphique en fonction de chaque type de contenu, et même de modifier certains éléments au niveau de la publication ou de la page. Par exemple, le fichier single-ID.php permet d’utiliser un modèle spécifique pour un article donné.

Le moteur WordPress teste l’existence des fichiers contenus dans le répertoire du thème et utilise le fichier le plus ciblé, c’est-à-dire le fichier le plus à droite dans la taxonomie précédemment spécifiée. S’ils sont trouvés, démarrez la génération de page (un peu) tôt. Cela évite les fichiers trop génériques comme archive.php qui gère à la fois les catégories, les balises et les pages d’archives par date par exemple. Plus vous déconstruisez votre conception à l’aide de plusieurs fichiers modèles, meilleurs sont les résultats. Cela évite entre autres d’appeler des fonctions qui testent le type de contenu et modifient le contenu.

Le fichier front-page.php est considéré comme étant le meilleur choix de modèle de page d’accueil pour votre blog WordPress. La raison en est simple.

  • front-page.php est le premier template testé par WordPress. C’est notamment parce que le CMS va vous permettre de définir une page comme page de démarrage dans l’administration.

Ensuite, page.php est testé (si vous avez défini une page pour la page d’accueil de votre site, comme décrit ci-dessus).

  • home.php, c’est le template utilisé par défaut pour la page d’accueil du site.

Dans le cas où votre thème WordPress ne contient pas les fichiers de modèle nécessaires, index.php peut être utilisé comme un fichier de secours. C’est le fichier de style par défaut pour l’élément et la raison pour laquelle le thème ne fonctionne pas sans lui. 

1.2. UN CODE PLUS SIMPLE

Si vous distribuez votre thème et le partagez avec d’autres, ou si vous modifiez votre nom d’hôte et votre nom de domaine et déplacez votre site, il est recommandé de coder en dur autant de fonctionnalités que possible dans votre thème afin de réduire le temps de rendu des pages. Cela inclut tous les éléments statiques de la page, à la fois dans le contenu lui-même et dans l’en-tête de la page. En effet, WordPress calcule inutilement certaines informations telles que : l’ encodage utilisé dans l’URL de la page ou du flux RSS. Par conséquent, remplacez toujours ces informations si elles ne changent pas d’une page à l’autre. 

  • Par exemple, ce code : <meta charset= »<?php bloginfo( ‘charset’ ); ?> »>
  • Deviendra : <meta charset= »UTF-8″>

Dans la mesure du possible, utilisez cette méthode pour réduire le nombre de fonctions et de requêtes SQL que vous exécutez. Méfiez-vous également des plugins qui peuvent charger de grandes quantités de JavaScript, de feuilles de style et d’autres données dans l’en-tête de la page. Cependant, il est expliqué plus loin dans ce dossier. De plus, il est fortement recommandé de supprimer les blocs vides pour simplifier votre code. Ceux-ci sont couramment utilisés pour adresser des éléments via CSS ou Javascript. Cela aide également à minimiser le code imbriqué inutile, par exemple si vous avez une div #content qui ne contient qu’une div #article. 

Voici une alternative pour exprimer cette structure HTML :

    • <div id= »content »>
    • <div id= »espacevide »></div>
    • <div id= »article »>
  • Autre code
    • </div>
    • </div>
  • à ce code HTML : 
    • <div id= »content »>
    • <div id= »article »>
  • Autre code
    • </div>
    • </div>

Il est également très facile de voir que votre code source contient des lignes de code inutiles. Pour ce faire, vous pouvez utiliser les signets Dom Monster pour tester les performances d’un site Web. Cela montre, entre autres, des « Nodes » vides (les blocs vides). Vous pouvez également afficher des pages Web en 3D avec Tilt 3D, une extension intégrée à Firefox (l’extension n’existe plus). Surtout si vous avez trop d’éléments HTML imbriqués les uns dans les autres. Un autre petit ajustement que vous pouvez implémenter dans votre CMS WordPress consiste à diviser votre fichier functions.php en deux parties.

Accélérez WordPress en divisant functions.php. Ce petit ajustement nous permet de séparer les fonctionnalités spécifiques au front-end des fonctionnalités qui ne sont utiles que dans l’administration de WordPress. Bien que les gains soient (très) faibles, les améliorations peuvent être mises en œuvre rapidement, coûtent moins cher et facilitent le travail des développeurs sur le sujet. Il y a encore un niveau de réglage fin qui peut être fait au niveau du modèle.

Demandez-vous si chaque fonctionnalité, contenu ou élément de votre page est vraiment intéressant pour vos visiteurs et vos références naturelles. Demandez-vous si c’est un gadget ou  un vrai plus. Je dois donc supprimer certains éléments. Par exemple, la liste des commentaires les plus récents et la liste des personnes les plus commentées sont-elles vraiment intéressantes ?

De plus, la meilleure façon de voir si une fonctionnalité particulière est réellement utilisée est de configurer le suivi dans Google Analytics. N’oubliez pas non plus de nettoyer toutes les lignes de code inutiles que WordPress a ajoutées à votre en-tête. Cela n’apporte rien aux visiteurs et aux moteurs de recherche. Pour désactiver ces ajouts, copiez ce code dans votre fichier.

1.3. LES TRANSIENTS

Cette fonctionnalité WordPress est une merveille. Les transitoires sont un moyen facile de mettre en cache certaines données. Cela évite entre autres de recalculer certains contenus identiques sur toutes les pages du site, ou qui n’ont que peu d’intérêt à évoluer en temps réel. Par exemple, une liste de commentaires récents, des liens de blogueurs, une liste de mots-clés associés à un article, etc. C’est à vous de décider quel contenu mettre temporairement en cache. Je suis pleinement conscient qu’il appartient à l’utilisateur de décider de la durée de mise en cache de chaque élément de données.

La manipulation des transitoires est très simple. Pour chaque fonction, nous demandons à WordPress de récupérer le transitoire qui lui est associé. Créer un transitoire s’il n’existe pas ou n’existe plus. Cela peut être affiché avec un simple écho, par exemple :

  • On récupère un transient avec la fonction suivante : $count=get_transient (‘nomdetransient’);
  • Si le transient est expiré ou s’il n’a jamais été créé, il renverra une valeur fausse. if ( false === $count)

C’est une bonne idée de mettre temporairement en cache autant de données que possible, en particulier pour les parties communes à toutes les pages de votre site Web. Ainsi, si vous avez installé un système de mise en cache, toutes les données communes ne seront calculées qu’une seule fois, même pour des milliers de pages.  

1.4. DÉBUGGEZ VOTRE THÈME

Les thèmes WordPress sont souvent mal conçus. Des fonctions obsolètes sont utilisées, des variables sont inutilement conservées en mémoire, etc. Pour ce faire, nous vous recommandons fortement de déboguer votre thème WordPress. Un plugin spécialement conçu peut être utilisé pour cela. Il y en a plusieurs. 

Voici 2 exemples : Debug Objects et WordPress Blackbox.

Ces deux plugins permettent de mettre en avant de nombreuses informations sur des sujets tels que le nombre de pages vues, les fonctions obsolètes, les constantes et variables utilisées, et même un aperçu détaillé de chaque requête et son temps de chargement en augmentation. 

Ces plugins se trouvent ici :

    • Wp debug objects
    • Wp blackbox 

Bien que ces plugins peuvent être trop d’informations à perdre pour les développeurs. Vous pouvez déboguer votre thème WordPress avec de petites fonctions qui peuvent être facilement placées dans le pied de page. La première fonction donne le nombre total de requêtes faites à la page et la seconde donne le temps total nécessaire pour calculer tout le contenu : Temps de calcul avant l’envoi des données à l’ordinateur. Ces deux fonctionnalités vous permettent de suivre les optimisations de votre thème et de voir si chaque action a réellement un impact sur votre temps de chargement. 

II. IMAGES ET RESSOURCES EXTERNES

2.1. LES BONNES PRATIQUES

Pensez maintenant à tout le contenu externe que vous utilisez. Demandez-vous si vous connaissez l’intérêt de ce contenu et, plus précisément, si vous pouvez retracer ces éléments jusqu’à votre site. Réduit le nombre de requêtes DNS. Pour certains contenus, cela peut ne pas être possible (comme Adsense ou les réseaux sociaux). Cependant, si possible, essayez de retransmettre toutes les images et autres JavaScript hébergés sur d’autres noms de domaine à votre serveur. Aussi, n’oubliez pas de supprimer simplement les éléments indésirables. 

Prenons un exemple simple :

Lorsque vous demandez à Amazon votre lien d’affiliation, il ressemble à ceci :

    • Lien HTML avec image
    • Deuxième image de suivi

Par exemple, si vous avez créé un lien d’affiliation vers l’excellent livre WordPress Professional Plugin Development, voici le code qu’Amazon vous donne :  

    • <a href= »http://www.amazon.fr/gp/product/0470916222/ref=as_li_tf_il?ie=UTF8&tag=playmod-21&linkCode=as2&camp=1642&creative=6746&creativeASIN=0470916222″>
    •     <img border= »0″ src= »http://ws.assoc-amazon.fr/widgets/q?_encoding=UTF8&Format=_SL110_&ASIN=0470916222&MarketPlace=FR&ID=AsinImage&WS=1&tag=playmod-21&ServiceVersion=20070822″>
    • </a>
    • <img src= »http://www.assoc-amazon.fr/e/ir?t=playmod-21&l=as2&o=8&a=0470916222″ width= »1″ height= »1″ border= »0″ alt= » » style= »border:none !important;margin:0px !important » />

La première image est une image qui décrit le produit aux visiteurs, vous pouvez donc la télécharger sur votre serveur. La deuxième image n’est pas pertinente car elle n’est utilisée que pour suivre les impressions d’Amazon Ads et n’affecte pas l’efficacité du suivi des liens d’affiliation. Vous pouvez donc supprimer les images de suivi et héberger les images de présentation des produits sur votre propre serveur. Mieux encore, vous pouvez même inclure des images de vos produits dans vos conceptions, notamment avec des sprites. Cela vous évite d’avoir à charger deux images et une requête DNS. Parmi les bonnes pratiques à mettre en place pour tous les contenus (internes et externes), n’oubliez pas de coder en dur la taille de l’image dans votre code HTML. Cela n’affecte pas les temps de chargement, mais cela affecte la vitesse d’exécution de la page.

Plus vous utilisez de CSS 3 et de JavaScript et plus le contenu est long, plus il est facile pour les navigateurs d’exécuter différentes fonctions sur la page, en particulier sur les ordinateurs plus anciens. Il n’y a rien de plus frustrant que d’avoir des difficultés avec votre navigateur pendant que les pages se chargent rapidement. 

2.2. SPRITE ET COMPRESSION

Quand on parle d’images et de temps de chargement, on pense forcément au nombre total d’images affichées et à leur poids. Il va sans dire que vous devez limiter au maximum le nombre total d’images affichées sur la page. C’est pour la simple et bonne raison que le téléchargement de 50 images ralentira inévitablement votre page plus qu’il ne le ferait autrement. Il n’y en avait que 10.  Cependant, vous pouvez économiser à deux niveaux :

    • Compression d’images
    • Les sprites 

Les sprites sont une technique CSS permettant de fusionner plusieurs éléments composant une charte graphique en une seule image. Par exemple, vous pouvez fusionner votre logo avec des puces, des boutons ou des images sur différents arrière-plans. Il existe des tutoriels très bien conçus sur la création et la configuration de sprites. 

Notez que l’utilisation de sprites peut réduire considérablement le nombre total d’images chargées pour chaque client d’un article. Pour la compression multimédia, WordPress réduit nativement la qualité des fichiers, mais cela reste inefficace pour deux raisons :

Seules les images JPG sont améliorées (comme au revoir Gif et autres PNG). Fondamentalement, CMS baisse la qualité de l’image à 90 %. Sur le Web, une qualité supérieure à 80 ou 85 % n’est généralement pas utile car il est difficile de faire la différence à l’écran. Utilisez donc ce crochet pour commencer à compresser les images jpg et ajoutez-les à votre fichier functions.php (pour PHP 5.3+). 

Il existe de nombreux outils qui peuvent grandement améliorer le poids des images. Le plus connu est l’outil Smush-It, qui réduit considérablement la taille des fichiers image. Vous pouvez aller plus loin en utilisant des outils spécialisés dans la compression de fichiers de tel ou tel type, que vous trouverez à l’adresse suivante :

  • Opti PNG
  • JPEGOptim

Ces outils sont parfaits pour compresser les images avant de les ajouter à votre publication ou pour réduire le poids média de votre thème WordPress. En ce qui concerne la publication, il peut y avoir des restrictions sur l’envoi de chaque image via ces systèmes de compression. Étant donné que la communauté WordPress est relativement active, un développeur a créé un plugin appelé WP Smush-It pour gâcher votre travail en compressant automatiquement les images lorsqu’elles sont poussées vers le serveur. Il suffit de l’installer et cela fonctionnera. Ensuite, vous verrez une colonne supplémentaire dans le menu Médias de votre administrateur WordPress qui vous permet de recompresser toutes les images que vous souhaitez (en particulier celles qui existaient déjà avant l’installation du plugin).  

Ne réduisez pas la taille de l’image dans l’éditeur de publication WordPress. Vous devez redimensionner l’image avant de l’insérer. Sinon, le visiteur chargera l’image en taille réelle et celle-ci sera optiquement réduite. Il y avait donc  trop d’informations à charger et le temps de chargement était inutilement long. 

III. CSS

A ce stade d’optimisation, nous avons obtenu des images optimisées et du contenu HTML propre et rapidement généré grâce à l’optimisation du code PHP. CSS n’évite pas le nettoyage. Éliminez tous les éléments inutiles. Cela inclut la suppression de toutes les classes et identifiants qui ne sont plus utilisés par divers éléments du site Web. Parmi les petites modifications que vous pouvez apporter à vos feuilles de style, vous pouvez également supprimer certaines informations.  Vous trouverez ci-dessous une petite liste d’entre eux. 

Supprimez le dernier ; de chaque accolade

  • //Ce code#monidentifiant {font-size: 1.2em;padding: 10px;}
  • //Devient
  • #monidentifiant {font-size: 1.2em;padding: 10px}

3.1. Supprimez tout espace inutile dans les accolades ou juste avant celle-ci

    • //Ce code
    • #monidentifiant {font-size: 1.2em;padding: 10px}
    • //Devient
    • #monidentifiant{font-size:1.2em;padding:10px}

3.2. Supprimez tous les commentaires

    • //Cette ligne de commentaire est inutile : supprimez-la !
    • #monidentifiant{font-size:1.2em;padding:10px}

Regroupe toutes les feuilles de style chargées sur votre site Web. Cela inclut les feuilles de style de thème et les feuilles de style de plugin WordPress. Cela réduit le nombre total de fichiers à télécharger. Cette feuille de style regroupe toutes les classes et les identifiants qui ont les mêmes attributs. Dans l’exemple ci-dessous, le même rendu enregistre 30 caractères de moins. 

Nous avons maintenant une feuille de style pour tout contenir, mais WordPress charge toujours les feuilles de style de divers plugins. Heureusement, vous pouvez utiliser votre fichier functions.php pour désactiver l’ajout de ces feuilles de style rendues inutiles. Désactivez simplement les CSS inutiles en utilisant le code ci-dessous. 

    • add_action( ‘wp_print_styles’, ‘deregister_mystyles’, 100 );
    • function deregister_mystyles() {
    •     wp_deregister_style(‘nom-du-style’);

Pour connaître le nom de la feuille de style à désactiver, vous devrez peut-être aller dans le fichier du plugin et trouver le nom correspondant utilisé par votre extension. Vous pouvez également mettre en place un réseau dit de diffusion de contenu (CDN) pour une optimisation parfaite de vos fichiers CSS. En effet, les images de thème proviennent d’un nom de domaine ou d’un sous-domaine différent, plutôt que d’une URL de site Web. L’idée est de distribuer les fichiers téléchargés sur différents serveurs pour un chargement plus rapide. Un CDN peut être installé sur votre propre hébergement ou via un service payant tel qu’Amazon. Cette partie de l’optimisation de votre thème WordPress et du contenu de vos articles est si complexe que je vais écrire un article dédié à cette question dans les semaines à venir. Votre feuille de style est presque prête. Tout ce que vous avez à faire est d’utiliser un service de compression qui offre l’optimisation ultime en réduisant son poids et son temps de chargement. Il existe des outils en ligne efficaces et performants pour cela. 

IV. JAVASCRIPT ET JQUERY

4.1. ALLEZ À L’ESSENTIEL

Encore une fois, nettoyez tous les JavaScript que vous utilisez. Posez-vous à nouveau la même question. Cette fonctionnalité est-elle vraiment intéressante ? Si oui, gardez-le. Si ce n’est pas le cas, veuillez le retirer. Regroupez-les également dans un seul fichier, en utilisant le même principe que pour les fichiers CSS. Cela permet de réduire le nombre de requêtes de pages et leur poids. Cela empêche également de charger plusieurs fois la même bibliothèque, en particulier Jquery, où WordPress et ses plugins peuvent être chargés plusieurs fois dans le même article. 

Procédez par étapes, car des incompatibilités surviennent souvent entre différents scripts. De plus, comme les fichiers CSS, vous pouvez dire à WordPress de ne pas charger les scripts de plugin (car les scripts de plugin sont maintenant en JavaScript spécifique au thème). Pour cela, utilisez la fonction suivante dans votre fichier 

    • functions.php :
    • add_action( ‘wp_print_styles’, ‘deregister_myscripts’, 100 );
    • function deregister_myscripts() {
    •     wp_deregister_script(‘nom-du-script’);
    • }

4.2. LES VARIABLES

Le JavaScript est le domaine où il a eu le plus de mal à faire des optimisations. Les experts pourront donc me contredire ou apporter d’autres améliorations possibles pour cette partie. Il est d’abord important de lire des tutoriels dédiés à l’amélioration de scripts, comme par exemple :

  • 8 Jquery Optimization Tips
  • Optimisez les sélecteurs Jquery

Je recommande également d’utiliser un outil comme JSPerf qui permet de comparer la vitesse d’exécution de plusieurs variantes d’un même script. Vous pouvez tester si vos modifications ont un réel intérêt. voici un exemple de code pour changer une classe au hover d’un menu :

  • $(document).ready(function() {
  •   $(‘.subli0’).hover(function() {
  •     $(this).find(« .fleche1 »).addClass(« jenetevoispas »);
  •     $(this).find(« .fleche2 »).addClass(« jetevois »);
  •   }, function() {
  •     $(this).find(« .fleche1 »).removeClass(« jenetevoispas »);
  •     $(this).find(« .fleche2 »).removeClass(« jetevois »);
  •   })
  • });

Pensez donc à utiliser systématiquement les dernières versions des bibliothèques que vous utilisez, au moins lorsque c’est possible, car les versions plus récentes sont souvent plus performantes. De même, n’exécutez chaque fonction que lorsque la page est entièrement chargée, souvent après $(document).ready(function()). Les fichiers JavaScript doivent être placés dans le pied de page de votre thème WordPress dans le but d’accélérer les temps de chargement. 

V. Conclusion sur comment optimiser la vitesse WordPress

Toutes les méthodes présentées ici améliorent le temps de calcul et la vitesse d’exécution, tout en réduisant le temps de chargement de votre thème WordPress. Comme mentionné au début, la plupart des conseils ici s’appliquent également à d’autres types de sites Web et de CMS. Cependant, il ne suffit pas d’optimiser le thème que vous utilisez. Dans les prochains articles, cette fois, nous discuterons de la façon d’améliorer la vitesse de WordPress en termes de plugins, de bases de données, d’utilisateurs, de caches et même de fichiers htaccess.