深度详解SEO页面加载时间那点事

在SEO优化中页面加载时间是用户体验中重点考量的因素之一,那么大家知道页面加载的理想时间是多少呢?又如何才能提升站点的加载速度呢?
先说结论,为了保证正常用户体验,页面首屏的加载完成要控制在1.5秒以内,再慢也不能超过3秒。结论很简单,但是我们又如何检查站点页面的加载时间,显然不可能掐表数。

页面加载时间的指标

要想搞明白这个问题,首先我们要搞清楚浏览器页面加载时间有哪些指标:

  • DNS Time:dns解析时间,进行域名解析所需要的时间。
  • SocketTime:客户端建立TCP连接的时间。
  • FirstByte Time(FP):从浏览器请求页面到服务器返回第一字节的时间。
  • First Contentful Paint (FCP):代表浏览器向屏幕绘制内容,也就是浏览器打开页面首屏区域内所有的文本、图像或其他可视元素的时间点。
  • Largest Contentful Paint (LCP):整个页面中可以看到的所有内容素绘制完成并正常显示的时间点。
  • Download Contentful Time(DCL):网页中所有资源对象下载完成的时间。

页面的加载是一个复杂的过程,以上只是潘某人SEO认为在页面加载时间中相对比较重要的时间节点,并且以上的时间节点是根据先后顺序的。

重点时间指标

在SEO优化中潘某人SEO认为最关键的是FCP和LCP时间,这不仅仅是影响SEO,还是直接导致跳出率高转化差。

FCP时间

First Contentful Paint (FCP),这在SEO优化中是非常重要的时间,也就是用户打开网页时第一眼可以看到的屏幕区域内的所有可见元素的加载完成。

如在百度搜索引擎的白皮书建议的首屏加载时间要达到1.5秒以内,最差也要3秒以内,这是评判站点用户体验表现的重要因素。
网页的FCP时间
要查看网页的FCP时间,可以使用浏览器打开开发者工具。在Performance选项卡下,点击"录制"按钮然后刷新要访问的页面,记得清空缓存,页面加载完成之后,点击"停止"按钮。在左侧面板中,找到"First Contentful Paint",点击展开,就可以看到FCP、FP、LCP、DCL时间,如上图以潘某人SEO站点为例。
如果FCP时间超过理想值,就看下前面的时间节点DNS Time、SocketTime、FirstByte Time,一般来说问题都会在FirstByte Time。也就是首字节加载时间过长,也就是后端相应速度太慢,一般这个时间控制在500毫秒以内,如果严重超出这个值那就要考虑下代码逻辑是否有问题,是否做了缓存,服务器配置是否足够,总之找到后端影响慢的问题。

LCP时间

Largest Contentful Paint (LCP):整个页面中可以看到的所有内容素绘制完成并正常显示的时间点。潘某人SEO这个时间应该控制在3秒以内,也就是说基本上要做到用户滑动页面的时候内容已经提前加载完成,没有等待时间。

影响LCP速度的最大因素就是页面资源过多而且又大,如果带宽又不给力就容易导致浏览器线程阻塞。解决方法就是资源该合并的合并,图片该压缩的压缩,该延迟加载的就延迟,或者就重要资源做好预加载,再不行就提带宽。

如何提升首屏加载速度

LCP和FCP时间的关系,FCP是LCP之前的时间节点,就是LCP的组成部分,而我们今天的重点就是在LCP时间不变的情况下如何提升首屏FCP时间。

站点通过优化提升了LCP时间,FCP时间自然也会同步的提升,但是首屏FCP的提升是非常有限的。最有效的方法就要对页面的内容做分割。

正常来说一个页面的加载在dom数构建完成之后就开始所以加载资源,也就是说整个页面可能东一块西一块的加载出来内容。

我们要做的就是优先加载首屏区域的内容,等首屏内容加载完成了才进行加载页面剩余位置的内容,如此在LCP时间不改变的情况下就可以实现首屏FCP加载时间的大幅度提升。

申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用!

本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理

本文地址:https://www.chateach.com/seo/seozhishi/1026sudu

相关文章

  • 网站SEO优化之关键词稀缺性

    SEO优化,关键词,稀缺性

    如果你的站点不管怎么优化,很大可能就是关键词选择有误,正确的关键词是SEO优化成功的关键。​SEO优化的目的是流量的获取,而网站的流量则是各个关键词流量的总和,同时流量的质量类中则则是由关键所决定,因此网站优化原则正确的关键词对于站点的优化效果以及转化效果至关重要。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 874
    • SEO优化
    • 关键词
    • 稀缺性
  • 学习seo网站优化难吗

    seo网站优化难吗

    对于SEO优化这个岗位可以说任何一个学科都不涉及,因此SEO优化基本都是零基础入门的,那么SEO优化学习难吗?如何才能够学好SEO优化呢?也许你是参加了培训机构,也许你是自学SEO优化。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1430
    • seo网站优化难吗
  • TrustRank域名信任度

    TrustRank域名信任度

    TrustRank域名信任度?由于搜索引擎在计算网页排名的时候,非常依赖连接,而且连接的质量越来越显得重要。由于搜索引擎在计算网页排名的时候,非常依赖连接,而且连接的质量越来越显得重要。在这种情况下,需要对连接的来源站点质量进行判断。更重要的是,以前依靠连接和相关性来决定排名的方式,

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2243
    • TrustRank域名信任度
  • 百度移动适配工具如何使用

    移动适配工具

    百度移动适配工具如何使用?百度移动搜索提供“移动适配”服务,如果您同时拥有PC站和手机站,且二者能够在内容上对应,即主体内容完全相同,您可以通过移动适配工具进行对应关系提交。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2505
    • 移动适配工具
  • 网站排名优化seo学习心得

    seo学习心得

    近几年网络推广的费用成本直线上升,正是因为如何免费的SEO优化更加的得到青睐,可以有效的降低推广成本,因此对于SEO优化这块的专业人士的需求还是很大的,SEO优化作为在学校之后没有设立任何教学的领域,更多的依靠社会人士的自学来创造出相关的专业人士。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1436
    • seo学习心得
  • 内容采集对于网站优化有什么影响

    采集对于排名影响

    内容采集、伪原创、抄袭等操作方式对于网站排名会不会有影响;凡事都有两面性,重点在于我们找到里面的平衡点,对于seo优化来说采集伪原创的方式并不是不可以使用,关键在于掌握其中的奥秘.....

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1601
    • 采集对于排名影响
  • 移动端适配的几种实现方式

    移动端适配

    移动端适配的几种实现方式,rem布局、flex布局、百分比布局、字体适配、vm布局。纯CSS的相对单位vw,vh,它们相对的是终端视口,视口(移动端你就可以当成屏幕就好啦)的宽为100vw,高为100vh。使用起来很简单

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 14841
    • 移动端适配
  • AI人工智能生成内容用于SEO优化可行吗?

    AI写作,SEO优化,文心一言

    对于SEO来说最大的难点在于内容的创作,首先在长时间的运营之后,SEO们会发现内容创作思路的匮乏,同时内容的创作会消耗大量的人力,AI人工智能的出现可以很好的解决这个问题,AI写作是否可以运用于SEO优化呢?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1065
    • AI写作
    • SEO优化
    • 文心一言
  • 如何禁止百度建立页面快照

    屏蔽快照

    很多站点出于隐私的考虑不希望百度保留快照,网上也在讨论如何禁止百度保留快照的方法。其实百度早已对此有过说明,但藏在一篇不起眼的文章中不引人注目,导致依然非常多的人不清楚该如何操作。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1777
    • 屏蔽快照
  • 为什么搜索结果和点进去看的内容不一样

    User-Agent,搜索引擎

    有时候会遇到这种情况,在搜索引擎上找到了需要的内容,但是点击进去网站之后,发现和搜索引擎中的检索结果无关,甚至有的页面连主题都不相关。为什么会有这种情况出现呢?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 3411
    • User-Agent
    • 搜索引擎
  • 加速你的网站,提升SEO排名——解析网页加载速度对搜索引擎优化的影响

    SEO排名,加载速度

    在当今这个快节奏的时代,没有人愿意等待一个缓慢加载的网页。对于网站运营者而言,网页打开速度不仅影响用户体验,还直接关系到SEO效果和最终的流量转化率。今天就和潘某人SEO一起探讨网页加载速度对SEO的具体影响,并提供一些实用的方法来提高你的网站速度。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 698
    • SEO排名
    • 加载速度
  • 死链对于SEO的危害,及其处理方式

    死链,SEO优化

    ​网站运营之中死链的出现是无法避免的,但如果无法及时发现并正确处理势必对于网站的SEO优化产生一定的影响。那么我们应该如何及时发现死链,如何及时处理呢?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1176
    • 死链
    • SEO优化
  • seo中关键词筛选

    关键词优化

    关键词的选择非常的重要,知道如何从海量的关键词筛选出有价值的关键词对于SEO优化来说是至关重要的,关键词应该如何使筛选呢,才可以更好的满足搜索需求的同时满足SEO优化。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1541
    • 关键词优化
  • 搜索引擎网页质量判定的标准

    搜索引擎,网页质量

    搜索引擎的根本是什么,是内容是对于用户搜索需求满足,这是搜索引擎最根本的逻辑,后续的一切也都是根据这个方向展开的。根据《百度搜索引擎网页质量白皮书》,站长们在百度搜索引擎优化中如何才能输出高质量内容呢?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 939
    • 搜索引擎
    • 网页质量
  • 什么是反向链接,及其作用

    什么是反向链接

    什么是反向链接,及其作用对于SEO优化中起着什么作用呢?反向链接的种类非常的多,只要满足上述指向关系。比如常见的友情链接、网页目录、外部链接等等都可以认定是外链形式的反向链接。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2658
    • 什么是反向链接
  • seo页面优化的常用技术

    seo页面优化的

    seo页面优化的常用技术,从核心关键词分析定位、网站目录和页面优化、标签优化技巧、利用好百度搜索资源平台、提高页面的附加价值、访客到客户的转化工作几个角度来讲下SEO页面优化的常用技术。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1640
    • seo页面优化的
  • 快去看看API主动推送被降额了吗

    API主动推送,降额

    最近在论坛里看到很多站点的百度API主动推送额度被下调到了100条。这向站长们发送了什么样的信息呢?又意味着什么?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2648
    • API主动推送
    • 降额
  • 用户喜欢的内容的样子,你知道吗

    SEO优化,用户喜欢的内容

    SEO优化回归本质是内容的优化,内容的核心是基于用户的需求,那么你了解用户吗?用户真正想要的内容是怎么样呢?当你搞明白了这个问题,相信对于的SEO优化会有很大的帮助。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1181
    • SEO优化
    • 用户喜欢的内容