Optimiser WordPress avec des extensions et un fichier .htaccess

Depuis que j’ai redonné une seconde vie à ce blog qui vient de fêter neuf années d’existence, j’essaie d’optimiser les performances web en jouant sur un maximum de leviers. J’ai d’abord opté pour un système de cache ; j’ai ensuite cherché à diminuer le nombre de requêtes et à compresser les fichiers HTML, CSS et Javascript. Pour les images, il était important de les compresser un peu plus et de les charger uniquement lorsqu’elles apparaissaient dans le champ de vision du visiteur. Pour finir, j’ai regardé du côté du fichier .htaccess proposé par HTML5 Boilerplate pour gagner encore en efficacité. 

Extensions WordPress

• WP Super Cache  — Envie d’accélérer l’affichage de votre site ? La mise en cache est sans doute une partie de la solution en créant des pages HTML statiques à partir de pages dynamiques. Faites quand même attention à d’éventuelles sur-consommation CPU.
• Autoptimize — Réduit le nombre de requêtes et le poids de vos fichiers en concaténant et en compressant vos ressources HTML, CSS et Javascript.
• a3 Lazy Load — Vos pages utilisent de nombreuses images, mais vous ne voulez pas sacrifier la beauté sur l’autel de la performance ? Essayez donc le chargement paresseux.
• EWWW Image Optimizer — Les images sont décidément un goulot d’étranglement au regard des performances web. Avec cette extension vous assurez à vos visiteurs qu’ils ne téléchargent que la substantifique moelle de vos images.
• WP-Optimize — Après l’optimisation du front-end, passons au back-end : allégeons notre base de données.

HTML5 Boilerplate (.htaccess)

Le fichier .htaccess concocté par HTML5 Boilerplate est un véritable concentré de bonnes pratiques pour booster votre site :

• Cross-origin access pour les webfonts.
• CORS header pour les images lorsque le navigateur en fait la demande.
• Associe votre page 404.html à une erreur 404 error document.
• Améliore l’expérience utilisateur pour les utilisateurs d’Internet Explorer.
• Encode type MIME text/html et text/plain au format UTF-8.
• Active le moteur d’URL rewriting.
• Force ou supprime www. au début d’une URL.
• Bloque l’accès aux répertoires qui n’ont pas de document par défaut.
• Bloque l’accès aux fichiers sensibles.
• Réduit les risque liés aux type MIME.
• Force la compression (gzipping).
• Précise au navigateur s’il devrait effectuer une requête pour un fichier spécifique ou s’il devrait le récupérer dans le cache du navigateur.

Testez, il en restera toujours quelques chose

Voici quelques liens pour tester les performances de votre site :

• DareBoost dont j’ai fait une présentation dans cet article.
• WooRank — Pour corriger les erreurs de votre site et prendre une longueur d’avance sur vos concurrents.
• Web Page Test — Lancer des tests de performances à partir de plusieurs endroits sur la planète avec de vrais navigateurs (IE et Chrome) et une vitesse de connexion réaliste.
• PageSpeed Insights — Améliorez la vitesse de chargement de vos pages sur tous les appareils (bureau et mobile).
• YSlow — Propose des extensions pour Google Chrome, Firefox, Opera, Safari, voire même en ligne de commande, etc.

Au final, je me retrouve avec des extensions qui font plutôt bien le job et qui m’ont permis de gagner des points sur les sites d’audit de performances. Note : comme j’ai présenté dernièrement ces extensions au fur et à mesure de leur installation, sans plan d’ensemble, il m’a semblé utile de faire un billet récapitulatif pour les avoir sous la main. Il est donc possible que je mette à jour ce billet au fur et à mesure de mes découvertes sur ce sujet.

Pour aller plus loin

• Votre site web est obèse — Découvrez d’autres leviers pour optimiser les temps de chargement selon votre profil technique : Geek, Hacker ou Guru de la performance.
• Guide complet pour accélérer et optimiser WordPress — Tout est dans le titre !
• Performance web — Quelques mots d’Eric Daspet pour des sites web rapides.