在谷歌搜索的功能速度(实验性)
中推荐使用工具PageSpeed Insights
查看我的网页访问速度情况:PageSpeed Insights
分数很低,只有33分。
优化建议的第一条是移除阻塞渲染的资源
,里面列出了非异步加载的css和js文件。提示:
资源阻止了系统对您网页的首次渲染。建议以内嵌方式提供关键的 JS/CSS,并推迟提供所有非关键的 JS/样式。
异步加载javascript
对于非关键的js文件,想要实现异步加载很简单:
<script async src="siteScript.js"></script>
async
或defer
关键字都可以实现js脚本的异步加载,更多内容参考:javascript - load scripts asynchronously - Stack Overflow
但有时候有些js文件不能异步加载,那么我推荐直接在header.html中include进去,比如说jquery.js,直接Include进去,不用异步加载了。
内嵌与压缩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
页面中直接include
css文件,这样就可以把生成的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
更多内容参考:
文档信息
- 本文作者:last2win
- 本文链接:https://last2win.com/2020/01/27/jekyll-inline-css/
- 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
Be the first person to leave a comment!