你点开自己写的页面，转圈转到第三秒——手指已经划走了。
这不是玄学，是真实发生的用户行为：内容再好，加载慢一秒，就少一半人看完。
为什么你的网站加载速度总比竞争对手慢？
很多人一发现网站卡，第一反应是换服务器、加带宽。结果钱花了，页面还是慢。
我帮一个做家居电商的朋友查过，他们用的是阿里云高配ECS，但首页打开总要等3秒多。最后发现，光首屏就塞了12张没处理的原图，最小的一张都1.8MB。
把图片全转成WebP、尺寸按实际显示区域裁好，加载时间直接缩短了不少。
别急着升级服务器，先看看你传上去的资源，是不是在偷偷拖后腿。
图片优化：最容易见效的3个步骤
图片占掉大半页面体积，这是实打实的“体积大户”。一个普通企业站，图片动不动就占整页流量的六成以上。优化它，效果最直观：
第一步：选对格式。
照片类用WebP——比JPEG小一半还多，现在连Safari都支持了；图标、Logo这类简单图形，直接上SVG，文件小得几乎可以忽略，放大也不会糊。
第二步：控制尺寸。
设计师给的图经常是4000px宽，但你的内容区可能就768px。CSS设max-width: 100%没用，浏览器照旧下载那张4MB的大图。
正确做法是：用Photoshop、Figma导出时就按最大显示宽度缩放，Retina屏最多留2倍。我见过一个摄影博客，把所有作品图从4000px压到1200px，整页数据量直接砍掉一大截。
第三步：懒加载。
首屏以下的图，别急着加载。等用户快滚到那儿了，再拉取。用原生的IntersectionObserver就能实现，不用装任何库。一个本地资讯站加了这一步，用户还没往下划，首屏已经稳稳显示出来了。
代码压缩和合并：动手前先搞清楚优先级
别一上来就“合并所有JS/CSS”——HTTP/2时代，文件数量早不是瓶颈了。真正卡脖子的，是体积和是否阻塞渲染。
CSS压缩优先级最高。
删空格、去注释、压缩变量名，工具一跑，体积立马少两三成。更关键的是：CSS会拦住页面渲染。我把首屏必须的样式直接写进HTML的<style>里，其余CSS异步加载。用户打开页面，不再是白屏几秒，而是立刻看到文字和结构。
JS别让它乱插队。
默认情况下，浏览器碰到<script>就会停住HTML解析，等JS下载执行完才继续。解决办法很简单：
defer：等HTML解析完再执行，适合操作DOM的脚本；async：下载完立刻执行，不排队，适合统计、埋点这类独立脚本。
一个技术论坛把所有第三方分析脚本都加上async，页面加载明显顺了。
服务器端响应速度：别被"TTFB"吓到
TTFB（首字节时间）高，说明请求发出去后，服务器“反应慢”。这事前端不能全背锅，但你能推动后端做三件小事：
开启Gzip压缩。
一行配置的事，却能让HTML、CSS、JS这些文本资源体积直降六七成。Nginx里加一句gzip on;，Apache里开mod_deflate，几分钟搞定。很多文档类网站开了之后，传输量直接瘦了一大圈。
用CDN缓存静态资源。
如果你的用户不在同一个城市，CDN就是刚需。它把图片、JS、CSS这些不变的东西，提前搬到离用户最近的节点。华北的源站，华南用户访问也不用绕一圈。选CDN时留意下：是否支持HTTP/2？有没有Brotli压缩？这两个特性现在已经是加分项了。
查查数据库有没有“慢查询”。
动态页面每次打开都要连数据库。一个老博客首页加载要执行十几次SQL，其中好几个是重复查同一篇文章。把重复查询合并，热门列表用Redis缓存一下，生成页面的时间就从两秒多压到了不到半秒。
缓存策略：让重复访客爽到飞起
新用户优化好了，老用户每次进来还重新下载所有资源？那体验还是打折。合理缓存，能让第二次访问快得像本地打开：
强缓存：靠Cache-Control。
图片、CSS、JS这些基本不改的文件，在响应头里加一句：Cache-Control: max-age=31536000
浏览器就记住了：这玩意儿一年内不用再问服务器要。一个工具类网站这么设完，回头客打开页面几乎不卡顿。
协商缓存：靠ETag或Last-Modified。
HTML这种天天可能变的内容，不适合强缓存。换成ETag——浏览器每次请求带上上次拿到的标识，服务器一看“没变”，直接回个304，不传正文。一个更新频繁的资讯站用了这个，用户狂刷新也不浪费带宽。
Service Worker缓存：PWA的灵魂。
注册一个Service Worker脚本，在install事件里把首页、核心CSS、关键JS预存进缓存，fetch事件里优先返回缓存。一个技术文档站上线后，用户第二次打开几乎是秒开，没网也能看已缓存的页面。
第三方脚本：你网站上的隐形杀手
统计代码、广告联盟、客服弹窗、社交分享按钮……它们不显眼，但加载慢、爱抢资源、还常互相打架。
先砍掉没用的。
一个生活类网站之前挂了5个统计工具、3家广告、2个社交插件。我建议他们只留Google Analytics，广告脚本等滚动到广告位再加载，社交按钮直接换成纯CSS图标。结果页面加载时间直接减半。
想想看：用户点进来是想读文章，不是陪你的客服插件一起加载。
非留不可的，就别让它抢首发。
比如在线客服，改成懒加载——等用户滑到底部、或者点击“联系客服”按钮时再引入。一个技术支持站这么干了，首屏加载从3秒压到1.5秒，客服满意度反而更高了：没人想一打开页面就被弹窗堵脸。
提前“打招呼”：用资源提示。
你知道页面要用Google Fonts？那就加一行：<link rel="preconnect" href="https://fonts.googleapis.com">
浏览器会提前建好连接，字体加载快不少。慢网环境下，这种小动作特别管用。
今天就能执行的3个优化动作
别等“哪天有空再系统优化”，现在打开电脑，花15分钟，就能让页面明显变快：
检查图片体积。
打开你的网站，右键任意一张首屏图片 → “在新标签页中打开图片”，看地址栏后面那个文件大小。如果超过500KB，就用Squoosh（免费网页工具）或ImageOptim（Mac）压到200KB以内。就这一件事，加载快不少。确认Gzip是否开着。
登录你的主机后台（宝塔、cPanel、或者直接SSH进服务器），找到Nginx配置文件（通常是/www/server/nginx/conf/nginx.conf）或Apache的.htaccess，搜gzip，确保gzip on;这行是启用状态。不确定？搜“宝塔 开启gzip”或“cPanel 开启Gzip”，照着图文教程点几下就行。删掉一个你根本不用的第三方脚本。
查看你网站HTML源码里的<script>标签，找找有没有那种：- 你从没登录看过数据的统计工具；
- 用户反馈说根本找不到的“一键分享”按钮；
- 已经下线、但代码还挂着的旧版客服插件。
直接删掉那一整段<script>，保存，刷新页面——你会发现，不仅快了，代码也清爽了。
做完这三步，打开Chrome开发者工具（F12 → Network → 刷新页面），看一眼“Finish”时间。如果比之前短了一截，恭喜，你刚刚亲手救活了一个差点被划走的用户。