摘要： 这在不侵入现有业务代码的情况下，简单快速提升网站性能，check一下自己网站的优化方案点

关键词： nginx  web前端  性能优化  Lighthouse

 

一、问题的描述

1. 问题的表现是怎样的？

页面接口请求慢、静态资源（js/css/图片等）加载慢、资源太大、不及时、资源加载数量多等等，导致页面性能不高，用户体验差。

2. 问题的复现路径

打开浏览器控制台，查看页面首屏显示时间，各类资源的加载情况，以及全部资源加载的时长，通过Lighthouse来检测当前页面，查看优化和修复的点；

二、问题产生的原因分析

2.1、前端更多的是关注业务代码的和交互的优化；

2.2、没有合适的工具去检查优化的点，凭经验进行优化，规范不够；

2.3、测试用例没有覆盖，测试范围和手段不多，质量不高；

2.4、项目交付要求不高，限制不够；

2.5、没有触发合适的场景来暴露问题；

 

三、问题的解决方案

大家按下面的方案点做check就行，大部分都是能立马操作并且效果是立竿见影的，我是想大家通过这个优化，提升对前端性能优化的关注。

3.1、常规优化解决方案：

• 开屏动画 骨架屏 骨架布局占位 默认背景图占位 （前端根据需求优化）
• 图片懒加载
• js\css按需加载（打包按路由请求等等）
• 各级缓存合理使用等等

3.2、无需开发优化解决方案：

• 请求的静态资源（js/css）添加prefetch/dns-prefetch、preload等
• 静态资源（js、css等）请求和返回添加gzip 压缩（nginx处理一下）
• 所有请求http1.x 改成http2 （运维在域名服务管理的平台处理一下就行）
• 支持ipv6网络
• 接口内容请求和返回添加gzip 压缩（接口服务里添加统一服务组件处理）
• 图片资源请求和返回 不要 添加gzip 压缩（图片有自己的压缩，再gzip，适得其反，浪费cpu）
• 图片增加OSS存储服务（用OSS服务就行）
• 图片添加网宿CDN 压缩和转码webp/avif （找运维开通，前端对请求的资源添加请求参数，服务供应商能做到无损压缩和快速转码，再刷一下CDN）

以上，各个优化点的好处，建议大家去查查资料，处理完效果是很明显的，页面正常开屏的速度都能到1秒左右。我们的h5首页，在第一次优化完后，基本可以对标京东的h5首页，从全部资源的加载完需要5秒左右，变成2秒内，开屏基本在800ms左右。

四、经验和启发

        一个优秀网站的提优，除了日常的代码优化、交互优化、网络优化等等外，更多的时候是受开发者本身知识储备的限制，导致网站的优化不能得到很好的处理。

       在这里，我建议大家在开发完之后，要明确要求开发做 Lighthouse 检查，针对提示点进行修复；

🌟拓展阅读：