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