第一条：提升 LCP

有关提升 LCP

用户设备太多了

一般网站受众包含各种屏幕设备，以观测云saas 版本为例，上百种设备登录：

用户屏幕尺寸不太一样

不同的设备，可能屏幕尺寸等一不一样，以观测云为例，有以下这些屏幕尺寸：

LCP 元素不太一样

屏幕尺寸不一样，在不同的设备上，可能被认为最大可见元素也不一样

查看上图，基本能看出来 LCP 元素并非总是页面中的最大的图片。

该如何知道用户的屏幕尺寸和最大可见元素

屏幕尺寸

获取屏幕尺寸的代码相对简单：

javascript复制代码window.screen

代码返回对象包括屏幕尺寸信息：

最大可见元素

有关 LCP 的相关数据，实现代码如下：

javascript复制代码new PerformanceObserver((entryList) => {  for (const entry of entryList.getEntries()) {    console.log('LCP candidate:', entry.startTime, entry);  }}).observe({type: 'largest-contentful-paint', buffered: true});

执行的结果是，如果检测到 LCP，会打印 lcp 相关信息，见下图

这里我们能看到 LCP 的很多信息，其中：

• element 是 LCP 的 node，如果是 image 类型，也就能看到这个 image 的 url。

• startTime

• renderTime:渲染时间

找到了 LCP 元素后，我们应该怎么做呢？

这里能做的有以下三点：

• 提前加载 LCP 资源；

• 优先加载关键资源

• 延迟加载资源

有关提前加载 LCP 资源，上面我们看到了 LCP 元素是图片，可以如下操作：

有关优先加载关键资源，我们可以如下操作：

有关延迟加载资源，我们需要知道哪些资源阻塞了页面渲染

上图中，我们能看到 js css 等阻塞了页面渲染。我们按资源类型，查看一下占比：

目前来看主要是 js 和 css 阻塞了页面渲染。如果按照资源名称排序，我们也能找到哪些资源影响用户最多：

如上图所示，需要对 top10 的阻塞页面渲染的资源进行优化。

除了正常加载，我们也能做一些缓存的内容

为了得到更好的缓存，我们可以使用:

• cdn（这个好处就不赘述了）

• 减少 304

有关 304 这个还是有必要说一下的，304 资源没有充分利用了本地缓存文件，经过去服务器对比发现资源没有更新。如下图 16.8%的资源，不仅浪费了带宽，最重要的对用户体验有一定影响。

针对这些内容，我们可以明确列出资源清单，进行优化。

除了缓存，还可以从传输入手

说到传输，都会说做压缩，但实际压缩效果是什么情况呢？这里需要知道：

• resource_size:资源大小

• resource_encode_size:传输大小如下图所示，就列出了具体资源的大小和传输大小：

这样，我们就能看到如实际不同域名所压缩的情况：

根据实际数据，也可以做对应的措施，也可以从资源类型来看：

除了以上 6 个方面，还有哪些可以做？

减少请求数量：

通过请求数量和页面加载时间的情况，已知可能存在线性关系，需要

查找相关性最强的因素

对于性能影响的因素很多，比如 js_size,css_size,dns_time,tcp_time 等，哪个因素才是最关键的因素呢。我们可以利用统计学的方式，从真实数据中来看，做相关性分析，根据找到的因素或者页面进行优化：

小结

文章字数不多，简单列了 8 个思路，希望算是科学的量化体系之一。

写在后面的话

很多技巧在很多文章都有，优化的手段很多，本文只随机列出 8 点，至于优化的效果，需要依照当前几点来看目前的状态，太多时候，我们做了优化以后，还总有人抱怨网站很卡。

以首页来说，可能首次加载相对跳转回来，两次加载一平均，往往看起来数据还算可以，但更多的时候，可能首次加载 4s 占 70%，1s 的占 30%，即便采用百分位也不一定很好的暴露出问题，针对性能优化，需要考虑探查的维度。

作者：观测云 Ted

链接：https://juejin.cn/post/7280436036957716515

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。