网站打开慢怎么办？懒加载和首屏瘦身先做

网站打开速度慢，很多人上来就换服务器，其实八成的慢是前端资源堆出来的。先做懒加载和首屏瘦身这两招，成本**、见效最快，做完不够再考虑升级硬件。整体提速的三大方向怎么分工，之前写过一篇 target="_blank"，这篇专讲前端的两个重点动作。

一、先量出慢在哪一段

动手前用测速工具跑一遍，看两个数字：首字节时间（服务器响应有多快）和完全加载时间（资源下载有多久）。首字节快、加载慢，问题在前端，这篇的两招对症；首字节本身就慢，先去查服务器和程序。量完再动手，不做无用功。

二、懒加载怎么加才不伤体验

懒加载是只加载用户视野内的图片和视频，往下滚动再按需加载。首屏以外的长图、视频和评论区配图全都可以懒加载。两个注意点：给图片预留占位高度，避免滚动时页面跳动；首屏大图不要懒加载，反而要预加载，否则首屏反而变慢。

三、首屏优化三处下手

**处是图片，图片压缩在上传前统一做，首屏配图控制在200KB以内，大图转WebP格式体积能减三成以上。第二处是脚本和样式，把用不到的插件脚本删掉，资源合并把多个小文件并成一两个。第三处是字体和图标，中文全量字体包动辄几MB，改用子集化字体或SVG图标。

四、优化前后对照

五、做这两招前的两个提醒

• 改完先在测试环境验证，懒加载参数配错会导致部分浏览器不显示图片
• 每次改版后重新测速一次，新内容上传原图会把优化成果一夜吃掉

六、验收标准

做完的验收很简单：手机流量环境打开首页，3秒内能看到完整首屏；往下滑动长页面，滚动顺滑不跳动。达到这两条，前端这一关就过了，剩下的再看服务器要不要动。