読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress(Page Speed対応) – スタイルシートとスクリプトの順序を最適化する

パフォーマンスチューニング

難易度

★すごく簡単

概要

CSSを最初に読み込み、Javascriptは後から読み込む。ブラウザは一つのホストに対し、複数の同時接続が可能だが、Javascript同士の並列ダウンロードは行えないみたい。CSSJavascriptの読み込みがあべこべだと、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ファイルを読み込む順番に依存関係のあるファイルを、逆に読み込んでしまうと、エラーが発生したり、処理が上手く実行されなかったりします。

確認方法

各種ブラウザで確認

参考サイト

スタイルシートとスクリプトの順序を最適化する