DCL 和 FCP 都是 Google 用于评估网页性能的重要指标。这些指标的意义不仅仅在于测量页面的总加载时间或首字节时间 (TTFB)。
DCL 是 DOMContentLoaded 的缩写,是一个重要的网页性能指标。DCL 测量浏览器准备好执行任何客户端脚本的时间点。用更专业的术语来说,DCL 是在网页加载过程中,浏览器已组装 DOM(文档对象模型)且没有样式表阻止执行 JavaScript 的时间。
什么是 DOM(文档对象模型)?
DOM 是 Document Object Model(文档对象模型)的缩写。文档对象模型是网页结构的表示形式,与研究论文的大纲相同,包含要点和子要点。另一种方法是将 DOM 视为树,页面本身是树根,页面的不同 HTML 元素是树枝。
文档对象模型
DOMContentLoaded 表示浏览器已通过其接收到的 HTML 代码生成此页面模型。这也意味着它已准备好执行脚本和显示动态内容。
什么是 FCP?
首次内容渲染(FCP)是另一个至关重要的性能指标。FCP 测量呈现 DOM 中第一个内容的时间点——这意味着将显示第一个 HTML 元素。它可以是文本、图像或用户识别为网页一部分的任何内容。首次内容渲染与首次渲染(FP)不同,后者用于测量何时呈现页面的某种元素。
还有其他一些性能指标可以测量“首次”发生某事件的时间。例如,首字节时间(TTFB)测量来自 Web 服务器的第一个字节何时到达浏览器。但是,FCP 测量的是用户可以看页面开始成功加载的最早时间点。因为用户对 Web 性能的感知对于其与网站持续互动很重要,所以从用户的角度来看, TTFB 几乎无关紧要。
DCL 和 FCP 如何影响 SEO
网站速度是可靠的 SEO(搜索引擎优化)策略的关键部分。性能对于 Google 搜索引擎排名尤为重要。DCL 和 FCP 是 Google 评估性能时强调的两个指标,而 Google PageSpeed Insights 可以帮助开发人员对其进行评估。(尽管 Google 并未具体说明这两个性能指标对于搜索排名的影响有多大,但肯定将它们考虑在内。)
开发人员可以采取许多措施来改善网站的这些性能指标。利用缓存和利用 CDN 是缩短 DCL 和 FCP 时间的两个基本措施。
Cloudflare 如何改善 DCL 和 FCP?
Cloudflare CDN 通过在世界各地缓存内容,大大加快网站的速度,从而可以更快地响应 HTTP 请求。因此,浏览器可以更快地接收页面 HTML,从而改善这两个指标。
关于网页工作方式的简要说明
网页由 HTML 代码、CSS 代码和 JavaScript 代码组成。当浏览器请求网页时,相关的 Web 服务器会发送一个 HTML 文件,除其他信息外,这个文件中还包含浏览器必须单独请求的所有 CSS、JavaScript 和其他资产的列表。
HTML(超文本标记语言)代码为浏览器提供有关如何显示内容和请求其他资产的说明。
CSS(级联样式表)代码提供有关如何显示 HTML 内容以及有关网页布局的进一步说明。
JavaScript 是一种编程语言,可以接受 HTML 内容,并在满足某些指定条件时对其进行更改。此外,JavaScript 可用于更复杂的任务,例如 3D 渲染、游戏或其他技术复杂的活动。
HTML 文件包含页面上显示的内容,有关如何显示该内容的说明,以及从其他来源加载其他内容(例如图像)的说明。它链接到 CSS 文件(样式表)和包含进一步说明的 JavaScript 库。然后,浏览器将获取该代码,对其进行解析,并显示结果网页。
在大多数浏览器中,可以在任何网页上点击右键并在下拉菜单中选择“查看页面源代码”,以查看浏览器正在解析的 HTML 文件。然后,HTML 文件将在新选项卡中打开。文件的文本几乎总是以’’”开头。