Comment accélérer et 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.

Comment accélérer et optimiser WordPress.

wordpress_logo

Mesurer la vitesse de son site WordPress

Pour suivre les améliorations de votre site WEB, vous devez être capable de mesurer la vitesse de ce dernier.

Il existe pour cela beaucoup d’outil sur la toile dont certains présentes les faiblesses à améliorer au niveau de la structure de votre site WordPress.
La plupart note votre site selon tous ces critères.

L’article suivant présente les principaux sites : Mesurer la vitesse de son site WordPress

Les conseils généraux pour WordPress

Choisissez un thème léger et bien conçu

Maintenant que vous avez les liens pour tester la vitesse de votre site internet. Le premier conseil est d’utiliser un thème léger et bien conçu.
Pour se faire, n’hésitez pas à mettre en place un site de test ou tester les liens de démo des thèmes proposés.

Un bon thème ne doit pas excéder 500 ko en taille.
Au delà, cela pénalise très fortement la vitesse de chargement des pages.
Prenez donc bien le temps de choisir le thème afin ensuite d’améliorer la vitesse WordPress.

Certains thèmes embarquent des options d’optimisation SEO (minification, lazzy images).

Choisir un bon thème pour WordPress
Choisir un bon thème pour WordPress

Notez qu’avec le temps de nouveaux thèmes plus modernes peuvent être publiés.
Ainsi, il peut-être recommandé de changer de thèmes régulièrement par exemple tous les deux ans.

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 convenable.
Celle-ci ne doivent pas dépasser 25ko.

Il existe beaucoup d’extension pour optimiser les images, bien souvent payante selon le volume d’images à optimiser.

Optimiser les images WordPress
Optimiser les images WordPress

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 extension pour optimiser WordPress

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 existe bien sûr d’autres extensions de cache qui font cela automatiquement.

Les options d’optimisation sont à activer et aucune connaissance de codage sont alors nécessaires.

wp-rocket - optimisation WordPress
wp-rocket – optimisation WordPress

Les optimisations de code

Voici quelques exemples d’optimisation de code pour les utilisateurs avancés;
Encore une fois, les extensions de cache proposent ces fonctions par défaut.

Optimisation du thème

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 internes 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

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.

Utiliser un CDN

Les CDN sont des réseaux de serveurs qui permettent d’accélérer la vitesse de votre site via des caches.
Selon la taille de votre site WEB, vous pouvez envisager d’utiliser ces derniers.
L’article suivant présente les CDN pour WordPress : CDN : optimisation et sécurité WordPress

WordpRess et les CDN
WordPress et les CDN

Autres liens

Si vous administrez votre base de données, il faut que MySQL soit bien configuré pour cela, reportez-vous à notre article : Comment optimiser MySQL

(Visité 234 fois, 1 visites ce jour)