WordPressでCSSファイルが複数ある時の読み込み方法を比較

WordPressで複数のCSSファイルを読み込む方法を比較

BootStrapを利用してWordPressのテーマを制作する機会がありました。

その際にCSSファイルを複数読み込み必要があったので、サイトの表示速度が一番早い方法を調査してました。

試したCSSファイルの読み込み方法

今回試したCSSファイルの読み込み方法は下記の2通りです。

1.function.phpファイルでwp_enqueue_style関数を利用する方法
2.style.cssファイル内で@importを利用する方法

※WordPressでは<link>タグを使用したCSSファイルの読み込みが非推奨のため今回は含めません。

それぞれの特徴は下記のとおりです。

1のfunction.phpはサーバー側での処理が増えるためアクセス数が増えた際はサーバーの負荷が高くなってしまいます。
2の@importは閲覧している端末(パソコンやスマートフォン等)側での処理となるため、サーバーには優しい設定方法です。

↑ざっくりですみません。。。わかる人にはわかると思います。


【結論】どっちでも同じ表示速度でした

結果としては、どちらの方法でも表示速度やファイルの読み込み速度は同じでした。

とは言っても、アクセスが増えたときにサーバー側の負荷が高くなる1のfunction.phpの方法よりかは、2の@importを使う方が同じレンタルサーバーを使う人に対して親切だし迷惑をかけないと思います。


以上、複数CSSファイルの最適な読み込み方法になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 + twenty =

ABOUTこの記事をかいた人

フリーランスのWEBエンジニアとして活動中。 WEBの専門家としてWEBディレクションからコーディングまでを一通り経験。 WEBで悩んでいる方に役立つ情報をブログで配信中。 ライフワークでは、キャンプにはまってます♪