How do DCL and FCP affect SEO? | Web performance metrics

What is 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.)

What is the DOM (Document Object Model)?

DOM is an acronym that stands for Document Object Model. The Document Object Model is a representation of the structure of a webpage, not unlike an outline of a research paper, with points and sub-points. Another way to think of the DOM is as a tree, with the page itself as the root, branching off into the different HTML elements of the page.

DOMContentLoaded means that the browser has generated this model of the page from the HTML code it received. This also means it's ready to carry out scripts and display dynamic content.

What is FCP?

First Contentful Paint, or FCP, is another crucial performance metric. FCP measures the point in time when the first content from the DOM is rendered – meaning the first HTML element is displayed. This can be text, images, or anything that a user will recognize as being part of the webpage. First Contentful Paint is different from First Paint (FP), which measures when any element of the page is rendered.

There are several other performance metrics that measure the 'first' thing to occur. For instance, Time To First Byte (TTFB) measures when the very first byte from a web server reaches the browser. However, FCP measures the first point at which a user can see that a page is beginning to load successfully. Because the user's perception of web performance is what's important for keeping users engaged on a website, TTFB is almost irrelevant from a user's perspective.

How do DCL and FCP affect SEO?

Website speed is a crucial part of a solid SEO (search engine optimization) strategy. Performance is an especially important factor for Google search engine rankings. DCL and FCP are two metrics that Google emphasizes in its assessment of performance, and Google PageSpeed Insights helps developers measure them. (Although Google doesn't share precisely how much these two performance metrics factor into its search rankings, it certainly takes them into account.)

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.

How does Cloudflare improve DCL and FCP?

The Cloudflare CDN vastly speeds up websites by caching content in locations around the world, so that HTTP requests are responded to much more quickly. As a result, browsers receive page HTML more quickly, improving both of these metrics.

Brief note on how webpages work

A webpage is made up of a combination of HTML code, CSS code, and JavaScript code. When a browser makes a request for a webpage, the relevant web server sends an HTML file which contains, among other things, a list of all the CSS, JavaScript and other assets that the browser than must request separately.

• HTML (Hypertext Markup Language) is code that provides instructions for browsers on how to display content and request other assets.
• CSS (Cascading Style Sheets) is code that provides further instructions on how HTML content should appear and how webpages are laid out.
• JavaScript is a programming language that can take HTML content and change it when certain specified conditions are met. Additionally, JavaScript can be used for more complex tasks like 3D rendering, games, or other technically complex activities.

The HTML file contains the content that appears on the page, instructions on how to display that content, and instructions for loading other content, such as images, from other sources. It links to CSS files (stylesheets) and to JavaScript libraries with further instructions. The browser then takes that code, interprets it, and displays the resulting webpage.

In most browsers, it is possible to view the HTML file that the browser is interpreting by right-clicking on any webpage and selecting 'View Page Source' in the drop-down menu. The HTML file will then open up in a new tab. The text of the file will almost always start with '<!DOCTYPE html>'.