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>にしてしまうのは
手段としてあり。

・外部化などせずに、内部に入れてしまう。
外部から読み込むのは何にせよ時間のロスがあるので、内部に入れる案。

どちらでも良いですが、個人的には後者。

終わりに

実は私、このエラーを直に見たことが無い。