Tag : performances

eCommerce : Comment mettre en place le Progressive Web Apps en 7 étapes

par Romain Boyer - Il y a 4 semaines

Les Progressive Web Apps sont pour moi un tournant majeur de la conception des sites Internet. Un tournant un peu compliqué et qui nécessite pour beaucoup de se réinventer.

Je vous ai déjà fait un topo sur l’importance des PWA pour le eCommerce, je ne vais pas le refaire et je vous invite à le lire ou à le relire avant la lecture de cet article, beaucoup plus focalisé sur le « how to ».

Quand puis-je dire que mon site/mon application (cela veut dire exactement la même chose !) est PWA ?

Il convient de rappeler comment Google (créateur de cette appellation), caractérise la chose. Sont appelées des Progressive Web Apps des applications qui sont :

  1. Progressives (pour chaque utilisateur, peu importe le navigateur)
  2. Responsive (adaptées au support de l’utilisateur)
  3. Indépendantes de la connectivité (doivent pouvoir marcher partiellement sans connexion)
  4. « App-like » (claires, fluides et utilisables)
  5. Fraîches (à jour)
  6. Sécurisées (impossible de faire sans HTTPS de toute façon)
  7. Découvrables (manifeste – = informations sur l’appli – défini de manière à permettre d’identifier des informations utiles pour les robots)
  8. Ré-engageables (doivent utiliser les fonctionnalités comme le push pour faire revenir les utilisateurs)
  9. Installables (icône sur l’écran d’accueil)
  10. Partageables (faciles à partager via une URL)

Etapes d’implémentations que je vous suggère

J’ai identifié des étapes qui me semblent être de bons échelons, pour mettre en place progressivement l’ensemble des possibilités proposées par PWA.

Soyons clair, je manque comme la plupart d’entre nous d’expérience sur ce sujet, je vous propose donc cette feuille de route qui me semble logique, et que je vais aussi tenter de suivre de mon côté.

Si vous avez un avis pour enrichir le mien, n’hésitez pas, cet article n’est pas fait pour être figé, il devrait idéalement évoluer dans le temps grâce à vous ! (promis, je vous mentionnerai explicitement avec les modifs/ajouts qui me semblent intéressants !)

Dans cette feuille de route, chaque étape doit être un gain pour vous :


1. Installer le HTTPS (en profiter pour le HTTP/2)

Pour info ou rappel, Google a annoncé commencer à impacter l’absence de https sur votre positionnement, donc le plus tôt est le mieux.

Concernant le HTTP/2, une image valant mieux que de longs discours, je vous laisse admirer le schéma ci-contre, il est très explicite, vous voyez comme HTTP/2 permet de paralléliser les chargements plutôt que de les faire à la chaîne, il permet en fait de mieux exploiter les nouvelles capacités de bande passante permises par la plupart des connexions aujourd’hui.

2. Mettre en place les services workers pour pouvoir gérer les notifications push grâce au cloud messaging de Google

Là on entre dans la magie des nouveaux usages encore trop méconnus. Vous en rêvez mais vous n’osez pas, pensez que c’est trop compliqué ou trop cher.

C’est en réalité assez simple et gratuit.

En gros :

  • vous mettez en place l’utilisation des « services workers », un nom barbare pour une fonctionnalité cachée dans votre navigateur, qui sert à pas mal de choses et ici en particulier à recevoir et transmettre à qui de droit des notifications push
  • vous utilisez un service de push, par exemple Google Firebase Cloud Messaging (FCM), PushEngage, Axengage, qui demandent pour vous l’autorisation à l’utilisateur de communiquer directement avec son navigateur
  • Vous sollicitez cet outil, qui transmet une instruction au navigateur ou au smartphone, qui transmet l’instruction à votre code
  • Vous pouvez donc brancher un système de notification maison sur le navigateur ou sur le smartphone

3. Commencer à utiliser le cache persistant côté navigateur

Aïe, je décline toute responsabilité, c’est tout ce que j’ai envie de dire à ce sujet qui va piquer dans les chaumières.

En gros, tout ce qui ne change pas trop régulièrement peut être poussé dans le cache offline du navigateur. Les images, les JS, les CSS…. les contenus Web, eh oui ! tout, en gros, de manière à pouvoir créer un vrai mode offline (ou juste un cache partiel si c’est ce que vous voulez faire).

C’est très puissant mais lisez surtout les retours d’expérience et les moyens de se prémunir d’un gros problème inévitable : quand c’est caché côté navigateur, vous n’avez (presque) plus de moyen d’intervenir pour forcer la mise à jour du cache. Donc s’il y a un bug ou un mauvais contenu en cache… eh bien vous ne pouvez rien y faire jusqu’à ce que le cache expire !

Bon, il y a des moyens de prévenir, notamment grâce à un « fetch » initié côté navigateur et qui va vérifier s’il n’y a pas un forçage de mise à jour de cache à faire..

Imaginez un monde où quand vous faites un clic, il n’y a qu’un aller/retour serveur, un seul « hit » comme on appelle ça. ça serait toujours 200 hits en moyenne de moins que ce qui existe aujourd’hui…

4. Développer progressivement l’architecture orientée services et minimiser les flux de données

Et bien voilà, on y arrive. à 99% du temps, quand vous chargez une page, le langage de programmation compile un code pour le transformer en html et envoie tout le html à votre navigateur. Un HTML, dans le cas d’Amazon, ça peut peser 100 à 200 ko quand même.

Eh bien pourquoi ne pas charger le html qu’il vous faut avant, de manière à ce que lors des changements de page, il n’y ait que les nouvelles images et un flux de données de l’ordre de 0,1 à 2 ko qui soit échangé ?

5. Inciter à installer l’icône sur l’écran d’accueil

Bon, ça ce n’est pas très compliqué. Tout est ici : un manifest à pousser dans les entêtes html, une icône, un petit lien à pousser à vos utilisateurs, et vous obtenez la possibilité d’ajouter l’icône à votre écran d’accueil sur téléphone ! ça marche sur iOS comme sur Android, avec un petit bémol pour Android puisque l’icône « Chrome » apparaît en bas à droite de l’icône.

Quel meilleur moyen de faire revenir plus souvent vos utilisateurs fidèles (et de saouler ceux qui ne le sont pas encore) ?

6. Prioriser fortement les services chargés

Tant qu’à être dans l’état de l’art, autant charger les éléments les plus importants d’abord : le contenu principal, puis les services auxiliaires, publicités et autres ensuite, quand ça ne gêne plus personne (tant que ça ne crée pas de flicker effect, c’est à dire de choses qui se déplacent pendant que l’utilisateur commence à utiliser la page)

7. Commencer à gérer le mode hors ligne

On a commencé à en parler dans le point 3, allez au bout ! 🙂

 

Et si mon site est fait avec Magento / Prestashop / Autres CMS eCommerce ?

Vaste programme. Des initiatives existent ça ou , rien qui n’ait encore cassé la baraque et qui soit suffisamment éprouvé pour être conseillé, mais nul doute que les solutions vont venir.

Le problème est en soi que ces solutions n’ont pas du tout été développées d’une manière à permettre d’implémenter facilement les micro-services qui envoient les mini-flux de données nécessaires aux PWA. C’est donc un vrai changement de paradigme.

D’autres solutions fleurissent et il est probable que des solutions plus adaptées pourraient émerger, et peut-être que Prestashop et Magento pourraient nous préparer des surprises, qui sait ; ce qui pourrait d’ailleurs être très perturbant pour pas mal de développeurs habitués des structures actuelles de ces solutions.

Conclusion

La loi de Pareto s’applique ici comme ailleurs, les 80/20 sont de rigueur et 20% des actions, les premières listées plus haut à mon avis, pourraient bien vous apporter 80% des bénéfices, donc n’hésitez pas à tester et à nous faire vos retours !

Je pense qu’il ne faut pas retarder + les expérimentations sur le sujet, il faut commencer à se faire les dents et prendre le virage dès que possible, et l’accélération qui va avec.

A un moment où les ordinateurs de bureau ne représentent plus que 35 à 45% des supports de visualisation d’un site eCommerce et où la fidélisation va plutôt du côté d’Amazon, il est temps plus que jamais de fournir tous les efforts possibles pour offrir la meilleure expérience possible et la plus grande proximité avec nos consommateurs !

Et si c’est un peu compliqué, des solutions pourraient bien vous y aider, à voir par exemple la solution Front Commerce, que je compte bien éprouver prochainement !

Romain Boyer

Romain BOYER travaille pour des startups eCommerce depuis 2005. À cheval entre la technique et la stratégie, cet adepte des tableaux de bord croise toutes les données pour en extraire ses priorités. > Suivre Romain sur Twitter : @RomainBOYER > Son poste : Product Owner eCommerce chez Doctipharma.fr

3 Commentaires

3 réponses à “eCommerce : Comment mettre en place le Progressive Web Apps en 7 étapes”

  1. A noter que Magento prévoit les PWA dans sa version 2.4 d’après cet article -> https://firebearstudio.com/blog/magento-2-roadmap.html

  2. Romain Boyer dit :

    merci de ton ajout Benoît ! c’est une sacrée (r)évolution qui s’annonce, d’ici 2020/2021 du coup si on suit le rythme habituel des versions (voire un peu + pour celle-là)
    https://fr.wikipedia.org/wiki/Magento#Tableau_des_versions_de_Magento

  3. Tiana dit :

    Les PWA sont une très bonne alternative à ce qui existe aujourd’hui, encore plus pour le e-commerce. D’ailleurs, pour ceux qui se lancent, il faut penser d’abord mobile avant de penser desktop (ce qui est compliqué même pour les Millenials…).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.


#eCommerce : Noël approche, comment vont vos performances ?

par Romain Boyer - Il y a 1 an

Les performances, c’est vraiment le serpent de mer dans le eCommerce, le marronnier, le truc dont on doit parler de temps en temps.

Or là, précisément, c’est le bon moment parce qu’on est entre janvier et décembre donc il faut s’y pencher de plus près. A plus forte raison en se rapprochant de Noël n’est-ce pas ?

Les mauvaises perfs, en +, ce n’est pas qu’un taux de rebond plus élevé, un taux de conversion plus faible, une fidélité détériorée, non, c’est aussi un coût infra plus important, que ce soit pour la bande passante, le coût de stockage, etc.

Bon, bref, quoi de neuf à l’horizon de fin 2016, remettons-nous à la page.

Le benchmark et les bons élèves

D’abord, vous avez probablement croisé cette étude relayée par le JDN qui nous montre de bien beaux exemples avec GrosBill.com, Oscaro.com et Oxybul.com qui sont sur le podium.

Le rappel des impacts de la performance sur le eCommerce

Je repompe sur Dareboost qui a elle-même pompé ailleurs :

  • 5s de + de temps de chargement = x2 de taux de rebond
  • 1s de + de temps de chargement = jusqu’à -7% de taux de conversion
  • 20% d’abandon de panier à cause du temps de chargement (et des bugs)
  • +11% de panier moyen après avoir divisé un temps de chargement par 2
  • et on ne va pas sortir les vieilles stats mais certaines étaient très impressionnantes pour Amazon

Rappel des points clés pour le chargement d’une page

Parce que tout le monde le sait mais ça va mieux en le redisant ; rien que le fait de relire les points ci-dessous va amener votre subconscient à se poser les bonnes questions alors allons-y.

90% de la complexité se situe au niveau de 10% du temps de chargement d’une page : le code source. Améliorer les performances de cette partie nécessite souvent un travail de longue haleine. Et c’est très important car c’est cette performance qui est prise en compte par les moteurs de recherche comme Google.
A ce niveau, il faut de nos jours tenter de se positionner entre 60ms (pour les petits génies) et 350ms, et par tous les moyens rester en dessous de 500ms pour être bien à ce niveau-là.

mais 90% du temps de chargement perçu se situe ailleurs :

  • Images
  • Poids des fichiers Javascript
  • Poids des fichiers CSS
  • Poids du DOM (nombre de caractères HTML)
  • Temps de traitement de votre page (transformation de HTML/CSS/JS en page utilisable)

C’est souvent un peu de tout ça.

Sur le temps de traitement de votre page, on a tendance à vouloir de belles animations, des choses comme ça, ce qui nécessite de charger des « librairies » comme jQuery qui sont en fait assez lourdes une fois qu’on y adjoint tous les plugins sympas permettant de faire toutes les animations qu’on veut sur son site. D’où le problème. Il vaut souvent mieux être sobre et s’assurer une belle cohérence avec 2 ou 3 plugins max mais c’est plus facile à dire qu’à faire. Un peu de ménage de ce côté-là est rarement infructueux.

Au niveau de la CSS, l’erreur la plus courante est de tout mettre dans des CSS externalisées (un fichier chargé à part), alors même que la plupart des CSS sont spécifiques à un endroit dans le code source. Il ne faut pas hésiter à (i) simplifier la présentation de son site au maximum (flat design) puisque c’est dans l’air du temps et (ii) à rationaliser les fichiers CSS en fonction d’où sont utilisées les ressources. Bon, c’est un peu technique, mais ça aura intéressé certains d’entre vous.

Si vous avez tout bien fait d’un point de vue technique, vous pourriez avoir une page qui fait moins d’1Mo.
Si votre site est malgré tout lent, cela peut venir d’un javascript un peu trop consommateur ou de tags externes qui bloquent votre navigation, mais c’est rare à ce point-là.

D’où vient le mal ?

La façon le plus rapide d’en avoir une idée : Google Page Speed Insights.
Cet outil vous donnera rapidement une analyse de la situation. Je n’aime pas cet outil pour la simple et bonne raison qu’il vous donne des éléments théoriques.
Par exemple, un script JS en haut de votre page peut être très rapide mais il l’analyse comme un problème prioritaire car, si ce fichier devait planter, il planterait tout votre site. Donc c’est un problème potentiellement bloquant mais peut-être pas le problème de performance le plus important.

La façon qui vous donne le plus de ressenti sous le doigt : tester votre site sans JS, sans images,…
Prenez Firefox avec la très fameuse Web Developer Toolbar qui existe depuis bien longtemps et dont j’ai toujours été un compagnon fidèle.
Cliquez sur Désactiver > Désactiver JavaScript > Tout le JavaScript et rechargez votre page. Elle est bien souvent incroyablement plus rapide !
Si c’est le cas, pensez bien à mettre tous vos JavaScript en bas du code HTML (attention aux impacts, ça doit se faire avec beaucoup de douceur…)
Si ce n’est pas le cas (et même si c’est le cas), réactivez le JS et désactivez les images.
Là aussi, ça fait souvent une différence.

Vous saurez ainsi assez rapidement vos points d’urgence.

La façon qui vous permet un suivi gratuit : avec Gtmetrix, créez-vous un compte gratuit, vous pourrez recevoir un monitoring hebdo des pages que vous chérissez et même les comparer à la concurrence.

La façon la plus professionnelle : avec Dareboost, un outil de suivi qui propose quelques fonctionnalités sympas :

  • Rapports détaillés comme tout le monde avec la liste des courses
    • repartition_des_poids
  • Possibilité de comparer la vidéo de chargement de votre page entre deux modifications
    • Ce point est très intéressant car vous avez une timeline avec les images par 250ms qui vous permet de voir précisément à quoi ressemble votre site au bout de tant de secondes
      dareboost_comparaison
  • Possibilité de comparer la vidéo de chargement de votre page en comparant temps Ordinateur et temps Mobile par exemple
  • Possibilité également de comparer la vidéo versus un concurrent
  • Possibilité d’avoir un monitoring avec des alertes en cas de problème
  • Comme tous les outils de ce genre, vous avez le nombre de requêtes, le détail de la timeline de chargement, etc. des outils bien pratiques mais classiques, donc
  • Comme Page Speed Insights, vous avez des conseils pour chaque problème sauf que ceux-ci sont en français et très bien expliqués avec des exemples assez propres, en reprenant parfois le bout de code qui pose problème ce qui fait toute la différence quand on veut comprendre rapidement l’origine d’un problème
    • selecteurs_jquery

 

Au fait, si vous avez des astuces, faites passer en commentaires, on complète l’article ! 🙂

Romain Boyer

Romain BOYER travaille pour des startups eCommerce depuis 2005. À cheval entre la technique et la stratégie, cet adepte des tableaux de bord croise toutes les données pour en extraire ses priorités. > Suivre Romain sur Twitter : @RomainBOYER > Son poste : Product Owner eCommerce chez Doctipharma.fr

1 Commentaire

Une réponse à “#eCommerce : Noël approche, comment vont vos performances ?”

  1. viard dit :

    voilà ce que j’ai reçu ce matin et quand je clic dessus,un questionnaire apparait et me dit de choisir un cadeau qui m’oblige a m’abonner au jeux lotto24 prélèvement mensuel de 39€ et plus mais plus de bon de 250€ offert par groupon ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.