一、首屏慢，往往是三张图加两个脚本
页面速度的锅，多数不在服务器，在首屏资源。
一张没压缩的横幅图、两个同步加载的统计脚本，就能让首屏多等两秒。
首屏慢，往往是三张图加两个脚本。这个组合我见过太多次。
首页大图没有压缩、轮播三张原图、加上统计脚本和广告脚本，加起来能到七八兆。手机弱网环境下，用户等五秒就走了。
所以优化首屏的顺序是：先减体积，再减数量，最后才谈技术手段。顺序反了，做再多也没用。
二、三个该看的指标
一、首字节时间。反映服务器和网络，超过一秒就该查。
二、首屏渲染时间。反映关键资源加载，这是用户感受最直接的。
三、布局偏移。图片没写尺寸，加载完页面往下跳，体验很差。
三个指标里，第三个最容易被忽略，但影响最大。
三、图片的四个处理
一、压缩。照片压到原来三分之一通常看不出差别。
二、定尺寸。宽高都写上，避免跳动。
三、换格式。WebP 比 JPEG 小不少，兼容性也够了。
四、首屏图不懒加载，其余图懒加载。
三个该看的指标：首字节时间、首次内容绘制、最大元素渲染时间。三个分别对应「服务器快不快」「第一眼看到东西没」「主要内容出来没」。
多数人只盯第一个，实际上用户感知最强的是第三个。你把首页大图缩小，第三个指标立刻好看。
测的时候用真实网络，别用本地。本地测出来都是满分，上线就崩。
乱写的三个理由：读者读得快、算法看结构、以及你自己的时间不够。
第三条最真实。写得乱，往往不是能力问题，是排期问题。
但乱写省下的时间，会在改稿和流失上还回来。
四、脚本的处理
一、非关键脚本加 defer 或 async。
二、统计、广告这类第三方脚本，放到页面末尾。
三、能用服务端渲染的部分，别放前端。
更狠的写法是「先写结论，再写理由，最后写例外」。三段结构，每段不超过五行。
例外那一段最容易被删，但它恰恰是可信度的来源。没有例外，就是广告。
我写干货时会强制自己写一段「什么情况下不适用」。这段通常最受欢迎。
五、静态化的收益
内容站最有效的一招是静态化。页面直接是 HTML，不用每次请求都查库拼模板。
静态化之后，首字节时间通常能降一半以上。
想先从一个最小的静态页开始练，HTML 入门教程里的示例都是单文件，改起来不用装环境。
脚本的处理，四个动作：合并、延后、按需、去掉。
合并是把多个小脚本并成一个；延后是加 defer 或 async；按需是点击才加载；去掉是删掉不用的。
第三和第四个最省事也最有效。很多站挂着五六个统计脚本，其实只用一个。删掉剩下的，首屏能快一截。
六、测速别只看工具分数
工具给的是实验室数据。真实用户分布在什么网络、什么设备，才决定实际感受。
我的做法是：工具分数看趋势，真实数据看移动端。
留一句：页面速度不是优化出来的，是把多余的东西删掉之后剩下的。
测速别只看工具分数。工具给你九十分，用户还是觉得慢，多半是因为你的服务器响应慢而工具没测到。
我的习惯是：用手机、用弱网、开无痕，自己走一遍首屏。这三样一加，感受和分数差得很远。
用户的感受是唯一标准。分数是参考，不是目标。
编辑的判断力，体现在三件事：知道哪句可以删、知道哪句不能删、以及知道什么时候该收笔。
第二件最难。有些句子读着不漂亮，但它是关键信息，删了就废了。
第三件最省事。多数文章多写三成，砍掉之后就干净了。
最后一句话：写得乱，多数时候不是能力问题，是没想清楚。
想清楚了，句子自然短。
再补一句：干货的密度不靠形容词，靠「能不能照着做」。写完问自己：读者看完能做什么。
答不出来，就还差一段。
再补一句：干货里的「数字」要能用。写「提升很多」没用，写「从五秒到两秒」才有用。
数字不需要精确到小数点，但一定要有个参照。
有参照的数字，才会被记住。
再补一句：干货里的「步骤」最好编号。编号让人有进度感。
没编号的步骤，读着像流水。
编号是免费的清晰度。
