Dewy へクリティカルCSSの最適化を実装した。

色々と下調べを行っていたが、運用コストを図るには運用してみるのが一番だと感じとりあえず小さく始めてみることにした。

サイトはレンダリングにテンプレートエンジンを使用しているため、当初はpenthouseを使用しようと考えた。
これはWebページをPhantomJSを用いて解析するもので、手元でレンダリングを実行する必要がなく導入が容易でサイコーだと感じた。

1penthouse({
2    url : 'https://dewy.me/',
3    css : path.join(__dirname + '/public/css/main.css'),
4    width : 320,
5    height : 480,
6    timeout: 30000
7}, (err, criticalCss) => {
8    if (err) console.error(err);
9
10    const clean = new cleanCSS().minify(criticalCss);
11    
12    fs.writeFile('views/inline/index.html', `<span class="subst">${clean.styles}</span>`);
13});

これでクリティカルCSSが記述されたhtmlが生成され、これをhead内でインポートしフルCSSは非同期で読み込む。PhantomJSが重いのか少し実行に時間はかかるが、問題なく作動した。
しかし、内部モジュールのCSSパースの精度がよくないのか正確なクリティカルCSSを吐き出せておらず、ベタにcriticalを使うこととなった。

とりえず一度静的なhtmlへレンダリングを行い、それを解析。それ以外は上記と同じ流れとなる。

criticalの部分は…

1critical.generate({
2    base: 'public/',
3    src: 'index.html',
4    css: ['public/css/normalize.css', 'public/css/evil-icons.min.css', 'public/css/main.css'],
5    width: 320,
6    height: 480
7}).then(output => {
8    const clean = new cleanCSS().minify(output);
9    
10    fs.writeFile('views/inline/index.html', `<span class="subst">${clean.styles}</span>`);
11}).error(err => {
12    console.error(err)
13});

こんな感じ。Promiseで書けるので多少複雑になっていっても視認性はよさそうだ。

PageSpeed Insightsの点は結構上がって気持ちがいいので、しばらくこれで運用して改善点と課題を洗い出したいと思う。