CSSファイルをまとめて圧縮して高速化

今回はWordPressの高速化の1つとしてCSSの圧縮に取り組む事にしました。圧縮とは言っても余計な改行を削除したり、CSSに記述しているコメント部分を削除したりするのですが、結構面倒なので圧縮してくるサイトを利用して一括で変更してみる事にしました。

また、別記事で書くと思いますが、多くのプラグインでは有効化した時点で「head」部分にそのプラグインのCSSが追加されます。これらもまとめて1つのCSSにまとめるという事もやりますが、その前に基本的な部分を改善してみる事にします。

*現在はプラグインを使ってCSSを圧縮してます。プラグインの方が簡単なのでそちらをどうぞ。
HTMLとCSS、JavaScriptを縮小し最適化するプラグイン【Autoptimize】

スポンサーリンク

スタイルシートのインポートはしない方が良い

このブログの過去記事で「子テーマの作り方と有効化する方法【図解】」という記事を書いたのですが、親テーマのCSSを引き継ぐ記述をしました。

これは非常に一般的なやり方なのですが、@importを使わない方がサイトの高速化ができるという事を教えて頂いたので対策をする事にしました。

@importを利用すると親テーマのCSSを引き継ぐので便利なのですが、ページのソースを見るとhead部分でTwentyTwelveのスタイルシートと子テーマのCSSの2つを読み込む事になります。これをまとめて1つにして、圧縮したらよくね?という安易な考えです。

スタイルシート(CSS)を圧縮する時の注意点

圧縮自体は簡単にできるのですが、圧縮後のスタイルシートは非常に読みにくいです。というかどこにどのような記述をしたのか探すのが非常に困難になります(改行とかなくなるため)。私のスタイルシート最初の部分だけ見せておきます。

css-opt-1

これ最初の一部分なんですが、改行とかスペースとか無くなってカスタマイズを変更する時に探しにくいです。そのため、圧縮するのは親テーマのCSSだけがいいかもしれません。

親テーマのスタイルシートを圧縮する

私の場合はTwentyTwelveを利用していますのでTwentyTwelveのスタイルシートを表示します。テーマの編集画面で親テーマ(私の場合はTwentyTwelve)を選択して、「選択」をクリックします。

css-opt-2

TwentyTwelveのスタイルシートをみると最初の方はコメント記述になってますのでこの辺は必要ないでしょう。必要なのは画面を少しスクロールして「=Reset」という記述の下からです。

css-opt-3

html, body, div, span, applet, object, iframe,・・・・から始まる部分を一番下まで全部コピーします。結構長いです。コピーしたら圧縮してくれるサイトへ移動します。
YUI Compressor

それでリンク先の「code」と書かれているボックスに先ほどコピーした親テーマのCSSを貼り付けして「File Type」を「CSS」にしておきます。

css-opt-4

「File Type」を「CSS」にしたら画面を下にちょっとスクロールして「Compress」をクリック。

css-opt-5

すると圧縮されたコードが表示されますのでこれを最初から最後まで全部コピーします。

css-opt-6

続いてWordPressに戻ってスタイルシートの編集。今度は子テーマのスタイルシートを開きます。子テーマの出だしがこのように記述されていると思います。

css-opt-7

テーマの名前と親テーマの情報。その下に@importの記述がありますね。この@importの一行を削除します。

削除した代わりにコメントを入れておくと分かりやすいかな?

そして先ほど圧縮した親テーマのCSSを貼り付けます。

css-opt-8

これ画像では1部分しか見せてませんが、実際は結構長いCSSコードです。大事なのは@importを削除して親テーマのCSSを子テーマに全部追加してしまうという部分です。

CSSは後から書いた物が優先されるという仕組みになってますので、親テーマのCSSの後に子テーマに記述したCSSが来るように貼り付ければOKです。

子テーマも圧縮する?

注意点でも書きましたが子テーマのCSSは圧縮してしまうとどこに何を書いたのか分からなくなりますので、圧縮しない方がいいかもです。もし圧縮するって強気な方は事前にメモ帳等に子テーマのCSSをコピペして保存しておきましょう。

さて、同じように子テーマを圧縮される方は、親テーマと子テーマの境界線が欲しいので親テーマのCSSの最後の部分にコメントを入れておきます。

このコメントの下に圧縮した子テーマを貼り付ければ完成です。これでTwentyTwelve(親テーマ)からCSSを@importせずに1つにまとめる事ができました。「PageSpeed Insights」で調べてもレンダリングブロック(読み込みを邪魔)しているCSSがファイルが一枚減った事が確認できます。

なお、PageSpeed Insightsで確認する場合にはキャッシュはクリアしてから確認してみて下さい。

にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

CSSファイルをまとめて圧縮して高速化”に3件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。「PageSpeed Insights」で90点以上であれば上出来です。表示も2秒ならかなり早い方だと思いますので、そのままの設定で続けて行っても問題はないと思います。後は記事を書いていき、定期的に表示速度などのチェックをする事をおすすめします。記事で画像などを多く使っていくと表示速度は若干遅くなってしまう場合もありますが、その辺はバランスを見ながらやっていく必要があると思います。

    表示速度だけにとらわれると画像も使えないですし、簡素なサイトになりますので、チェックしながらやってみると良いと思います。

  2. 乃風

    いつもお世話になっております。

    早速、「Autoptimize」のプラグインをし、有効化と設定もしました。

    表示がおかしくなることはなかったのですが、「PageSpeed Insights」で、モバイルの方は79/100から83/100へと速度が上がったのですが、パソコンの方は逆に93/100から91/100へと速度下がってしまいました。このレベルなら問題ないですか?

    「GTmetrix」では、ページロードタイムが3.4秒から2・0秒へと短縮できたのですが、私の場合も1秒台まで短縮できるのでしょうか? 

    その他のスコア―はこのように向上しました。
    PageSpeed Score : 91%→97%
    YSlow Score : 95%→96%
    Total Page Size : 327KB→320KB
    Requests : 12→9

    よろしくお願いします。