Accueil » Conseils & tutoriels sites internet » Tutoriels Wordpress » WordPress / Woocommerce : réduisez le temps de chargement !

WordPress / Woocommerce : réduisez le temps de chargement !

Posté dans : Tutoriels Wordpress 0

Grâce à quelques lignes de code, il est possible sur WordPress de réduire le temps de chargement des pages en compressant le html, sans passer par un plugin qui alourdirait potentiellement votre site, ou qui vous contraindrait à opter pour une version « premium » parfois onéreuse.

Afin d’optimiser le chargement des pages sur WordPress, il est bon d’utiliser le plugin WP Super Cache, très utile en version gratuite et permettant de limiter les appels à la base de données. Le site que vous visitez actuellement a une base de données complètement surchargée (OVH ne doit pas vraiment apprécier tout cela !) mais utilise une compression html en plus de WP Super Cache.

Pour rappel, WordPress est construit avec du PHP, un code pas très sympatique qui va chercher les informations dont le site a besoin pour afficher dynamiquement les pages. Il s’agit donc d’un code orienté serveur, contrairement au Html, CSS et Javascript (hors Ajax), qui eux sont des codes orientés client (c’est-à-dire vous !).

Si votre WordPress met du temps à se charger, cela est dû potentiellement à un cache inexistant (n’hésitez surtout pas à installer WP Super Cache sur votre blog !), à une base de données trop volumineuse ou un serveur saturé (auquel cas il vous faudra contacter votre hébergeur pour passer à une offre supérieure), ou à une non-compression des codes html/css/javascript.

La compression des codes html/css/javascript est très utile lors du chargement des pages, et Prestashop en a fait un outil intégré à son système. En effet, demander au navigateur de charger des retours à la ligne et des espaces est parfaitement inutile. Une ligne blanche est considérée comme un poids supplémentaire dans vos fichiers de code. Cela paraît insignifiant, mais à mesure que votre site grandit, ces espaces inutiles prennent une place considérable !

Beaucoup de plugins WordPress permettent d’effectuer une compression du html/css/javascript, mais chaque plugin que vous rajouterez sur votre site l’alourdira, et vous aurez bien plus d’outils à gérer que vous n’en avez réellement besoin.

Certains sites vous aideront à compresser le code que vous taperez vous-même, comme AidoWeb, ou tant d’autres que vous pourrez dénicher en effectuant des recherches ciblées sur vos moteurs de recherche préférés. Il est néanmoins possible d’activer naturellement la compression html sur WordPress à l’aide d’une fonction dédiée.

Pour ce faire, rendez-vous dans le fichier functions.php situé généralement à la racine de votre thème. Ici sont appelées toutes les fonctions utiles au bon fonctionnement de votre thème.

Sans forcément avoir de connaissance en PHP, vous pouvez rajouter ces lignes de code :

add_action('get_header', 'gkp_html_minify_start');
function gkp_html_minify_start() {
ob_start( 'gkp_html_minyfy_finish' );
}

function gkp_html_minyfy_finish( $html ) {

// Suppression des commentaires HTML,
// sauf les commentaires conditionnels pour IE
$html = preg_replace('/).)*-->/s', '', $html);

// Suppression des espaces vides
$html = str_replace(array("\r\n", "\r", "\n", "\t"), '', $html);
while ( stristr($html, ' '))
$html = str_replace(' ', ' ', $html);

return $html;
}


// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

 

Faites tout de même bien attention à utiliser les balises d’ouverture et de fermeture PHP, de telle manière à ce que le code soit correctement interprété. Une fois enregitré, rendez-vous sur votre site en pensez bien évidemment à effacer le cache de votre navigateur, voire celui de votre site si comme je vous l’ai conseillé vous avez installé un plugin tel que WP Super Cache. Affichez le code source de votre site et vous constaterez que tout votre html s’est comprimé en un bloc de codes, pas très avenant pour un développeur, mais tellement utile pour la vitesse de chargement !

Attention cependant pour ceux qui utilisent des plugins Woocommerce avancés, il m’est arrivé de rencontrer des erreurs d’affichage, notamment avec le plugin extraordinaire Fancy Product Designer. J’ai à ce sujet préféré désactiver la compression, il aurait été dommage de perdre la qualité d’un outil de personnalisation de produits aussi puissant. C’est à ce jour la seule erreur que j’ai pu constater avec cette fonction « custom » intégrée aux thèmes WordPress.

Imprimer Imprimer

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.