Aller au contenu

October 15, 2013

1

10 conseils pour accélérer votre site e-commerce et augmenter votre taux de conversion

Nul n’est sans savoir qu’un site lent est un site qui fait fuir. Si vous êtes e-commerçant et que votre plateforme de vente est lourde et lente, c’est un peu comme essayer de courir avec un poids de 20kg dans les pieds. Je vais vous donner 10 conseils pour optimiser votre site et ainsi augmenter votre taux de conversion.

Beaucoup de grosses structures de vente comme des entreprises telles que Amazon ou Google ont publié quelques statistiques concernant l’impact de la performance de leurs sites sur la conversion.
Amazon a ainsi constaté pour un gain de 100 ms dans la rapidité d’affichage de leurs sites, leur chiffre d’affaire augmente de 1%, ce qui est relativement énorme, surtout pour une grosse structure telle que Amazon qui génère plusieurs millions.
Google lui a constaté une augmentation de 30% de visites sur Google Map en ayant amélioré de 30% le temps d’affichage de ce dernier.

Et là vous vous dites: “Mais moi aussi je veux améliorer le temps d’affichage de mon site !” et vous avez raison. Je vais vous donner quelques astuces pour vous permettre d’améliorer les performances de votre site e-commerce et je suis sûr que vous augmenterai ainsi votre chiffre d’affaire.

Lorsque vous aurez réussi à réaliser tous les points que je vais lister ci-dessous, votre site sera surement bien plus performant qu’à l’heure actuelle, pour ma part, j’ai diminué la taille de mes pages de 25% et augmenté le temps d’affichage de 400%.

1) Utilisez un système de cache

Sur PrestaShop et également sur Magento, il existe un cache natif qu’il faudra impérativement activer une fois votre site en production. Le cache enregistre temporairement une copie des données ce qui évite de recharger l’ensemble du site chaque requête.
Le cache est un des éléments clé pour optimiser les performances de votre site internet.

2 ) Optimiser vos images

Le contenu qui prend le plus de temps à charger sur un site internet, ce sont en général les images, et je parle principalement des images utilisées pour votre thème.
Ces images doivent impérativement être optimisées, pour cela vous devez utiliser au mieux des images au format gif et réduire leur taille au maximum, vous serez étonnés de la rapidité que l’on peut gagner avec l’optimisation des images.

4 ) Utilisez des sprites

Réunissez toutes vos petites images en une seule et utilisez la propriété css “background-position” pour les afficher.
Voici par exemple un sprite utilisé par notre ami Facebook : https://s-static.ak.facebook.com/rsrc.php/v1/yZ/r/E75W0JjLn8o.png

5 ) Activez la compression Gzip

Grâce à la compression Gzip, le serveur va compresser les données à afficher, et c’est le navigateur qui va les décompresser, on diminue ainsi considérablement la taille des données envoyées du serveur vers le navigateur.
Dans PrestaShop, vous pouvez le faire très simplement depuis l’administration.

6 ) Réunissez vos css et javascripts de petite taille

Inutile d’utiliser deux fichiers css de petite taille, créez seulement un fichier avec l’ensemble du code à l’intérieur.

7 ) Minifiez vos scripts et vos feuilles de style

Vous pouvez diminuer la taille de vos fichier css et js simplement en les minifiant, c’est-à-dire en diminuant la taille du code.
Pour cela utilisez des modules ou faites le manuellement avec ces générateurs
Css: http://www.minifycss.com/
Js : http://www.minifyjs.com/javascript-compressor/

8 ) Add expires headers

Quesaquo ? Il est pratique de notifier aux navigateurs que vos scripts n’ont pas été modifiés et qu’il est inutile de les recharger s’ils sont conservés en cache.
Pour cela, ajoutez dans le .htaccess (situé à la racine de votre site) le code suivant :
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch “\\.(ico|jpe?g|png|gif|swf|css|gz)$”>
Header set Cache-Control “max-age=2592000, public”
</FilesMatch>
<FilesMatch “\\.(js)$”>
Header set Cache-Control “max-age=2592000, private”
</FilesMatch>
<filesMatch “\\.(html|htm)$”>
Header set Cache-Control “max-age=7200, public”
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch “\.(pl|php|cgi|spl|scgi|fcgi)$”>
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

9 ) Évitez l’inclusion de composants externes

Si vous incluez des fichiers présents sur un serveur différent, cela implique à votre serveur de faire des requêtes supplémentaires et ainsi de ralentir le temps de traitement de ce dernier.

10 ) Évitez les erreurs 404

Il est impératif que votre code ne contienne pas de composant introuvable, car une requête vers un élément inexistant prends beaucoup de temps et ralentit considérablement votre site.

Testez votre site sur GT METRIX et partagez nous vos notes via un commentaire sur ce post !
A vous de jouer !

Publié par
Plus d'articles pour la catégorie Autres, Conseils, Tutoriels
6 Commentaires Poster un commentaire
  1. Apr 16 2012

    Bonjour,

    Tout d’abord merci pour tous ces conseils.
    Toutefois, j’ai un soucis avec votre code à ajouter dans mon fichier .htaccess

    Lorsque j’ajoute celui-ci, la boutique en ligne est inaccessible (error 500)

    Pouvez-vous m’aider ?

    Reply
  2. Aug 30 2012

    Bonjour, il suffit de remplacer les apostrophes “ ” par des ” ” ( touche 3 )

    Reply
  3. Oct 4 2012

    Bonjour,

    Je sais pas , moi aussi ça a planter , le code ,

    Page Speed Grade: (87%) C
    YSlow Grade: (78%)

    Page load time: 7.43s
    Total page size: 1.56MB
    Total number of requests: 72

    http://gtmetrix.com/reports/www.bijouifique.com/lYz4atzu

    Par contre j’ai pas trop compris le système de spirit , faut que j’étudie ça

    Reply
  4. Dec 16 2012

    Bonjour,
    Voici le résultat:

    Page Speed Grade:(89%) B
    YSlow Grade: (68%) D

    Page load time: 56.20s
    Total page size: 4.46MB
    Total number of requests: 172

    http://gtmetrix.com/reports/www.infinity-style.com/WnSOv65B

    J’ai beaucoup de réglage à faire et ne comprend pas tout…

    Reply
  5. Apr 2 2013

    Merci de vos conseils, vous me faites partir du bon pied !

    Tiens, au fait, le bal des bons pieds, c’est le 14 juillet ;)

    Je développe un nouveau site, et je suis tombé sur votre page, et je me suis dit “Super intéressant !”. Essayons de mettre en pratique les conseils donnés ici. J’ai joué une petite journée (le premier avril…) avec GTmetrix.

    ATTENTION ! Mon site est en développement, encore vide, donc, j’ai seulement suivi les 10 conseils présentés ici. Merci de votre compréhension !

    Voici mes résultats :

    Page d’Accueil : 95 / 92

    http://gtmetrix.com/reports/zaming.fr/L9r0QGbu

    Page Catégorie (avec la barre AddThis) : 95 / 84

    http://gtmetrix.com/reports/zaming.fr/gNKCGogy

    Page Produit (avec la barre AddThis) : 97 / 83

    http://gtmetrix.com/reports/zaming.fr/XNpAk9z2

    Seul regret, je n’arrive pas à augmenter mon Yslow, car je n’arrive pas à ajouter les “Expires headers”.

    Reply
  6. May 11 2013

    Je suis arrivé à amélioré mon Yslow, maintenant, celui-ci dépasse la barre des 90 points !

    En fait, j’utilise SmartOptimizer :

    http://farhadi.ir/projects/smartoptimizer/

    Cependant, SO gère très mal les “Expires Header”.

    Il faut éditer le fichier “index.php” de SO et changer ce code-ci:

    if (!$settings['clientCache'] || !$settings['clientCacheCheck'] || !isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) || $_SERVER['HTTP_IF_MODIFIED_SINCE'] != $mtimestr) {
    if ($settings['clientCache'] && $settings['clientCacheCheck']) {
    header(“Last-Modified: ” . $mtimestr);
    header(“Cache-Control: must-revalidate”);
    } elseif ($settings['clientCache']) {
    headerNeverExpire();
    } else headerNoCache();

    Par ce code-là :

    // Expire Header pour JS et CSS réglés à 10 ans dans le futur :
    $now = time();
    $mtexpirestr = gmstrftime(“%a, %d %b %Y %H:%M:%S GMT”, $now + 31550600);
    if (!$settings['clientCache'] || !$settings['clientCacheCheck'] || !isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) || $_SERVER['HTTP_IF_MODIFIED_SINCE'] != $mtimestr) {
    if ($settings['clientCache'] && $settings['clientCacheCheck']) {
    header(“Last-Modified: ” . $mtimestr);
    header(“Vary: Accept-Encoding”);
    if ($file_type==’js’ | $file_type==’css’) {
    header(“Expires: ” . gmdate(“D, d M Y H:i:s”, $mtime + 315576000) . ” GMT”);
    header(“Cache-Control: max-age=315576000, private, must-revalidate”, true);
    }
    else {
    header(“Expires: ” . gmdate(“D, d M Y H:i:s”, $mtime + 315576000) . ” GMT”);
    header(“Cache-Control: max-age=315576000, public, must-revalidate”, true);
    }
    } elseif ($settings['clientCache']) {
    headerNeverExpire();
    } else headerNoCache();

    Voili, voilou !

    Et si vous voulez un max de perfs, mettez bien FALSE dans cette ligne du Config.php :

    //if you change it to false, the files will not be checked for modifications and always cached files will be used (for better performance)
    $settings['serverCacheCheck'] = false;

    Avoir un double A + A, ça en jette !

    Une page produit avec Barre AddThis + Tracker Clicky.com en Asynchrone = A + A = 96 + 92

    http://gtmetrix.com/reports/zaming.fr/CLN4IP0m

    Hey ! Émilien, merci de m’avoir mis la puce à l’oreille, maintenant, mon site va nettement plus vite ;)

    Reply

Leave a Reply to Olivier

(requis)
(requis)

Note: Le HTML est autorisé. Votre e-mail (ne sera pas publié).

S'abonner aux commentaires


+ 5 = 6