为什么你的网站首屏加载这么慢？瓶颈往往在这里

首屏加载速度直接影响用户留存，但很多人优化了半天发现效果不明显。

最大的瓶颈是图片

一张 2MB 的图片卡住了整个页面的加载。解决方案：用 WebP 格式代替 PNG/JPEG，体积小 30% 以上；图片尺寸不要超过实际展示的 2 倍；用 loading="lazy" 延迟加载首屏以下的图片；用 srcset 为不同屏幕提供不同尺寸的图片。

JavaScript 阻塞渲染

脚本放在头部会阻塞页面渲染。把非关键的 JS 加上 defer 或 async 属性，让它们异步加载不阻塞 DOM 解析。关键渲染路径上的 CSS 内联到 HTML 里，减少网络请求。

字体文件太大

中文字体文件动辄几 MB。用 font-display: swap 避免文字不可见，只加载需要的字重（不要 100-900 全加载）。还可以用 unicode-range 切割字体，只加载页面实际用到的字符集。

测量比猜测重要

用 Lighthouse 跑一次就知道问题出在哪。FCP（首次内容绘制）、LCP（最大内容绘制）、TBT（总阻塞时间）三个指标说明大部分问题。优化之前先测一次，改完再测一次看效果。