DCL 和 FCP 如何影响 SEO?

65 篇文章 12 订阅
58 篇文章 0 订阅

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 文件将在新选项卡中打开。文件的文本几乎总是以''<!DOCTYPE html>”开头。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCPDCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发者工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值