juin 03

Pourquoi un site de E-commerce se doit de charger en moins d’1,5 seconde ?

Tout simplement parce que Google possède plus de 90% de part de marché et que ses dirigeants ont décidé d’inclure la vitesse de chargement parmi plus de 200 facteurs pris en compte dans le référencement naturel.

Certes, ce nouveau facteur ne sera pas plus important que la pertinence du contenu, mais il va petit à petit monter en puissance.

Cette transformation est logique, nos environnements de travail et personnels sont de plus en plus connectés, toutes les générations travaillent maintenant sur Internet, pourquoi devrions nous attendre, dans une société où l’instantané à pris le pouvoir ?

Depuis que l’homme est équipé de pouces opposables, d’une connexion ADSL et d’une culture Internet, il est impatient.

Pourquoi cette limite d’1,5 seconde ?

Quand votre site charge en moins de 1,5 seconde, il est plus rapide que 90% des autres sites actuellement connus de Google. Il est donc difficile à ce jour d’infliger une lourde pénalité à ceux chargeant en plus d’une seconde et demi.

Par contre, si vos pages charge en moins d’1,5 seconde, il peut vous favoriser, de la même façon que si votre site est très propre en terme de HTML ou bien conçu en terme de mots clefs. A l’avenir, ce facteur va se renforcer puisque les sites vont en tenir compte et charger plus vite.

1,5 seconde, c’est le temps que Google a choisi comme référence.

Dans les graphiques mis à disposition par Google, la délimitation est claire :

graph_temps_google
À moins d’1,5 seconde, vous êtes dans la zone verte, vous êtes rapide. Au-dessus d’1,5 seconde, vous êtes dans l’équipe rouge, vous êtes lent. Nous vous y trompez pas, aucun mot, aucun chiffre chez Google n’est utilisé par hasard. Le temps d’1,5 seconde découle de plusieurs études précises, parmi lesquelles nous pouvons déjà citer celle-ci ou celle-ci.

Et quand le mot « Lent » est choisi par Google, il a un sens fort.

Que perd-on précisément ?

De très nombreuses autres  études ont été menées et elles sont toutes formelles, être lent, c’est vendre moins, décourager l’utilisateur, freiner son business.

Les études donnent parfois des résultats différents. Certaines annoncent 2,8% de perte de chiffre d’affaire pour 1 seconde de plus de chargement, -4,3% de CA pour 2 secondes.

Amazon avait déjà fait le constat auparavant : 0,1s de plus de temps de chargement en plus leur coutait 1% de chiffre d’affaire.

Eric Schuman (Microsoft) et Jake Brutlag (Google), ont réalisé une étude et fait une conférence à ce sujet également. Il en ressort le même principe de fond mais certaines subtilités supplémentaires apparaissent. Entre une page qui charge en 50 ms et un autre en 2 secondes, le revenu par clic baisse de 4,3%, la satisfaction baisse de 3,8% et le temps avant le clic suivant augmente de 3,1s.

business & chute

Les dirigeants de Google ont d’ailleurs la volonté   exprimée de faire passer l’internaute de la page   de recherche au site de destination de la manière  la plus fluide possible. Le chargement, le  changement de monde, doit être le plus  imperceptible possible, « comme si l’on  tournait la page d’un livre ».

La publicité en ligne (SEM) et notamment les adwords sont également moins efficaces lorsque le site est lent, comme vous pouvez le lire dans l’aide de Google ici.

Phil Dixon de Shopzilla a pour sa part constaté, en passant le temps de chargement de son site de 7s à 2s :

  • 25% de pages vues en plus
  • 7 à 12% de ventes en plus

A l’inverse, quand le temps augmente, l’image de marque se dégrade elle aussi car les utilisateurs se plaignent et parlent entre eux, d’autant plus depuis l’avènement des réseaux sociaux.

Pourquoi ces pertes ?

Le cerveau humain a plusieurs « rythmes ».

cerveau

  • De un à cinq dixième(s) seconde : C’est la limite à laquelle nous estimons inconsciemment avoir une action immédiate sur ce que l’on manipule. Word, MacOS ou Windows ou encore l’interface d’un téléphone doivent réagir dans cette zone pour être apprécié. Le cerveau interprète, commande, reçoit, comme si l’outil utilisé était un prolongement du corps qu’il contrôle directement.
  • De cinq dixièmes à 1 seconde : La perception se modifie, nous n’avons plus l’impression de contrôler « directement ». Le cerveau assimile l’information et n’a plus l’illusion de pouvoir contrôler l’interface comme il contrôlerait un membre du corps.
  • De 1 à 5 secondes : C’est le temps habituel de chargement des sites. L’internaute l’accepte en générale relativement bien. Si un chargement doit durer plus de 5 secondes, il est intéressant d’occuper l’espace visuel de l’internaute pour garder son attention (une petite hélice, une barre de chargement, un pourcentage). Garder l’attention plus de 10 secondes sans occuper un des sens est illusoire.
  • À partir de 10 secondes : Le cerveau n’attend plus la réponse et vagabonde. Le site visité n’a plus l’exclusivité de l’attention de l’internaute. Celui-ci se demande s’il ne va pas aller sur un autre site concurrent, s’il a payé ses impôts, si le webmaster lui envoie les pages par la poste ou à dos de hamster, bref, la vente ne se fera probablement pas.

L’âge de l’internaute et sa culture internet changent la donne.

Les adolescents qui n’ont jamais réellement connus l’attente avant d’avoir un résultat, tout au moins sur l’informatique. Le temps à laquelle la réponse est reçue, après que la demande ait été envoyé, est d’une importance colossale mais il doit être d’autant plus réduit que le potentiel acheteur est jeune.

Une grand mère attendra 20 secondes la page Web du site avec les gentils dauphins pour réserver ses vacances. Hugo, du haut de ses douze ans, au delà de la deuxième seconde, il se demande si les pages du site lui sont acheminé par pigeons voyageurs ou à dos de hamster.

Comment mesurer le temps de chargement ?

Vous pouvez mesurer la rapidité de chargement de votre site avec ces deux extensions Firefox :

Ou avec ce site

Il est également possible de suivre l’évolution de la vitesse de chargement de son site dans les outils Google appelé « Webmaster tools ». Si vous n’avez pas de compte, créez en un et si vous en possédez déjà un, allez dans l’onglet Labo puis dans « Performances du site ».

Pourquoi les sites ne chargent pas plus vite ?

Avec le matériel toujours plus puissant et les connexions toujours plus rapides, la question se pose en effet.

Les sites qui ont vus le jour il y a dix ou quinze ans chargeraient très rapidement aujourd’hui, bien plus rapidement qu’à l’époque. Les connexions vont plus vite, nous sommes passés à l’ADSL du coté de clients et aux connexions très haut débit du côté des serveurs.

Alors avec de tels progrès, pourquoi un site prend-t-il toujours 4 à 20 secondes pour charger ?

Les machines ont évolué des deux coté également. Les ordinateurs sont plus puissants et les serveurs ont vus leurs capacités de traitement multiplié par plus de 1000. Par contre, la vitesse de la lumière n’a pas progressé. Elle met toujours plusieurs dizaines de milliseconde à traverser l’atlantique, de même, les connexions internet ont aussi une limite de progrès, tout comme les protocoles qui soutiennent internet. Tous ces facteurs font que l’ensemble a progressé de manière non homogène.

Un serveur 1000 fois plus rapide de nos jours est également 100 fois plus sollicité qu’avant. 3000 visites par jours il y a 15 ans, c’était un « grand site », aujourd’hui, c’est un trafic modeste.

Composition du temps de chargement d’une page

Le temps de chargement d’une page est composé de plusieurs facteurs :

  • L’initialisation de la connexion et la résolution du nom de domaine
  • Le temps d’interprétation des scripts php / asp
  • Le temps de chargement des éléments par le réseau
  • La recherche des informations en bases de données
  • Le formatage d’une sortie en HTML
  • Le délai d’interprétation et d’affichage du navigateur

C’est un résumé puisque le temps est en fait découpé en plus de sous sections mais nous entrerions dans trop de détails.

Il y a quelques années, j’avais proposé le schéma suivant, résumé lui aussi :

latence-2

Les performances des connexions et du matériel ont donc évolué mais au final, les programmes aussi. Les sites web modernes n’ont plus rien à voir avec ceux d’il y a quinze ans et ils ont apportés une souplesse sans égale au E-commerçant.

Gestion de catalogue avancée, page dynamique et agréable à regarder, outils d’administration poussés, les sites modernes sont définitivement plus efficaces. Cette efficacité a été apportée, notamment, par des langages de programmation plus évolués dont PHP et par l’usage de base de données, dont Mysql.

De plus les langages ont évolué vers de l’objet ce qui les a aidé à devenir plus flexibles et efficaces mais en contrepartie, toutes ces améliorations ont un coût en terme de performances.

Ces complexités et améliorations fonctionnelles additionnées nécessitent donc plus de puissance. Les graphismes et photos plus lourds ont, eux, demandé plus de vélocité à nos connexions.

Il faut également prendre en compte que la qualité du code source généré est inégale. Deux sociétés peuvent réaliser le même site et l’un sera optimisé tandis que l’autre sera lent, c’est une question de capacité technique et d’expérience. De la même façon tous les sites ne sont pas à égalité devant le temps de chargement, de part leur conception ou même leur usage.

Sur un site comme Amazon, 90% du surf se fait depuis  le moteur de recherche et il se doit d’être rapide sur ce point. Sur un autre site ce sera la « vitrine » virtuelle et son agencement qui déclencheront les ventes et ces deux approchent n’ont pas le même coût en terme de temps de chargement.

La technologie également joue énormément et enfin la capacité de l’infogérant à optimiser votre infrastructure et son usage.

La vitesse n’est pas tout

La disponibilité du site et la réactivité de l’infogérant en cas de soucis sont également des facteurs majeurs de succès.

Bien que l’ingénierie informatique et la programmation Web ne soient plus des secrets maîtrisés par un très petit nombre, les sites sont devenus de plus en plus complexes et les accidents peuvent arriver.

Sur un serveur, un disque dur, une barrette mémoire ou un autre élément technique peut céder. Du côté du site web, un élément logiciel peu avoir un défaut ou engendrer une erreur. Dans les deux cas, un internaute peut accepter un court délai d’indisponibilité mais ceci ne doit pas se prolonger.

Une interruption de plusieurs heures pendant les soldes peut être problématique, les ventes de fin d’année ou une animation commerciale. La perte de chiffre d’affaire et d’image de marque peut devenir très sensible.

Un infogérant spécialisé dans le E-commerce et une Web Agency sont des alliés précieux dans l’exploitation d’un site commerçant.

En conclusion

La rapidité de chargement joue donc 3 fois :

  • sur l’expérience utilisateur
  • sur le référencement naturel
  • sur l’efficacité de la SEM (mots clefs sponsorisé dans les moteurs de recherches)
  • sur le chiffre d’affaire généré

Il est donc clair que ce facteur est critique pour un site de E-commerce.

Philippe Humeau, NBS System, hébergement et sécurité du E-commerce.

écrit par Philippe Humeau \\ tags: , , , , ,

mar 23

Aujourd’hui, je prêche pour ma paroisse ! Ayez un bon hébergeur !
Pourquoi ? Entre autre pour : le temps de réponse…

Que coûte t’il ? Est-ce qu’il fait une réelle différence dans l’E-commerce et si oui, à quel point, quand, pourquoi ?

Sans vouloir répondre à toutes ces questions exhaustivement, le retour d’expérience des grands sites, les études psychologiques et les constats peuvent permettre de quantifier.

L’impatience de l’age

Depuis que l’homme est équipé de pouces opposables, d’une connexion ADSL et d’une culture Internet, il est impatient. C’était surement vrai avant quand les marquis courraient dans les jardins royaux à la suite de croupes rebondies, mais c’est d’autant plus vrai pour les jeunes vingtenaires ou les adolescents qui n’ont jamais réellement connus l’attente avant d’avoir un résultat, tout au moins sur l’informatique. (pour le reste, les femmes se chargeront d’enseigner la patience aux jeunes mâles)

Le temps à laquelle la réponse est reçue, après que la demande ait été envoyé, est d’une importance colossale mais il doit être d’autant plus réduit que le potentiel acheteur est jeune.

Grand mère attendra 20 secondes la page Web du site avec les gentils dauphins pour réserver ses vacances. Hugo, 14 ans et toutes ses dents, au delà de la deuxième seconde d’attente, il se demande si les pages du site sont acheminé par pigeons voyageurs ou à dos de hamster.

Les 4 temps du cerveau

un à cinq dixième(s) seconde : C’est la limite à laquelle on estime inconsciemment avoir une action immédiate sur ce que l’on manipule. Un applicatif lourd (riche), une interface graphique d’OS ou de téléphone doit réagir dans cette zone pour être apprécié. Dès les 5/6 dixième, l’esprit perçoit un léger ralentissement entre les ordres envoyés, l’action des mains et le résultat perceptible visuellement à l’écran. C’est la différence de réactivité entre l’interface d’un Iphone et celle d’un autre tactile, c’est également la différence de réussite du produit ! Le cerveau interprête, commande, reçoit, comme si l’outil utilisé était un prolongement du corps qu’il contrôle directement.

cinq dixièmes à 1 seconde : La perception se modifie, on est plus face à un système « temps réel », on ne contrôle pas directement. Le léger décalage entre la demande et la réponse est présent, c’est le contrôle  directe au bout du doigt qui n’existe plus. Le cerveau assimile l’information et n’a plus cette illusion de pouvoir contrôler l’interface comme il contrôlerait un membre du corps.  Ceci étant, sur le Web, l’internaute est habitué à ce délai et le cerveau est encore en attente de la réponse, pour peu de temps cependant.

2 à 10 secondes : Le cerveau n’attends plus la réponse directement, il vagabonde déjà à d’autres pensées. Le site visité n’a plus l’exclusivité de l’attention de l’internaute. Il se demande s’il ne va pas aller sur un autre site concurrent, si il a payé ses impots, si le webmaster lui envoie les pages par la poste et si son ticket de parking est toujours valable. Parlant de parking, il va vérifier à la fenêtre et en revenant appel sa femme pour savoir s’il doit aller prendre les gremlins à la crêche ce soir, bref, la vente ne se fera pas.

10 secondes : Quand on parle de se faire servir un sandwich, c’est un record, sur le Web c’est une impasse. A moins d’avoir l’exclusivité du produit ou de l’info, plus des deux tiers des internautes sont envolés. Si un chargement doit durer ce temps, il est indispensable d’occuper l’espace visuel de l’internaute pour garder son attention. Une petite hélice qui tourne, une barre de chargement, un pourcentage, qu’importe tenter de garder l’attention plus de 10 secondes sans occuper un des sens est illusoire.

Qu’y perd-on ?

Le chiffre de « -1% de CA par 0,1 s de latence » qui est retenu depuis l’étude d’Amazon est affolant !

La homepage d’amazon aujourd’hui fait 491 Ko, ma liaison, mon browser, mon os et tout ce qui contribue à la vitesse ou non du chargement font que j’ai visuellement une réponse en 2,2 seconde et un page complètement chargée en 6,2 secondes.

Reprenons le calcul d’Amazon : 0,1 seconde de plus, -1% de CA.

0,1 seconde sur les 2,2 seconde de temps de réaction visuel, c’est 4,5% du temps global avant que l’oeil ne perçoive un changement. Si on multiplie simplement ces valeurs par 5, pour une demi seconde, on perd 5% de CA ? Pour 2 secondes c’est 20 % de CA qui s’envolent ?

Mais la perte va bien au delà de l’internaute qui se désintéresse.

La double peine

Si le site est indisponible, lent ou inconstant dans ses performances, non seulement l’internaute risque de s’en désintéresser mais en plus, les moteurs de recherche vont le pénaliser.

C’est vrai pour les adwords de google, pour le référencement naturel également (voir la page de google sur ce point), mais bien sûr pour Yahoo aussi (cf Yslow :) ) et pour de nombreux autres.

Être lent ou indisponible va donc « froisser » les Bots qui vont « noter » le site un peu moins favorablement.
Du coup le référencement naturel en souffre aussi et les clients trouvent moins facilement le site et ses produits.

La perte quand un site rame n’est donc pas que de l’image et des commandes mais également de la visibilité.

De très nombreux facteurs influent sur la rapidité

Et un certain nombre sont incontrôlable par le commerçant ou l’hébergeur, comme notamment les performances de la machine cliente du site et de la connexion ADSL du client. Mais un internaute dont la machine est lente le sait. Il n’en voudra donc pas spécialement au site s’il n’est pas plus rapide que les autres.

Par contre, il est possible d’influer sur de nombreux paramètres :

  • Avoir un template léger et une homepage qui ne dépasse pas les 600/700 Ko
  • Charger rapidement des éléments visuels, le temps que le reste arrive
  • Les fonctions lourdes en temps de chargement doivent être envoyées à la fin
  • Le site doit être optimisé (la taille des images, des fichiers etc…)
  • L’hébergeur doit avoir un bon peering vers les fournisseurs ADSL (liens rapides avec les autres FAI)
  • Il faut vérifier que des inclusions de codes ou contenus hébergés ailleurs ne ralentissent pas le chargement
  • La bande passante doit être suffisante pour ne pas faire de goulot d’étranglement
  • Les serveurs de l’infrastructure, tous, du Rproxy à la base de données en passant par le frontal web doivent avoir une puissance suffisante
  • Les réglages optimaux en fonction de la topologie du site et de sa fréquentation doivent être appliqués sur tous les éléments et services participant à l’hébergement du site
  • Etc…

écrit par Philippe Humeau

mar 16

Bon j’en ai un peu marre du sujet « sécurité Magento » pour le moment. On en a beaucoup parlé, on a apporté des idées et des solutions mais j’aimerai repartir sur autre chose. C’est vrai quoi, j’ai fait 10 ans de test d’intrusion, pour me changer les idées, je pars sur du web commerce, un petit retour au système & réseau, bref on s’aère le neurone et là, hop, XSS, CSRF etc…

Donc, aujourd’hui : les inclusions de contenus tiers !

Un petit schéma pour aider à comprendre (quoique… J’ai jamais été très fort en dessin. J’ai été en classe de dessin parce que la plus belle nana du collège faisait dessin, pas réellement pour mon talent en fait). Bref, je m’égare, donc ci-dessous, un site standard, au milieu. Au dessus un bandeau de pub qui vient d’une régie publicitaire, à droite un flux RSS et en bas, c’est de l’invisible, ce sont des inclusions dans le code source des pages.
Lire la suite »

écrit par Philippe Humeau \\ tags: , ,

jan 21

Aujourd’hui un petit topo sur la latence. Première question simple : qu’est-ce donc ? D’où provient le temps d’attente, de quoi est-il composé ?

Quand je clique sur une page, entre le temps de mon action sur la page et le moment où je reçois la donnée demandée, il se passe une cascade de choses. Quel % de temps peut être attribué à chaque élément, ping de la liaison xDSL du client, chargement d’Apache, traitement php/zend, actions Magento, recherche dans la base de données, etc… ?

D’après Amazon, si 0,1s de latence me coûte 1% de CA et c’est loin d’être linéaire.

A 10 secondes de ping, c’est plus dans les 95% de CA qu’on perd ! La latence c’est un peu le pire ennemie des E-commerçant et de leurs clients. C’est le moment de flottement où je pense à autre chose qu’à acheter, où je me dis « il est lent ce site » où je me déconnecte etc…

Dans le cas de Magento, qu’est-ce qui pèse ?

Comment la diminuer globalement cette latence : où agir ?

Voici un premier schéma qui montre une architecture d’hébergement :

archi-serveur-complete

Ce schéma montre plus d’un point de vue logique les enchainements entre les serveurs, ce qui permet de mieux comprendre le suivant : Lire la suite »

écrit par Philippe Humeau \\ tags: ,

jan 10

Mais oui, pourquoi au fait ?

Voici une analyse philosophico-technique d’une question existentielle qu’on se pose tous : « Pourquoi Magento est un gouffre de puissance ? »

En premier lieu, Magento dépend d’un autre framework : Zend. Et ce n’est pas le seul à être gourmand, les Ruby on Rail et autres sont aussi des affamés.

Pour revenir à Magento, c’est un framework de deuxième niveau, de l’objet d’objet. Or, revenons aux racines, à l’époque ou Stroustrup, Kernighan et Ritchie nous inventent l’objet et le C++. L’objet c’est une méthode de programmation pensée pour factoriser le code source, faciliter sa réutilisation ainsi que permettre à des humains de manipuler des concepts plus agréables que des (char *), des pointeurs et des librairies à rallonge.

Donc en gros, à partir du C, le C++ a été créé et d’autres langages ont suivi le même processus.

Mais… Car il y a (toujours) un mais, cette structuration objet est plus « lourde ». Simplifier, en général ca veut dire qu’en dessous quelqu’un a fait quelque chose de plus complexe pour vous simplifier la vie. Voyez ca comme un canard, calme en surface mais qui pédale dur en dessous. En objet c’est pareil, la simplicité pour l’humain a impliqué un code plus lourd à digérer pour la machine et puis si on fait des objets c’est bien pour développer des programmes plus utiles, complexes, effiaces etc… La programmation objet a donc une tendance naturelle à compliquer les choses pour la machine mais le compilateur, quand il est performant, réduit tout cela à un assembleur très comparable. Une même fonction en C et en C++ va fournir un code assembleur assez comparable pour que les performances soient proches. Le compilateur est plus complexe, il met plus de temps à compiler, mais l’éxécution du binaire ne sera qu’imperceptiblement plus lente, ce compilateur « gomme » donc la lourdeur engendrée par l’objet.

Résultat : c’est tout bénéfice, l’humain manipule des objets plus agréables et plus utilisables, se lance dans le fonctionnel au lieu d’avoir les mains dans le camboui (ceux qui ont fait du x86 savent de quoi je parle), la machine interprete une fois un peu plus longtemps avec son compilateur et au final, quand le programme se lance, il est aussi rapide !

Oui mais……… PHP n’est pas un langage compilé. C’est un langage interprété. Et la complexité supplémentaire pour la machine qui était gommée par le compilateur ne l’est plus. A chaque interprétation, on reprend le même code, on replonge dans les niveaux d’abstraction objets et on force le CPU a interpréter tout cela. Alors avec juste du PHP « non objet » ca allait encore. Avec du PHP 5, on attaque la notion d’objet, on s’alourdit un peu mais ca tient toujours la route. Avec Zend, c’est déjà nettement plus consommateur de ressources, on est sur une couche d’abstraction supplémentaire et ca comme à se sentir. Lire la suite »

écrit par Philippe Humeau \\ tags: , ,

jan 09
La paramètres d’un site Magento qui font vraiment changer les performances :
  • complexité de l’interface Web
  • complexité / historique dans le back office
  • taille de base
  • nombre d’articles et de sous catégories
  • version de magento
  • qualité du code & optimisation de celui-ci
  • réglages des composants de cache
  • réglages des LAMP
Il faut donc très fortement adapter les réglages des caches (APC, magento interne, zend), d’apache, de mysql, de php et adapter son infrastructure technique également en fonction de ces paramètres et du site considéré.
En résumé, je conseil :
- Opensta pour simuler le trafic, on approcha à ~10% de la charge réelle
- L’architecture Blade pour l’hébergement, avec des coeurs sur vos web frontaux si la présentation est exigeante et de la ram pour la BDD si il y a de nombreux articles
- Bien étudier les optimisations à mener, avec les 18 recommandations de notre guide, on a gagné un facteur 2,8 en rapidité/capacité d’accueil sur certains sites


écrit par Philippe Humeau \\ tags: ,

jan 06

La performance d’un site est vitale pour ses ventes ou sa consultation, deux géants célèbres ont fait des études sur ce point : Google et Amazon. Le premier a déterminer que si sa latence augmentait de 0,5s, il perdait 20% de son trafic et le second a déterminer qu’en répondant en 100 ms de plus, il perdait 1% de CA !

Il est très complexe de dimensionner les serveurs nécessaires et ajuster les paramètres systèmes afin d’être sûr d’obtenir une navigation agréable pour un grand nombre d’utilisateurs. L’empirisme commence à bien fonctionner avec le recul de plusieurs sites hébergés mais je pense qu’on peut faire mieux et commencer à structurer des calculs plus scientifiques. Lire la suite »

écrit par Philippe Humeau \\ tags: ,