Performance de sites web (WordPress ou autres)

Il est important que les pages de votre  site web s'affiche rapidement : pour les internautes qui dans le cas contraire risque  de zapper sur un autre site, mais aussi pour les moteurs de recherche (Google en tête) pour qui la vitesse d'affichage est un critère important.

Mesurer

La première chose à faire, c'est de mesurer les temps d'affichage avec GTmetrix et Google Page Speed Insight  (et il y en a d'autres). GTmetrix est particulièrement intéressant, car il vous donne les solutions aux problèmes facilement utilisable (e.g. il vous propose d'autres versions -allégées- de vos images). Yslow (outil de Yahoo, qui peut être ajouté comme plugin à Firebug dans Firefox et dans les autres browsers également) est également intéressant car il vous permet d'effectuer vos mesures directement sans passer par un site tiers (à priori). A noter que GTmetrix utilise YSlow pour ses mesures.

Réduire les images

Les images doivent être dimensionnées à la taille à laquelle elle s'affiche : une exception, les images qui seront re-dimensionnées selon la taille d'écrans (par exemple, les bannières d'un slider). Bien entendu, le logiciel The Gimp vous aidera à transformer vos image correctement.

Pour améliorer la taille de vos fichiers PNG, vous pouvez lire A guide to PNG Optimization (en Anglais). Une bonne solution est OptiPNG + AdvanceCOMP(commande advpng).

Pour les JPEG, jpegtran vous aidera seulement à changer l'échelle de vos images. jpegoptim lui vous réduira la taille de vos fichiers JPEG.
D'autre part, GTmetrix vous proposera des images améliorées ... autant les utiliser.

Réduire la taille des pages

Minifyer

Puis, il faut aussi réduire la taille des pages affichées avec un minifyer (un logiciel qui supprime tous les commentaires et les caractères inutiles -espaces, etc- de vos pages web). Pour WordPress, on peut utiliser des plugins, mon choix serait Better WordPress Minify.
Cependant, il est nettement plus judicieux de minifier les fichiers (CSS et JS) dès l'installation, et de ne pas avoir la surcharge lors de l'utilisation du site web (et donc d'utiliser directement des fichiers css et js dans le code html/php). J'utilise YUI Compressor pour minifyer les fichiers lors de la création du site.

ATTENTION

1. pour WordPress, ne pas oublier de laisser le commentaire qui donne le parent et le nom du thème dans le fichier style.css du thème enfant (child) : cela peut bloquer le thème et empêcher la mise à jour de la taxonomie !
2. Faire attention au droits d'accès lors du transfert de fichiers (FTP), en règle général, on veut avoir 644.

Pour minifier le HTML dans WordPress, j'utilise le plugin WP-HTML Compression !

Zipper

Il faut aussi activer la compression des pages avec gzip (un article de {Astuces-Webmaster} présente bien le concept).

Il y a plusieurs solutions : bien lire le chapitre entièrement pour choisir la solution qui vous convient.

La méthode standard est de zipper les pages et les fichiers annexes à la volée, en modifiant le fichier .htaccess ... si le module mod_gzip  ou mod_deflate est actif !
Sinon (comme dans le cas de l'hébergeur 1and1), il faut utiliser des scripts soit avec .htacess (ici seulement pour les fichiers CSS et JS), soit avec un php.ini !
La méthode qui a fonctionné le mieux pour moi est le php.ini comme indiquée par mrena (en Anglais) - qui est la même que celle indiquée sur WebRankInfo ou sur sky-future.net- : mais deux fichiers CSS étaient vides, si zippés.

J'ai donc choisi une autre méthode : zipper au préalable, tous les fichiers annexes (CSS et JS), avec gzip -9, un article de Pollito explique comment faire.
Et j'ai utilisé la méthode du php.ini pour zipper les html/php : j'aurai voulu utiliser une méthode sans php.ini mais la méthode .htaccess de ViralPatel ne fonctionne pas chez 1and1  !

Pour PluXml, il suffit de cocher une case à cocher. Pour WordPress, les plugins ci-dessus (et celui du cache indiqué plus loin) s'en occupe (même avec 1and1) ... mais peuvent apporter des erreurs, en particuliers pour les CSS (cela m'est arrivé).

Pour information, pour 1and1, il était possible de désactiver une option qui permettait d'utiliser le zip (indiqué dans les commentaires -23 july 2012- d'un forum Opencart).
Enfin, un article de fiftyfoureleven.com indique comment zipper des css à la volée avec des include.

Qualité des pages

Pour être sur qu'il n y a pas de liens cassés, on utilise le plugin Broken Link Checker.

Contenu dupliqué

Il faut également faire attention au contenu dupliqué. Google n'aime pas ça pour bien vous référencer, cependant WordPress a tendance à multiplier des URL différentes pour une même page (surtout si vous faites du blog). De plus, votre thème peut amplifier le phénomène avec des sidebars et/ou des footers répliquant le contenu.

Tout ceci est très bien expliqué dans l'article de WP Formation sur le sujet.

Cache

WordPress Plugins

Puis il faut installer des cache pour accélérer WordPress. La combinaison gagnante est WP Super Cache et DB Cache Reloaded Fix. W3 Total Cache est également une bonne solution et offre plus d'options (y compris pour supprimer les query string des CSS et JS). Pour PluXml, ce n'est pas nécessaire (et puis il n'y a pas de Base de Données).

Il est intéressant d'ajouter également WP Super Cache - clear all cache, pour ajouter un bouton pour ré-initialiser le cache : c'est très utile pour visualiser les modifications que l'on vient d'effectuer sur le site (widgets etc).

Avec .htaccess

Hors WordPress, il peut être intéressant de configurer le cache pour le browser web (ce que fait entre autres WP Super Cache), comme indiqué sur un article de Samaxes (en anglais).

Supprimer les Query String dans WordPress

WordPress ajoute des Query String (e.g ?ver=4.5.6) après les fichiers de ressource (CSS et JS). Ce n'est pas une bonne idée car certains serveurs de proxy (dont squid) ne mettent pas en cache ces fichiers.

J'ajouter donc le code suivant dans le fichier fonction.php du child du thème utilisé.

function remove_style_and_script_version($url) {

	$MY_DOMAIN='computingfroggy.net';
	$pos= strpos($url, $MY_DOMAIN);
    if ($pos === false) {
		//otherwise return the URL as is
		return $url;
    } else {
        //if it is one of the URLs to process, remove everything after the question mark
        $parts = explode('?', $url);
        return $parts[0];
	}
}
add_filter('script_loader_src', 'remove_style_and_script_version', 20, 1);
add_filter('style_loader_src', 'remove_style_and_script_version', 20, 1);

Il suffit de remplacer le nom de domaine par le votre.Ce script est inspiré du script de benohead.
La différence entre mon script et celui de benohead (et la plupart des scripts) est que ce script supprime les QueryString pour les ressources sur votre serveur (à priori pas de problèmes de versions), mais les laisse si vous utilisez des scripts d'autres serveur (comme par exemple des CDN).
Il existe aussi un plugin mais comme je ne sais pas ce qu'il fait précisément et que ce script est facile à mettre en place, autant utiliser le script.

SEO

Pour pouvoir gérer les options SEO, il faut ajouter un plugin. Je n'ai pas installé WP SEO by Yoast mais Platinum SEO ... et je ne sais plus pourquoi ! ! Mais il fonctionne bien et j'en suis content.

Il est également judicieux d'installer un plugin pour générer un site map, j'ai choisi XML Sitemap Generator qui est simple et efficace.

Bonne optimisation de site !