前回の外部スタイルシート（CSS）と外部JavaScriptファイルの記述順序の最適化に加え、今回は更にもう一歩進んで、他の外部ファイルや内部JavaScriptの記述（＝インライン・スクリプト）がある場合の記述順序の最適化について取り上げます。

（Web Performance Best Practices内｜Google code：英語）

グーグルが示唆する最善の参照ファイルの記述順序の原則は次の２つです。

• 「その他の外部ファイル記述」は「外部スタイルシート（CSS）記述」の後に。
  
  
• 「内部JavaScript記述（＝インライン・スクリプト）」は一番最後に。

最善の記述順序例

このグーグルのサンプルには外部JavaScriptの記述が載っていませんが、グーグルのウェブサイトや他のメジャーサイトを参考にすると、

「外部JavaScript記述」は「その他の外部ファイル記述」の後、「内部JavaScript記述（＝インライン・スクリプト）」の前が最適と言えるようです。

これまでの内容をまとめると、

次の参照ファイル（＝記述）がある場合、

その最善の並び順は、基本的には以下の通りとなります。

（ファイル内容によっては並び順を変更できない場合もあります。あくまで記述の順序がウェブページの表示や動作に影響しないケースにおける記述順序とお考えください。）

1. 外部スタイルシート（CSS）記述
2. その他の外部ファイル記述
3. 外部JavaScript記述
4. 内部JavaScript記述

なお、前回・今回のブラウザーによる読み込みファイルの順序については、ブラウザーによっては異なってきます。

例えば、Apple のブラウザー Safari には、実際のファイルの読み込み順序を確認する開発者向け機能がついています。

使い方は、調べたいホームページを表示してから、

　　開発 > Webインスペクタを表示

　　「リソース」で「開始時間で並び替え」

で確認できます。

これによると、複数のJavaScriptファイルを、

グーグルの指摘（昨日のブログ内容参照）とは異なり、

並列で同時に読み込んでいるのが判ります。

検索エンジンGoogleは既にホームページの検索ランキングを決める要素のひとつに、ページの読み込み速度（＝ホームページの表示スピード）を加味しています。（「米Googleが検索結果ランキングの決定要素にホームページ表示速度を追加」）

サイトを訪れてくれる人のためにも、検索エンジン対策のためにも、

ホームページ表示のスピードアップを計りたいですね。

Tweet