先说一下事情的由来,今天无意间了解到,Google Lighthouse 插件可以为网站做性能评分。
于是,好奇给自己的网站,做了一个性能评分,把网站链接输入进去,就可以得到一份关于你网站在移动端和web端的性能报告,很有意思
果然,我网站的评估结果是「未通过」
刚开始有点不相信,于是我又找了一个在我心中比较好的网站,去 Google Lighthouse 上评估了一下,评估结果:通过!
好吧!确实是自己的网站做得太菜了。
好在 Google Lighthouse 会告诉你具体要优化的细节点在哪里,一般我们网站的话,只看「桌面设备」栏目下,「手机」栏目下只要不是太差就行。
而且我们也主要是看桌面设备下的性能打分的细节优化点
其中我网站最显眼的就是「改进图片传送」的优化,可以节省 14502KB。不测不知道,一测吓一跳。
怪不得有时候怎么感觉网站打开很慢加载很慢,而且每次都把锅甩给了网络不好。这下,应该是找到原因了!
从 Google Lighthouse 的分析报告里面把对应优化建议截图下来,让 Claude Code 帮我们处理一下
我是这样说的,这样 Claude Code 基本能帮我们精准定位到问题了
记得后面加 ultrathink,这个关键词你可以理解为,让 Claude Code 帮你仔细修改代码,当然也会消耗比较多的 token,还是建议加上。
接着,就是观察 Claude Code 它是怎么处理这个问题的。完全不需要人工介入
当然 Claude Code 修改好之后,如果你放心的话,也可以跟他确认一下是不是改好了?有没有影响到项目的其他功能 等等之类的
本地测试了一下,确实打开速度快了一些。确保没问题后,提交代码
部署好之后,我们用线上的最新版代码再去 Google Lighthouse 插件里面做一个体检报告
在报告的详情里面,你可以看到「改进图片传送」已经被放进「已通过的审核」里面了。确实问题解决了~
你也可以到 Google Lighthouse 里面体检一下自己网站的性能,然后把截图报告中的一项优化建议结合 Claude Code 去优化性能
不建议把整个报告全部丢给 Claude Code 去优化性能,Claude Code 也没那么聪明!
一次让 Claude Code 解决一个性能优化就行,保证好让它解决每个问题的颗粒度。
快用 Google Lighthouse 结合 Claude Code 给你的网站做个小小的性能优化吧~

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。