JavaScript読み込みブロック回避でページ表示を高速化する方法

 

スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋

WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。

JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking JavaScript Downloadsではこのテクニックの適用で2倍以上の高速化が確認されている。ちなみに画像の読み込みが2並列にとどまっているのはHTTP 1.1に準拠した実装になっているIE7/Firefox2における制限だ。この制限はドメインごとに発生するため画像のドメイン名を変更することで回避もできる。なおIE8/Firefox3では6並列まで拡張されている。

DOMを経由してスクリプトをダイナミックに読み込むように記述 - 同ブログより抜粋

スクリプトの読み込みが画像と並列していることがわかる - 同ブログより抜粋

同テクニックはCSSファイルについても適用できる。同じようにDOMを経由して読み込んでやればいい。それほどコードも複雑にならずに効果が期待できる方法だ。

CSSについても同じテクニック並列読み込みを実現できる - 同ブログより抜粋

読み込むべきJavaScriptファイルが複数ある場合は、あらかじめひとつのファイルにしてからミニファイしておく方法が効果的だ。どうしても複数のファイルを読み込まなくてならない場合には、YUI Get utilityを使って読み込むようにすればいい。Non-blocking JavaScript Downloadsではこれ以外のテクニックの説明や、それらテクニックの悪影響などについても説明している。簡単に実施できてそれなりに効果の期待できる方法なのでWebデベロッパは一度目を通しておいた方がいいだろう。

YUI Get utilityを使った複数スクリプトを読み込む場合 - 同ブログより抜粋

ただし、数年後にはこのテクニックはもはや不要のものになっているかもしれない。SafariやIE8ではすでにJavaScriptを並列してロードするように実装が変更されているからだ。Firefox 3はブロックして読み込むが、将来のバージョンでは同様に並列読み込みが可能になるとみられる。しかし、同手法が今後数年間、有益であることは間違いない。

関連キーワード


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

今田耕司「3 年前まで彼女がいた」目標は「東京五輪婚」と東野幸治に宣言
[06:00 8/30] エンタメ
宮根誠司「断ったら遺恨が…」弟子・川田裕美との共演を語る
[06:00 8/30] エンタメ
長谷部誠、黒柳徹子からのお触りに積極的発言「触ってもらえますか?」
[06:00 8/30] エンタメ
澤穂希、東京五輪に向けた今後の展望を語る『1周回って知らない話』初回2時間SP
[06:00 8/30] エンタメ
[三代目JSB・岩田剛典]サスペンスドラマ初挑戦 菅野、松嶋との共演に「光栄」
[06:00 8/30] エンタメ

求人情報