谷歌如何优化网站加载速度？关键方法有哪些

谷歌优化网站加载速度的图片处理方法

网站加载慢,图片往往是“罪魁祸首”，我见过很多网站，一张首页 banner 图就有 5MB 大，打开页面时进度条像蜗牛爬，用户不等加载完就关了页面，谷歌在优化图片这块有不少实用技巧，选对图片格式是第一步，现在主流的高效格式是 WebP 和 AVIF，比传统的 JPG、PNG 体积小 30%-50%，画质还差不多，我之前帮一个服装店网站换图，把所有产品图从 JPG 转成 WebP，单张图从 2MB 压到 600KB，加载速度快了一半。

压缩工具也得用对，谷歌自家的 Squoosh 就很好用，上传图片后能手动调压缩参数，预览效果，还能直接生成代码，还有 TinyPNG，网页版不用下载，拖进去自动压缩，我做个人博客时，用它处理文章配图，5 张图压缩完省了 2MB 空间，另外别忘了响应式图片，用 srcset 属性给不同设备准备不同尺寸的图，手机用户就不用加载电脑版的大图，加载压力一下就小了。

懒加载也不能少,就是让图片出现在屏幕上时才加载，没看到的先不加载，我给朋友的美食博客加了懒加载代码后，首页刚打开时只加载前 3 张图，剩下的滑动时再加载，初始加载时间从 4 秒降到 2 秒，用户体验立马上去了。

谷歌优化网站加载速度的代码压缩技巧

图片优化完,代码这块也得“瘦瘦身”，网站的 HTML、CSS、JS 文件里，经常藏着很多“废话”，比如空格、注释、重复代码，这些都会让文件变大，加载变慢，谷歌推荐用代码压缩工具，像 HTMLMinifier 能去掉 HTML 里的空格和注释，CSSNano 可以压缩 CSS，Terser 处理 JS，我试过把一个 100KB 的 JS 文件压缩后，直接变成 40KB，加载快多了。

Tree Shaking 也很关键，就是把代码里没用到的部分删掉，比如用框架写网站时，可能引入了一个很大的库，但实际上只用到里面一两个功能，Tree Shaking 就能把没用的代码“摇”掉，我之前用 Vue 写一个简单的表单页面，没做 Tree Shaking 时 JS 文件 800KB，处理后只剩 200KB，效果超明显。

还要记得 启用 GZIP 或 Brotli 压缩，服务器把文件压缩后再传给浏览器，浏览器解压后显示，就像把衣服叠小了再快递，传输速度快很多，我在服务器配置里开了 Brotli 压缩，发现比 GZIP 压缩率更高，一个 500KB 的 CSS 文件，压缩后能到 80KB，浏览器加载时唰一下就下来了。

谷歌优化网站加载速度的服务器响应优化

服务器就像餐厅后厨,响应慢了，前端再好看也没用，谷歌说服务器响应时间最好控制在 200 毫秒以内，超过这个时间用户就会觉得卡。选个好主机很重要，别贪便宜用那种几十块一年的虚拟主机，高峰期挤得像早高峰地铁，响应能快才怪，我之前给一个企业站换了云服务器，CPU 和内存都升级了，服务器响应时间从 800 毫秒降到 150 毫秒，打开页面明显快了。

优化数据库查询也不能忽略，网站后台数据库如果查询语句写得烂，比如没用索引、查全表数据，服务器就得花很多时间“翻找”数据，我帮一个论坛优化时，发现他们有个查询语句没加索引，查一次要 3 秒，加了索引后变成 0.01 秒，服务器一下就轻松了。

另外要 减少 HTTP 请求，每个图片、CSS、JS 文件都是一个请求，请求多了服务器忙不过来，可以把多个 CSS 文件合并成一个，JS 文件也合并，图片用雪碧图（把小图标合成一张图），这样请求数量能减少一大半，我之前把一个网站的 20 个 CSS 文件合并成 1 个，请求数从 50 个降到 30 个，加载速度提升了不少。

谷歌优化网站加载速度的缓存策略应用

缓存就像家里的冰箱,把常用的东西存起来，下次用直接拿，不用再跑超市，网站缓存做好了，用户第二次访问时，很多文件直接从本地缓存加载，不用再从服务器下载，速度当然快，谷歌推荐用 浏览器缓存，通过设置 Cache-Control 头，告诉浏览器哪些文件可以缓存、缓存多久，比如图片、CSS、JS 这些不常变的文件，可以设缓存 30 天，用户下次访问直接从本地读，加载速度几乎是瞬间。

服务端缓存也很有用，比如用 Redis 缓存数据库查询结果，有个博客网站，首页文章列表每次都要查数据库，访问量大时服务器卡得不行，我用 Redis 把查询结果缓存 10 分钟，用户访问时直接从缓存拿数据，服务器压力小了，响应也快了。

不过缓存也不能乱设,避免缓存污染很重要，比如网站更新了 CSS 文件，如果缓存没更新，用户看到的还是旧样式，可以给文件名加版本号，style-v2.css，更新时改版本号，浏览器就会认为是新文件，重新下载，我之前帮一个电商网站改样式，忘了改版本号，用户反馈说样式错乱，后来加上版本号才解决，真是踩过坑才知道重要性。

谷歌优化网站加载速度的CDN配置方式

CDN 就像快递分拨中心，把网站内容存到离用户最近的节点，用户访问时不用绕远路去总服务器拿数据，比如用户在广州，数据存在广州的 CDN 节点，加载速度肯定比从北京服务器拿快，谷歌建议 选覆盖广的 CDN 服务商，像 Cloudflare、Akamai 这些，节点多，全球都能覆盖，我给一个做外贸的朋友网站配了 Cloudflare，国外用户打开速度从 10 秒降到 3 秒，客户反馈说咨询量都变多了。

配置缓存规则是 CDN 的关键，不是所有文件都适合缓存，比如动态页面（像用户购物车）就不能缓存，否则用户看到的可能是别人的购物车，要把静态文件（图片、CSS、JS）设为缓存，动态内容设为不缓存，我之前帮一个论坛配 CDN，一开始把所有页面都缓存了，结果用户发帖后看不到自己的帖子，后来改了规则，只缓存静态文件，问题就解决了。

还要 启用 HTTPS，现在主流 CDN 都支持 HTTPS，而且谷歌把 HTTPS 作为排名因素之一，启用 HTTPS 后，不仅安全，CDN 还能开启 HTTP/2，加载多个文件时不用排队，并行传输，速度更快，我自己的博客配了 HTTPS 和 HTTP/2，感觉打开页面时，图片和文字是一起出来的，不像以前一个一个蹦。

谷歌优化网站加载速度的浏览器渲染优化

浏览器渲染就像画画,得一步步来，要是中间卡壳了，页面就会白屏或卡顿，谷歌说要 内联关键 CSS，就是把渲染首屏必须的 CSS 直接写在 HTML 的 style 标签里，不用等外部 CSS 文件下载完再渲染，我帮一个资讯网站做优化时，把首屏的导航栏、标题样式内联，首屏渲染时间从 1.5 秒降到 0.8 秒，用户一打开就能看到内容，不会等太久。

减少 DOM 元素也很重要，DOM 元素太多，浏览器渲染时要处理的“零件”就多，速度自然慢，我见过一个网站首页 DOM 元素有 2000 多个，加载时浏览器卡得不行，后来删掉没用的嵌套标签、空标签，减少到 800 个，渲染速度快了一倍。

另外要 避免阻塞渲染的 JS，JS 文件默认会阻塞 HTML 解析和 CSS 渲染，要是把 JS 放在 head 里，浏览器会先下载 JS 再继续解析页面，导致白屏，可以把 JS 放在 body 底部，或者用 async/defer 属性让 JS 异步加载，我之前把一个网站的 JS 从 head 移到 body 底部，首屏加载时间立马少了 1 秒，效果立竿见影。