Quel est l'impact du DCL et du FCP sur le référencement naturel ? | indicateurs de performance web

Qu'est-ce que le DCL ?

Le DCL, abréviation de DOMContentLoaded, est un indicateur important pour mesurer les performances des pages Web. Le DCL détermine à quel moment un navigateur est prêt à exécuter tout script côté client. En termes plus techniques, le DCL correspond au temps pendant le chargement d'une page Web au cours duquel le DOM (Document Object Model) est assemblé par le navigateur, et où aucune feuille de style n'empêche l'exécution de JavaScript. (Pour vous aider à comprendre ces termes, consultez le paragraphe « Brève explication concernant le fonctionnement des pages web » ci-dessous.)

Qu'est-ce que le DOM (Document Object Model) ?

DOM est un acronyme qui signifie Document Object Model. Le Document Object Model représente la structure d'une page web, un peu comme le plan d'un article scientifique, avec des parties et des sous-parties. On peut se représenter le DOM comme un arbre, avec la page comme une racine qui se ramifie en différents éléments HTML de la page.

DOMContentLoaded signifie que le navigateur a généré ce modèle de page à partir du code HTML qu'il a reçu. Cela signifie également qu'il est prêt à exécuter des scripts et à afficher du contenu dynamique.

Qu'est-ce que le FCP ?

Le First Contentful Paint, ou FCP, est un autre indicateur de performance déterminant. Le FCP mesure le moment où le premier contenu du DOM est rendu, ce qui signifie le moment où le premier élément HTML est affiché. Il peut s'agir de texte, d'images ou de tout ce qu'un utilisateur considérera comme une partie de la page web. Le First Contentful Paint est différent du First Paint (FP), qui mesure à quel moment un élément de la page est affiché.

Il existe plusieurs autres indicateurs de performance qui mesurent le premier événement qui se produit. Par exemple, le temps jusqu'au premier octet (TTFB) mesure le moment où le tout premier octet d'un serveur web atteint le navigateur. Cependant, le FCP mesure le premier instant où un utilisateur peut voir qu'une page commence à se charger correctement. La perception des performances web par l'utilisateur étant le principal critère permettant de garantir l'engagement utilisateur sur un site web, le TTFB n'a quasiment aucune importance de point de vue de l'utilisateur.

Impact du DCL et du FCP sur le SEO

La vitesse des sites web joue un rôle crucial dans la mise en place d'une stratégie de SEO efficace (SEO, Search Engine Optimization). La performance est un facteur particulièrement important pour le classement du moteur de recherche de Google. Le DCL et le FCP sont deux indicateurs que Google privilégie pour évaluer la performance des sites, et Google PageSpeed Insights permet aux développeurs de les mesurer. (Bien que Google ne communique pas précisément le poids que représente ces deux indicateurs de performance dans ses classements de recherche, il les prend certainement en compte.)

Les développeurs peuvent entreprendre plusieurs démarches pour améliorer les indicateurs de performance d'un site. La mise en cache et le recours à un RDC constituent deux mesures essentielles pour améliorer les temps de DCL et de FCP.

Comment la technologie Cloudflare permet-elle d'améliorer le DCL et le FCP ?

Le CDN de Cloudflare accélère considérablement les sites web en mettant le contenu en cache partout dans le monde, ce qui permet de traiter beaucoup plus rapidement les requêtes HTTP. Par conséquent, les navigateurs reçoivent plus rapidement les pages HTML, ce qui améliore ces deux indicateurs.

Brève explication du fonctionnement des pages web

Une page web est constituée d'un mélange de code HTML, de code CSS et de code JavaScript. Lorsqu'un navigateur envoie une requête pour une page web, le serveur web correspondant envoie un fichier HTML qui contient, entre autres, une liste de tous les contenus CSS, JavaScript et autres que le navigateur doit demander séparément.

• Le HTML (Hypertext Markup Language) est un code qui donne aux navigateurs des instructions concernant la manière d'afficher le contenu et de demander d'autres contenus.
• Le CSS (Cascading Style Sheets ou feuilles de style en cascade) est un code qui donne des instructions supplémentaires concernant l'apparence du contenu HTML et la mise en page des pages web.
• JavaScript est un langage de programmation capable de transformer du contenu HTML lorsque certaines conditions précises sont remplies. En outre, JavaScript peut également être utilisé pour des tâches plus complexes comme les représentations en 3D, les jeux ou d'autres activités complexes sur le plan technique.

Le fichier HTML contient le contenu qui apparaît sur la page, des instructions sur la manière d'afficher ce contenu et des instructions relatives au chargement d'autres contenus, par exemple des images, provenant d'autres sources. Il renvoie à des fichiers CSS (feuilles de style) et à des bibliothèques JavaScript contenant des instructions complémentaires. Le navigateur récupère ensuite ce code, l'interprète et affiche la page web correspondante.

La plupart des navigateurs permettent de visualiser le fichier HTML que le navigateur interprète en effectuant un clic droit sur n'importe quelle page web et en sélectionnant « Code source de la page » dans le menu déroulant. Le fichier HTML s'ouvre alors dans un nouvel onglet. Le texte du fichier commence presque toujours par <!DOCTYPE html>.