www.yusukezzz.net のスコアはPC版で90、モバイル向けで87となっている
github.io に置いてるサイトなので出来ることはあまり多くないのだけど、元は70点台ぐらいだったのでここまで上げるためにやったこと2点をまとめておく
CSS, JS の縮小
いわゆる minify と言われているやつ
wordpress だと plugin で出来たりするが、この blog では cloudflare の機能を利用している
Speed タブの Auto Minify から有効化出来る
CSS, JS, HTMLの3種類が選べるが、この blog だとHTMLの minify は不具合があったので CSS, JS だけ使用している
レンダリングをブロックしているコンテンツの排除
同期的に読み込まれる CSS, JS はページのレンダリングを遅くするため、非同期的に読み込むとスコアが向上する
読み込むだけで効果のある単純な JS であれば async または defer 属性を付けるだけでなんとかなる(※)が、
読み込んでから初期化処理を呼び出す必要がある場合は読み込み完了に hook して実行する必要がある
この blog では highlightjs が該当し、ページ末尾で以下のような script を実行している
※document.write しちゃってるような行儀の悪い script や読み込み順に依存関係があるものを除く
<script>
function loadCss(url) {
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = url;
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
}
function loadJs(url, cb) {
var d = document, t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.async = true;
o.src = url;
if (cb) { o.addEventListener('load', function (e) { cb(null, e); }, false); }
s.parentNode.insertBefore(o, s);
}
var cb = function() {
loadCss('https://www.yusukezzz.net/wp-content/highlightjs/solarized-light.css');
loadJs('https://www.yusukezzz.net/wp-content/highlightjs/highlight.pack.js', function() {
hljs.initHighlightingOnLoad();
});
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
もっとも、小規模なものであれば外部ファイル化せずに直接 head タグ内に書いたほうが良い（インライン展開）