Pourquoi certaines boutiques semblent-ils rapides et d’autres plus lentes ? Curieusement, les pages peuvent avoir l’air exactement identiques, mais en raison de la façon dont les pages web se chargent, l’une semble rapide et l’autre lente. Il est important de comprendre comment une page web est chargée si vous cherchez à l’accélérer.
Vous savez probablement déjà, en naviguant, qu’une page web ne se charge pas d’un seul coup : une seconde, l’écran est vide, la suivante, tout est là ! Vous avez peut-être aussi remarqué que le texte d’une page web se charge parfois momentanément avant les images. C’est parce qu’une page web n’est pas une « simple chose », elle est composée de morceaux.
Vitesse Site Shopify, Comment ca Fonctionne ?
En gros, chaque page web contient
a) un code HTML qui fournit la structure de la page et son texte
b) un CSS qui détermine le style de la page (couleurs, polices, tailles, etc.)
c) un JavaScript pour rendre la page interactive avec des éléments tels que les popups, le suivi des publicités et autres,
d) des images.
Ces éléments doivent tous être téléchargés et ensuite rassemblés pour former la page web.
Le but d’un navigateur web est d’afficher la page à un utilisateur aussi rapidement que possible. Au lieu d’attendre que tous les éléments soient téléchargés, il cherche les éléments minimums dont il a besoin pour afficher la page.
Par exemple, disons que vous avez un script de suivi analytique sur votre page. Cela n’est pas nécessaire pour que le navigateur puisse afficher la page. Le navigateur va 1. télécharger ce dont il a besoin 2. afficher la page 3. télécharger le script de suivi analytique.
Une page web semble rapide lorsqu’elle s’affiche rapidement, et non pas lorsque tout ce qui se trouve sur la page est chargé.
Lorsqu’une page web est construite, il incombe au développeur d’indiquer au navigateur ce qui doit être téléchargé pour que la page s’affiche et ce qui peut être chargé après l’affichage. Vous avez peut-être entendu parler des termes « non-blocage du rendu » et « blocage du rendu ». Si un développeur code quelque chose comme « non-bloquant de rendu », cela signifie qu’il ne bloque pas la page web affichée, « bloquant de rendu » et qu’il doit être téléchargé avant que la page web ne soit affichée. Nous reviendrons sur ce point et sur d’autres termes dans un autre article.
Vitesse Site Shopify, Comment la mesurer ?
Pour mesurer le temps écoulé entre le moment où une page web est demandée et celui où elle est affichée et peut être utilisée par le visiteur, nous utilisons la mesure appelée « First Meaningful Paint ».
Mais pourquoi ne pas mesurer le temps qu’il faut pour télécharger absolument tout ce qui se trouve sur la page ? N’est-ce pas là une mesure très approfondie ? Non, c’est une tâche insensée en raison de la façon dont les sites web modernes fonctionnent.
Les pages web sont devenues de plus en plus lourdes (avec des fichiers de plus grande taille) avec des graphiques qui doivent avoir un bon aspect sur nos écrans haute résolution, l’interactivité et le suivi. Une solution pour qu’ils se sentent rapides est, comme nous en avons discuté, de permettre aux choses de se charger après l’affichage de la page.
Cela signifie que ces scripts, images, styles et contenus qui se chargent après l’affichage de la page peuvent prendre plus de temps à charger et à fonctionner sans que le visiteur ait une impression négative de lenteur. Certains sont spécifiquement conçus pour être chargés à la demande, lentement et pour effectuer de longues requêtes aux serveurs. Cela n’affecte en rien la rapidité de votre boutique.
Par exemple, pensez à une vidéo. Lorsque vous poussez la lecture sur Netflix, qu’est-ce qui importe le plus ? C’est le temps qu’il faut pour commencer à jouer et que la lecture se poursuive sans problème. Il serait inutile de mesurer le temps total nécessaire pour télécharger la vidéo entière si notre objectif était un lecteur vidéo rapide.
Il en va de même pour votre boutique. Si votre objectif est une page web qui semble rapide, concentrez-vous sur First Meaningful Paint. C’est là que vous améliorerez concrètement la rapidité de votre boutique pour vos visiteurs.
