Add critical path CSS
This commit is contained in:
Rico Sta. Cruz
parent
c23c734832
commit
b3beaccbe9
|
|
@ -130,3 +130,16 @@ building web user interfaces...
|
||||||
### intro only
|
### intro only
|
||||||
|
|
||||||
If you left out `description` or `keywords`, a default description will be added.
|
If you left out `description` or `keywords`, a default description will be added.
|
||||||
|
|
||||||
|
## Critical path CSS
|
||||||
|
|
||||||
|
The critical path CSS is stored in:
|
||||||
|
|
||||||
|
- `_includes/2017/critical/home.html`
|
||||||
|
- `_includes/2017/critical/sheet.html`
|
||||||
|
|
||||||
|
You'll need to update these every now and then when you change something in the CSS. Use this to update these snippets:
|
||||||
|
|
||||||
|
```
|
||||||
|
yarn run critical
|
||||||
|
```
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,8 +5,20 @@
|
||||||
<script src='{{base}}/assets/packed/app.js?t={{ timestamp }}'></script>
|
<script src='{{base}}/assets/packed/app.js?t={{ timestamp }}'></script>
|
||||||
{% for lang in page.prism_languages %}<script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
|
{% for lang in page.prism_languages %}<script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
|
||||||
|
|
||||||
<!-- 3rd-party libs -->
|
{% if include.critical == 'home' %}
|
||||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cousine'>
|
<style>{% include 2017/critical/home.html %}</style>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<!-- 2017 layout -->
|
{% if include.critical == 'sheet' %}
|
||||||
<link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'>
|
<style>{% include 2017/critical/sheet.html %}</style>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- css -->
|
||||||
|
<script>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
|
||||||
|
'https://fonts.googleapis.com/css?family=Cousine',
|
||||||
|
'{{base}}/assets/2017/style.css?t={{ timestamp }}'
|
||||||
|
])</script>
|
||||||
|
<noscript>
|
||||||
|
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Cousine'>
|
||||||
|
<link rel='stylesheet' type='text/css' href='{{base}}/assets/2017/style.css?t={{ timestamp }}'>
|
||||||
|
</noscript>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
| where_exp: "page", "page.updated"
|
| where_exp: "page", "page.updated"
|
||||||
| sort: "updated", "first"
|
| sort: "updated", "first"
|
||||||
%}
|
%}
|
||||||
{% include 2017/head.html %}
|
{% include 2017/head.html critical='home' %}
|
||||||
|
|
||||||
</head><body>
|
</head><body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html class='NoJs' lang='en'><head>
|
<html class='NoJs' lang='en'><head>
|
||||||
|
|
||||||
{% include 2017/head.html %}
|
{% include 2017/head.html critical='sheet' %}
|
||||||
{% include 2017/article-schema.html page=page %}
|
{% include 2017/article-schema.html page=page %}
|
||||||
|
|
||||||
</head><body>
|
</head><body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
const critical = require('critical')
|
||||||
|
|
||||||
|
console.warn('Generating critical path styles into _includes/2017/critical/...')
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
base: '_site',
|
||||||
|
width: 1400,
|
||||||
|
height: 900,
|
||||||
|
minify: true,
|
||||||
|
extract: true,
|
||||||
|
ignore: [
|
||||||
|
'font-face'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
critical.generate({
|
||||||
|
...options,
|
||||||
|
src: 'index.html',
|
||||||
|
dest: '../_includes/2017/critical/home.html'
|
||||||
|
})
|
||||||
|
|
||||||
|
critical.generate({
|
||||||
|
...options,
|
||||||
|
src: 'react.html',
|
||||||
|
dest: '../_includes/2017/critical/sheet.html',
|
||||||
|
include: [
|
||||||
|
/\.h3-section/
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
"webpack": "3.6.0"
|
"webpack": "3.6.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"critical": "node _support/critical.js",
|
||||||
"dev": "run-p dev:webpack dev:jekyll",
|
"dev": "run-p dev:webpack dev:jekyll",
|
||||||
"dev:webpack": "webpack --watch --colors -p",
|
"dev:webpack": "webpack --watch --colors -p",
|
||||||
"dev:jekyll": "bundle exec jekyll serve --safe --drafts --watch --port $PORT --incremental",
|
"dev:jekyll": "bundle exec jekyll serve --safe --drafts --watch --port $PORT --incremental",
|
||||||
|
|
@ -33,6 +34,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-polyfill": "6.26.0",
|
"babel-polyfill": "6.26.0",
|
||||||
|
"critical": "0.9.1",
|
||||||
"dom101": "2.2.1",
|
"dom101": "2.2.1",
|
||||||
"hint.css": "2.5.0",
|
"hint.css": "2.5.0",
|
||||||
"isotope-layout": "3.0.4",
|
"isotope-layout": "3.0.4",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue