| 1 | # hexo-filter-optimize
|
| 2 | [![npm-build]][npm-build-link] [![travis-ci]][travis-ci-link]
|
| 3 |
|
| 4 | [npm-build]: https://img.shields.io/npm/v/hexo-filter-optimize.svg?style=flat
|
| 5 | [npm-build-link]: https://www.npmjs.com/package/hexo-filter-optimize
|
| 6 | [travis-ci]: https://img.shields.io/travis/theme-next/hexo-filter-optimize/master.svg?style=flat
|
| 7 | [travis-ci-link]: https://travis-ci.org/theme-next/hexo-filter-optimize
|
| 8 |
|
| 9 | A hexo plugin that optimize the pages loading speed.
|
| 10 |
|
| 11 | It will auto filter your html file, find the `<link rel="stylesheet">` block and replace them into a javascript to [optimize CSS delivery](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery).
|
| 12 |
|
| 13 | And inline the `main.css` into the html page like @maple3142 [does](https://github.com/maple3142/Blog/blob/master/gulpfile.js).
|
| 14 |
|
| 15 | It will improve your pages loading and get a higher score in the [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/).
|
| 16 |
|
| 17 | ## Installation
|
| 18 |
|
| 19 | ```bash
|
| 20 | npm install hexo-filter-optimize --save
|
| 21 | ```
|
| 22 |
|
| 23 | ## Usage
|
| 24 |
|
| 25 | Activate the plugin in hexo's `_config.yml` like this:
|
| 26 | ```yml
|
| 27 | filter_optimize:
|
| 28 | enable: true
|
| 29 | # remove static resource query string
|
| 30 | # - like `?v=1.0.0`
|
| 31 | remove_query_string: true
|
| 32 | # remove the surrounding comments in each of the bundled files
|
| 33 | remove_comments: false
|
| 34 | css:
|
| 35 | enable: true
|
| 36 | # bundle loaded css file into the one
|
| 37 | bundle: true
|
| 38 | # use a script block to load css elements dynamically
|
| 39 | delivery: true
|
| 40 | # make specific css content inline into the html page
|
| 41 | # - only support the full path
|
| 42 | # - default is ['css/main.css']
|
| 43 | inlines:
|
| 44 | excludes:
|
| 45 | js:
|
| 46 | # bundle loaded js file into the one
|
| 47 | bundle: true
|
| 48 | excludes:
|
| 49 | ```
|
| 50 |
|
| 51 | ## Comparison
|
| 52 |
|
| 53 | Here is a [result](https://gtmetrix.com/compare/Z7BnLaPX/qSMKtzBY) from [GTmetrix](https://gtmetrix.com) to show you the changes between before and after. (Same web server located in Tokyo, Japan, vultr.com)
|
| 54 |
|
| 55 | * **Remove query strings from static resources** - let all the proxies could cache resources well. (https://gtmetrix.com/remove-query-strings-from-static-resources.html)
|
| 56 | * **Make fewer HTTP requests** - through combined the loaded js files into the one.
|
| 57 | * **Prefer asynchronous resources** - change the css delivery method using a script block instead of link tag.
|
| 58 | * And TODOs ...
|
| 59 |
|
| 60 | 
|