#6 インラインと外部スクリプトと圧縮の速さを比較
今回はインラインと外部スクリプト、外部スクリプトを圧縮した場合の
構成を比較検証していきます。
インラインのデメリットは
キャッシュできない
コードのサイズが大きい
の２点
圧縮なしの外部スクリプトのデメリットは
コードのサイズが大きい
ネットワーク通信が１つ多くなる
の２点
圧縮の外部スクリプトのデメリットは
ネットワーク通信が１つ多くなる
本番でのデバッグが難しくなる
開発環境を整えるのに時間がかかる
の３点
です。
まずはJavascriptを圧縮した時のサイズの違いはどれくらいなのか
検証してみました。
クイジェンのサイトで一番Javascriptが使われているクイズページの
Javascriptが圧縮する前で6.4KBです。
圧縮後は4.3KBで約2/3になっています。
ただこの2KBサイズを軽くする事がどれくらい重要なのかの検証が必要です。
Amazonでの商品の画像を見てみると73.8KBです。
エンジニアが時間をかけてJavascriptのコードを書いてそのコードが圧縮されて
サイズが小さくなるので、すごく圧縮されているように感じますが、コンテンツの
画像に比べれば圧縮されて小さくなるサイズはたかがコンテンツ画像の1/30にも
満たないです。
実際にPage Speed Insightでスピードを比較しました。
インラインの結果がこの画像です。
圧縮された外部スクリプトの結果がこの画像です。
JSファイルが6KB程度であれば、インラインで直接書いたほうが早いという
結果になりました。
もちろん、Page Speed Insightはキャッシュは考慮されないので、キャッシュ
なしでのパフォーマンスですが、SEOを考えた場合も検索エンジンクローラーが
ブラウザキャッシュをしないので、
SEO的にはインラインの方が早いという結果になりました。
どれくらいのJavascriptのコード量でインラインか外部スクリプトかの基準が
わからないですが、今回のサンプルのJavascriptコードは250行もありクイジェン
のサイトで一番コード量が多いページです。
それでもPage Speed Insightではインラインの方が速度が速かったので、
ほとんどのWEBページでは外部スクリプトにする必要がないのかもしれません。
それと引き換えのデメリットの本番でのデバッグがしづらいということが
どういうことかと画像を見せると
コンソール上でエラーが出ました。本来であればこのクイズの回答者のデータが
表示される所なのですが、表示されていません。
このコンソールのエラーからクリックしてデバッグ箇所に遷移しますが、
圧縮されて１行なので、簡単な変数ミスでのnot definedですらすごく見づらく
デバッグがしづらい状態です。
これらの結果から社内ツールやPV数が月間１００万未満のページなのであれば
インラインの方がメリットは大きく
月間１００万以上のページであっても
よほどのことがない限りCSS,JSはインラインにコードを
書いたほうがいいっていう結論でした。
