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

Le DCL et le FCP sont deux indicateurs importants que Google utilise pour évaluer les performances d'une page web. Ces indicateurs vont au-delà de la simple mesure du temps de chargement total d'une page ou du temps jusqu'au premier octet (TTFB).

Objectifs d’apprentissage

Cet article s'articule autour des points suivants :

  • Définir le DCL et le FCP
  • Comprendre la manière dont les navigateurs utilisent le Document Object Model (DOM)
  • Expliquer l'impact de ces indicateurs de performance sur le référencement naturel

Copier le lien de l'article

Qu'est-ce que le DCL ?

DCL, short for DOMContentLoaded, is an important webpage performance metric. DCL measures the point when a browser is ready to implement any client-side scripting. In more technical terms, DCL is the time during the process of loading a webpage when the DOM (Document Object Model) has been assembled by the browser, and no stylesheets are preventing JavaScript from executing. (For help understanding these terms, see 'Brief note on how webpages work' below.)

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.

Document Object Model

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.

How do DCL and FCP affect 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.)

Developers can take a number of steps for improving these performance metrics for a site. Taking advantage of caching and leveraging a CDN are two essential steps for improving DCL and FCP times.

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