Maxime

Profile page

About admin

  • Email: contact@maximeleon.fr
  • Nice Name: admin
  • Website:
  • Registered On :2016-03-04 16:08:16
  • Logged in as: admin

admin Messages

Quand utiliser le prerendering ?

Avec l’explosion ces dernières années des frameworks JavaScript (Angular, React et Vue pour ne citer qu’eux), une nouvelle problématique est alors apparue : le contenu étant généré dynamiquement et par le navigateur : les crawlers des différents moteurs de recherches ne peuvent simplement pas lire et référencer ce contenu.

C’est le cas des Single Page Application (SPA) et de toutes les applications rendues côté client (CSR) qui sont très fluides une fois chargée mais qui ont 2 défauts majeurs :

  • Un mauvais SEO : les moteurs de recherches ne peuvent pas lire le contenu de ces applications car le contenu est simplement non présent au chargement initial de page.
  • Un chargement du site plus long : puisque c’est le navigateur qui doit compiler le code JavaScript envoyé par le serveur, le temps avant interaction utilisateur est assez élevé.

Faire du prerendering est une solution efficace d’optimiser les 2 problèmes cités ci-dessus et nous allons maintenant voir comment cela fonctionne.

Le prerendering, une alternative au Server Side Rendering !

Les 2 défauts majeurs du CSR à savoir le SEO et la performance à l’ouverture peuvent être efficacement comblés par une logique SSR de rendue. Dans ce cas, ce n’est plus le client (ou navigateur) qui s’occupe de compiler l’application mais le serveur. Le code source disponible est donc lisible dès le début par les crawlers ce qui résout le problème SEO. Il reste cependant le second point : la performance. Malgré que le site soit compilé côté serveur et peut donc bénéficier de meilleures ressources et une optimisation grâce au cache, cela n’enlève pas le fait que le serveur doit compiler et augmente considérablement le TTFB (Time To First Byte).

La différence majeure avec le prerendering réside dans l’ordre du processus de rendu. En effet, avec le prerendering, la compilation se fait au moment du build et non lorsque le client requête le serveur. Le serveur n’a alors qu’à renvoyer un contenu statique et c’est plus rapide !

Oui mais il y a un mais. Le contenu étant généré au moment du build, il n’est alors plus dynamique. Si vous avez du contenu à afficher en fonction d’un call API par exemple, il ne sera pas possible d’en faire un prérendu mais il sera toujours possible que ce contenu soit chargé en CSR : à vous de voir si ce contenu dynamique est primordial pour votre SEO ou non.

Nous choisirons donc le prerendering dans 2 cas :

  • Notre application ne charge pas ou peu de contenu dynamiques (call API) et ce contenu n’est pas indispensable dans la stratégie SEO de votre application.
  • Vous utilisez une technologie incompatible pour laquelle il est difficilement envisageable de faire du SSR sans une refonte majeure.

Comment mettre en place du prerendering ?

Selon la technologie utilisée pour votre application il sera plus ou moins simple de réaliser du prerendering. 

La plupart des framework JavaScript récents permettent de générer des builds statiques mais si ce n’est pas le cas il existe des services permettant de faire du prerendering et nous allons voir que cela fonctionne un peu différemment dans le cas de prerender.io.

Prerender.io : comment ça marche ?

Concrètement, le concept est le même. Le service créé une version précompilée et la met à disposition si demandée à la différence que : 

  • Prerender.io met en cache la version statique de votre application une fois qu’elle est totalement chargée dans votre navigateur, et cela pour chacunes des pages. Il génère donc un code source complet, telle une image de votre site à un moment précis malgré le contenu dynamique qu’il peut contenir. Ce processus se fait donc après le build initial de votre application.
  • Une fois une version statique générée et cachée, le middleware de prerender.io détecte les crawlers et différents robots d’indexation et leur rend la version statique et donc lisible. Les autres utilisateurs reçoivent la version originale de votre application et cette version est donc dynamique.

Lors de la création d’une application mobile e-commerce, la facilité d’utilisation de cette dernière par l’utilisateur est primordiale. Cela va de l’aisance de navigation, à la lisibilité, jusqu’à la rapidité d’affichage des éléments. Trop nombreuses sont les applications à être désinstallées sans avoir été utilisée, souvent dû au manque de clarté ou d’intérêt.

Nous allons voir ensemble, lors de cet article, quelques bonnes pratiques et techniques à mettre en place pour améliorer le taux de rétention des utilisateurs dès l’arrivée sur la page d’accueil de votre app.

1 – Les temps de chargement

Peux être la partie la plus important à prioriser.

Une étude réalisée par Walmart.com démontre que pour chaque seconde de chargement en moins, leur taux de conversion augmente de 2%, et pour chaque 100ms de gagnées leurs revenus augmentent de 1%. A la suite de ces informations, nous pouvons donc en conclure que le taux de rebond est également réduit.

Ces données sont tirées d’une étude réalisée sur un site web, cependant ces statistiques sont aussi valables pour les applications mobiles. Les utilisateurs ne souhaiteront pas commander sur une application lente, par impatiente ou manque de confiance.

Afin d’obtenir des temps de chargement rapides dès la page d’accueil, et ainsi améliorer l’expérience utilisateur de l’application, il est préférable de favoriser des images de taille réduite, et de renvoyer à l’application seulement des informations dont elle à besoin, en évitant le superflu.

Il ne faut pas oublier que les applications mobiles sont très souvent utilisées sans connexion internet fixe, c’est-à-dire sur les réseaux mobiles, qui fournissent encore bien souvent des vitesses très limités. C’est pourquoi il est important de réduire au maximum le poids des données renvoyées à l’application.

2 – Le plus important en haut

Le but de la page d’accueil est de positionner les éléments les plus important que vous souhaitez montrer sur cette dernière, malheureusement tout ne peut pas tenir dans la taille de l’écran.

Bien que les utilisateurs scrollent dans la page, une grande partie se focalise sur ce qu’il y a dans la première partie visible, c’est-à-dire ce qui s’affiche sans avoir besoin de scroller.

Il est nécessaire d’attirer l’attention de l’utilisateur, pour l’obliger à rester. Cela peut ce faire sous forme de bannière indiquant une promotion ou un nouvel arrivage, ou bien une liste de produits exclusifs.

Il n’y a pas de contenu obligatoire à mettre en avant, il est nécessaire de choisir en fonction de vos analyses et intérêts de vos utilisateurs.

3 – Rester sobre

Il est impératif de ne pas surcharger de contenu votre page d’accueil, les informations présentent doivent être claires, bien visibles et l’interaction doit rester intuitive.

Évitez les bannières clignotantes ou bien les sliders qui défilent à trop grande vitesse dans votre application mobile, l’ergonomie doit rester simple. Il est important de focaliser l’utilisateur sur une information sans pour autant le perdre.

4 – Montrer un aperçu de la gamme de produits

Quoi de mieux que de montrer directement ce que vous vendez sur la page d’accueil pour capter l’attention de l’utilisateur. Ce dernier ne souhaite pas forcement naviguer pour avoir un aperçu des collections.

Il est évident que tout le catalogue ne peut pas tenir sur la page d’accueil, c’est pourquoi il est important de choisir avec précision quels produits vous allez afficher. Il est préférable de montrer vos produits phares, ou les produits pour lesquels vous faites la promotion en ce moment, c’est pourquoi la plupart des utilisateurs viennent dans un premier temps. Ils ne souhaitent pas chercher laborieusement dans tout le catalogue produit l’article dont ils ont vu la publicité.

5 – Les offres limitées dans le temps

Les promotions limitées dans le temps sont là pour créer le besoin et l’urgence. Un utilisateur voyant un ou des produits intéressants, avec une réduction ne durant qu’une journée sera plus enclin à commander rapidement, lors de cette même session, plutôt que d’y réfléchir pour au final ne jamais réouvrir l’application, voir la désinstaller.

Certaines de ces bonnes pratiques sont indispensables à mettre en place dès le lancement de votre application, cependant, ce ne sont pas les seules. Nous reviendrons rapidement avec une nouvelle liste complétant celle-ci pour améliorer votre rétention d’utilisateurs dès la page d’accueil de votre application ecommerce mobile.

Certaines de ces bonnes pratiques sont indispensables à mettre en place dès le lancement de votre application, cependant, ce ne sont pas les seules. Nous reviendrons rapidement avec une nouvelle liste complétant celle-ci pour améliorer votre rétention d’utilisateurs dès la page d’accueil de votre application ecommerce mobile.

Aujourd’hui, nous allons aborder un point technique concernant les PWA (Progressive Web App). Plus précisément, nous allons regarder les différences qu’il y a entre le server-side rendering (SSR) et le client-side rendering (CSR). Un SSR vs CSR qui, vous le verrez, ne désignera pas de grand gagnant puisque le choix de la stratégie de rendu dépendra des spécificités techniques de votre application mobile hybride.

L’avenir du commerce électronique sera sur les appareils mobiles ! En 2019, près d’un quart des ventes en ligne se firent via un appareil portable. Et ce chiffre est en croissance exponentielle. Les dépenses des clients ont augmenté de 20 % sur ces interfaces en 2019, pour un CA Apple Store & Google Play cumulé de 23 milliards de dollars. Dans le même temps, 61 % des consommateurs se servaient de leur téléphone pour suivre l’avancement d’une livraison, 57 % l’utilisaient pour effectuer des recherches sur un article et 52 % pour localiser un point de vente.

La livraison par drone en 2020 ?

Les temps forts pour les e-commerçants s’enchaînent en cette fin d’année. A peine sorti du French Days, qui d’année en année prend de l’ampleur, il temps maintenant de préparer le Black Friday qui a lieu le 29 Novembre. Contrairement au French Days qui permet de redynamiser une période creuse pour les e-commerçants, le Black Friday donne le top départ pour les fêtes de fin d’année. 

Ces dernières années, les applications mobiles ont le vent en poupe ! Et pour cause, les appareils mobiles de plus en plus omniprésents dans notre quotidien ! Les modes de consommation ont changé, entre les smartphones pendant les pauses de courtes durées, dans les transports en commun et les tablettes à la maison, le e-commerce se voit depuis quelques temps changer…