CSS @import を使用しない


ワードプレスのテンプレートや、制作会社に外注した際に@importが使われているケースがあります。@importは、複数のcssファイルをcssで一括してまとめて、読み込む記述です。Google PageSpeed Insightsでチェックをすると、この記述が該当する場合にエラーとして指摘してくれます。




@importの記述例と回避方法

例えばimport.cssというcssファイルに、以下のような記述をします。記述内容は他のcssファイル(この場合は、reset.css、basic.css、common.css、header.css、footer.css、top.css、contents.css)を束ねる形になります。このimport.cssをhtmlのヘッダ部分に記述し、ブラウザで読み込むように設定します。

@charset "utf-8";
@import "reset.css";
@import "basic.css";
@import "common.css";
@import "header.css";
@import "footer.css";
@import "top.css";
@import "contents.css";


CSS @importの問題点

ブラウザの読み込み速度低下につながります。cssはほとんどのブラウザでパラレルにロードされますが、@importを使うと順番にダウンロードされます。例えばcssファイルを1つ読み込むのに0.3秒かかるとすると、@importで、3ファイル読み込む設定を行うと0.3秒×3ファイルで0.9秒かかるといった計算になります。


@importを使わずに通常通り記述すると、3つのcssファイルをパラレルに読み込みますので、0.3秒でロードされるといった計算になります。圧倒的に早いですね。


@importは使わない

ページの読み込みスピードを高速化する事で、訪問者のユーザビリティが上がります。大きな要因ではありませんが、Googleの検索順位決定の指標のうちの一つでもありますので、もし@importを使っている場合は、通常通りの記述にしたほうがよいでしょう。
ウェブサイト高速化はSEOだけでなくECサイトであればCVにも強く影響すると言われています。
詳しくは、「ECサイト必須のウェブサイト高速化 SEO効果だけでなくCVにも影響」をご参照ください。



このエントリーをはてなブックマークに追加


野澤洋介

この記事を書いた人

アレグロマーケティング代表取締役 野澤洋介

SEOは考え方はシンプルですが、いざ実践するとなかなか思うようにいきません。
当ブログでは、読者の方に成功も失敗も合わせて情報を共有し、同じような悩みを解決できればという思いで運営しています。


著書:「最強の効果を生みだす 新しいSEOの教科書」(技術評論社)



関連記事




ページ上部