Comment accélérer/optimiser WordPress

Pour changer un peu, un article sur WordPress et quelques conseils à suivre afin d’accélérer la vitesse de chargement de votre site WordPress.
Le but est de rendre le chargement du site plus rapide en allégeant ce dernier.
Certaines recommandations demandent des connaissances techniques minimalistes avec le codage.

wordpress_logo

Mesure la vitesse de son site avec PageSpeed

PageSpeed est un outil de Google qui permet d’évaluer la vitesse de chargement de votre site à travers une note globale.
Plus, vous êtes proches de 100, plus votre site est considéré comme rapide.

La page de PageSpeed : https://developers.google.com/speed/pagespeed/insights/

pagespeed_google

PageSpeed de Google donne aussi des indications sur les scripts qui peuvent bloquer le chargement d’une page.
PageSpeed ne se contente donc pas de vérifier la vitesse du serveur et des chargements des pages, mais test aussi si des scripts qui peuvent bloquer l’affichage.
Le but, pour accélérer votre site WordPress, est de supprimer les scripts qui peuvent bloquer le chargement de la page.
Parmi cela on trouve :

  • Les CSS, pour le rendu graphique
  • Les JavaScripts (interne & externe à votre site WordPress)
  • La compression des images

Pour les JavaScript, vous pouvez les charger de manière asynchrones. Pour le CSS, il existe des méthodes de minifications/combinations (voir plus bas).

Il existe plusieurs techniques pour rendre donc le chargement de vos pages WordPress plus fluides.

pagespeed_google_2

PageSpeed donne un score pour les ordinateurs de bureaux et Mobile.
Si vous ne visez que les ordinateurs de bureaux, ne soyez donc pas obnubilé par le score pour mobile.

Je pense sur mon site, la différence est assez visible :pagespeed_google_3

Avant de toucher quoique ce soit sur votre site WordPress, faites une sauvegarde. Mieux si vous avez possibilité de créer un site miroir de test, allez-y.

Il existe d’autres services qui permettent d’évaluer la vitesse de votre site :

pingdom_evaluer_vitesse_votre_site

Pingdom est assez utile, car il vous permet de visualiser les éléments qui prennent du temps à charger.
Chose que vous pouvez aussi faire avec votre navigateur WEB et les outils de développements.

pagespeed_google_4

Conseils généraux

N’alourdissez pas votre site WordPress

Le choix du thème et des extensions sont importants, puisque si ces derniers sont mal codés, ils peuvent provoquer de gros problèmes.
WordPress évolue beaucoup, si le thème est ancien, il n’utilisera pas les dernières fonctionnalités. Cela peut jouer beaucoup.
Je vous conseille de passer vos thèmes sur PageSpeed, si les scores sont en dessous de 75, je pense que vous pouvez déjà laisser tomber le thème.

En ce qui concerne les extensions, comme les programmes sur Windows, évitez d’en installer beaucoup, cela va alourdir votre site WordPress.
De même, si vous devez ajouter une nouvelle extension, soumettez là à PageSpeed afin de voir les impacts.

L’extension suivante peut vous aider à visualiser les plugins qui ont le plus d’impact sur votre site WordPress : P3 (Plugin Performance Profiler)

Limiter les appels externes

PageSpeed test l’intégralité du site, ainsi que les liens externes.
Déjà, ces sites n’étant pas chez vous, vous ne maîtrisez rien, donc si le serveur se met à ramer ou si c’est codé n’importe comment, votre site va en pâtir. Cela peut aussi faire ralentir le navigateur WEB du visiteur, si le script est mal fait.
Au minimum, les scripts appels doivent être asynchrones pour réduire le blocage du chargement de la page.
Multiplier les appels, demandes des résolutions DNS (même s’il y a des chances qu’elles soient le cache du visiteur) et requêtes, cela à un impact sur la vitesse de chargement de vos pages WordPress.
Evitez donc au maximum les scripts externes. Par exemple, pour les boutons de partages réseaux sociaux, héberge les chez vous au lieu d’installer une extension ou alors choisissez la bien.
Il en va de même pour les régies publicitaires.

Compresser vos images

La compression des images est importante, PageSpeed vous signalera si des images sont mal compressées.
Prenez donc bien l’habitude d’enregistrer vos images avec un taux de compression convenables.
Celle-ci ne doivent pas dépasser 25ko.

L’extension suivante Smush It permet d’optimiser ses images (pas testé)… Ajouter une extension n’est pas forcément l’idéale, puisqu’il vous suffit d’enregistrer vos images correctement.

Une bonne politique de cache

PageSpeed vérifie aussi les règles de cache, afin que les images, scripts etc soient bien cachés sur le navigateur WEB du visiteur.
Cela est d’autant plus important pour les appareils mobiles.
Lorsque le visiteur retournera sur votre site WEB, les images seront prises sur son cache et non depuis le serveur distant. Gain de temps et de bande passante.

Pour régler le cache, vous pouvez ajouter ces éléments dans le fichier .htaccess racine de votre site.
(Vous pouvez aussi, si vous avez Apache, mettre ces règles dans le VirtualHost)

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|png|gif|swf|favi)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
</IfModule>

et :

## contrôle du cache navigateur - Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 1 week"
 ExpiresByType image/jpeg "access plus 1 week"
 ExpiresByType image/png "access plus 1 week"
 ExpiresByType image/gif "access plus 1 week"
 ExpiresByType image/svg+xml "access plus 1 week"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 1 week"
 ExpiresByType image/icon "access plus 1 week"
 ExpiresByType image/x-icon "access plus 1 week"
 ExpiresByType text/css "access plus 1 week"
 ExpiresByType text/javascript "access plus 1 week"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript "access plus 1 week"
 ExpiresByType application/x-javascript "access plus 1 week"
 ExpiresByType application/x-shockwave-flash "access plus 1 week"
</IfModule>

Gardez un oeil sur les articles les plus vus

La majorité de votre trafic peut avoir pour source 20% de votre contenu.
En gros, quelques articles peuvent avoir une audience forte.
Chouchoutez ces articles afin de les rendre plus rapides.
Des outils de mesures d’audience comme Google Analytics, Piwik etc peuvent vous aider à identifier les top articles.

Les optimisations de code

On attaque quelques modifications de codes et une ou deux extensions.
Sachez que ces modifications peuvent provoquer de gros problèmes, testez bien sur tous les navigateurs WEB.

Il faut comprendre que les modifications de code se font la plupart du temps dans le fichier function.php de votre thème.
(Sur certains thèmes ce dernier peut aussi appeler une page spécifique hooks-filters.php).
WordPress proposant des fonctionnalités de hook (crochet) qui permettent d’effectuer une action supplémentaire et donc de modifier le comportement du site.

Quelques exemples (pas besoin de les charger) :

Rendre tous les javascripts interne asynchrones

add_filter( 'script_loader_tag', 'add_async', 10, 2 );
function add_async( $tag, $handle ) {
 return str_replace( ' src', ' async src', $tag );
}

Supprimer la version dans les appels CSS/JavaScript afin que le cache puissent s’appliquer dessus :

function remove_cssjs_ver( $src ) {
 if( strpos( $src, '?ver=' ) )
 $src = remove_query_arg( 'ver', $src );
 return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

ou encore juste pour les CSS :

function wp_table_reloaded_remove_css_version( $url ) {
 $url = substr( $url, 0, strpos( $url, '.css' ) + 4 );
}
add_filter( 'wp_table_reloaded_url_css_plugin', 'wp_table_reloaded_remove_css_version' );
add_filter( 'wp_table_reloaded_url_css_datatables', 'wp_table_reloaded_remove_css_version' );

Il existe des extensions de cache qui permettent de faire tout cela.
C’est ce que l’on peut voir ci-dessous.

Minifier et combiner les scripts et CSS

Minifier permet de réduire les portions de code, de ce fait, le chargement de la page est plus rapide.
La combinaison va prendre tous les appels CSS pour n’en faire qu’un seul. Cela permet aussi de réduire le nombre d’appel et donc permettre un chargement des pages WordPress plus rapide.

Dans mon cas, j’ai installé l’extension W3 Total Cache qui par ailleurs fournit un cache du site.
Voici les options de Minification et de combinaisons.
J’ai désactive celles-ci pour le CSS car cela posait des problèmes de chargement du site sur Mozilla Firefox.

 

w3tc_minification w3tc_minification_2

Il existe bien sûr d’autres extensions qui font cela comme :

Google Fonts

Il reste le cas des Google Fonts, là c’est un peu plus complexe.
Les Google Font sont des polices de caractères accessibles par des API Google.
En clair, lorsque vous vous connectez à un site WordPress qui utilisent ces derniers, des appels externes sont effectués.
PageSpeed risque de flaguer ces appels.

Vous devez héberger vous mêmes les Google Font, il convient donc dans un premier temps d’identifier les polices Google utilisées.
PageSpeed devrait le faire pour vous dans les détails, sinon regardez les appels externes effectuées par votre site WordPress.
L’extension Remove Google Fonts References permet de désactiver les appels Google Fonts de votre thèmes.

Créez un dossier fonts dans votre thèmes et téléchargez les fonts que vous utilisez :

root@www:/home/www/www.malekal.com/wp-content/themes# ls -lh flaton/fonts/
-rw-r--r-- 1 root root 9,3K ao�t 28 2014 Abel-Regular.woff2
-rw-r--r-- 1 root root 9,1K mai 20 01:53 bitter-font-bold.woff2
-rw-r--r-- 1 root root 4,5K mai 20 01:55 bitter-font.woff2
-rw-r--r-- 1 root root 10K ao�t 28 2014 Bree-Serfi.woff2
-rw-r--r-- 1 root root 5,5K ao�t 7 13:37 fontfaceobserver.js
-rw-r--r-- 1 root root 15K avril 28 2015 Open-Sans-italic.woff2
-rw-r--r-- 1 root root 15K avril 28 2015 OpenSans-SemiboldItalic.woff2
-rw-r--r-- 1 root root 15K janv. 14 2015 Roboto-Regular.woff2
-rw-r--r-- 1 root root 4,4K ao�t 28 2014 sourcesanspro-regular-webfont.woff2

Téléchargez le JavaScript suivant et placez le dans votre dossier fonts : https://github.com/bramstein/fontfaceobserver/blob/master/fontfaceobserver.js

Modifiez l’en-tête de votre fichier CSS à l’aide de l’éditeur WordPress pour charger les fonts qui vont bien.
Vous pouvez vous inspirer de ce code :

@font-face {
 font-family: 'Bitter-Regular';
 src: url('http://www.xxxx/wp-content/themes/flaton/fonts/bitter-font.woff2') format('woff2'),
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Bitter-borld';
 src: url('http://www.xxxxx/wp-content/themes/flaton/fonts/bitter-font-bold.woff2') format('woff2'),
 font-weight: normal;
 font-style: bold;
}

Enfin dans le footer, placez el code suivant qui va charger le fichierfont faceobserver.js.
Adaptez le avec les fonts dont vous avez besoin.

<script src="//www.xxxxx/wp-content/themes/flaton/fonts/fontfaceobserver.js"></script>
<script>
(function( w ){
 // if the class is already set, we're good.
 if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
 return;
 }
 var fontA = new w.FontFaceObserver( "Bitter", {
 weight: 400
 });
 var fontB = new w.FontFaceObserver( "Bitter", {
 weight: 700
 });

var fontC = new w.FontFaceObserver( "Source Sans Pro", {
 weight: 400
 });
 var fontD = new w.FontFaceObserver( "Source Sans Pro", {
 weight: 700
 });

var fontE = new w.FontFaceObserver( "Abel-Regular", {
 weight: 400
 });

var fontF = new w.FontFaceObserver( "Bree-Serfi", {
 weight: 400
 });

var fontG = new w.FontFaceObserver( "Roboto-Regular", {
 weight: 400
 });

var fontH = new w.FontFaceObserver( "Open-Sans-italic", {
 weight: 400
 });

var fontI = new w.FontFaceObserver( "OpenSans-SemiboldItalic", {
 weight: 400
 });

w.Promise
 .all([fontA.check(), fontB.check(), fontC.check(), fontD.check(), fontE.check(), fontF.check(), fontG.check(), fontH.check(), fontI.check()])
 .then(function(){
 w.document.documentElement.className += " fonts-loaded";
 });
}( this ));
</script>

Si tout va bien, les fonts Google devrait être chargées localement depuis votre site WordPress et plus aucun appel distant ne devrait être effectués.

(Visité 276 fois, 1 visites ce jour)

Vous pouvez aussi lire...

Vous pouvez lire les articles et tutoriels suivants en rapport avec cette page :
Tutoriel le gestionnaire de périphériques de WindowsLes virus par email

Besoin d'aide ?

Posez votre question ou soumettez votre problème sur le forum malekal.com pour obtenir une aide efficace : Aller sur le forum malekal.com