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

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

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

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]

注意点

特になし

確認方法

ソースを目視確認

参考サイト

css @importを使うべきでない理由