Nul besoin d’étaler des courbes, graphiques et camemberts dans le but d’argumenter sur le temps de chargement; le pourcentage de visiteurs quittant le site après X seconde ,le nombre de pages vues et biensur le taux de conversion ( pour les intéressés, http://www.seomoz.org/blog/site-speed-are-you-fast-does-it-matter ) . C’est plutôt une question de bon sens d’avoir un site Web réactif, et encore plus aujourd’hui avec les visites sur mobile.
http://www.motortrend.com/roadtests/coupes/1302_2013_mercedes_benz_sls_amg_gt_first_test/photo_18.html
Les techniques d’optimisation Web sont pour être efficace à réaliser dès le début de son projet :
- Utilisation minime du javascript ou de scripts allégés, déférer leur chargement.
- Utilisation de sprite CSS pour limiter le nombre d’images.
- Alléger ses images et les avoir à la bonne taille.
Mais si on ne s’est pas du tout préparer à cela, il existe tout de même des solutions, je prendrai ici l’exemple de PageSpeed et du plugin W3 Total Cache qui permettront d’accroitre considérablement le temps de chargement de votre site et sa fluidité lors de la visite de l’internaute.
Optimisation WordPress avec PageSpeed
Le module PageSpeed de Google pour Apache permet d’appliquer automatiquement des optimisations comme la minification CSS et Javascript, la création de sprite ou l’utilisation de l’encodage 64bits pour les images.
Commençons tout d’abord par l’installer :
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb dpkg -i mod-pagespeed-*.deb rm -rf mod-pagespeed-*.deb
puis l’activer :
a2enmod pagespeed /etc/init.d/apache2 reload
Pour consulter les outils activés par défaut dans le core : https://developers.google.com/speed/docs/mod_pagespeed/config_filters
Le module Pagespeed est maintenant activé sur tout les sites présent sur le serveur. Si vous souhaitez ne l’activer que sur un site en particulier, il faut désactiver ModPagespeed dans les mods-enabled d’apache ( généralement placé sous /etc/apache2/mods-enabled/pagespeed.conf ), placer « ModPagespeed off ».
Il suffit d’ouvrir ensuite le .htaccess à la racine du site, pour l’activer et le désactiver sans avoir à redémarrer Apache ( pratique pour faire des tests ).
Voici le .htaccess avec tous les modules activés :
Modpagespeed on ModPagespeedEnableFilters combine_css ModPagespeedEnableFilters extend_cache ModPagespeedEnableFilters rewrite_images ModPagespeedEnableFilters rewrite_css ModPagespeedEnableFilters rewrite_javascript ModPagespeedEnableFilters outline_css ModPagespeedEnableFilters outline_javascript ModPagespeedEnableFilters move_css_above_scripts ModPagespeedEnableFilters move_css_to_head ModPagespeedEnableFilters flatten_css_imports ModPagespeedEnableFilters make_google_analytics_async ModPagespeedEnableFilters combine_javascript ModPagespeedEnableFilters resize_mobile_images ModPagespeedEnableFilters inline_preview_images ModPagespeedEnableFilters remove_comments ModPagespeedEnableFilters collapse_whitespace ModPagespeedEnableFilters extend_cache_css ModPagespeedEnableFilters extend_cache_images ModPagespeedEnableFilters extend_cache_scripts ModPagespeedEnableFilters sprite_images ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters lazyload_images ModPagespeedEnableFilters insert_dns_prefetch
Vous avez maintenant le module Pagespeed d’apache installé avec tous ses outils d’optimisation. Pour plus de détails sur ces outils : https://developers.google.com/speed/docs/mod_pagespeed/config_filters
Optimisation WordPress avec W3 Total Cache
Maintenant que PageSpeed est installé, il reste encore quelques améliorations à faire, notamment au niveau des Expires Headers, le plugin W3 Total Cache fait parfaitement l’affaire. Il va ajouter dans le htaccess tout ce que nous avons besoin pour optimiser cela. L’installation est la encore super simplifié, il suffit d’activer le plugin, mettre les bonnes permissions sur les fichiers. Si vous êtes sur un serveur, ajouter » define(‘FS_METHOD’,'direct’); » au wp-config.php .
Je conseille de désactiver le PageCache, qui est déjà pris en charge par PageSpeed.
Résultats de l’optimisation
Après toutes les modifications, il nous reste plus qu’a tester le site Web avec des outils spécialement dédié à savoir GTmetrix qui combine le Yslow et PageSpeed , et PingDom Tools pour le temps de chargement, le poids de la page..
Etape cruciale dans la création d’un site internet, voila notre moteur bien rodé pour subir des pics de milliers d’internautes sans surchauffe. A prévoir tout de même si le serveur n’a pas une mémoire vive énorme :
echo "# mod_pagespeed memory usage limitation
MaxKeepAliveRequests 50
MaxClients 100
MaxRequestsPerChild 500" \
> '/etc/apache2/conf.d/pagespeed-optimization'Mercedes-Benz-E-63-AMG
http://automover.blogspot.fr
Optimisation plugins WordPress
Pour analyser les statistiques de chargement des plugins WordPress, le plugin P3 (Plugin Performance Profiler) est idéal, il affiche le temps de chargement de chaque plugin et permet de détecter si certains sont trop lent.
Rédigé par Garry Ysenbaert