WordPress で CSS の配信を最適化するために簡単にできることのまとめ

サイトの表示速度高速化のためにCSS配信を最適化する

PageSpeed Insights でサイトを検証すると「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されることがよくあります。

今回はCSS（スタイルシート）に焦点を当ててその対処方法を書いていきます。

このサイトの情報は、基本的に自分がそうであるように、初心者から中級者レベルの内容になります。プロの方や専門家にとっては常識的なレベルの話になるかもしれませんので、もっとくわしい改善方法や説明については、ほかのサイトを当たってください。

Google Developersの推奨する解決方法

Google Developersによって推奨されている方法は3つです。

小さなCSSファイルをインライン化する
大きなデータのURIをインライン化しない
CSS属性をインライン化しない

内容としては、後述するテクニックと重複するのでここには書きません。HTMLに直接書き込めるような種類の短いCSSは分割して書いてしまう方法です。
CSS の配信を最適化する – PageSpeed Insights — Google Developers

WordPress以外のサイトでも使える方法

まずはWordPressに限らず、どのサイトでも使える方法から。

文法上正しいCSSを使う

まずバリデーションチェックをしてみることをおすすめします。CSSの改善をするまえに、正しい文法で書かれているかをチェックしておきましょう。

CSS Validator

もしかすると指定しているプロパティや値が重複して、もっと少ない量で書くことができる場合もあります。文法上間違っていても、見た目には正しく表示される場合もありますのでご注意を。

使わないCSSを削除する

正しい文法のCSSを使っていても、サイトの表示を変更したり、いくつかのプラグインなどを入れているうちに、使わなくなったプロパティと値があればそれも削除しておきましょう。

ごくごく少ないですが、ファイルサイズを減らすことにつながります。

＠importは避ける

ヘッダー内にlink要素でスタイルシートの参照先を指定するほうが、同時ダウンロードが可能になって、遅延を防いでくれます。

こちらのリンク先も参考にしてください。

[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか | コリス

Above the foldのコンテンツに適用するCSSをインライン化する

「Above the fold」というのは「スクロールしないで見ることができる画面の領域」を指します。最近では「ファーストビュー」という用語で説明されることもあります。

ようするに、閲覧するサイトで、はじめに表示されるコンテンツに関するCSSだけを先に利用して、ファーストビューの描画に用いる方法です。そして閲覧者には見えていない部分に使うCSSを、外部参照ファイルにして後回しにしてしまいます。

この方法はこちらのサイトで知りました。

Above the foldのコンテンツを1秒以内に高速表示させるための3つのテクニック | 海外SEO情報ブログ

外部参照のCSSファイルは1つだけにする（HTTPリクエストで生じるレイテンシーを削減するため）
そのページに固有のCSSは、外部ファイルを参照させずにインラインで記述する

ただし、「ファーストビューに、どのCSSプロパティや値が必要で、何が必要でないか」の判断は難しいかもしれません。当サイトではめんどうなのでやっていません。まあ、そのうちやるかもしれません。

外部参照するCSSを圧縮する

以上のように、CSSを正しい文法で書き、いくつかをインライン化し、外部参照するファイルをできるだけひとつにまとめたら、さいごは外部参照するCSSに圧縮処理を施しましょう。

いくつもありますが、こちらのサイトは無料で利用できます。有名な「YUI Compressor」の後継ツールのようです。

Refresh-SF – Online JavaScript and CSS Compressor

コピペして、右上のCSSをクリックするだけで、自動的にやってくれます。改行やコメントなどをなくてしまいます。

CSSスプライトでHTTPリクエストを減らす

CSSスプライトというのは、複数の画像を一枚にまとめてしまい、CSSでポジションを指定して一部のイメージだけを取り出して表示させる手法です。

たとえば、一枚の紙を十字に区切って、その各々に◯△□✕を書いたとすると、ある部分には◯だけを表示させて、別の部分には△を表示させる、というような手法です。これなら4枚の画像を用意することなく、たった一枚の画像でまかなえてしまうのがわかります（4→1へ削減）。

同じように、サイトの各部で使用される複数の画像をひとつにまとめてしまうことで、HTTPリクエストの絶対数を削減できる効果が期待できます。

デメリットとしては、作るのに手間が掛かることで頻繁に変更する場合には適さないことや、あまりに画像をまとめすぎてファイルサイズが大きくなりすぎてしまう（極端にいえば100の画像を1つにまとめるような）場合には逆にロードの時間が多くかかってしまう可能性があること、などです。

メリットとデメリットを考慮して利用するかを決めるといいと思います。当サイトでは画像をほとんど使っていないのでやっていません。

方法や仕組みは以下のサイトがくわしく、わかりやすいです。

WordPressのサイトで使える方法

こちらはWordPressだけで使える方法です。

プラグインを使う

Async JS and CSS （JavaScript・CSS）
Autoptimize （HTML・JavaScript・CSS）

少なくてすいません。当サイトは「Autoptimize」を利用しています。よければ参考にしてください。

「Autoptimize」：HTML・JavaScript・CSSを簡単に最適化してくれるプラグイン | かっぱのWordPress入門ブログ

レスポンシブWebデザインへの対応

近年のようにPCからよりモバイル端末からの訪問のほうが多くなってくると、「レスポンシブWebデザイン」を取り入れることもいいかもしれません。

いわゆる「モバイルファースト」の思想で構築されたサイトは、「閲覧者に伝えたいコンテンツを吟味し、軽量で、見やすいサイトを構築」します。何でもかんでも詰め込んだPCサイトをモバイル端末で表示させようとすると、どうしても表示速度が遅くなっていまいますが、はじめからモバイル端末で閲覧する人に最適なサイトを作っておけば、PCでの表示も速くなります。

ここではくわしくは書きませんが、新しいサイトを作ろうと考えているのであれば、「レスポンシブWebデザイン」でゼロから作っていく、あるいは対応したWordPressテーマを導入するというのも一つの方法です。

当サイトは以下の書籍を参考にしています。

菊池崇アスキー・メディアワークス 2013-07-30

山崎大助ソフトバンククリエイティブ 2013-03-28

2014年11月1日（公開日）

WordPress で CSS の配信を最適化するために簡単にできることのまとめ | かっぱのWordPress入門ブログ