Optimiser le temps de chargement de votre site e-commerce

Je vous parlais il y a quelques temps de l’importance du temps de chargement en chiffres

et notamment « 32 % des utilisateurs [quittent un site Internet s’il est considéré trop lent] au bout d’une fourchette de temps allant d’une à cinq secondes. »

Mais alors, que peut-on y faire, comment savoir ce que l’on peut exiger de ses développeurs / de son agence.

Il existe des solutions :

  • Faire un simple test qui va décortiquer le chargement de votre page ;
  • Suivre l’évolution du temps de chargement ;
  • Demander à vos dévs d’être transparents sur les temps de génération avec du reporting ;

Faire un simple test qui va décortiquer le chargement de votre page

avec GTmetrix.com par exemple (ou WebPagetest.org qui permet de sélectionner une localisation en plus, Page Speed Insights by Google

Regardez surtout bien la timeline pour vérifier de quels éléments proviennent la lenteur du chargement.

Ne vous fiez pas trop à Google Analytics qui a mis à disposition une sous-rubrique dédiée à la vitesse du site dans la rubrique « contenu » mais qui ne semble pas vraiment fiable.

Actions / Réactions

Ce que ces outils mettront en avant sont souvent des problèmes mineurs. Ce qui est important (checklist à voir avec vos dévs) :

  • faire servir vos médias (images, Javascript et CSS) par un serveur à part
    • qui serve mieux les images (utiliser nginx par exemple)
    • sur un domaine ou sous-domaine différent (pour pouvoir spécifier que les cookies doivent se limiter au contenu et ne pas envoyer d’entêtes contenant les cookies aux fichiers médias)
    • tout cela permettra d’augmenter en plus le nombre de téléchargements parallèles sur votre site et donc améliorera de fait encore le temps de chargement
  • que la majorité de vos images de présentation (les éléments de décorations, les pictos, etc.) soient regroupées tdans des sprites (lire article sur Alsacreations) (cela diminue le nombre d’images à télécharger et donc le nombre de connexions nécessaires)
  • pour vos fichiers JS et CSS, utiliser l’outil minify
  • que le temps de génération de la page elle-même ne soit pas trop long, dans l’idéal de max 500ms, de façon plus réaliste jusqu’à 1 ou 1,5s.
  • tous les tags que vous pouvez avoir doivent être chargés après que la page soit affichée, cela évitera par ailleurs de bloquer le chargement de votre page lors de toute indisponibilité d’un de vos multiples tags. Des outils existent pour cela : Eulerian Tag Master et Lengow Tag Capsule par exemple

Suivre l’évolution du temps de chargement

GTmetrix vous propose une fois le test lancé un onglet « historique » qui vous permettra de voir l’évolution entre vos différents tests sur une même URL.

Google Webmaster Tools propose dans sa rubrique « Labos » une page « Performances du site », vouée à disparaître mais qui existe toujours, qui vous fournit un graphique bien utile.

Demander à vos dévs d’être transparents sur les temps de génération avec du reporting

Demandez à vos développeurs de pouvoir consulter à la demande le temps de chargement de telle ou telle page. Ce mode de reporting ne doit pas être activé en permanence, il nuirait à vos performances, mais vous devez pouvoir le visualiser à n’importe quel moment pour n’importe quelle page.

Ce reporting vous permettrait de voir par exemple le temps de génération de votre entête, du menu, du contenu du moteur d’affinage de votre page catégorie, de génération du listing produit, de génération du pied de page…

Plus que de vous permettre à vous de voir exactement ce qu’il se passe, c’est un formidable outil pour vos développeurs pour pouvoir identifier exactement où se trouve un point de lenteur sur telle ou telle page.

Vous pouvez ainsi leur dire « la page catégorie est trop longue, merci de voir d’où cela vient ». Premier réflexe qu’ils n’auraient pas sans cela, ils activeront cet outil et le rendront plus fin jusqu’à trouver le vrai point de ralentissement à optimiser.

Cette méthode de management vous permet de vous assurer que vos techniciens ont toute latitude pour effectuer les optimisations nécessaires.

Le problème vient bien souvent de requêtes non optimisées vers la base de données ou de requêtes imbriquées dans des boucles. Il faut à tout prix éviter cela. Faire intervenir des personnes extérieures pour auditer le code quand on a une équipe junior peut s’avérer bénéfique pour tout le monde.

Fasterize, la société qui promet de vous aider

pour ceux qui n’ont pas de grosses équipes ou de gros moyens techniques, Stéphane RIOS, un ancien CTO de chez RueDuCommerce, a lancé Fasterize, qui promet de vous aider en se mettant entre votre serveur et le web pour appliquer un peu d’optimisation avant de servir la page Web.

Le concept, vraiment intéressant est à découvrir ici : http://www.fasterize.com/fr

Pour les teckos

pour les afficionados de la technique, ceux qui aiment bien rentrer dans le lard du souci, ceux qui sont pas du genre à ne pas toucher à la mécanique de leur porsche, ceux à qui on ne la fait pas…

Petit article sur mon blog plus technique : http://www.astucesdewebmaster.com/architecture/mon-site-est-lent-que-faire-serveurs-dedies-391

 


Publié

dans

par

Commentaires

9 réponses à “Optimiser le temps de chargement de votre site e-commerce”

  1. Avatar de médaille chien
    médaille chien

    Point crucial pour le site d’un e-commerçant ! J’utilise page Speed, il fournit d’excellente informations, après il faut les mettre en pratique….c’est déjà moins facile ! ^^

  2. Avatar de Gebruik
    Gebruik

    Rien sur les problématiques de cache côté serveur ?
    Les solutions que vous proposez, même si elles ont un grand intérêt, ne suffisent généralement pas : mauvais usage bibliothèques JS (c’est assez fréquent de voir du jQuery, Mootools et une bouse faite maison sur le même site), images non sémantiques utilisées avec des balises (alors qu’elles auraient tout intérêt à l’être en CSS pour des raisons de cache), les sites e-commerce particulièrement sont des usines à gaz.
    Un travail de fond sur le caching et le pré-caching côté serveur offrent des résultats qui vont bien plus loin.

  3. Avatar de Romain BOYER
    Romain BOYER

    Alors, là on va chercher plus loin.
    Disons que si le code source est trop long à générer (ce qu’on voit donc avec les outils cités plus haut), et qu’on identifie des zones qui ont intérêt à être cachées, on peut le faire de différentes manières :
    – cache maison (ne pas recalculer le même contenu à chaque chargement de page et le conserver dans un dossier de cache pour le re-servir ensuite jusqu’à ce qu’il soit désuet)
    – cache intégré (smarty par exemple), qui intègre une composante de cache qui permet d’éviter de recalculer une partie du contenu
    – cache serveur (APC, eAccelerator)

    Je n’ai abordé le sujet qu’en surface, pour que des décisionnaires puissent prendre des mesures en cas de besoin, il était donc utile et indispensable de rester plus en surface.
    Une fois qu’on a identifié tel ou tel ralentissement, de façon précise, on peut laisser le soin aux dévs de se débrouiller pour trouver la bonne méthode d’optimisation.

    Par ailleurs, sur les bonnes méthodes (ne pas mettre du MT avec du JQuery), je n’ai pas croisé ce cas si souvent et il y a tellement de façons de mal faire qu’il est impossible de faire une liste de ce genre.

    Qu’entends-tu par « images non sémantiques utilisées avec des balises (alors qu’elles auraient tout intérêt à l’être en CSS pour des raisons de cache) » ?

  4. Avatar de Christophe
    Christophe

    J’ai une question toute bête…. D’où proviennent vos sources pour le chiffre avancé au début de votre article, c’est à dire les « 32% » d’internautes qui quitteraient un site dans un délai de 1 à 5 secondes.
    1 seconde, cela me parait vraiment très (trop?) bas!

  5. Avatar de Romain Boyer
    Romain Boyer

    je cite mon précédent article où je dis que ma source (qui a répondu en commentaire) n’a pas précisé ses sources

    précédent article : https://www.info-ecommerce.fr/1016/temps-de-chargement-et-retombees-sur-le-taux-de-conversion

    source originale : http://www.wikigento.com/latence/seo-vitesse-de-chargement/

  6. Avatar de Nicolas L.
    Nicolas L.

    En vrac, on pourrait ajouter :
    – utiliser du HTML 5 : on ne gagne pas en temps de génération, mais si c’est bien fait, on peu gagner en temps de rendu dans le navigateur. C’est toujours plus agréable d’avoir une page qui s’affiche d’un coup, plutôt que bloc par bloc
    – utiliser la dernière version du langage (souvent php sur le web) et des frameworks : chaque version est plus rapide que la précédente. Etre en PHP 5.4 est beaucoup plus rapide que d’être en 5.2 par exemple. C’est le temps de calcul qui y gagne, ainsi que la consommation mémoire des serveurs.
    – Reverse proxy : la solution ultime pour avoir une grosse tenue en charge et un temps de « calcul » hyper rapide. On peut citer Varnish par exemple.
    – Base de données : là encore, c’est souvent mysql qui est utilisé. Mais le moteur innodb de mysql 5.1 (standard sur du Debian par exemple) est bien moins performant pour des accès concurrents que des versions plus récentes. Et si en plus il est configuré correctement, il y a un levier important de gain de performance.

  7. Avatar de Romain Boyer
    Romain Boyer

    Merci pour ces précisions utiles pour les plus techniciens d’entre nous.

  8. Avatar de Benoit Gaillat
    Benoit Gaillat

    Sur Info-ecommerce j’ai codé les petites images en base64, ça marche pas avec tous les navigateurs mais ça génère 0 appels serveur et c’est pas technique ni difficile à mettre en place

  9. Avatar de Guillaume Ziegler
    Guillaume Ziegler

    En retour d’expérience, je dirais que le meilleur en efficacité/ temps passé est mod_pagespeed qui permet d’optimiser facilement les serveurs Apache, ce module est très complet et on en parle assez peu.

Laisser un commentaire

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

  • Magento Commerce, Le Guide complet de la solution
    Aujourd’hui, face à la pression croissante du marché des e-commerces, les entreprises cherchent des solutions leur permettant de générer plus de revenus et d’améliorer l’expérience client. le CMS Magento est une plateforme de commerce électronique extrêmement puissante qui offre un large catalogue de fonctionnalités avancées pour les commerçants souhaitant se démarquer. Dans cet article, nous […]
  • Les documents officiels d’une entreprise en France
    Lorsqu’on décide de créer une entreprise en France, il est important de savoir que cela nécessite certaines formalités administratives. En effet, il est obligatoire de fournir certains documents officiels pour pouvoir immatriculer sa société. Dans cet article, nous allons vous expliquer les différentes démarches à réaliser pour créer votre entreprise, ainsi que les documents officiels […]
  • C’est quoi le motion design ?
    Ont dit souvent qu’une image vaut mille mots. Mais alors que dire d’une animation ? Du mouvement, des graphiques et des images animées : la combinaison parfaite pour créer un projet unique et expliquer n’importe quel sujet. C’est ça le motion design. Pourquoi devriez vous introduire le Motion Design dans votre arsenal de techniques de […]
  • Comment créer une boutique en ligne avec succès ?
    Face à l’explosion des ventes en ligne et de la création de nouvelles boutiques chaque jour, la question qui se pose est : comment créer une boutique en ligne avec succès ? En effet créer sa propre entreprise sur internet ne nécessite pas forcément d’importants investissements mais demande par contre quelques bonnes connaissances. Il faut […]
  • Logistique : pourquoi et comment travailler dans ce secteur ?
    La logistique désigne l’ensemble des activités qui permettent de planifier, d’organiser, de contrôler et d’exécuter les opérations liées à la gestion des flux de biens et de services. Elle englobe plusieurs étapes dont les principales sont le transport, le stockage, la manutention, la distribution, le conditionnement et le traitement des retours. En raison de son […]
  • Semrush : la solution pour maitriser de A à Z son SEO
    Si vous faites du e-commerce, voir même si vous êtes « juste » éditeur de site web ou webmaster, vous avez certainement touché un peu au SEO, le référencement naturel. Que ce soit vous même ou avec l’aide d’une agence SEO , ce canal d’acquisition est devenu réellement indispensable au fur et à mesure des années. Indispensable […]
  • Big Commerce augmente (lui aussi) ses tarifs !
    C’est une réaction qui fait peu de surprises dans le monde de l’e-commerce mais qui ne va quand même pas plaire aux principaux intéressés. BigCommerce, une des solutions concurrente à Shopify, Prestashop, Wizishop et autre, annonce que ses prix vont se voire augmenter dès maintenant pour tous ses marchands. Pourquoi ce n’est une surprise pour […]
  • Play To Earn (P2E) : définition et fonctionnement
    L’univers du gaming connaît une grande révolution depuis quelque temps. On observe une montée en puissance des jeux qui donnent la possibilité de gagner de l’argent en s’amusant. Parmi les jeux qui ont le vent en poupe actuellement, on retrouve le Play to Earn. Plus connu sous l’abréviation P2E, le Play to Earn est ce […]
  • NFT : définition et objectif
    Pour ceux qui sont familiers à la cryptomonnaie, il est facile d’adopter le NFT et son mode de fonctionnement. Cette technologie est répandue depuis 2021. Elle est avantageuse aux artistes, aux joueurs de jeux vidéo et à divers investisseurs. Elle a plusieurs objectifs qui visent à améliorer l’environnement de la crypto technologie. Les amateurs de […]
  • NFT : Les Top 10 les plus chers
    L’année 2021 a connu une croissance massive de la technologie blockchain et des crypto-monnaies. Ce phénomène a été observé au niveau du capital du marché et du développement des différentes infrastructures en rapport avec ces deux domaines. La montée en flèche des Jetons Non Fongibles (NFT) a attiré l’attention suite aux ventes historiques enregistrées sur […]
  • Comment créer et vendre un NFT ?
    Le NFT signifie en anglais ‘’Non Fungible Token’’ et en français ‘’Jeton Non Fongible’’. Il s’agit d’un bien numérique non irremplaçable par un autre, ce qui n’est pas le cas avec les billets d’argent. Il se décline en plusieurs formes dont les tweets, œuvres d’art numériques et noms de domaines. Ces derniers sont achetés par […]
  • Quelles cryptomonnaies risquent d’exploser d’ici 2025 ?
    Alternatives aux monnaies émises par les banques pour certains, outils de spéculation pour d’autres, les cryptomonnaies sont devenues en peu de temps une technologie omniprésente dans notre quotidien. Entre 2020 et 2021, Bitcoin a atteint des chiffres record. Des personnes qui avaient fait l’acquisition de cette monnaie plus tôt se sont retrouvées du jour au […]
  • Akeneo : Le PIM qui est en train de conquérir le E-commerce
    Aujourd’hui, nous nous retrouvons face à un monde constamment connecté, qui exige une gestion optimale des informations et une expérience produit de qualité. Surtout dans un monde Omnicanal. Pour répondre à ces besoins en constante évolution, il est souvent nécessaire de centraliser les informations produits au sein d’une même interface afin de les diffuser de […]
  • NFT : Pourquoi les acheteurs dépensent-ils des millions ?
    Sur internet ou ailleurs, vous avez certainement entendu parler des NFT. Ce sont des images qui peuvent paraitres banales mais dont le prix de vente atteint facilement des sommes à 7 chiffres. Les frais des transactions concernant les NFT sont tout aussi impressionnants. Nombreux sont ceux qui ne comprennent pas comment ce système fonctionne. Pourtant, […]
  • Avis Wizishop : Que penser de Wizishop en 2023 ?
    Explorer Wizishop : Avis clients et engagements offerts pour la création de boutiques en ligne Face à l’explosion de l’activité et des besoins en matière de commerce en ligne, Wizishop s’est imposé ces dernières années comme une solution française complète pour la création de boutiques en ligne et la vente de produits. Mais avant de […]
  • Play To Earn (P2E) : Lesquels sont les meilleurs ?
    Les cryptos de la blockchain gaming ont révolutionné l’univers vidéoludique et sont désormais les options du moment. Ce qui a favorisé la mise en place des jeux Play To Earn (P2E). En fonction des performances affichées par chaque joueur, ceux-ci obtiennent des récompenses en crypto-monnaie et en NFT. Pour s’offrir des expériences de jeu Play […]
  • Quelles sont les meilleures plateformes d’échange de Cryptomonnaie ?
    La crypto-monnaie est un système de paiement numérique devenu populaire en 2022. Des plateformes ont été créées pour faciliter les échanges dans l’univers de la cryptomonnaie. Appelées plateformes de crypto monnaies ou échange crypto, les plateformes d’échanges ou exchanges sont des marchés centralisés. Elles permettent aux utilisateurs de faire du trading, d’acheter et de vendre […]
  • Shopify Winter édition propose plus de 100 nouveautés !
    C’est la deuxième fois déjà que Shopify nous propose un « pack » de nouvelles fonctionnalités pour optimiser et booster son site e-commerce. La première fois, c’était en été 2022 avec la Shopify summer Edition. Cet hiver, Shopify remet le couvert avec la winter édition et nous propose plus de 100 nouveautés à venir profiter directement, sans […]
  • Où trouver les meilleures informations sur les Cryptomonnaie ?
    Le secteur de la crypto-monnaie fait partie des plus évolutifs. Il souffre du manque de stabilité lié à cette devise elle-même. La diversité des crypto-monnaies n’est pas sans conséquence face à cette instabilité. Le cours du bitcoin peut atteindre des sommets aujourd’hui, le lendemain, c’est Ethereum qui chute. Il ne faut pas oublier que les […]
  • Monitoring site web, comment faire et pourquoi ?
    Vous avez un site internet ou un site e-commerce et vous cherchez à savoir si il est en ligne suffisamment longtemps, si il n’y a pas de coupure ou si l’hébergement tient la charge ? Alors il vous faut un outil de monitoring de site ! Que votre site soit un site e-commerce, un site […]
  • Headless, tout comprendre de ce nouveau phénomène
    Vous avez entendu parler de « Headless » mais le terme ne vous revient pas ? Vous ne savez pas comment définir le headless ni ses avantages et ses inconvénients ? Difficile donc de savoir si le headless e-commerce est fait pour vous ?Alors voici toutes les explications et détails pour comprendre de A à Z ce […]