jekyll静态博客提升访问速度:内嵌CSS,异步加载js,压缩HTML
在谷歌搜索的功能速度(实验性)
中推荐使用工具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
内嵌与压缩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: truecomments: ["<!-- ", " -->"]
需要注意的是这个脚本可能不完善。
网页优化的缺点就是编译速度变慢了
更多内容参考:
- Inline CSS in Jekyll — SitePoint
- Jekyll Speed Improvements
jekyll静态博客提升访问速度:内嵌CSS,异步加载js,压缩HTML相关推荐
- 内嵌WEB服务器加载原理
内嵌WEB服务器加载原理 理解里面的tomcat是如何启动的 Startup.bat Server.start() 1,概述 我们在使用springboot项目的时候并没有使用外部的tomcat,那么 ...
- CSDN 写博客 word文档复制粘贴 图片粘贴 加载失败问题解决
答案就是使用 DOCX 文档格式 在这中格式的文档中编辑后,可以直接粘贴到 CSDN 博客中 截图如下:
- GitHub-jekyll静态博客快速构建与优化--jekyll serve --incremental --profile
我的jekyll静态博客部署在GitHub上,平时自己本地测试的时候运行命令jekyll serve即可启动: C:\Users\peter\Documents\GitHub\zhang0peter. ...
- 【经验】静态博客部署 Hexo + Netlify-CMS + Vercel (在线构建)
目录 引入 背景 方案 步骤 生成starter模板 添加Netlify CMS在线管理 添加Netlify身份验证组件 启用git gateway身份验证 换用Vercel作为CDN 重新添加js ...
- Github、Jekyll 搭建及优化静态博客方法指南
尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉 ...
- 在win10子系统ubuntu平台下使用jekyll和github pages搭建自己的静态博客网站
前言 总喜欢在自己闲得无聊的时候,折腾一些东西.最近喜欢上了markdown的方便简洁,就想借助jekyll和github pages来搭建一个静态博客网站,然后只需要跟平时写代码一样,上传自己的.m ...
- Jekyll + Coding Pages 搭建静态博客
本文转自https://bigballon.github.io/posts/jekyll-github.html,原文是在github上使用jekyll搭建博客,这里用Coding Pages搭建博客 ...
- 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 4-8
系列文章 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 1-8 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 2-8 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可 ...
- 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 8-8
系列文章 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 1-8 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 2-8 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可 ...
最新文章
- win 64位系统安装带有c编写的python模块出现ValueError: [u'path']解决
- Class类文件结构、类加载机制以及字节码执行
- Java:Java的输入类Scanner
- 200912阶段一C++友元、运算符重载
- Verilog_寻找最高有效位的位置
- JsSIP 注册,拨打填坑
- 蓝牙核心规范(V5.2)7.8-深入详解之SMP(安全管理协议)|LE配对过程(1)
- web前端设计与开发,css段落首行缩进2字符怎么设置
- zedgraph显示最小刻度_ZedGraph显示多条实时曲线
- 22考研各科标准答题卡(附高清PDF版)
- 小程序常用的10款框架
- 【重要通知】结构设计新班开课——本轮主讲电动牙刷产品结构设计
- 响应式网站-媒体查询
- 植物大战僵尸原版完整版 免安装中文版
- 在微信公众号中使用JQueryWeui组件实现文件上传
- 最优化方法(Optimization methods)中的Modularity
- php基本变量,PHP-语法及变量基本操作
- MyBatis的Dao层实现方式
- 关于星环TDH产品的Java通过Kerberos安全认证连接hyperbase
- 南大计算机学院在职博士,南京大学双证在职博士
热门文章
- mysql 缓存区_Mysql缓存的配置和使用
- Linux13-bash脚本编程基础及配置文件
- antiSMASH数据库:微生物次生代谢物合成基因组簇查询和预测
- 扩增子图表解读6韦恩图:比较组间共有和特有OTU或分类单元
- thinkphp 个别字段无法更新_香港华为手机大面积死机?只是个别手机更新出问题...
- R语言使用car包的scatter3d函数可视化可以交互旋转的3D散点图(Spinning 3D scatter plot by the scatter3d() function of car)
- python使用列表推导式(list comprehension)和itertools生成浮点数列表
- R语言构建仿真列联表并进行卡方检验(chisq.test):检验两个分类变量是否独立、输出期望的列联表
- Error in plot.new() : figure margins too large
- R绘制排序的条形图(Ordered Bar Chart)