深度详解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

相关文章

  • 移动端适配解决方案

    移动端适配

    随着移动互联网的不断发展,在某些领域移动端的流量已经远超PC端,因此越来越多的站点开始重视移动端的优化,如何把移动端和PC端进行结合,对于SEO优化是一个非常重要的问题。移动适配的方案有很多,选择合适的移动适配解决方案是非常的重要的。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1085
    • 移动端适配
  • 这才是SEO站外优化正确的做法

    站外优化

    在SEO的世界里,很多人把“站外优化”等同于“发外链”。但事实上,这种理解是错误的也是片面的。随着搜索引擎算法的不断升级,对买卖外链行为的严厉打击),单纯依赖外链建设已经不再有效,甚至可能适得其反。那么,真正的SEO站外优化到底应该怎么做?其实,品牌建设才是站外优化的核心驱动力,而外链只是其中的一环。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 213
    • 站外优化
  • 速查站点违规低质页面

    低质页面,百度搜索

    23年8月底,百度搜索资源平台发布了百度搜索违规低质页面问题说明,将加强对于违规和低质页面的清理,速度看看你的站点在此之列吗。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 975
    • 低质页面
    • 百度搜索
  • 交换链接的作弊手段

    友链作弊方法

    交换链接的作弊手段有哪些,如果你不知道这些作弊方式,那么你可能一直在蒙在鼓里被人占便宜。上链后删除、使用JS代码调用的友情链接、链接使用Nofollow标签、使用假的页面等都是常见的友链的作弊方法。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1573
    • 友链作弊方法
  • SEO入门到精通需要掌握的知识

    SEO入门教程

    简单理解:SEO实际上是指搜索引擎优化,主要的目的是基于SERP(搜索结果),通过更加符合搜索引擎抓取、索引、排名的方法,有针对性的调整自有网站的相关数据指标,从而提高目标网站相关关键词的排名。 那么对于SEO优化入门者需要掌握哪些知识点,走向精通。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2129
    • SEO入门教程
  • 移动端SEO优化应该怎么做呢?

    移动SEO优化

    移动端SEO优化应该怎么做呢?移动时代已经到来,并没有给人们太多思考时间,而越来越多的用户通过手机进行社交、查看新闻、移动办公及浏览网页等,随着移动营销被推上风口浪尖,众多企业开始转向移动SEO,纷纷试水移动搜索引擎优化。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1885
    • 移动SEO优化
  • 老域名建站对seo真的有好处吗

    老域名建站,seo优化,新站考核期

    很多站点的时候会选用权重高的老域名,可以获得更好的效果,但是事实真的是这样吗?老域名建站大部分的情况下不但没有正向作用,还会有负面的作用,那么老域名建站需要注意哪些方面呢?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 976
    • 老域名建站
    • seo优化
    • 新站考核期
  • 内容采集对于网站优化有什么影响

    采集对于排名影响

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

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1344
    • 采集对于排名影响
  • 如何在SEO竞争中脱颖而出

    SEO竞争

    在这个信息爆炸的时代,想要让你的网站在众多竞争对手中脱颖而出,并不是一件容易的事情。但别担心,通过遵循一些关键策略,你可以显著提升你的站点排名,吸引更多的访问者。今天,就和潘某人SEO来探讨一下要想做好SEO,需要注意哪些方面。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 192
    • SEO竞争
  • SEO必须的知道–百度算法大汇总

    百度算法,算法解析

    百度算法大全,解析主要的百度算法跟新,算法主要可以分为5大类,分别是网站内容质量、用户需求满足、搜索恶意竞争、网站安全问题、落地页体检问题。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2384
    • 百度算法
    • 算法解析
  • 百度落地页规范之广告体验

    落地页,广告,百度

    近期百度发布了搜索违规落地页的体验问题说明,主要从pc端移动适配、页面排版布局、交互功能规范,这三方面进行了说明。各个站长还是速度的自查站点是否有违规的行为,又一波考验到来了。广告投放的关键点是什么,需要注意哪些方面呢?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 971
    • 落地页
    • 广告
    • 百度
  • 如何屏蔽某些页面的抓取,但是让页面中链接正常抓取

    meta标签屏蔽页面抓取

    如何屏蔽某些页面的抓取,但是让页面中链接正常抓取,对于这种情况,使用meta标签来进行屏蔽页面的抓取,可以变得更加的有效。相比常用的robots文件屏蔽,或者nofollow标签屏蔽的实用性更加的广。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 3248
    • meta标签屏蔽页面抓取
  • ​决定SEO优化成败的根本原因

    SEO失败的原因

    其实9成以上的网站SEO优化都是已失败而告终的,为什么会有如此之高的失败率呢?到底是什么原因导致了SEO优化如此的艰难呢?更多的原因并不是在于SEO优化人员的技术业务能力不足导致的,真正原因是?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1261
    • SEO失败的原因
  • 出图率提升网站点击率关键

    出图率,网站点击率

    但是在同一页面可以展示的,关键词的飘红程度不会有很大的差距,毕竟关键不飘红也不可能有展示的机会。所以标题及摘要显示的内容对于用户的吸引力,更为的关键。出图率是更为关键的,对提升点击率。图片和文字对于人视觉上的吸引力,图片是远高于文字的。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 790
    • 出图率
    • 网站点击率
  • 巧用robots避免蜘蛛黑洞

    robots,蜘蛛黑洞

    今天我们来了解下什么是蜘蛛黑洞,黑洞大家应该有一定的了解,属于一种高质量高引力天体,包括光任何的物体都无法逃逸。蜘蛛黑洞既是蜘蛛进入之后无法再出来,对正常的抓取工作产生负面影响。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1467
    • robots
    • 蜘蛛黑洞
  • 下载站注意,清风算法4.0来了

    清风算法4.0,SEO算法,下载站

    如果你的站点是下载站,那么请一定进来看下百度清风算法4.0版本,2021-09-02百度搜索资源平台发布公告对清风算法进行升级,进入了4.0版本。本次清风算法升级加大了针对不符合规范的低质下载站,将限制其在百度搜索结果中的展现。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1478
    • 清风算法4.0
    • SEO算法
    • 下载站
  • 域名更换,如何降低对排名权重的影响

    域名变更对于SEO的影响

    网站的域名变更,对于网站优化来说是一件需要非常谨慎对待的,就算你知道怎么操作,但是有着无数的坑等着你,分享几个常见的问题在域名变更的时候会对网站权重流量有着致命打击的注意点......

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2534
    • 域名变更对于SEO的影响
  • 索引量工具数据异常的处理方式

    索引暴跌

    百度搜索引量暴跌的原因有哪些,出现这种问题我们应该如何的处理。对于搜索引量很多站点存在这一定的误区,只有正确的理解看待索引数据,那么才能使得数据更加的稳定发展。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1024
    • 索引暴跌