CONTACT

Pourquoi la vitesse de votre site web est importante ?

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.

 

Pourquoi la vitesse est importante ?

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 !

 

Que signifie la vitesse sur un site web ou un service en ligne ?

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 ?

 

La navigation a t-elle commencée ?

  • First Paint
  • First Contentful Paint

 

Est ce que c'est utile ?

  • First Meaningful Paint (première affichage significatif)

 

Est ce que ça peut être utilisé ?

  • Time to interactive / Délai avant interactivité (temps ou on peut interagir avec le site )

 

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.

 

Comment mesurer la vitesse de votre site web ?

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.

Plusieurs outils pour tester dans différentes conditions

Il existe deux façon de benchmarker la vitesse de son site :

  •  Dans un environnement sous contrôle avec des paramètres pré-définis

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

  •  Et sur le terrain.

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.

 

Comment rester rapide ?

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.

 

Optimisez vos images

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.

  • Remplacer vos GIF par des vidéos c'est tellement plus rapide !

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.

  • Utiliser des images WebP

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.

  • Mais alors comment passer au format WebP ?

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> .

Utiliser un CDN pour servir vos images et les optimiser ?

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.

 

Optimisez vos javascripts

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 :

  • La navigation a t-elle commencée ?

Le client fait la demande au serveur = le serveur doit lui rendre le contenu html  = First Paint

  • Est ce que c'est utile ?

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.

 

Optimisez votre CSS

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.

 

Optimisez les ressources tiers

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.

 

Optimisez vos Fonts 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.

 

Utilisez un serveur adaptatif suivant la qualité du réseau

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.

 

Alors pourquoi pas décidé de ce qui va être servi suivant le type de connexion ?

Plusieurs cas d'usage pour améliorer l'expérience utilisateur :

  • Basculez le service web de haute définition et basse définition en fonction du réseau de l'utilisateur
  • Décidez si les ressources doivent être pré-chargé (PRELOAD)
  • Activer le mode hors connexion si la qualité du réseau n'est pas suffisante (c'est une solution radicale mais toujours mieux que d'afficher des bribes).
  • Avertir l’utilisateur que sa connexion va dégrader fortement son expérience

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.

  • downlink : L'estimation de la bande passante en mégabits par seconde.
  • effectiveType : Type effectif de la connexion, avec les valeurs possibles 'slow-2g' , '2g' , '3g' ou '4g' (couvre 4g et plus). Déterminé en fonction de la combinaison du temps aller-retour et de la vitesse de la liaison descendante . Par exemple, une liaison descendante rapide associée à une latence élevée aura un type effectif plus faible en raison de la latence.
  • onchange : Un gestionnaire d'événements qui se déclenche lorsque les informations de connexion changent.
  • rtt : Temps de latence aller-retour estimé de la connexion en millisecondes.
  • saveData : Un booléen qui définit si l'utilisateur a demandé un mode d'utilisation réduite des données.

 

Voici à quoi cela ressemble lorsque vous l'exécutez dans la console du navigateur

Google Console
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 ) ;

 

L'impact de la vitesse sur vos conversions

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.

source : Google.com | Lighthouse | Ericsson | Experience
VOUS SOUHAITEZ ÊTRE ACCOMPAGNÉ DANS VOTRE démarche marketing digital ?
N'hésitez pas à nous contacter dès à présent !
Julien GAUTHIER
Créateur de solution sur-mesure sur La Baule. J'accompagne les entreprises de toutes tailles dans leur stratégie d'acquisition et de visibilité sur le web.

A PARTAGER

Diversifier vos contenus pour votre site internet, et si vous pensiez au podcast ?

Lire la suite de l'article ?

Etat des lieux du marketing digital

Lire la suite de l'article ?

WordPress 5.7 : Les changements techniques à venir en mars

Lire la suite de l'article ?

Top 5 des meilleures solutions d'emailing du marché

Lire la suite de l'article ?

Pourquoi refaire son site internet ?

Lire la suite de l'article ?

Gagnez en visibilité grâce à la rédaction de contenus pour le web

Lire la suite de l'article ?

Comment optimiser son site Internet ?

Lire la suite de l'article ?

Référencement naturel ou référencement payant : lequel choisir ?

Lire la suite de l'article ?

Aides financières pour le numérique pour votre entreprise ?

Lire la suite de l'article ?

Tous les smileys, emoji, émoticône pour vos articles "à copier coller"

Lire la suite de l'article ?

Expert SEO : Compétences et techniques de référencement

Lire la suite de l'article ?

Ranker sur Google : Astuces d’Experts

Lire la suite de l'article ?

Les meilleures applications pour gérer ses réseaux sociaux en 2021

Lire la suite de l'article ?

L’Impact du Nom de Domaine d’un Site Web sur le Référencement

Lire la suite de l'article ?

5 étapes pour bien référencer son site sur Internet

Lire la suite de l'article ?

Botnet KashmirBlack cible les CMS WordPress, Joomla, Drupal, etc.

Lire la suite de l'article ?

Quel tarif pour un site web ecommerce ?

Lire la suite de l'article ?

Comment être mieux référencé sur sa boutique ecommerce ?

Lire la suite de l'article ?

Bien rédiger un article de blog

Lire la suite de l'article ?

Créer un lien facilement pour permettre aux clients de rédiger des avis

Lire la suite de l'article ?

Changer nom de domaine WordPress les requêtes SQL

Lire la suite de l'article ?

Créer un logo gratuit : Les 3 meilleurs générateurs de logo

Lire la suite de l'article ?

Créer un persona gratuitement

Lire la suite de l'article ?

Comment fonctionne Google AdWords ?

Lire la suite de l'article ?

Cache WordPress - Les secrets d'un site rapide

Lire la suite de l'article ?

Comment créer une page web ?

Lire la suite de l'article ?

Chèque numérique pour un commerce connecté

Lire la suite de l'article ?

20 Styles of animated borders in CSS for a modern site

Lire la suite de l'article ?

How to convert WebP images to speed up your website

Lire la suite de l'article ?

Comment convertir des images WebP pour accélérer votre site Web

Lire la suite de l'article ?

CSS animated button and checkbox for a modern design

Lire la suite de l'article ?

Bouton animé CSS et checkbox pour un design moderne

Lire la suite de l'article ?

Prestashop : Faille de sécurité critique dans les modules

Lire la suite de l'article ?

8 CSS HTML5 JS carousels for modern website

Lire la suite de l'article ?

8 carrousels en CSS HTML5 JS pour site web moderne

Lire la suite de l'article ?

Zoom sur la version WordPress 5.3 "Kirk"

Lire la suite de l'article ?

Pourquoi la vitesse de votre site web est importante ?

Lire la suite de l'article ?

Les questions les plus fréquentes sur WordPress

Lire la suite de l'article ?

Top 5 outils SVG gratuit pour le graphisme et le design

Lire la suite de l'article ?

Les questions les plus fréquentes sur Prestashop

Lire la suite de l'article ?

Tout savoir sur PrestaShop

Lire la suite de l'article ?

Comment rendre son site Web éco-responsable ?

Lire la suite de l'article ?

Zoom sur la version 5.2 de WordPress

Lire la suite de l'article ?

Combien coûte la création d’un site internet ? Prix d'un site internet

Lire la suite de l'article ?

Entreprise : pourquoi créer un site web ?

Lire la suite de l'article ?

20 Styles de bordures animées en CSS pour un site moderne

Lire la suite de l'article ?

Qu'est-ce que le développement informatique ?

Lire la suite de l'article ?

.dev, un nouveau TLD pour les développeurs

Lire la suite de l'article ?

C'est quoi l'autorité de domaine ?

Lire la suite de l'article ?

Comment évaluer l'efficacité d'un site web ?

Lire la suite de l'article ?

Inbound Marketing, Boostez votre chiffre d'affaires

Lire la suite de l'article ?

Pages Jaunes Solocal VS agence de référencement

Lire la suite de l'article ?

Quelle est la recette d'un bon site Internet ?

Lire la suite de l'article ?

Quelles sont les méthodes de travail d'un développeur web ?

Lire la suite de l'article ?

Quel CMS choisir en fonction de mon site ?

Lire la suite de l'article ?

Les tendances du développement web

Lire la suite de l'article ?

La planification : une maitrise à ne pas négliger

Lire la suite de l'article ?

Les 15 termes du développement web à connaître

Lire la suite de l'article ?

Quelles sont les étapes d'une refonte d'un site web ?

Lire la suite de l'article ?

Le coût d'un retour en arrière.

Lire la suite de l'article ?

Comment définir une stratégie digitale efficace ?

Lire la suite de l'article ?

Qu'est-ce que la stratégie digitale ?

Lire la suite de l'article ?

Pourquoi avoir un site responsive web design et mobile compliant ?

Lire la suite de l'article ?

Pourquoi avoir un site sécurisé HTTPS SSL ?

Lire la suite de l'article ?

Quelles sont les étapes de création d'un site internet ?

Lire la suite de l'article ?

Les avantages de faire appel à une agence Web Marketing

Lire la suite de l'article ?

Indexation ! Optimiser son site e-commerce mobile first?

Lire la suite de l'article ?

Les nouvelles tendances du SEO en 2018

Lire la suite de l'article ?

Mais pourquoi mes emails arrivent en SPAM ?

Lire la suite de l'article ?

Pourquoi intégrer la vidéo à sa stratégie marketing ?

Lire la suite de l'article ?

8 raisons d'incorporer INSTAGRAM à sa stratégie

Lire la suite de l'article ?

Pub Digital Media : Forte croissance du search et des réseaux sociaux

Lire la suite de l'article ?
Newsletter
Chaque mois, 
1 email, 3 articles. 
Gratuit pour toujours.
Prêt pour parler de votre projet ? Contactez-nous
menuchevron-down