【Webスコア爆改善！】CSSとJavaScriptを後読みにすることで表示高速化

昨今、外部のJSやCSSを読み込むと非常に遅くてHTMLのスコアが著しく下がっているサイトも多いでしょう。
解説サイトにあるようなasyncやdeferを使ってもいまいちスコアが解消されない。

そんな場合はworkerを利用して外部ファイルを非同期で後読みにすることでスコアが大きく解消されます。

↓ まずこれをそのまま用意する (コピペでOK)

worker.js

function doHeavyProcessing() {
}
onmessage = function(event) {
	doHeavyProcessing();
	postMessage('processing completed');
};

↓ こちらを該当のHTMLの下のほうに記載する (「読み込みたいjs/css」の部分だけ書き換えてください)

<script>
$(window).load(function(){

	const worker = new Worker('worker.js');
	worker.onmessage = function(event) {
		// 読み込みたいjsを羅列
		js_read("https://platform.twitter.com/widgets.js");
		js_read("https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js");

		// 読み込みたいcssを羅列
		css_read("/css/uikit/xxxx.min.css");
		css_read("/css/xxx/xxx.min.css");
		css_read("/css/xxx.min.css");
		css_read("/css/bulma.min.css");
		css_read("/css/animate.min.css");
	};
	worker.postMessage(null);

	function css_read(v){
	    var link;
	    link = document.createElement('link');
	    link.rel = 'stylesheet';
	    link.href = v;
	    document.head.appendChild(link);
	}
	function js_read(v){
	    var sf;
	    sf = document.createElement('script');
	    sf.src = v;
	    document.body.appendChild(sf);
	}

});
</script>

これで完全にバックグラウンドでの非同期の読み込みになるので速度大幅改善、スコア爆改善に繋がります。

※ ただし、cssを後読みにする都合で最初のレンダリング時に画面の見た目が一瞬悪くなります。それでも問題ないケースのみ導入を検討してください。
また、それに伴って逆にCLSが発生してしまうリスクがあるので、ブロック要素には直接styleで高さ指定しておくことをオススメします。

※ jsを直接カスタマイズ出来るかたは「読み込みたいjs/css」の部分を配列組んだりするともっとスマートになると思います。