WordPress（Page Speed対応） – CSS @import を使用しない

難易度

★すごく簡単

概要

ブラウザにはパラレルロードという、並行してコンテンツを読み込む仕組みがあります。一つのファイルの読み込みが完了してから、次のファイルの読み込みに移るのではなく、複数のファイルを同時に読み込み、解析の速度を向上される手法です。

現在、世の中に出回っているブラウザのほぼ全てに、CSSをパラレルロードする仕組みが搭載されています。しかし、スタイルシートの読み込みに@import使用した場合、一部のブラウザでは、パラレルロードが行われず、読み込み速度が遅延する可能性がある為、@importでのCSSファイルの読み込みは避けたほうが良いです。

[html]@import url('1.css') @import url('2.css')[/html]

↓

[html]<link rel="stylesheet" href="1.css"> <link rel="stylesheet" href="2.css"> </head>[/html]

CSSの読み込みでは、@importを使用せず、head内で直接CSSファイルを読み込みましょう。出来ることなら読み込みリクエストの数を減らすため、1.cssと2.cssを合算するとさらに良いです。

[html]<link rel="stylesheet" href="1.css"> <link rel="stylesheet" href="2.css">[/html]

↓

[html]<link rel="stylesheet" href="1and2.css">[/html]