不说废话，结合经验，总结了8个提升首屏的简单方法：

第一条：提升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%，即便采用百分位也不一定很好的暴露出问题，针对性能优化，需要考虑探查的维度。

前端首屏优化 | 提升首屏的 8 个很简单的手段