引言:

这些天在和很多志同道合的小伙伴分享博客友链的时候被一些心细的朋友指出网站初次加载打开速度过慢的问题,为此我展开了查找及修改. . .

正文:

查找出导致加载速度慢的文件:

在进行以下步骤之前,我们需要在浏览器中将此网站的缓存数据清除

较为流行的浏览器(Edge,Google Chrome等)大多都支持F12快捷键调出“开发人员工具”这一网页调试功能,若快捷键无响应或没有设置也可在浏览器设置中找到。
我们定位在需要检查的网站页面,打开”开发人员工具“,选择网络一栏,在筛选器右侧选择全部

Webyouhua

鼠标在页面右键刷新,等待页面完整加载完毕
因为我已经修改好了,我就拿我另一个修改过的网站举例子了

Webyh

我们对以上文件的大小和时间进行分析,找出图片文件比较大(标准:图片文件不大于2M)时间比较长的进行定位,方便后期我们对其进行压缩

假如,我是说假如哈,你像我一样突然忘记了某个图片文件名对应的是那张图片了,你可以点开此文件,将“请求URL”中的链接新建一个页面打开你就可以具体看见了

Webyouhuaa

我们已经定位到了一个或多个过大的图片,接下来我们要对其进行压缩
打开我们电脑这些图片的文件夹并打开图片,选择”重设大小“

Webyouuhua

接下来我个人推荐只要不是那种大背景的图片我们都可以将其设置为“最适用于电子邮件和信息”选项,大背景就设置成“最适合查看”

Webyouuhuaa

压缩好后,我们将压缩后的文件导入到网站对应的后端文件夹中并记得更新一下修改的图片链接

最后我们再尝试刷新网站计算加载打开速度,你会发现确实有了很大的优化

总结:

这种优化方式是最为简单便捷的优化速度方式,但如果你优化后发现还想对js文件或接口进行优化或特别需求图片的高清清晰度可以尝试以下方法,我也将在后期进行补充:

  • 对于图片清晰度要求建议可以使用“对象储存”这一方式
  • 图片及文件统一优化可尝试CDN加速
  • 对js及其他文件接口优化可在代码上对其加以修改简化

Q.E.D.


                             昨夜星辰已逝          满眼青山已远