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年後は? あなたの年収をデータに基づき予報します。

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

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

人気記事

一覧

イチオシ記事

新着記事

若槻千夏、先輩タレントに意地悪された過去暴露「今でも活躍している方」
[09:19 9/26] エンタメ
ソニーの新たな旗艦拠点 - 銀座ショールーム&ストアのオープニング舞台裏
[09:05 9/26] スマホとデジタル家電
SNS使いが上手い!要注目の食品・飲料系Webキャンペーン事例5選【2016年9月】
[09:01 9/26] 企業IT
【連載特別企画】ゼロから始める多要素認証 第1回 現在、認証基盤に何が求められているのか? YubiKeyが切り拓く近未来の認証環境
[09:00 9/26] 企業IT
【特別企画】著名な車メーカーのブランドをも傾ける!? スマートカーのハッキング対策の勘所とは - ペンタセキュリティ
[08:30 9/26] 企業IT

求人情報