En ce qui concerne l’optimisation des performances de WP, le mot qui vient généralement en premier à l’esprit est un plugin de cache. Vous avez probablement déjà entendu parler de WP Super Cache, WP Comet Cache ou Fusée WP. La mise en cache de la page peut améliorer considérablement le temps de génération de la page qui affecte le temps de chargement global de la page et il est essentiel de laisser votre serveur servir la page rapidement.
Aujourd’hui, nous allons traiter le deuxième problème le plus courant de nos jours qui affecte généralement le temps de chargement de la page – le Requêtes HTTP nécessaires au chargement complet de la page.

Jetons un coup d’œil au plugin le plus populaire dans ce domaine – Autoptimize.

Ce plugin présente une approche de base de la réduction des requêtes HTTP – c’est-à-dire qu’il peut concaténer des fichiers CSS ou des fichiers JS dans un fichier CSS/JS tout-en-un. Le plugin Autoptimize est un excellent plugin et fonctionne bien, en particulier sur les sites Web simples.
Si vous exécutez un site Web complexe (plus de 100 requêtes HTTP), vous avez probablement déjà vu après l’optimisation automatique une mise en page cassée. Peut-être avez-vous essayé d’activer le Ajouter un emballage try-catch ? option ou même essayé de mettre des fichiers JS dans le Exclure les scripts de l’optimisation automatique mais vous voyez toujours des fonctionnalités cassées.

La raison pour laquelle cela n’a pas fonctionné comme prévu est que la concaténation des fichiers CSS/JS n’est pas aussi simple qu’il n’y paraît car certains fichiers JS dépendent non seulement des autres, mais il en va de même pour le code JS dans la page HTML.
Par conséquent, lorsque vous utilisez la concaténation de fichiers JS, votre site Web risque en permanence qu’un plugin nouvellement installé ou sa nouvelle mise à jour casse quelque chose sur le site Web – la concaténation de fichiers JS traditionnelle est tout simplement délicate.

Certains d’entre vous ont peut-être remarqué que j’utilise le terme “concaténation de fichiers JS” au lieu du terme beaucoup plus populaire “combinaison de fichiers JS”. J’ai réservé ce terme au plugin premium que je vais vous présenter aujourd’hui : Accélérateur WP créé par Invéo.

Ce plugin fournit une grande variété de fonctionnalités qui se concentrent sur la réduction des requêtes HTTP. Les développeurs déclarent également que sa combinaison de fichiers JS (ce qui ne signifie pas simplement la concaténation de fichiers JS) maintient une compatibilité à 100 % sans prendre d’autres mesures. Le plugin WP Accelerator devient de plus en plus populaire sur les sites Web complexes pour les raisons mêmes qui provoquent la concaténation traditionnelle des fichiers JS. Ce plugin ne se contente pas de concaténer les fichiers CSS/JS mais avant cela il les traite intelligemment. Ce qui est cool, c’est que ni les fichiers CSS ni JS n’ont besoin d’être référencés par les fonctions wp_enqueue_style() ou wp_enqueue_script(). Cela signifie que cela fonctionnera bien, que le thème ou le plugin soit bien codé ou non. Il traite également correctement le code JS placé directement dans le code HTML et peut conserver les bonnes relations entre les fichiers JS externes et le code JS dans le HTML.

Si cette courte liste de fonctionnalités révolutionnaires vous a intéressé à ce plugin premium, explorons-le plus en détail. L’écran de configuration présentera toutes les fonctionnalités :

Mise en cache intelligente et compression des fichiers CSS/JS L’option permet d’exploiter le cache du navigateur et de compresser les fichiers CSS et JavaScript (ce qui est encore plus efficace que la minification) sur les serveurs mal configurés ou sur ceux où le fichier .htaccess d’Apache traditionnel n’est pas reconnu.

Il est essentiel de garder cette option désactivée si vous utilisez CloudFlare Service CDN (avec configuration DNS complète) pour permettre à CloudFlare de servir tous les fichiers CSS et JS – sinon ils seraient servis localement (puisque la mise en cache intelligente du navigateur est fournie via un fichier wrapper PHP spécial).

Images en ligne dans le code HTML place toutes les petites images directement dans la page – c’est-à-dire qu’elles sont affichées dès que la page HTML est téléchargée. Cela peut économiser beaucoup de requêtes HTTP et de surcharge HTTP alors que l’effet sur la taille globale de la page est mineur.

Accélération d’image extrême peut servir toutes les images de la page dans une seule réponse HTTP (ce qui peut être une bonne ou une mauvaise idée selon le point de vue). D’une manière ou d’une autre, cette fonctionnalité est actuellement en version bêta et c’est la seule qui n’est pas garantie de toujours fonctionner correctement (étonnamment, cette fonctionnalité ne nécessite pas JS).

Optimiser le code HTML supprime tous les commentaires de la page HTML – aucune minification n’est encore prise en charge mais vous pouvez utiliser n’importe quel autre plugin – il inclut Autoptimize – à cette fin.

Chargement asynchrone intelligent des fichiers CSS améliore le temps de chargement de la page et diminue le temps avant que tout contenu ne soit affiché pendant le chargement de votre page. Il charge les fichiers CSS non critiques (tels que ceux ajoutés par les plugins installés) de manière asynchrone, leur évitant de bloquer le processus de rendu (c’est-à-dire qu’il aide à se débarrasser de l’écran blanc pendant le chargement de la page). Pas de soucis, cette fonctionnalité conserve l’ordre général des styles CSS ainsi que les attributs multimédias corrects.

Combinez les styles CSS L’option peut combiner tous les styles CSS du code HTML dans une seule balise de style – cela rend la page un peu plus petite (cela n’accélérera certainement pas de manière significative, mais par souci d’exhaustivité, c’est …