本文介绍了陌陌内部hubble平台针对LCP（最大内容绘制）指标的优化过程，包括分析影响因素如服务器响应速度、资源加载和JavaScript/CSS渲染阻塞，并详细阐述了如何通过服务器响应优化、路由懒加载、JavaScript拆分压缩等手段提升前端页面的加载速度，最终显著改善LCP指标。
1. 背景介绍
hubble平台是陌陌内部的一个监控平台，hubble的前端项目采用Vue+Echarts+ElementUI编写，是典型的单页面应用。
随着项目的长期迭代导致项目体积愈来愈大，打开首屏速度缓慢，为了提升用户体验，了解用户的真实使用情况，引入了google推荐的页面性能指标测量sdk web-vitals, 并着重优化了LCP指标。
2. 什么是LCP？
根据W3C Web性能工作组的讨论和Google的研究，发现度量页面主要内容的可见时间有一种精准且简单的方法，就是查看 “绘制面积” 最大的元素何时开始渲染。所谓绘制面积可以理解为每个元素在屏幕上的 “占地面积”，如果元素延伸到屏幕外，或者元素被裁切了一部分，被裁切的部分不算入在内，只有真正显示在屏幕里的才算数。最大内容绘制 (LCP, Largest Contentful Paint) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。因此能更真实的反馈用户实际体验。
3. 哪些因素会影响LCP
根据google的研究可以得到影响LCP主要有以下三个因素：
-
服务器响应速度缓慢
-
资源加载时间
-
JavaScript 和 CSS 渲染阻塞
因此根据上述几个因素，展开了LCP的优化
4. 优化过程
4.1 服务器响应速度缓慢
浏览器从服务器接收内容所需的时间越长，
最低0.47元/天 解锁文章
扫一扫
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
