jekyll静态博客提升访问速度:内嵌CSS,异步加载js,压缩HTML

此文首发于我的个人博客:jekyll静态博客提升访问速度:内嵌CSS,异步加载js,压缩HTML — zhang0peter的个人博客


在谷歌搜索的功能速度(实验性)中推荐使用工具PageSpeed Insights查看我的网页访问速度情况:PageSpeed Insights

测试结果:PageSpeed Insights of zhang0peter.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jSq3x8p0-1580112094195)({% link /images/posts/2020-1-27-css-1.png %})]

分数很低,只有33分。

优化建议的第一条是移除阻塞渲染的资源,里面列出了非异步加载的css和js文件。提示:

资源阻止了系统对您网页的首次渲染。建议以内嵌方式提供关键的 JS/CSS,并推迟提供所有非关键的 JS/样式。

异步加载javascript

对于非关键的js文件,想要实现异步加载很简单:

<script async src="siteScript.js"></script>

asyncdefer关键字都可以实现js脚本的异步加载,更多内容参考:javascript - load scripts asynchronously - Stack Overflow

内嵌与压缩css

但是对于css文件来说,异步加载就比较困难了,没有js那样的直接异步加载的工具。

根据html - How to load CSS Asynchronously - Stack Overflow,想要css async load asyncload,最多只能在一个css文件上实现,而且css是阻塞渲染的资源,更多内容见:阻塞渲染的 CSS Web Google Developers

想要最快的方法加载css,推荐内联关键css,其实对于小网站来说,可以把所有的css全部内联,一次加载完成。

内联(inline)css后,就不会阻塞渲染,等待css文件的加载,网页访问速度会大幅度提升。

但如何在jeykll的静态博客中进行内联操作,我找了很多资料。

最后的解决方法是下header.html页面中直接includecss文件,这样就可以把生成的html中就嵌入css代码。

代码如下:

{% capture styles %}
{% include  assets/css/main.css%}
{% endcapture %}

<style>
    {{ styles | scssify}}
</style>

你还可以在_config.yml中增加压缩css的配置:

sass:
    style: compressed

现在css已经成功内嵌。

压缩html

使用工具:penibelst/jekyll-compress-html: A Jekyll layout that compresses HTML in pure Liquid
下载最新版本,放到目录_ayouts下,配置_layouts/default.html

---
layout: compress
---

_config.yml中增加压缩html的配置:

compress_html:
  blanklines: true
  comments: ["<!-- ", " -->"]

需要注意的是这个脚本可能不完善。


网页优化的缺点就是编译速度变慢了,参考我这篇文章加快编译速度:GitHub-jekyll静态博客快速构建与优化–jekyll serve --incremental --profile — zhang0peter的个人博客

更多内容参考:

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值