WordPress（Page Speed対応） – スタイルシートとスクリプトの順序を最適化する
難易度
★すごく簡単
概要
CSSを最初に読み込み、Javascriptは後から読み込む。ブラウザは一つのホストに対し、複数の同時接続が可能だが、Javascript同士の並列ダウンロードは行えないみたい。CSSとJavascriptの読み込みがあべこべだと、CSSの並列ダウンロードが最適にならない。
[html]<link rel="stylesheet" type="text/css" href="css/1.css" /> <link rel="stylesheet" type="text/css" href="css/2.css" /> <script src="a.js"></script> <script src="b.js"></script> <link rel="stylesheet" type="text/css" href="css/3.css" />[/html]
↓
[html]<link rel="stylesheet" type="text/css" href="css/1.css" /> <link rel="stylesheet" type="text/css" href="css/2.css" /> <link rel="stylesheet" type="text/css" href="css/3.css" /> <script src="a.js"></script> <script src="b.js"></script>[/html]
注意点
複数のCSSを読み込んでいる場合、記述の順序に要注意。idやclass名が重複している場合は、一番最後に読み込んだCSSが優先される為、CSSを読み込む順番を変更すると、思わぬレイアウト崩れが起きる可能性があります。変更後はレイアウト確認をしましょう。
複数のJavascriptを読み込んでいる場合も、記述の順序に要注意。Javascriptファイルを読み込む順番に依存関係のあるファイルを、逆に読み込んでしまうと、エラーが発生したり、処理が上手く実行されなかったりします。
確認方法
各種ブラウザで確認
