ça bouge chez 1-ter-net !
Web & Design
Accélérer son site wordpress

Comment accélérer son site sous WordPress

Article posté par | Le

Vous le savez sûrement déjà : la vitesse de réponse de votre site internet est devenue un facteur important, d’une part du point de vue de l’expérience utilisateur, et d’autre pour être mieux référencé par Google. Comment faire alors pour améliorer les performances de votre site sous WordPress, un CMS certes génial, mais qui, s’il n’est pas bien utilisé et optimisé peut s’avérer assez lent ?

Voici donc quelques actions et conseils à mettre en place pour améliorer les performances de votre installation WordPress.

 

Utilisez le cache du navigateur.

C’est un conseil que vous donnera google sur sa page pagespeed insights. Et il est assez simple à mettre en place, quelques lignes dans votre fichier .htaccess peuvent suffire.

Voici un exemple de lignes que vous pouvez recopier dans votre fichier .htaccess, elles sont assez simples à comprendre si vous parlez un minimum anglais ! Ces lignes sont en quelque sorte des instructions que le serveur donnera aux navigateurs de vos utilisateurs pour leur dire de ne pas recharger certaines ressources si elles ont déjà été chargées. Cela allégera le chargement de votre site sur les navigateurs de vos clients (sauf la première fois qu’ils le visiteront !)

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 2 month"
ExpiresByType application/javascript "access 2 month"
ExpiresByType application/x-javascript "access 2 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##

 

Utilisez le cache de votre serveur

Je vous recommande le plugin Wordfence, qui est principalement un plugin pour améliorer la sécurité de votre WordPress, mais qui dispose d’une option de mise en cache très efficace.

Les résultats sont souvent étonnants ! Il n’est pas rare de remarquer une réelle différence en naviguant sur le site avant et après l’activation du plugin…

Petit conseil cependant : si vous chargez sur votre site certaines ressources uniquement pour les mobiles et les tablettes, prenez garde à désactiver le système de cache quand vos visiteurs sont sous Android ou iOS, Cela peut être fait simplement en ajoutant ces lignes comme exceptions dans la page de configuration du plugin Wordfence :

reglage_wordfence

 

« Minifiez » vos CSS et Javascript

Oui : plus le fichier d’un script est long… plus il est long à charger. Bon, vous avez déjà facilité la chose en activant le cache du navigateur. Mais vous pouvez aller encore un peu plus loin en minifiant vos fichiers Javascript et CSS (c’est-à-dire en réduisant leur taille en enlevant les caractères inutiles, les commentaires etc…) . Si vous avez quelques connaissances en développement web, vous trouverez des outils en ligne de commande qui vous permettent de faire cela (YUI Compressor, Gulp…).

Il existe aussi la solution du plugin, comme Dependency minification qui se charge lui même de regrouper et minifier vos ressources CSS et javascript pour rendre leur chargement plus rapide par les navigateurs. Là encore, attention si vous chargez des ressources spécialement pour les mobiles et tablettes, il faudra prendre garde à les exclure de la minification en ajoutant quelques lignes dans le fichier function.php de votre thème :

$detect = new Mobile_Detect;
if($detect->isMobile() || $detect->isTablet()) {
    wp_enqueue_style( 'mobile.css', get_stylesheet_directory_uri() . '/css/mobile.css');
}

(Dans cet exemple, on utilise également la librairie PHP Mobile Detect, pour inclure une feuille CSS uniquement pour mobile)

 

Chargez votre javascript dans votre footer

La raison est assez simple : quand votre navigateur (ou le robot Google) arrive sur votre page et la lit, il doit interpréter tout le javascript qu’il rencontre. Si votre javascript est implémenté en tête de page, alors il devra l’interpréter avant de pouvoir afficher quoi que ce soit, ce qui ralentira l’affichage de la page.

Si vous utilisez la fonction wp_enqueue_script dans votre fichier functions.php pour inclure vos scripts, sachez qu’elle dispose d’un argument qui permet de dire a WordPress d’injecter le script plutôt dans le footer que dans le header (cf le codex wordpress).

 

Conseil : installez moins de plugins

Cela peut paraître contradictoire pour quelqu’un qui, rien que dans cet article, vous à déjà conseillé d’installer deux plugins… mais n’en installez pas trop.

Beaucoup de plugins qui vous permettent d’afficher des choses sur votre site (formulaires, boutons de réseaux sociaux…) ajoutent leurs petits fichiers javascipt (souvent en tête de page, tant qu’à faire…), qui alourdissent votre site et son chargement (surtout sur mobile). Quand on sait que certaines personnes installent des plugins parfois assez lourds pour n’utiliser qu’une seule fonctionnalité qui pourrait être implémentée en 10 lignes de code sans plugin… on se dit qu’il est peut-être dommage de ralentir son site pour si peu, non ?

En mettant en place ces quelques conseils, vous serez capable de gagner un temps de chargement précieux aux yeux des utilisateurs… et des moteurs de recherches !