前言:

昨日加入主题大佬群,与dalao们密切交流,经dalao们测试,本站的打开速度非常慢!于是便有了本篇优化文档

小站使用了又拍云的CDN加速,论理来说速度应该很快,但是经实际测试打开速度竟然长达30s

截图

这能忍???

于是便开始着手查找原因


自身网络不好
又拍云CDN炸了
图片过多
图床速度慢
图片文件过大
加载动画时间过长

首先要解决的当然是图片问题,可以看到部分图片都是≈1MB的,这对于web网页已经很大了,加载这些图片的0.1s都可能会流失部分用户

解决方案


关闭加载动画
将smms图床换为JsDelivr
首页图片使用TinyPNG压缩保证质量的同时降低体积
缩略图压缩率80%
使用webp(部分浏览器和safari不支持)

经过三四个小时的折腾,网站有了肉眼可见的提速

截图

总大小 5.1MB 1.5MB
加载时间 30s 1.33s

夜深了,今天就到这里吧,以后有优化就会在这里更新,另外那位小伙伴有幸看到本文顺便帮忙测个速评论一下,谢谢啦!

一些改动

去除banner,添加进任意js

1
document.getElementById('nav').style.background = 'transparent'

将所有的banner都去除,文章内的banner也没有了,使用

修改页脚背景颜色+页脚透明

image-20200517172223381

在var.styl下新建**$light-footter** = 颜色,想要透明请填写值**transparent**

image-20200517171852623

将footer.styl中的$light-blue改为$light-footter

1
2
3
4
5
6
#footer
position: relative
background: $light-footter
background-attachment: local
background-position: bottom
background-size: cover

效果:

自定义颜色:

image-20200517172531164

透明背景:

image-20200517173316590

给页脚增加灰色蒙版

效果图:

黑色蒙版

黑色蒙版

白色蒙版

白色蒙版

方法:还是footer.styl

1
if hexo-config('footer_bg') != false

改为

1
if hexo-config('footer_bg') != true

即可,也可以自定义蒙版,更改颜色等,替换$dark-black即可.

6.1日小更新

修改夜间模式页脚为透明,并加上灰色蒙版

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 網站背景,footer背景
#web_bg[data-type=color],
#footer[data-type=color]
background: darken($light-footter, 2)
//页脚背景↑可自定义,我这里$light-footter对应的是transparent

#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
//黑色蒙版↑,新建颜色值带入

var.styl下新建颜色值并带入即可

效果:

前:

前

后:

后

6.10

1.添加百度统计代码,更直观方便的查看访客数据

2.更新的越老越少越来越小了,因为学业繁忙没有时间

  1. 配置butterfly.yml
1
baidu_analytics: 你的代码

7.22

更改名称为“XIN.”,目前没有想好名称

修改首页大图点击查看Tiny PNG无损压缩

修改全局配色为灰色

7.25

新增外挂标签

更新日志已创建独立界面

请移步更新日志查看传送门