manuboss
Un traitement rapide et des vitesses de chargement rapides sont les clés pour attirer l’attention et le temps d’un utilisateur sur votre site Web.
Vous devez avoir entendu des gens parler de la rapidité avec laquelle un site Web particulier est et de la rapidité avec laquelle il répond à leurs commandes.
Cependant, il s’agit en fait d’une déclaration indéfinie à faire lorsque vous utilisez le terme « rapide ».
Pourquoi disons-nous cela ?
Un site Web peut être plus rapide sur votre appareil, mais peut prendre un temps différent pour se charger sur un autre appareil.
Les capacités de l’appareil et la connexion réseau jouent un rôle important dans la détermination des performances d’un site Web sur cet appareil spécifique.
Ainsi, lorsque vous vérifiez la vitesse d’un site Web particulier, le temps affiché est la vitesse de chargement du site Web sur la majorité des appareils de ses utilisateurs.
De quoi l’utilisateur a-t-il besoin ?
Performance.
Et les performances ne font pas seulement référence à la vitesse de chargement initiale du site Web, mais également à son expérience globale.
Du premier clic d’ouverture du site Web à la dernière action, qu’il s’agisse de faire défiler, de taper ou de cliquer sur une boîte de dialogue, l’utilisateur devrait pouvoir parcourir tout cela.
Si le temps de chargement initial d’un site Web est inférieur mais prend beaucoup de temps pour traiter un paquet JavaScript lourd lorsqu’il est cliqué, l’utilisateur peut ne pas l’apprécier.
Si un lien sur la page ne fonctionne pas lorsqu’on clique dessus, si la page ne défile pas facilement ou si un appel à l’action (CTA) n’emmène pas l’utilisateur vers la page souhaitée, c’est également une expérience désagréable .
Voici à quel point les mauvaises performances d’un site Web ont un impact sur une entreprise :
Si vous voulez éviter de commettre ces erreurs, vous voudrez peut-être réfléchir aux points suivants.
- Quelles métriques permettraient de mesurer avec précision les performances d’un utilisateur ?
- Comment utiliser ces métriques sur les utilisateurs réels ?
- D’après les métriques et mesures enregistrées, quand un site Web peut-il être qualifié de « rapide » ?
- Comment améliorer le site Web en fonction de vos conclusions ?
Pour vous aider à répondre aux questions ci-dessus, nous avons répertorié ci-dessous les métriques que vous devez optimiser.
Une bonne optimisation de ces aspects augmentera certainement la vitesse de chargement de votre site Web.
Les mesures de vitesse centrées sur l’utilisateur sont :
- First Paint (FP) et First Contentful Paint (FCP)
Ces métriques marquent les points qui sont visibles en premier lorsqu’un utilisateur accède à une page.
Ceci est obligatoire pour répondre à la question si cela fonctionne ou non.
Alors que FP marque le premier changement sur l’écran qui diffère de la page à partir de laquelle vous avez navigué, FCP mesure le premier contenu qui vous est visible, qu’il s’agisse de texte, d’image, etc.
Regardez l’image ci-dessous pour mieux comprendre.
Source : WP Rocket
- Première peinture significative (FMP)
Cette métrique est essentiellement l’inspection du contenu affiché pour vérifier s’il est utile ou non.
Les « éléments de héros » (aspects les plus importants sur la page spécifique) doivent se charger et s’ouvrir en premier.
Tant que le besoin d’informations est satisfait, l’utilisateur peut ne pas être dérangé si le reste de la page se charge ou non.
- Temps d’interactivité (TTI)
Le TTI est la métrique qui marque le moment où les données de votre site Web sont rendues et sont également visibles pour l’utilisateur.
Le contenu peut ne pas être visible pour un utilisateur au cas où un code JavaScript sur la page n’aurait pas encore été chargé ou que certaines tâches longues auraient bloqué le fil principal.
Parfois, de longues tâches peuvent être un obstacle et ralentir un site Web.
Si un utilisateur exécute une tâche sur le site Web, il se peut qu’elle ne se charge pas tant que le fil principal n’est pas libre de toutes les autres tâches.
Référez-vous au tableau ci-dessous pour savoir ce que vous devez optimiser et quels en sont les effets.
| De l’expérience | Métrique |
| Est-ce que ça marche? | FP/FCP |
| Est-ce utile? | FMP |
| Est-ce précieux/utile ? | TTI |
| Est-ce fluide et rapide ? | Tâches longues |
Maintenant que nous avons clarifié ce sur quoi vous devez travailler, voici quelques conseils qui peuvent vous aider à booster votre site Web de manière exponentielle.
10 conseils pour améliorer les mesures de vitesse centrées sur l’utilisateur pour de meilleures performances de votre site Web
1. Creusez de nouvelles sources pour de meilleures solutions DNS
De meilleurs temps de recherche DNS sont la clé d’un chargement plus rapide des sites Web, car c’est la première chose qui se produit lorsqu’une page se charge.
Améliorer ce temps peut augmenter toutes les mesures de vitesse centrées sur l’utilisateur de votre site Web.
Source : KeyCDN
Pour ceux qui utilisent le DNS par défaut fourni par leur fournisseur d’hébergement, nous voulons que vous sachiez que vous manquez beaucoup de choses !
Cloudflare est le fournisseur DNS le plus apprécié et le plus rapide. Non seulement il a un excellent administrateur, mais il est également gratuit !
Les autres options efficaces disponibles sont WordPress, DigitalOcean, dnsimple et Zilore.
2. La qualité ne suffit pas, optimisez vos images
Les images jouent un rôle majeur dans le choix de la taille, donc de la vitesse de chargement d’un site Web.
Si vous souhaitez augmenter la vitesse de votre site Web, vous devez modifier certains aspects des images de votre site Web.
Source : Développeurs Google
WebP
WebP est un meilleur format d’image à utiliser lors du téléchargement d’images sur votre site Web, grâce à sa taille plus petite.
La taille d’une image au format WebP est environ 25 à 30 % inférieure à celle d’une image jpg, jpeg ou PNG.
Cependant, cela peut être problématique si quelqu’un souhaite utiliser votre site Web sur un navigateur qui ne prend pas en charge les images WebP. Dans de tels cas, on pourrait repérer une image vierge à la place de l’image réelle.
SVG
SVG est un format graphique vectoriel, ce qui signifie essentiellement que la qualité reste la même quelle que soit la taille.
Non seulement il est extrêmement performant, mais il peut également être animé. C’est bien mieux qu’une simple image. N’est-ce pas ?
Changez vos images au format SVG et réduisez la taille de votre page au plus tôt, et augmentez considérablement la vitesse de chargement de votre page.
Images à chargement paresseux
C’est une technique astucieuse et, de nos jours, courante qui ne charge que les informations nécessaires.
C’est un moyen efficace de réduire la vitesse de chargement d’une page.
Le lazy loading est la méthode par laquelle les informations visibles par un utilisateur lorsqu’il ouvre la page, se chargent en premier. Le reste se charge lorsqu’il fait défiler vers le bas.
Même Google a lancé une version mise à jour de Googlebot pour prendre en charge cette optimisation.
3. Ne cherchez pas une police de fantaisie
L’utilisation de polices créatives et attrayantes donne à votre site Web un aspect incontestablement incroyable. De plus en plus de personnes ont commencé à utiliser des polices sophistiquées pour embellir leur site Web.
Cependant, ils ne sont pas conscients de l’effet négatif que cela a sur la vitesse de chargement de la page.
Dans de tels cas, votre texte peut ne pas se charger rapidement et entraîner un flash de texte sans style (FOUT) ou un flash de texte invisible (FOIT).
Cela peut être une expérience insatisfaisante pour l’utilisateur et doit être évité.
4. Inspirez vos propres icônes de police
L’utilisation de packages d’icônes de polices couramment disponibles est une excellente option pour améliorer la présentation de votre site Web. Cependant, il s’agit d’une épée à double tranchant.
Bien qu’il améliore l’expérience, il diminue la vitesse de chargement du site Web. Ces icônes peuvent peser jusqu’à 100 Ko pour un fichier CSS et 300 Ko pour un package de polices.
Une meilleure solution consiste à utiliser des services tels que Fontello et Fontastic pour créer vos propres polices et les utiliser sur votre site Web.
Ce n’est pas seulement plus rapide à charger, mais c’est aussi une excellente occasion de montrer votre côté créatif sur votre site Web.
5. Débarrassez-vous des CSS inutilisés
CSS peut être l’un des principaux responsables du ralentissement des vitesses de chargement. La nécessité de charger toutes les pages pendant que l’utilisateur est sur la page d’accueil ne fera que ralentir votre site Web.
Optimisez votre site Web à l’aide de divers services disponibles tels que CSS inutilisé, Purify CSS et UnCSS pour vous débarrasser des fichiers inutiles.
Remarque : Cette optimisation doit être effectuée page par page et nécessite de nombreux tests. Mais au final, ça vaut le coup.
6. Rediriger les fichiers bloquant le rendu vers l’arrière de la balise
Les fichiers CSS liés en externe peuvent ralentir la vitesse de chargement d’autres contenus de valeur.
Cela peut entraîner un écran vide pendant plus longtemps, car le fichier CSS sera chargé dans l’ordre dans lequel il est organisé dans la balise.
Déplacez ces fichiers à la fin de la balise pour augmenter la vitesse de chargement. Une telle optimisation permet de charger et d’afficher plus rapidement le contenu autre que les fichiers CSS.
7. Organisez des CSS importants à l’Apex
Optimisez votre site Web pour insérer le CSS le plus important en haut de la page.
Par important, j’entends le CSS qui doit être affiché au-dessus du pli sur votre site Web.
Cela aide le navigateur à rendre un CSS important et à l’afficher avant d’être bloqué par un fichier bloquant le rendu.
8. Éviter les régressions
L’optimisation du site Web avant le lancement de nouvelles fonctionnalités est obligatoire pour éviter toute régression.
Vous devez vous assurer qu’il n’y a aucun obstacle au bon fonctionnement du site Web avant de le mettre à jour avec de nouveaux attributs.
Des outils tels que Lighthouse et PageSpeed Insights peuvent être utilisés pour enregistrer toute régression ou baisse des métriques du site Web.
9. Retarder les JavaScripts non importants
Le chargement d’un JavaScript lourd entraîne d’abord une augmentation du temps de chargement du site Web.
Le reporter à charger après le reste du contenu donne à l’utilisateur quelque chose à voir.
C’est sûrement une meilleure expérience que d’être coincé avec un écran vide pendant que le JS se charge en arrière-plan.
Source : Varvy
Il vous suffit d’ajouter ‘defer’ à la balise pour optimiser le JavaScript.
10. Autoriser la mise en cache du navigateur
A présent, vous avez sûrement une idée des nombreux fichiers qui sont chargés lorsque vous ouvrez un site Web. Cependant, ces fichiers peuvent également être stockés pour une utilisation ultérieure.
En activant la mise en cache du navigateur, vous autorisez le navigateur à stocker des aspects tels que des feuilles de style, des scripts Java, des images, etc.
Une fois que ces fichiers sont stockés dans le cache du navigateur, moins de fichiers doivent être chargés la prochaine fois que l’utilisateur visite le site Web.
Google à la rescousse !
Google propose une large gamme d’outils, de nouvelles ressources et de contenu aux développeurs pour augmenter la vitesse de chargement de leurs sites.
Certains d’entre eux sont répertoriés ci-dessous pour que vous puissiez les utiliser et accélérer votre site Web.
- WebP – un format d’image qui a une taille de fichier plus petite que jpeg et PNG.
- Devinez.js – Préchargement des pages basé sur le machine learning.
- google.com – Guides d’optimisation des performances
- Brotli – Amélioration de la compression Gzip.
- CHA – Cadre d’optimisation de la vitesse mobile.
Google ne vous laisse jamais tomber. Est-ce que c’est?
Conclusion
Votre site Web est votre première impression dans l’esprit d’un utilisateur. Et vous voudrez sûrement que cela en vaille la peine.
Par conséquent, optimisez votre site Web en fonction des métriques nécessaires pour offrir la meilleure expérience de sa catégorie.
N’hésitez pas à nous contacter en commentant ci-dessous. Nous veillerons à vous contacter et à répondre à toutes vos questions dans les plus brefs délais.
