不说废话，结合经验，总结了8个提升首屏的简单方法：
第一条：提升LCP
有关提升LCP
用户设备太多了
一般网站受众包含各种屏幕设备，以观测云saas版本为例，上百种设备登录：
用户屏幕尺寸不太一样
不同的设备，可能屏幕尺寸等一不一样，以观测云为例，有以下这些屏幕尺寸：
LCP元素不太一样
屏幕尺寸不一样，在不同的设备上，可能被认为最大可见元素也不一样
查看上图，基本能看出来LCP元素并非总是页面中的最大的图片。
该如何知道用户的屏幕尺寸和最大可见元素
屏幕尺寸
获取屏幕尺寸的代码相对简单：
window.screen
代码返回对象包括屏幕尺寸信息：
最大可见元素
有关LCP的相关数据，实现代码如下：
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%，即便采用百分位也不一定很好的暴露出问题，针对性能优化，需要考虑探查的维度。
