移动端首屏慢，先找渲染阻塞而不是换服务器

移动端首屏打开慢，第一反应往往是升级服务器或加带宽。但很多站点服务器响应只有几百毫秒，首屏却要三四秒才出来。时间不是花在等服务器，而是花在等浏览器把页面画出来。方向找错，投入就白花了。

先把三段拆开

一次页面加载可以粗分为三段：网络传输、服务端处理、浏览器渲染。用开发者工具的网络面板看时间轴，能直观看出时间堆在哪一段。若服务端响应很快，而内容出现得很晚，问题就在渲染，升级配置没有意义。

找首屏的关键元素

首屏最大的那块内容，可能是标题、可能是主图、也可能是一段文字。先确认它是什么，再看它的加载链路：图片是否过大、是否在很晚才被发现、是否被其他资源挤在后面。优化的对象是这一块，而不是整个页面。抓错对象，做完一轮指标可能一点不动。

head里的同步脚本最伤

放在head里且没有defer或async的脚本，会阻断页面解析。第三方统计、客服插件、地图组件是最常见的来源。处理方式是按需延迟加载，或移到页面底部，但要先确认脚本之间没有依赖顺序，否则会报错，反而引发新的故障。

样式也要分轻重

外链样式表同样会阻塞渲染。首屏用到的样式可以内联进页面，其余样式异步加载。注意不要把整站样式都塞进head，那会让每个页面都变重，首屏没快，后续页面反而更慢。

字体是隐形的大件

中文字体文件动辄几兆，未加载完时文字可能不显示或闪一下。可行的做法是只保留实际用到的字形子集，给字体加预加载提示，并设置合适的加载策略，让文字先用系统字体显示，字体到位后再替换。

首屏图要早发现

首屏主图往往在样式表解析后才被发现，时间被白白浪费。给它加预加载提示，写上明确的宽高，使用按屏幕密度提供的多尺寸版本，能明显缩短出现时间。宽高不写，还会带来布局跳动，指标一起变差。

别用CDN掩盖问题

CDN能改善传输，但解决不了阻塞。资源顺序不合理、脚本过大、字体过重，这些问题在任何CDN上都存在。先修页面结构，再考虑加速，顺序反了就是花钱买心安。

验收要用真机和弱网

桌面浏览器加高速网络测出来的数字没有参考价值。用中低端真机、限制网络速度、清空缓存，测三到五次取中间值，再看真实用户的第75百分位数据是否改善。冉冉科技在做站点性能优化时，会以现场数据为准，而不是以实验室跑分为准。

小结

首屏慢，多半是浏览器在排队。把队伍理顺，比换一台更快的服务器有效。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。