GTmetrixで満点を取ろう。「Avoid CSS @import」重要度:中
Avoid CSS @importって知ってますか?
これがエラーになることは最近では減ったと思うのだけど、
どうなんでしょうね?
Avoid CSS @importとは
このエラーの意味は、CSS上で@importを使わない。というエラーです。
では、この@importとは何か?になりますよね。
@importを知る前に、知っておきたいのがCSSにおける@の意味。
このアットマーク、意味としてCSS用の書式ルールがありますよって知らせるマークです。
なので、@importもCSS上だけの専用書式ルールってやつです。
この@import、意味は別ファイルにある外部スタイルシートをインポートする際に
使われます。
CSS上に更にCSSが居る形ですね。
このエラーは、その外部化を止めろっていうエラー。
@importを使うとデータロード時の並行ダウンロードの動きを妨げるため
避けましょうってことです。
解決方法
解決策として挙げられるのは、
・@importを<link>要素に書き換える。
<link>も外部から引っ張ってくる意味があるので<link>にしてしまうのは
手段としてあり。
・外部化などせずに、内部に入れてしまう。
外部から読み込むのは何にせよ時間のロスがあるので、内部に入れる案。
どちらでも良いですが、個人的には後者。
終わりに
実は私、このエラーを直に見たことが無い。