返回

网页首屏加速:我们究竟在考虑什么?

前端

网页首屏加速一直是一个热门话题,各种优化方案层出不穷。但是,在优化之前,我们首先需要搞清楚:首屏加速,到底是要加速什么?

答案可能很简单:加快网页的展现过程。不过再细想一下,网页快不快是针对用户而言的,那么什么样的速度会让用户感到快呢?或者说,哪些指标能够衡量用户所感知的"快"呢?

我首先想到的是衡量网页加载速度的几个指标,比如页面加载时间、首屏时间、TTI、FCP、LCP、DOMContentLoaded、加载完成等。这些指标都可以用来衡量网页的加载速度,但它们并不能完全反映用户感知的"快慢"。

例如,页面加载时间是指从用户点击链接到整个页面完全加载完成所花费的时间。这个指标可以反映出网页的整体加载速度,但它并不能反映出用户在加载过程中所经历的体验。

首屏时间是指从用户点击链接到网页的首屏内容完全加载完成所花费的时间。这个指标可以反映出用户在看到网页的第一眼时所经历的体验,但它并不能反映出用户在滚动页面时所经历的体验。

TTI(Time to Interactive)是指从用户点击链接到网页完全可交互所花费的时间。这个指标可以反映出用户在与网页互动时所经历的体验,但它并不能反映出用户在加载过程中所经历的体验。

FCP(First Contentful Paint)是指从用户点击链接到网页上第一个内容元素被渲染完成所花费的时间。这个指标可以反映出用户在看到网页上的第一个内容元素时所经历的体验,但它并不能反映出用户在加载过程中所经历的体验。

LCP(Largest Contentful Paint)是指从用户点击链接到网页上最大的内容元素被渲染完成所花费的时间。这个指标可以反映出用户在看到网页上最大的内容元素时所经历的体验,但它并不能反映出用户在加载过程中所经历的体验。

DOMContentLoaded是指从用户点击链接到网页的DOMContentLoaded事件被触发所花费的时间。这个指标可以反映出网页的解析和执行速度,但它并不能反映出用户在加载过程中所经历的体验。

加载完成是指从用户点击链接到网页的所有资源都加载完成所花费的时间。这个指标可以反映出网页的整体加载速度,但它并不能反映出用户在加载过程中所经历的体验。

那么,哪些指标能够衡量用户所感知的"快慢"呢?

我认为,衡量用户所感知的"快慢",应该从以下几个方面考虑:

  1. 用户在加载过程中是否需要等待?
  2. 用户在加载过程中是否需要进行多次操作?
  3. 用户在加载过程中是否会感到卡顿?

如果用户在加载过程中需要等待,那么网页就会给人一种"慢"的感觉。例如,如果用户在点击链接后需要等待几秒钟才能看到网页的首屏内容,那么网页就会给人一种"慢"的感觉。

如果用户在加载过程中需要进行多次操作,那么网页也会给人一种"慢"的感觉。例如,如果用户在点击链接后需要先点击一个按钮才能看到网页的首屏内容,然后再点击一个按钮才能看到网页的全部内容,那么网页就会给人一种"慢"的感觉。

如果用户在加载过程中会感到卡顿,那么网页也会给人一种"慢"的感觉。例如,如果用户在滚动页面时出现卡顿,那么网页就会给人一种"慢"的感觉。

因此,在进行网页首屏加速时,我们应该重点关注以下几个方面:

  1. 减少用户在加载过程中需要等待的时间。
  2. 减少用户在加载过程中需要进行的操作次数。
  3. 避免用户在加载过程中出现卡顿。

通过优化这些方面,我们可以提高网页首屏加速的效率,让用户在访问网页时获得更好的体验。