Hexo+Github博客搭建之博客优化篇
Hexo+Github博客搭建之博客优化篇
Yafine图片懒加载
知识小课堂:图片加载方式有两种,一个是预加载,另一个就是懒加载,那你了解什么是预加载和懒加载吗?下面来学习一下。
参考:图片预加载与图片懒加载(缓载)的区别与实现
- 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片。当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
- 图片懒加载(缓载):延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数,因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
预加载与懒加载的区别之处:
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力。
使用图片懒加载需要安装插件:链接如下:
在站点根目录执行下面的命令:
1 | npm install hexo-lazyload-image --save |
之后在站点配置文件下添加下面的代码:
1 | lazyload: |
最后执行hexo clean && hexo g && hexo s
就可以看到效果了。
注意,以下几个小问题针对matery主题而言,其他主题是否会出现以下情况目前我也不清楚,如果出现,你在尝试下以下解决方法。(暴力解决法,而不是直接修改懒加载插件😂😂😂)
- 问题1:查看大图,发现全部为loading加载图,原因是因为懒加载插件与lightgallery插件冲突,解决办法如下:
修改主题文件下的matery.js,在108行左右添加以下代码:
1 | $(document).find('img[data-original]').each(function(){ |
- 问题2:点击首页logo不是跳转到首页,而是查看logo图片,解决办法如下:
修改主题的header.ejs文件,原代码为:
1 | <div class="brand-logo"> |
修改为:
1 | <div class="brand-logo"> |
懒加载优化
经过以上操作就已经很完美了,以下内容可做可不做
其实第一次加载后本地都是有缓存的,如果每次都把loading显示出来就不那么好看
所以我们需要对插件进行魔改,让图片稍微提前加载,避开加载动画
打开
Hexo根目录
>node_modules
>hexo-lazyload-image
>lib
>simple-lazyload.js
文件第9行修改为:
1
&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)
作用:提前240个像素加载图片;当然这个值也可以根据自己情况修改
代码压缩
gulp代码压缩
因为hexo生成的html、css、js等都有很多的空格或者换行,而空格和换行也是占用字节的,所以需要将空格换行去掉也就是我要进行的“压缩”。
有人说空格换行能占多少字节?确实占不了多少,但是一个人访问是这么多字节,那么一百人,一万人呢?加起来这量就不少了吧,这都是流量啊!这也是很多css/js文件的后缀为*.min.js或*.min.css的原因。虽然我们可能没那么多访问量,但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。
我们采用gulp代码压缩方式。
使用方法:
- 进入站点根目录下依次执行下面的命令:
1 | # 全局安装gulp模块 |
- 在Hexo根目录新建文件
gulpfile.js
,并复制以下内容到文件中,有中文注释,可以根据自己需求修改。(注意:文件名不能错,一定为gulpfile.js
,否则会出错!)
1 | var gulp = require("gulp"); |
以后的执行方式有两种:
直接在Hexo根目录执行
gulp
或者gulp default
,这个命令相当于hexo cl&&hexo g
并且再把代码和图片压缩。在Hexo根目录执行
gulp build
,这个命令与第1种相比是:在最后又加了个hexo d
,等于说生成、压缩文件后又帮你自动部署了。
值得注意的是:这个加入了图片压缩,如果不想用图片压缩可以把第154行的 "compressImage",
和第165行的 ,"compressImage"
去掉即可
hexo-neat插件实现代码压缩
可能以上方法比较复杂,来介绍个简单的,hexo-neat
插件也是用来压缩代码的,底层也是通过gulp来实现的。
但是这个插件是有Bug的:
- 压缩 md 文件会使 markdown 语法的代码块消失
- 会删除全角空格
在博客站点根目录执行安装代码:
1 | npm install hexo-neat --save |
紧接着在站点根目录下的配置文件添加如下代码:
1 | neat_enable: true |
然后直接 hexo cl&&hexo g
就可以了,会自动压缩文件 。
补充:为了解决以上Bug,对于matery主题(其他主题自行解决)需要将以上默认配置修改为:
1 | #hexo-neat 优化提速插件(去掉HTML、css、js的blank字符) |
CDN加速
请看我的另一篇博客文章:https://yafine-blog.cn/posts/ee35.html
打造稳定快速、高效免费图床
请移步另两篇博文:
GitHub图床:https://yafine-blog.cn/posts/eb3a.html
Gitee图床:https://yafine-blog.cn/posts/15cb.html