CSSファイル軽量化＆非同期読み込みでサイトを高速化させる方法
ざっくりとした、CSSについての最適化について取り上げてみます。まぁ結局の所対象者はLuxeritasユーザーがメインになりそうですがｗ
基本的にCSSは、インラインに埋め込むことを推奨されています。
ファイルとして持っておくよりも、リクエスト回数が減らせるからですね。
現在使っているテーマLuxeritasだと、デフォルトでインラインに埋め込んでくれるため、誰でも簡単に高速表示が可能となってます。
ですが子テーマのCSSファイルへの追記が増えすぎてしまい、容量が大きくなってしまうと、インラインに埋め込んである状態であってもコンテンツのレンダリングをブロックする要素として、ページスピードインサイト等で指摘を受けることとなってしまいます。
その辺の対処法ですね。
CSSファイルが大きくなる要因
まずファイルが大きくなる要因として挙げられるのが、大きく見た目をカスタマイズしてしまった場合です。
テーマでのデフォルト設定を読み込んだ後、追記した内容を読み込んで見た目を変える、という流れになりますので一部であれば大した問題にはなりませんが、ほとんどの箇所でそういった装飾を施していると、自然とCSS容量も大きくなり読み込み時間に影響を与えることとなります。
「ここは譲れない…！」という場合なら仕方ないですが、ある程度テーマでの見た目を残しながらのカスタマイズの方が、読み込み速度的には良いです。
CSS容量が大きくなりすぎた時の対処法
手っ取り早く説明すると、CSSファイルを分けることが好ましいです。ページ遷移後すぐに目に入る部分とコンテンツの中間以降にある部分この2つに分けるのが一番良いですね。
グーグル先生（だったか？ｗ）が推奨されているCSSファイルの数は、あっても2個までです。
それ以上多くなると、逆にリクエスト回数が増えてしまいますし、非同期化していたとしても何もカスタマイズされていない状態で閲覧者の目に入ってしまう可能性が高くなるからです。
なので2個は厳守、ってことですね。
ただLuxeritasではもうすでに、テーマ側でCSSファイルを分けるということが行われていますので、よっぽどのこと（ページスピードインサイトで指摘を受けてる、CSSファイルへの追記が1000行超えてる）が無ければ、何もしなくても良い場合の方が多いですね。
特定の記事にのみ使いたいCSS、例えばカエレバのCSSだとかは個別に作って読み込ませるのもありです。
それでも基本的に読み込ませてるCSSが重いんだが…という場合には、個人的に推奨するのは、記事本文内でのみ使うbox等の装飾を個別に読み込む方法ですね。
CSSファイル作成
Tera Padなどのメモ帳を用意します。（文字コードうんぬん対策）
CSSファイルから、「後で読み込ませても大丈夫じゃろ？」というものをピックアップしていきます。
先程述べたように、記事本文内で使用するbox系の装飾等が好ましいですね。
あとは随所にホバーアクションを入れてる場合だとそれもブチこんでしまっても良いかもです。
非同期用CSSに入れたいものをメモ帳に適当にコピペしていきます。
全部終わったら、圧縮しておきます。（「CSS 圧縮」でググればツールが出てくると思います。）
圧縮し終わったものをコピーしFTPツール上で子テーマ（Luxeritas使用者の場合は「luxech」）階層にアップします。
この辺の説明はさっきのカエレバの記事でやったので、良くわからん人はご覧あれ。詳細を書いています。
CSS非同期読み込み
CSSファイル作成までは同じで、読み込ませる方法が先程の記事とは違います。常に読み込ませる必要がありますからね。
こちらの記事を参考にします。
https://thk.kanzae.net/net/itc/t2464/…何回貼るんだよ？って怒られそうですねｗ
Luxeritasの場合の一例を挙げてみます。
<link id="sub-style" type="text/css" href="/wp-content/themes/luxech/sub-style.css" />Headタグ内にこのように記述します。
- 非同期用CSSファイルを「sub-style.css」とした場合です。
- サブディレクトリで運用している場合は/wp-contentの前にディレクトリ名を追加する必要があります。
上記2点で少し内容が変わる可能性がありますので注意です。
Luxeritasをお使いの場合は、Luxeritas項目＞子テーマの編集＞Headタグに追記します。
次に、JavascriptをFooterに記述します。
(function () {
var n = document.getElementById('sub-style');
n.rel = 'stylesheet';
})();head内で指定したIDとJavascriptでのIDを一致させないと、当然読み込まれませんので注意ですね。
Luxeritas使用者はLuxeritas項目＞子テーマの編集＞Javascriptに追記してください。（luxech.jsファイル）
以上で完了です！
表示速度比較
では、実際に比較してみようと思います。
テストサイトにて前回記事のCSS＋当サイトで記述してるCSSをすべてインラインで記述してる場合、こうなります。
次に、前回記事で追加したCSS（たぶん200行ぐらいだったかと…）を圧縮して「sub-style.css」として非同期に読み込ませると、
およそ0.4秒縮まりました。
サーバーのご機嫌良いだけだろう？ともう一度、時間を置いて測定しても1.1秒になってしまいましてｗ
わずかながら早くなることはわかっていただけると思います。
まとめ
これだけでも、だいぶ無駄が省けるかと思います。
現在の当サイトはこんな感じです↓
読み込み容量、リクエスト回数どちらも非常に優秀ですね。（自分で言っちゃう）
これにはロリポップ先輩のコンテンツキャッシュ機能も加担しておりますので要チェックでございますな。