Pour construire une expérience web satisfaisante et moderne, il est important de mesurer, d'optimiser et de surveiller si vous souhaitez être rapide et surtout de le rester !
Les performances ont un rôle important dans le succès de votre site ou commerce en ligne, car les sites les plus performants attirent de nouveaux visiteurs et fidélisent mieux que les autres sites peu performant. Tout est une question d'expérience utilisateur. JAG vous éclaire sur le sujet.
Tout simplement aujourd'hui en 2019 les consommateurs ont de plus en plus recours au téléphone portable (mobile) pour accéder à du contenu et des services digitaux. Les consommateurs sont des personnes très exigeantes et évaluent en direct l'expérience vécu au travers de votre service web. Ils ne comparent plus uniquement avec vos concurrents mais par rapports aux meilleurs expériences vécus au quotidien.
Une étude de Ericsson Mobility démontre la difficulté "cognitive" pour les utilisateurs à utiliser un service au travers de leur téléphone portable. Le constat est clair au bout d'une seconde de chargement l'utilisateur entre dans un état de stress important. Le résultat est simple vous le perdez. D'après Google, un service web qui se charge en moins d'une seconde c'est l'opportunité de gagner en moyenne 20% de conversion supplémentaire. Pensez y !
La vitesse est un enjeu crucial, mais qu'est ce que ça signifie un site web rapide ?
On entend régulièrement entre développeur mon site charge en x,x secondes. Le chargement peut être influencé par plusieurs facteurs importants, notamment et la plus importante celle de l'utilisateur finale. Imaginez votre site charger, la première image pour l'utilisateur qui en ressort au bout d'une seconde est le fond de couleur, puis le contenu, puis le titre, puis le logo. L'expérience que va vivre l'utilisateur va être tout bonnement catastrophique. De ce constat, nous conseillons fortement d'opter pour une analyse de chargement via 4 métriques simple:
La navigation a t-elle commencée ? => Est ce que c'est utile ? => Est ce que ça peut être utilisé ? => Est ce que c'est le pied à utiliser ?
Le visiteur est en pleine expérience, il a déjà jugé si il restera ou pas via les 3 premières étapes.
Il est vraiment important de comprendre les différentes informations offertes par ces métriques, puis de juger celles qui vous paraissent importantes pour l'expérience que l'utilisateur va vivre sur votre site web. A vous de les définir, exemple sur Pinterest qui a crée une métrique personnalisée concernant le temps d'attente avant de voir une image, car leurs utilisateurs souhaitent voir les images en premier plutôt que le reste. Cela nous donne un indice pour la suite des optimisations, l’ordonnancement nous y reviendrons dans un prochain article.
Les vitesses peuvent être très variable d'un utilisateur à l'autre, plusieurs facteurs sont à prendre en compte, le type de connexion à internet, l'appareil utilisé, etc... Un exemple assez simple, vous êtes sur la fibre vous chargez votre site en moins d'une seconde, en revanche vous sortez à la campagne vous n'avez qu'un signal 3G ou 4G d'une barre, votre site va mettre un certain temps avant de s'afficher. De nombreux outils sont à disposition pour évaluer les données de vitesse.
Il existe deux façon de benchmarker la vitesse de son site :
Pour un environnement sous contrôle je vous conseille un outils simple et efficace :
- Dareboost vous permettra de réaliser un audit complet (analyse, optimisation, performance, sécurité, qualité de vos pages) le tout peut être automatisé, c'est simples et efficaces. Véritable mine d'information Dareboost permet également de tester dans la minute et ainsi récupérer des informations importantes sur la vitesse d'affichages, le poids de celle-ci, la vitesse des premiers octets reçu de la part du serveur, et le chargement au total. Vraiment pratique. La partie de rapport d'audit automatique sur le moyen et long terme est pratique pour garder à l'oeil l'évolution des pages sous surveillances. Je vous le recommande, le tester c'est l'adopter. Cliquez ici pour découvrir Dareboost
Sortez donc la console de votre Mozilla, Chrome ou Safari. Et mesurez dehors dans d'autres environnements (3G, ADSL, 4G et autres). Vous pourrez ainsi croiser les informations en environnement controlé et sur le terrain.
La performance d'un site web ne peut pas se faire "ponctuellement" c'est un enjeu majeur dans la stratégie web. On peut faire l'analogie d'un sportif de haut niveau, va t'il s’entraîner une fois par mois ou tous les jours ? Il ne suffira pas de faire un effort ponctuel, vous devez tout bonnement changer de style de vie.
Nous vous suggérons régulièrement d'optimiser votre code, optimiser vos images, optimiser vos scripts, optimiser requêtes SQL. Mais aussi votre hébergement web, facteur important.
Par exemple un hébergement dit "mutualisé", vous êtes sur un hébergement parmis + de 200 sites,
celui qui aura le plus fort trafic consommera les ressources nécessaires pour l'affichage de votre site qui est sur ce même serveur, le résultat votre performance se dégrade fortement.
Nous vous conseillons vivement de prendre contact avec un vrai professionnel de l’hébergement sur-mesure afin de vous distinguer des autres, et sortir votre épingle du jeu.
JAG vous conseille et vous apporte des solutions sur-mesure dans l’hébergement rapide et efficace en mettant en oeuvre des techniques d'optimisation coté serveur "server-side" afin de répondre à cet enjeu de vitesse constante sur le long terme. Contactez-nous.
Il existe une multitude d'outils pour optimiser vos images, que ce soit dans le code directement, via des outils externes ou des plugins pour les CMS tel que WordPress ou Prestashop.
En revanche prenez conscience que si vous utilisez des plugins, est ce que cela va être avec "Perte" ou "sans perte" ? La compression avec perte réduit la taille du fichier au détriment de la qualité de l'image. Si celui-ci ne le mentionne pas alors dite vous qu'il sera avec perte.
Vous pouvez également utiliser les "LazyLoader" mais attention à l'ordonnancement cela pourrait avoir un impact négatif au lieu de positif. (on y reviens dans le chapitre optimiser vos javascripts).
D'un autre coté il est important de servir une image à la bonne taille pour chaque appareils, il existe pour cela des méthodes (via le CSS), ou des plugins. Nous reviendrons précisément sur cet aspect dans un prochain article.
Dans tous les cas celui qui remporte la mise aujourd'hui, c'est le format WebP, il est fiable, d'un poids réduit, qualitatif et sécurisé. Les images WebP sont plus petites que le format JPG et PNG, en moyenne 25 à 35% de la taille du fichier. Cela réduit les temps de chargement de la page et améliore la performance et l'expérience utilisateur. Facebook a signalé avoir économisé plus de 80% pour les PNG lorsqu'il sont passé à WebP.
WebP est un excellent substitut pour les images JPEG, PNG et GIF.De plus, WebP offre une compression à la fois sans perte et avec perte. En compression sans perte, aucune donnée n'est perdue.La compression avec perte réduit la taille du fichier, mais au détriment de la qualité de l’image.
Il existe une documentation complète sur l'utilisation de l'outil Cwebp
C'est un outils complet qui vous permettra de convertir vos images à ce nouveau format de façon pas forcement simple pour le commun des mortels. Cela demander également de changer le balisage dans votre code source exemple :
Avant :
<img src="fleurs.jpg" alt = " ">
Après :
<picture>
<source type="image/webp" srcset="fleurs.webp">
<source type="image/jpeg" srcset="fleurs.jpg">
<img src="fleurs.jpg" alt=" ">
</picture>
les balises <picture>, <source> et <img>, y compris la manière dont elles sont ordonnées les unes par rapport aux autres, interagissent toutes pour atteindre ce résultat final.
photo
La <picture > fournit un wrapper pour une ou plusieurs balises <source> et une < img >.
source
La <source> spécifie une ressource multimédia.
Le navigateur utilise la première source répertoriée dans un format pris en charge. Si le navigateur ne prend en charge aucun des formats répertoriés dans les balises <source> , il revient au chargement de l'image spécifiée par la<img> .
C'est une façon comme une autre de tirer le meilleur parti en terme de performance afin de servir des images de façon ordonnée et parallélisée, cela peut avoir un grand impact en terme de performance. Nous le recommandons pour tous les sites à fort trafic.
Rendez vos pages interactives le plus rapidement possible, pour cela vous pouvez faire du PRELOAD, du RENDER, du PRE-CACHE ou du LAZY LOAD.
L'idée principale va être d'ordonnancer ce qui est "Critique" dans un premier temps. Votre First Paint doit apparaître au plus vite c'est le rendu tout en haut de votre, optimiser donc vos scripts de manière à charger en premier lieu la zone du haut de votre site puis la suite.
Pour cela vous pouvez utiliser les conditions ASYNC afin d'éviter les blocages de rendu.
Et une autre approche sera d'optimiser ce que le serveur doit traiter et de vous rendre le site interactif au plus vite. Vous pouvez vous aider dans ces optimisations grâce à l'outils Lighthouse.
Schématiquement :
Le client fait la demande au serveur = le serveur doit lui rendre le contenu html = First Paint
puis le chargement CSS = First Meaningful Paint (première affichage significatif avec un rendu graphique)
On peut donc ce dire que les javascripts ne sont pas dans tous les cas "critique", d'après notre expérience le meilleur moyen reste d'avoir l'affichage html puis le css puis le javascript. Tout en étant PRELOAD afin d'attendre la condition de rendu sans blocage dans la chaîne de chargement.
De la même manière que pour le javascript, optimisez vos feuilles CSS. Sont elles critique si oui chargez les en premier, les autres pourront attendre avec un DEFER (retardement). L'autre aspect des feuilles de style CSS ça va être de les "compacter" communément appeler l'opération "MINIFY".
Organiser pour cela vos feuilles de styles CSS afin de charger dans la première ce qu'il faut pour avoir un rendu rapide. Et le reste dans un second temps.
Il existe de nombreux scripts externes, tel que l'analytics, les pixel facebook, les fonts personnalisés exemple Google Font.
Même principe identifié ce qui est nécessaire pour que l'expérience utilisateur soit la meilleure dans la première secondes,
puis ordonnancer avec un prefetch, un preload, un defer, ou un rapatriement en local des fonts pour les ordonnancer coté code source par exemple.
Et si par malheur un script vous ralenti de tel manière qu'une chute importante à lieu, prenez la bonne décision. Enlever le et étudier pour trouver une solution alternative qui n'impact pas la vitesse et la performance du rendu de votre site web.
Le principe de base, c'est afficher immédiatement votre texte. Évitez par tous les moyens les textes invisibles à cause du chargement d'une font spécifique. Il faut savoir que les fonts (polices d'écritures) sont de gros fichiers à charger et prennent un certains temps avant d'apparaitre.
Pensez donc à afficher une police système par défaut avant le chargement de la font.
Exemple dans votre css avant optimisation :
@font-face { font-family: Helvetica; }
Après optimisation :
@font-face { font-family: Helvetica; font-display: Barlow; }
On utilise dans un premier temps la font Helvetica qui est une police d'écriture "système" incluse dans un large éventail d'appareils.
Puis le moment viendra de charger le fichier de font et de s'afficher.
Résultat plus de texte invisible, un texte affiché directement. Une expérience utilisateur augmenté pendant le chargement, il fera un focus sur le contenu de suite au lieu de patienter.
Le chargement d'un site web peut être très différent selon les conditions du réseau du visiteur. Tout peut très bien se passer sur un réseau fibre ou adsl par contre lorsque le visiteur est en déplacement sur des connections de cybercafé ou 3G tout bloque, l'expérience est catastrophique.
Plusieurs cas d'usage pour améliorer l'expérience utilisateur :
On peut le constater sur Youtube, Dailymotion etc.. L'utilisation d'une résolution différente suivant la qualité du réseau. Simple ?
Comment ça marche
L'objet "navigator.connection" contient des informations sur la connexion d'un client. Ses propriétés sont expliquées dans le tableau ci-dessous.
Voici à quoi cela ressemble lorsque vous l'exécutez dans la console du navigateur
L'écouteur d'événements onchange vous permet de vous adapter de manière dynamique aux modifications de la qualité du réseau. Si vous avez différé des téléchargements ou des téléchargements en raison de mauvaises conditions de réseau, vous pouvez compter sur l'écouteur d'événements pour redémarrer le transfert lorsqu'il détecte de meilleures conditions de réseau. Vous pouvez également l'utiliser pour informer les utilisateurs lorsque la qualité du réseau change. Par exemple, s’ils perdent leur signal Wi-Fi et tombent sur un réseau cellulaire, cela peut empêcher les transferts accidentels de données (et les charges).
Utilisez l'écouteur d'événement onchange comme n'importe quel autre écouteur d'événement:
navigator . connection . addEventListener ( 'change' , doSomethingOnChange ) ;
Après avoir réalisé un dur travail d'optimisation, vous y voilà vous voyez le fruit de ce dur labeur dans vos conversions et vos ventes. Je vous invite à comparer les données d'analyses avant et après.
Une expérience fluide, rapide et réactive est essentielles. Découvrez maintenant à quelle étape vos visiteurs abandonnent pour retravailler certaines parties complexes de votre site web. Et ainsi optimiser dans la chaine d’interaction via les données analytics là ou les utilisateurs partent.
Mesurer donc de façon clair :
La découverte = Optimisation pour le premier chargement
L'engagement = Optimisation pour la vitesse de navigation
La conversion = Optimisation pour la vitesse de navigation
La fidélisation = Optimisation pour un chargement répété
4 métrique à surveiller quotidiennement.
Nous pouvons vous aider à mettre en place une vraie stratégie centrée sur la vitesse de votre site et ainsi conquérir le web de façon efficace. Contactez-nous.
