コピペだけで高速に! CSS のインライン化

Autoptimizeプラグインを使いCSSをインライン化

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

当サイトの PageSpeed Insights の結果は、デフォルトの状態で 100 点。

PageSpeed Insightsの結果は100点

Google アナリティクスなどを入れたので、もう 100 点は無理だけど。

そして Test My Site の結果は 2 秒。

Test My Siteの結果は2秒

サーバーが混んでいると、 3 秒になっちゃうけど。

当サイトが使っている Simplicity の利用サイトだけではなく、 WordPress で運営されているサイトの中で、速さは上位の方だと思っています。( たぶん。 )

この高速表示に貢献しているのが、<style> タグを用いた CSS のインライン化です。インライン化することで、 CSS がレンダリングをブロックしません。

プラグインの Autoptimize を使えばコピペだけでできるので、その方法をご紹介します。

ちなみに、インラインはインラインでも、下記のような style 属性を使った CSS の指定は原則非推奨です。

<p style="color:#000;">これはだめ</p>

非推奨の理由は、サイト内で何度も同じ指定が出てきてしまうことで CSS の量が増え、レンダリング開始までの時間が長くなってしまうため。 AMP では禁止されています。

クリティカルパス CSS を抽出

CSS のインライン化では、 1 つ重要なことがあります。それは、あまりにも多くの CSS をインライン化してはいけないこと。

あまりにも多い場合にはレンダリング開始までに時間がかかってしまい、逆に遅くなってしまいます。一般的には、ファーストビューに関わる CSS のみをインライン化します。

ファーストビューに関わる CSS は、 Critical Path CSS Generator を利用すれば簡単に抽出できます。

使い方は、サイトのメインページの URL を 1 の「 URL 」に入力します。ブログサイトであれば、最もアクセス数が多い投稿ページの URL にするといいでしょう。

Critical Path CSS Generatorの使い方

そして 2 の「 FULL CSS 」に、サイトで読み込んでいる全ての CSS をコピペします。ただし、フォントやアイコンなどのスタイルシート、 @charset "UTF-8"; は除きます。また、 wp_is_mobile()is_mobile() で読み込んでいるスタイルシートも除きます。

最後に 3 の「 Create Critical Path CSS 」をクリックすると、縮小化されたクリティカルパス CSS が抽出されます。このクリティカルパス CSS が、ファーストビューに関わる CSS です。

あとはクリティカルパス CSS を、そのまま Autoptimize にコピペをすると CSS のインライン化は完了します。

Simplicity が読み込んでいるスタイルシート

Critical Path CSS Generator の「 FULL CSS 」にコピペすべき、 Simplicity の CSS をリストアップしました。

リストのリンク先は、 GitHub で公開されている Simplicity2 の各スタイルシートです。移動後 Raw をクリックすると、ブラウザに CSS のみが表示されます。キーボードの ctrl + a で全体を選択し、 ctrl + c でコピーをすると楽です。

GitHub内のRawをクリック

完全レスポンシブが無効か有効かで、スタイルシートは異なります。

完全レスポンシブが無効の場合

順番どおりに、 Critical Path CSS Generator の「 FULL CSS 」にコピペをします。

  1. style.css
  2. responsive-pc.css
  3. スキン利用時は各スキンの style.css
  4. narrow.css
  5. スキン利用時は各スキンの responsive.css( ないスキンもあります )
  6. アコーディオンツリーを選択時は slicknav.css
  7. スライドイン( 4 種類いずれも )を選択時は footer-mobile-buttons.css
  8. 子テーマの style.css ( 何か記述している場合のみ )

完全レスポンシブが有効の場合

順番どおりに、 Critical Path CSS Generator の「 FULL CSS 」にコピペをします。

  1. style.css
  2. responsive-pc.css
  3. スキン利用時は各スキンの style.css
  4. responsive.css
  5. narrow.css
  6. スキン利用時は各スキンの responsive.css
  7. アコーディオンツリーを選択時は slicknav.css
  8. 子テーマの style.css ( 何か記述している場合のみ )
  9. 子テーマの responsive.css ( 何か記述している場合のみ )

Autoptimize プラグインをインストール

WordPress 管理画面 → プラグイン → 新規追加より、 Autoptimize と検索し Autoptimize プラグインをインストールします。

CSS のインライン化のために、基本設定の CSS オプション「 CSS コードを最適化 」にチェックを入れます。

AutoptimizeのCSSコードを最適化にチェックを入れる

「 HTML コードを最適化 」と「 JavaScript コードの最適化 」は、サイトに合わせてチェックを入れるか判断します。この 2 つは CSS のインライン化とは関係ないため、あとで判断して構いません。ちなみに、当サイトでは、いずれもチェックを入れています。

もし、「 JavaScript コードの最適化 」にチェックを入れ、他のプラグインや javascript ライブラリが動作しなくなった場合には、高度な設定の「 Autoptimize からスクリプトを除外 」にスクリプトを記述します。

クリティカルパス CSS をプラグインにコピペ

基本設定の「 CSS オプション 」にチェックを入れた後に、設定画面の右上にある「 高度な設定を表示 」をクリックします。

Autoptimizeの高度な設定を表示をクリック

次に CSS オプション内にある「 CSS のインライン化と遅延 」にチェックを入れ、表示される入力フォームにクリティカルパス CSS を貼り付けます。最後にページ下部にある「 変更を保存してキャッシュを削除 」をクリックして終わりです。

AutoptimizeのCSSのインライン化と遅延にクリティカルパスCSSを貼り付ける

この「 CSS のインライン化と遅延 」とは、フォームに入力した CSS を <style> タグ内に記述し、その他の CSS を非同期で読み込むもの。これにより、 CSS がレンダリングをブロックしなくなります。

他のプラグインで代用

今回は Autoptimize を使用しましたが、 CSS のインライン化に対応している他のプラグインもあります。その 1 つが、 LiteSpeed Web サーバー専用の LiteSpeed Cache です。

LiteSpeed Cache の設定タブ [ 5 ] 最適化にある「 CSS 圧縮化 」「 CSS 結合 」「 CSS を非同期ロード 」にチェックを入れ、 [ 6 ] チューニングにある「 重要な CSS ルール 」にクリティカルパス CSS を入力しても同様のことができます。

ページキャッシュプラグインは極めてリスクが高いですが、もしお使いであれば Autoptimize のインストールは必要ありません。

サイトを確認

CSS をインライン化すると、サイトによってはデザインが崩れる場合があります。崩れた箇所がないか、サイトを確認します。

もし崩れた箇所がある場合には、その部分のインライン CSS をデベロッパーツールで調べ、 Autoptimize の入力フォームから削除します。縮小化されているため見にくいですが、 ctrl + f で検索すると該当の CSS がすぐに見つかります。

デメリット

投稿ページのファーストビューの CSS をインライン化すると、フロントページや固定ページ、アーカイブページを表示する際にガタつく場合があります。

ガタつきがどうしても気になる場合には、ご自身で全てのページのクリティカルパス CSS を抽出する必要があります。

ただ、ブログサイトの場合には、投稿ページがサイトの顔であり入口です。それ以外のページはあまり気にする必要はないように思えます。


PageSpeed Insights では、レンダリングをブロックする CSS を真っ先に怒ってきます。プラグインに頼る方法ではありますが、 CSS をインライン化しサイトを高速にされてはいかがでしょうか。

Autoptimize を使うことで、レンダリングをブロックする javascript も排除できます。

カスタマイズ後は PageSpeed Insights のスコアだけではなく、サイト訪問者の満足度も高まるはずです。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする