インラインと外部スクリプトと圧縮の速さを比較
今回はインラインと外部スクリプト、外部スクリプトを圧縮した場合の構成を比較検証していきます。
#6 インラインと外部スクリプトと圧縮の速さを比較【主張】 - YouTube
インラインのデメリットは
- キャッシュできない
- コードのサイズが大きい
の２点
圧縮なしの外部スクリプトのデメリットは
- コードのサイズが大きい
- ネットワーク通信が１つ多くなる
の２点
圧縮の外部スクリプトのデメリットは
- ネットワーク通信が１つ多くなる
- 本番でのデバッグが難しくなる
- 開発環境を整えるのに時間がかかるの
３点 です。
まずは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はインラインにコードを書いたほうがいいっていう結論でした。
HTML5のクイズ集
登録日：
更新日：