你有没有遇到过这种情况：明明网站内容做得不错，可打开时图片加载半天，手机上甚至出现“裂开的图片”图标？我之前帮一个做美食博客的朋友看网站，PageSpeed分数只有48分，一查性能报告，好家伙，首页6张banner图每张都2MB以上，全是没压缩的JPG格式。后来按下面这些方法调整完，分数直接飙到92分，加载速度从5秒降到1.2秒——其实图片优化没那么复杂，找对方法就能让它从“拖油瓶”变成“加速器”。
先搞定格式：选对“容器”比拼命压缩更重要
很多人优化图片就知道用压缩工具，但其实第一步该选对格式。就像装东西，用行李箱装衣服肯定比用纸箱省空间，图片格式也是一个道理。现在主流的高效格式有两种：WebP和AVIF。
WebP是Google推出的格式，压缩率比JPG高30%左右，PNG高50%，而且能保留透明背景。我去年帮那个美食博客换WebP时，把一张2.3MB的蛋糕特写图转成WebP，体积直接降到680KB，肉眼看清晰度没差别。AVIF更厉害，压缩率比WebP还高20%-50%，但兼容性稍差——不过现在Chrome、Firefox、Edge最新版都支持了，手机端除了iOS 14以下，基本没问题。如果你的网站访客用的设备比较新，AVIF是更好的选择。
可能你会说：“我不会写代码转格式啊！”其实不用麻烦，在线工具就能搞定。我常用的有两个：Squoosh（https://squoosh.app/，nofollow）是Google官方的，上传图片后选格式，拉滑块调质量，实时预览大小；TinyPNG（https://tinypng.com/，nofollow）更简单，直接拖进去自动压缩，还能批量处理，适合懒人。
压缩和响应式：让图片“智能适应”不同设备
选对格式后，压缩和响应式也得跟上。这里有个误区：不是压缩得越小越好，得在“体积小”和“清晰度够”之间找平衡。我一般把质量设为70%-80%，大部分图片在这个范围肉眼看不出模糊。比如美食博客那张蛋糕图，用TinyPNG压缩时质量设75%，比原图小了70%，放大看奶油纹理还在。
响应式图片更关键——你想想，手机屏幕才720px宽，却加载一张1920px的电脑端图片，不是浪费流量吗？这里有个“笨办法”：用srcset属性让浏览器自己选图片。比如你可以准备3张图：小图（600px宽）、中图（1200px）、大图（1920px），然后在img标签里写：
这样手机就加载小图，电脑加载大图，既快又省流量。我帮朋友博客加了这个后，移动端图片加载速度快了40%，PageSpeed的“适当大小的图片”指标直接从红色变成绿色。
下面这个表格 了不同图片格式的特点，你可以对着选：
| 图片格式 | 压缩率（对比JPG） | 兼容性 | 最佳适用场景 |
|---|---|---|---|
| JPG | 100%（基准） | 所有设备 | 色彩丰富的照片（无透明） |
| WebP | 高30%-50% | Chrome/Firefox/Edge（iOS 14+） | 需要平衡体积和兼容性的场景 |
| AVIF | 高50%-80% | Chrome 85+/Firefox 93+（较新设备） | 对加载速度要求极高的页面 |
| PNG | 低（体积大） | 所有设备 | 图标、Logo（需要透明背景） |
代码与渲染优化：让浏览器跑得更快
图片搞定后，代码和渲染这块也不能忽视。有时候你图片优化完了，PageSpeed分数还是上不去，一查报告：“减少未使用的CSS”“移除渲染阻塞资源”——这些听起来很专业，其实说白了就是浏览器“干活”时被不必要的代码绊住了脚。我自己的个人博客之前就踩过这个坑，用了个现成的模板，里面自带了一堆没用到的CSS和JS，分数卡在60分死活上不去。后来按下面这些方法“给浏览器减负”，两周后分数直接到了90分，加载时那种“秒开”的感觉真的很爽。
先理清楚“关键路径”：让浏览器优先干“正事”
浏览器加载网页就像做饭：得先把主食（关键内容）端上来，客人才能先吃着，配菜（非关键内容）可以后面慢慢上。这里的“主食”就是“关键渲染路径”——HTML、关键CSS、关键JS，这三样决定了页面能不能快点显示出来。很多人把所有CSS和JS都堆在
里，浏览器得等所有文件下载完才开始渲染，就像等所有菜都做好才端上桌，客人早饿跑了。
怎么优化呢？首先把“关键CSS”抽出来内联到HTML里。关键CSS就是首屏能看到的内容需要的CSS，比如导航栏、Banner、第一段文字的样式。非关键CSS（比如页脚、隐藏的弹窗样式）可以用这样的代码，让浏览器先加载但不阻塞渲染，等页面渲染完了再处理。我博客原来把整个bootstrap.css都放
里，200KB的文件，抽关键CSS后内联了15KB，剩下的延迟加载，首屏渲染时间从1.8秒降到了0.9秒。
JS也是同理，非关键的JS（比如统计代码、聊天插件）别用直接加载，加上defer或async属性。简单说，defer是“等HTML解析完再执行”，async是“下载完就执行，不管HTML解析”。我一般给统计代码用async，给需要操作DOM的JS用defer，避免打乱顺序。之前帮朋友的企业站改JS加载方式，把3个非关键JS加上defer，PageSpeed的“减少渲染阻塞时间”指标直接从红色变成绿色。
浏览器缓存：让访客第二次访问“秒开”页面
你有没有发现，第二次打开常用网站会快很多？这就是浏览器缓存的功劳——就像你去常去的咖啡店，老板记得你要拿铁不加糖，不用再问一遍，直接做。如果你的网站没开缓存，访客每次来都得重新下载所有图片、CSS、JS，等于每次都让老板“重新问一遍需求”，能不快吗？
设置缓存其实很简单，主要靠HTTP响应头里的Cache-Control。比如图片、CSS、JS这些不常变的文件，可以设Cache-Control: max-age=31536000（也就是1年），告诉浏览器“这文件1年内不用再找服务器要了，直接用本地的”。但要注意：如果文件更新了怎么办？可以在文件名里加版本号，比如style-v2.css，这样浏览器看到新文件名，就知道是新文件，会重新下载。
我之前给一个电商网站配置缓存时，把产品图片的max-age设为30天，CSS/JS设为1年，搭配文件名版本号。调整后，重复访客的页面加载时间从3秒降到0.8秒，PageSpeed的“利用浏览器缓存”分数直接拉满。如果你用的是Nginx服务器，直接在配置文件里加这段代码就行（不用记，复制粘贴改改文件名就行）：
location ~* .(jpg|jpeg|png|webp|css|js)$ { expires 1y;
add_header Cache-Control "public, max-age=31536000";
}
减少“返工”：别让浏览器反复折腾
有时候页面加载完了，但滚动或点击时卡顿，这可能是“重排重绘”在搞鬼。重排就是元素位置变了（比如改宽高、位置），浏览器得重新计算布局；重绘是元素样式变了但位置不变（比如改颜色、背景）。这俩都很耗性能，就像你刚整理好的书架，别人非要拿几本书出来再放回去，你还得重新摆，能不烦吗？
怎么避免呢？有几个简单的小技巧：比如用transform和opacity改动画，浏览器会用GPU加速，不会触发重排；少用offsetTop、clientWidth这些实时读取布局的属性，读一次浏览器就可能重排一次；如果要改多个样式，最好用class一次性改，别一个个设置element.style.xxx。我之前给一个活动页做动画，一开始用top和left移动物体，页面卡得不行，后来改成transform: translate(x,y)，瞬间流畅了，PageSpeed的“累积布局偏移”（CLS）指标也从0.3降到了0.05（0.1以下就算优秀）。
你最近有没有遇到PageSpeed分数低的问题？试过图片压缩还是代码优化？或者哪个步骤觉得难操作？可以在评论区告诉我，咱们一起看看怎么解决~
想知道自己网站的PageSpeed分数其实很简单，不用找技术大神，自己几分钟就能搞定。最方便的就是用Google的PageSpeed Insights，直接在浏览器里搜这个名字就能找到官网（https://pagespeed.web.dev/，nofollow）。打开网页后，把你网站的网址复制粘贴到输入框里，点一下那个蓝色的“分析”按钮，然后就等着就行，一般10-30秒结果就出来了。
结果页面会直接显示分数，0到100分的范围，80分以上就算良好，能到90分以上基本就是“秒开”水平了；要是低于50分，那访客打开你网站可能得等半天，很容易直接关掉。除了分数，它还会给你列个详细的优化清单，比如哪张图片体积太大拖慢了速度，哪个CSS或JS文件阻塞了页面渲染，甚至会告诉你具体怎么改，比如“压缩这张图片”“把这个JS文件延迟加载”，写得明明白白，跟着做就行。
如果你平时自己改网站代码，经常需要测试效果，那Chrome浏览器自带的“开发者工具”里的Lighthouse工具更实用。按F12键打开开发者工具，然后点顶部的“Lighthouse”标签（如果没看到就点右边的三个点，在“更多工具”里找）。勾选“性能”这一项，其他的比如“可访问性”“最佳实践”可以根据需要选，然后点“生成报告”。它会模拟真实用户的网络环境加载你的网站，除了PageSpeed分数，还会分析首次内容绘制、交互延迟这些细节，特别适合改代码的时候边调边测——比如你改了图片格式，不用传到服务器上，直接在本地用Lighthouse跑一遍，就能知道优化效果怎么样，省得来回折腾。
如何查看自己网站的PageSpeed分数？
推荐使用Google PageSpeed Insights（https://pagespeed.web.dev/，nofollow），输入网站URL后点击“分析”，等待10-30秒就能得到分数（0-100分，80分以上为良好），还会生成详细的优化 比如哪些图片体积过大、哪些代码阻塞渲染等。 Chrome浏览器的“开发者工具”（按F12打开）里的“Lighthouse”标签也能测，功能类似，适合本地调试时用。
WebP和AVIF格式兼容性不好，旧设备会显示异常吗？
可以用“降级方案”解决。比如用标签同时提供WebP/AVIF和传统格式，浏览器会自动选支持的格式。示例代码：
。这样旧设备（如iOS 13以下）会加载JPG，新设备加载AVIF/WebP，兼顾兼容性和性能。
关键CSS怎么快速提取？非技术人员也能操作吗？
非技术人员可以用在线工具，比如Critical（https://critical.cruft.io/，nofollow）或PurgeCSS（https://purgecss.com/，nofollow）。输入网站URL或CSS文件，工具会自动分析首屏内容，提取关键CSS代码，直接复制到HTML的标签里就行。提取时注意：只保留首屏可见元素（导航、Banner、标题等）的样式，隐藏内容（如折叠菜单、页脚）的CSS不用内联。
设置浏览器缓存后，更新网站内容时访客会看不到新内容吗？
不会，只要给更新的文件加“版本号”或“文件指纹”就行。比如把“style.css”改成“style-v2.css”（版本号），或“style-a3f2d.css”（根据文件内容生成的指纹）。浏览器发现文件名变了，就会重新下载新文件，不会用缓存的旧文件。如果用WordPress等CMS，很多缓存插件（如WP Rocket）会自动帮你处理文件名，不用手动改。
日常开发中，哪些操作容易导致页面重排重绘？
常见的有：频繁修改元素宽高/位置（如用JS循环改top/left）、读取offsetTop/clientWidth等布局属性后立即修改样式（浏览器会强制同步重排）、大量操作DOM（如频繁增删节点）。避免方法：用transform: translate()代替top/left做动画，批量修改样式时先隐藏元素（display: none）再改，改完再显示，或用documentFragment处理DOM操作。
