WordPressテーマ "iNove" のYSlow的サイト最適化

ウェッブサイトの表示速度を測定するフリーツール集」でサイト最適化の効果を定量的に計る術を知ったところで、HTTPリクエスト数の削減と画像の軽量化を狙い、以下の項目を試してみました。

  1. Closure Compiler によるJavascriptファイルの結合と軽量化
  2. Smash.it™ などによる画像の軽量化
  3. CSS Sprite Generator などによる背景画像のCSS Sprites化
  4. YUI Compressor によるCSSファイルの軽量化
  5. minify などによるJavascript/CSSファイルのgzip転送

目標は現在使用中のテーマ iNove のYSlowスコアをGrade CからBへ向上させることです!!

1. Closure CompilerによるJavascriptファイルの結合と軽量化

Closure CompileriNove では2つのJavascriptファイル base.jsmenu.js が常に読み込まれますので、これらを結合し軽量化するために http://closure-compiler.appspot.com を開き以下を実行します。

  1. 「Reset」を押し、サンプルコードをクリアする。
  2. 「Add a URL」に自サイトのJavascriptファイルURLを1つずつ指定していきます。
  3. 「Compile」を押した後、右側のペインに「Compilation was a success!」が出る事を確認します。
  4. 「access at」の後に続く「default.js」をローカルPCに保存します。

保存した default.js を自サイトのサーバーにアップロードし、結合前のJavascriptファイルの代わりに読み込むよう header.php を改修します。

改修前の header.php
	<!-- script START -->
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/base.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menu.js"></script>
	<!-- script END -->
改修後の header.php
	<!-- script START -->
<?php if (0) : ?>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/base.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menu.js"></script>
<?php else : ?>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/default.js"></script>
<?php endif; ?>
	<!-- script END -->

46行目の 01 にすれば元に戻せるようにしてありますが、この辺はお好みで…。
以上にり、Javascriptに対するHTTPリクエスト数およびファイルサイズの以下の通りとなりました。

オリジナル 軽量化後
HTTPリクエスト数 2 1
Javascript 7.3 KB 4.4 KB
参考情報

2. Smush.it™などによる画像の軽量化

Photoshop等で画像を作成すると大抵の場合、著作者に関する情報やツールのコメントなどが画像に埋め込まれます。Smush.it™は画質は一切落とさず、そういった余計な情報を削除し(著作権のある画像を変換する際には注意が必要です)、さらに最適化によりサイズが小さくなるのであればPNG画像に変換をしてくれます。PNG というとIE6での透過表示が気になりますが、透過GIFは透過PNG8の画像に変換してくれるのでIE6でも問題なく表示できます。私は今までPhotoshopの「Web用に保存」する機能を用いてGIF画像にするのが最も効率的と思っていましたが、このSmush.it™はそういったGIF画像をさらに小さなPNG画像にしてくれるのにはびっくりしました。
以上により画像ファイルサイズは次の通りとなり、約52.8KB/42%が削減されました。

オリジナル 最適化後
画像サイズ 125 KB 72.2 KB
参考情報

3. CSS Sprite Generatorなどによる背景画像のCSS Sprites化

index.phpで表示される画像single.phpで表示される画像SpriteMe

右の図はiNoveで使われている背景画像を調べみた結果です。図中の色分けは、「青」が非透過画像、「赤」が透過画像、「緑」が繰り返しにより表示される画像を示しています。今回は初トライなためこのように手作業で分析をしてみたのですが、「SpriteMe」を使えば、Webページの分析・Sprites化する画像リストの作成・Sprites化画像とCSSの作成までをサポートしてくれます。ココをクリックしてみてください。実際にこのページが分析されます。この SpriteMe はJavascriptで作られたウィジェットで、Sprites化候補の画像リストをドラッグ&ドロップで作成・修正が行える上、実際に生成したSprites画像をブラウザに適応させることも出来ます(ただしJavascriptによるクロスドメインのDOM操作となるため、ブラウザのセキュリティ機能により可・不可があるようです)。優れた機能を持つ SpriteMe ですが、画像を縦一列にしか配置出来ないなど細かな指定が出来ないため、私は概略設計を SpriteMe で行った後、「CSS Sprite Generator」を使いました。ポイントは次の通りです。

  • PNG画像を作成する場合は、オプション「OptiPNGで画像を圧縮」にチェックを入れる。
  • 画像はアルファベット順に並べられるため、順番を制御したい場合にはファイル名の先頭に番号などを付ける。
  • 画像をタイル状に並べる場合は、縦・横のSprites画像を組み合わせる。
配置とサイズの関係1配置とサイズの関係2

「サイズを少しでも小さくしたい!!」にこだわるならば、さらにちょっとしたコツがありそうです。画像の並べ方と出来上がりサイズの関係を図にしましたので参考にしてください。
最後にもう1つTipsを。有名な記事 CSS Sprites: What They Are, Why They’re Cool, and How To Use Them 中の What can’t sprites do? (Spritesで出来ないことは何か) に「繰り返し画像」が挙げられていますが、繰り返し数が常に一定である固定幅要素の場合、予め繰り返された画像を作成すればSprites化が可能です。また例えば高さがコンテンツに合わせて動的に変わる要素の場合でも、背景画像がtopに配置されていればSprites化が可能です。詳しくは図を参照してください。
Sprites化のTips

Sprites画像の作成例

Sprites画像の作成例

作成したSprites画像(2種類)の例を参照ください。2つのうち一方は透過画像をIE6でも表示可能にするために色数を制限した画像です。これらをiNoveインストールディレクトリ中の img に配置します。スタイルシートの設定はCSS Sprite Generatorが生成してくれますが、作成例の様に縦・横の配置を混在させるためにはCSS設定をつなぎ合わせていく必要があります。

以上により、背景画像に対するHTTPリクエスト数は次の様になりました。

オリジナル CSS Sprites化後
HTTPリクエスト数 14 9

4. YUI Compressor によるCSSファイルの軽量化

まず、以前に紹介したWebサービス CSS Optimizer (CSS最適化ツール) を使って最適化を行いました。この時点でレイアウトに崩れがないかどうか、全てのページをチェックすることが重要です。確認が済んだら次の要領で YUI Compressor を適用します。

  1. ココからYUI Compressorの最新版をダウンロードし、適当なフォルダに解凍します。実行にはJavaのバージョン1.4以上が必要となりますので、必要に応じてココからインストールしてください。
  2. 解凍したフォルダ中の build でコマンドプロンプトを開きます。
  3. 以下のコマンドを実行します(x.y.zはバージョン番号です)。
    java -jar yuicompressor-x.y.z.jar --type css -v 入力CSSファイル名 -o 出力CSSファイル名
  4. 出来上がったCSSファイルの先頭に、テーマ名や著作者を記述したコメント部を付加し(これが無いとWordPressが正しく認識しない可能性あるため必ず付加します)、オリジナルのCSSファイルと差し替えます。

軽量化前後のCSSファイルサイズは以下の通りとなりました。

オリジナル 軽量化後
CSSファイル 21.4 KB 16.3 KB
お断り

テーマ(より正確にはWordPress本体と不可分なPHPコード)はWordPress本体のGPLが適用されますが、CSSや画像はWordPressとは独立した著作物としてGPLの適用外との解釈があります(WordPress | 日本語 » テーマも GPL ライセンス を参照)。ただしWordPress.orgに掲載のテーマは100%GPL(あるいはコンパチな)ライセンスとの事なので、iNoveの画像やCSSは再頒布が可能であると思われます。が、やはり作者に一報入れるのがマナーかと思いますので、それができるまでは情報の提示のみとさせていただきます。

5. minify などによるJavascript/CSSファイルのgzip転送

仕上げはgzipによる圧縮通信です。このサイトが稼動するLaCoocanはZeusサーバーのため、Appacheのmod_deflateのようなコンテンツのgzip圧縮がサポートされていません(それどころか、Accept-Encodingを削除するマニュアルさえある!?)。minify は複数のJavascriptやCSSファイルを軽量化し、結合し、gzip圧縮し、適切なキャッシュコントロールをしてくれるサーバーサイドで動作するPHPプログラムで、一気にYSlowスコアを上げてくれる可能性があります。以下インストールから実行までの概略を解説します。

  1. ココから最新版をダウンロード・解凍し、README.txtの例に従い min 以下をサーバーのDOCUMENT_ROOT直下(例えば http://example.com/)にアップロードします。
  2. http://example.com/min/builder/ にアクセスするとキャッシュファイルの保存場所に関する警告キャッシュ用ディレクトリ設定の警告が出されますので、min/config.php を修正し $min_cachePath を設定します。
    /**
     * For best performance, specify your temp directory here. Otherwise Minify
     * will have to load extra code to guess. Some examples below:
     */
    //$min_cachePath = 'c:\WINDOWS\Temp';
    $min_cachePath = '/tmp';
    //$min_cachePath = preg_replace('/^\d+;/', '', session_save_path());

    上記設定例からすると、$min_cachePath はサーバー上の絶対パスを設定する必要がありそうです。例えば DOCUMENT_ROOT が /public_html であるサーバーの場合、以下の様な環境となるでしょう。

    / ┬ tmp
      └ public_html ┬ cgi-bin
                     ├ min ┬ build
                     │     ├ lib
                     │     ├ …
                     │
                     ├ wordpress ┬ wp-admin
                     ├ …        ├ wp-content
                                  ├ wp-include
                                  ├ …
  3. minifyによるタグの生成再度 http://example.com/min/builder/ にアクセスし Minify URI Builder を起動します。対象とするJavascriptかCSSファイルを「Add file +」で追加した後、「Update」で Minify URI を生成します。
  4. minifyのHTTPレスポンスヘッダFirebugLive HTTP Header などのHTTPヘッダが観測できるツールを準備し、生成された URI をクリックしてサーバーとやり取りされる通信を確認します。図の様にレスポンスヘッダに「Content-Encoding gzip」が確認できれば成功です。
  5. 最後に上で生成された Minify URI の HTML を参考に、WordPress の該当ファイルを読み込んでいる箇所、例えば header.php などを修正します。

以上により、JavascriptとCSSの転送サイズは次の通りとなりました。

gzip転送化前 gzip転送化後
Javascript 4.4KB 1.8 KB
CSS 16.3 KB 4.1 KB
参考情報

効果の確認!!

さて、最後に1.~4.を適用した結果のスコアです。

スコア Page Speed YSlow V2 YSlow Small Site or Blog
オリジナル 88 C (72) B (89)
1. 90 C (73) B (91)
2.~3. 90 C (76) A (93)
4. 91 C (77) A (96)

確実に上がりはしましたが、目標としたYSlow V2のGrade Bには一歩及ばずでした。最もGradeが上がった項目はやはり「Compress components with gzip」で、FからBに向上しました。が、さらなるCSS Sprites化とデータ量の削減を行わなければならないようです。 🙂

WordPressテーマ "iNove" のYSlow的サイト最適化」への4件のフィードバック

  1. sisifuru

     初めまして、sisifuruと申します。ブログ構築にwordpressを導入、
    テーマ『inove』を入れてカスタマイズする方法を探してこちらのページに辿り着きました。

     数あるカスタマイズ方法を紹介している中で、
    群を抜いてとても分かり易く丁寧に説明されていらっしゃるので
    とても感心・感動しています。

     これからじっくりと読ませて頂きまして、
    自分のブログに反映していきたいと思っています。

     本当にありがとうございます。

    返信
  2. tokkonoPapa

    sisifuruさん、初めまして。

    最大級の褒め言葉、ありがとうございます。何かしらのお役に立てれば幸いです。

    カスタマイズが出来ましたら、お知らせくださればうれしいです。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

海外からの投稿は受け付けていません