CSSファイルの読み込みは、ページ表示スピードに影響します。
CSSファイルの読み込みに関するナレッジと、当テーマDAWNYで採用している仕様について解説します。
- WordPressでCSSファイルを読み込む方法
- head内に直接linkを記述する
- wp_enqueue_script関数で読み込む
- wp_footer関数で読み込む
- エディタ用CSSはadd_editor_styleで読み込む
- CSSファイルを読み込む際の注意点
- CSSファイルへのlinkが増えるほどhttpリクエスト数が多くなる
- CSSファイルを読み込む位置によって表示スピードに差が出る
- 理想的なCSSファイルの読み込み方法
- 最低限必要なCSSはインラインで記述する
- 重要なCSSファイルはhead内で読み込む
- 補助的なCSSファイルはfooter付近で読み込む
- そのページに必要なCSSファイルのみを読み込む
- CSSファイルは出力時に最小限のファイル数にまとめる
- CSSファイルの読み込みは奥が深い
WordPressでCSSファイルを読み込む方法
WordPressでCSSファイルを読み込むには、大きく4種類のアプローチがあります。
head内に直接linkを記述する
WordPressで行うことはほぼないと思いますが、head内に直接書いてしまう方法があります。
もっともシンプルかつ簡単ですが、管理しづらいデメリットがあります。下記のようにhead内にベタ書きで記述する方法です。
<head>
//その他のhead内記述
<link rel='stylesheet' id='base-css' href='https://〜〜/base.css' type='text/css' media='all' />
</head>wp_enqueue_script関数で読み込む
WordPressでCSSを読み込むもっとも一般的な方法として、wp_enqueue_scriptが使われます。
この関数はfunction.phpなどのphpファイルに記述するのですが、下記のようなメリットがあります。
- head内にベタ書きしなくて良いので保守性が高い
- head内で読み込む優先度（順番）を関数内で指定できる
- CSSファイルごとのバージョン管理（キャッシュ管理）が容易
- 条件分岐も容易
例えばフロントページでだけ読み込みたいファイルはis_front_page()で条件分岐をさせたり、タイムスタンプを利用したバージョン管理をしたりといった実装が容易にできます。
ごくシンプルにstyle.cssを読み込む場合は、下記のような形になります。
function enqueue_my_styles_head() {
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/assets/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_head' );wp_footer関数で読み込む
CSSファイルの読み込み場所をhead内ではなくページ最下部にしたいときは、wp_footer関数を使用します。
この関数もfunction.phpなどのphpファイルに記述しますが、wp_enqueue_scriptと同じように条件分岐なども容易です。
wp_enqueue_scriptはhead内で読み込む関数で、wp_footerはフッター付近で読み込む関数という違いがあります。シンプルに記述すると以下のようになります。
function enqueue_my_style_footer() {
wp_enqueue_style('sub-style', get_template_directory_uri() . '/assets/css/sub.css');
}
add_action('wp_footer', 'enqueue_my_style_footer');エディタ用CSSはadd_editor_styleで読み込む
エディタ上の見た目を整えるCSSは、ユーザーに読み込ませる必要がありませんから、add_editor_style関数で読み込みます。以下のような記述になります。
function enqueue_editor_styles() {
add_editor_style(get_template_directory_uri() . '/assets/css/editor.css');
}
add_action('after_setup_theme', 'enqueue_editor_styles');CSSファイルを読み込む際の注意点
CSSファイルの読み込み方法は様々ですが、基本的には読み込みスピードができるだけ早い方法を採用すると良いかと思います。
その観点から、いくつか注意点をまとめました。
CSSファイルへのlinkが増えるほどhttpリクエスト数が多くなる
実際にWebページを表示する際、CSSファイルはブラウザ側で<link>属性で指定されたファイルURLにアクセスして読み込まれます。
つまり<link>の数だけ通信が走りますから、できるだけCSSファイルの数を減らすことが、読み込みスピードアップにつながります。
CSSファイルを読み込む位置によって表示スピードに差が出る
htmlは上から順番に実行されます。つまり上の方にあるコンテンツほど早く、下の方にあるコンテンツほど遅く読み込まれます。
上の方に重たいコンテンツがあればあるほど、ページを開いてからトップページが表示されるまでの時間が遅くなりますが、とはいえ少なくしすぎてデザインが崩れるのも本末転倒ですので、うまくバランスを取る必要があります。
理想的なCSSファイルの読み込み方法
当テーマDAWNYが理想とするのは、ページを表示する際にデザインが崩れず、しかし表示スピードも維持するCSSの読み込み方法です。
その観点で、理想の読み込み方法をまとめました。
最低限必要なCSSはインラインで記述する
最低限デザインを維持するために必要なCSSは、インラインで記述することが推奨されています。
厳密に読み込みスピードにこだわりたい場合は、たとえばフォントや基本的なサイズを司るようなCSSだけは、インラインで記述してしまうと良いでしょう。
重要なCSSファイルはhead内で読み込む
そのWebページの根本的なレイアウト・デザインを制御している重要なCSSファイルについては、head内で読み込むことが大切です。
そうしなければページを表示した際に一瞬崩れたデザインが表示され、その後正常なデザインになるようなあまり良くないビジュアルになってしまいます。
つまり読み込みスピードを上げたいからといって、CSSファイルをすべてfooterで読み込むような施策は取るべきではないという考えです。
補助的なCSSファイルはfooter付近で読み込む
記事の途中でしか出てこないデザインを制御する装飾的なCSSファイルについては、footer付近で読み込みましょう。
たとえばページ最上部周辺でアイコンデザインを使うことがなければ、Font Awesomeなどアイコンデザインを定義しているCSSファイルはhead内で読み込む必要がありませんから、footer付近で読み込むのが良いかと思います。
ただしページ最上部でアイコンを読み込むならもちろんhead内でCSSも読み込むべきですから、その辺りは一つひとつのページデザインによって異なります。
「一律こうするべき」と考えるのではなく、自分の制作するデザインと照らして最適化することが大切だと考えています。
そのページに必要なCSSファイルのみを読み込む
トップページでしか使わないデザイン、ブログ記事（single.php）でしか使わないデザインなど、ページテンプレートごとにデザインは変わります。
そのページで使わないデザイン（=存在しないidやクラスのデザイン指定）は読み込む必要がありませんから、その点での条件分岐の仕組み、CSSファイルの分け方も大切になってきます。
CSSファイルは出力時に最小限のファイル数にまとめる
CSSファイルは<link>属性で指定してファイルにアクセスしますから、読み込む件数は少なければ少ない方が理想です。
しかしページテンプレートごとにCSSはだし分けたいですし、一つのcssファイルが冗長になりすぎると保守性が低下するリスクがあります。
そのため用途ごとに分けたcssファイルを複数作っておき、出力するときに一つにまとめるような仕組みにするのが理想です。
DAWNYでも上記のような仕組みを採用しています。
CSSファイルの読み込みは奥が深い
WordPressでCSSファイルを読み込む方法には色々なアプローチがあり、最適な方法はWebサイトごとに違います。
ご自身の制作するWordPressサイトにとってもっとも良い方法を選択できるように、ファイル構成などを検討してみてください。
