网页速度优化的基础步骤

最新推荐文章于 2024-08-14 15:45:18 发布

橙子慢慢学

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量425

点赞数

分类专栏： # 网页优化文章标签：前端

本文链接：https://blog.csdn.net/weixin_44810342/article/details/128002208

版权

网页优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

但本人是个前端小新，用的方法都很基础，借助了chrom浏览器的三个开发工具–网络、灯塔和性能测评

网络请求

在你想要测速的页面按下F12打开开发工具，打开网络(network)这一栏，查看请求的资源是否超时或无法获取的情况，类似于下图的情况。如果有的话就要到项目中找到对应的请求代码段，考虑下这个资源是否是必要的，能不能删除，如果必要的话就考虑下有没有别的方法能拿到这个资源或脚本
在这里插入图片描述
当你把请求资源或脚本超时这些问题解决了以后，一般情况下这个网页的速度会明显变快。
如果你做完这些还是觉得网速不行，那么就尝试往下看。

灯塔

灯塔测速官方文档
找到灯塔工具(Lighthouse)，也可以进入灯塔测速页面输入你想要测试的网站进行测试灯塔测速网址，但这个网页应该需要你开vpn才能打开。
测试可以分为pc端测试和移动端测试，这两者的评分标准是不太一样的，根据自己的需要在设备那一栏中选好要测试的设备类型，其他基本不用动，然后点击分析页面负载，在它分析的时候，不要动这个网页，让它保持在屏幕的最上方，等分析完后就能看到类似下面第二张图片的内容了
灯塔测速开发工具界面

拿到这些数据以后，就能大致看到网页是在什么地方耗时，然后可以根据灯塔给出的优化建议进行优化。
怎么优化？参考灯塔测速官方文档和优化建议下的了解详情，看完就大致知道怎么做了
在这里插入图片描述

在这里插入图片描述

如果灯塔给出的建议你都尝试去完善了（有些你觉得没必要的也可以不用管），最终灯塔测速给出的评分还是不那么理想，这个时候不要急，先以用户的角度去点开页面看看速度如何，如果没有什么卡顿情况并且运行很流畅，其实就可以结束优化了，这个灯塔测速的结果其实没有很准的，分数上不去有很多原因，只要实际体验感可以的话，就可以忽略掉这个分数（如果你考虑压力测试和弱网测试这些部分的话，当我这段话不存在，你去找找别的方法吧T_T）
这是一个shopify主题开发商写的，可以参考下里面的大致原因
如果你的网页运行速度还是不理想，那么可以接下来看看性能测试