A hexo plugin that optimize the pages loading speed.
npm install hexo-filter-optimize[![travis-image]][travis-url]
[![npm-image]][npm-url]
[![lic-image]](LICENSE)
A hexo plugin that optimize the pages loading speed.
It will auto filter your html file, find the block and replace them into a javascript to optimize CSS delivery.
And inline the main.css into the html page like @maple3142 does.
It will improve your pages loading and get a higher score in the Google PageSpeed Insights.
![size-image]
[![dm-image]][npm-url]
[![dt-image]][npm-url]
``bash`
npm install hexo-filter-optimize
Activate the plugin in hexo's _config.yml like this:`yml`
filter_optimize:
enable: true
# remove the surrounding comments in each of the bundled files
remove_comments: false
css:
# bundle loaded css file into the one
bundle: true
# use a script block to load css elements dynamically
delivery: true
# make specific css content inline into the html page
# - only support the full path
# - default is ['css/main.css']
inlines:
excludes:
js:
# bundle loaded js file into the one
bundle: true
excludes:
# set the priority of this plugin,
# lower means it will be executed first, default is 10
priority: 12
This plugin can be disabled by NODE_ENV in development to boost hexo generate:`
export NODE_ENV=development
Here is a result from GTmetrix to show you the changes between before and after. (Same web server located in Tokyo, Japan, vultr.com)
* Remove query strings from static resources - let all the proxies could cache resources well. (https://gtmetrix.com/remove-query-strings-from-static-resources.html)
* Make fewer HTTP requests - through combined the loaded js files into the one.
* Prefer asynchronous resources - change the css delivery method using a script block instead of link tag.
* And TODOs ...
[travis-image]: https://img.shields.io/travis/theme-next/hexo-filter-optimize/master.svg?style=flat-square
[npm-image]: https://img.shields.io/npm/v/hexo-filter-optimize.svg?style=flat-square
[lic-image]: https://img.shields.io/npm/l/hexo-filter-optimize?style=flat-square
[size-image]: https://img.shields.io/github/languages/code-size/theme-next/hexo-filter-optimize?style=flat-square
[dm-image]: https://img.shields.io/npm/dm/hexo-filter-optimize?style=flat-square
[dt-image]: https://img.shields.io/npm/dt/hexo-filter-optimize?style=flat-square
[travis-url]: https://travis-ci.org/theme-next/hexo-filter-optimize
[npm-url]: https://www.npmjs.com/package/hexo-filter-optimize