2011 年 1 月 13 日 に投稿されました。内容が現状と相違がある点等にご注意願います。
2014 年以前の画像の一部、スクリーンショットは表示されません。ご了承ください。

WordPress の表示高速化を試みた

久々に WordPress に関する投稿。
投稿を書いている場合ではないのだが、書き殴った下書きがたまってきたことと、少しの気分転換。

現在利用しているお名前.com レンタルサーバーは、WordPress に限らず「ンッ」とつっかえる感じの反応なので気にしていなかったのだが、Google ウェブマスターツールの「サイトのパフォーマンス」が “あまり” なので、少し手を加えることにした。
もともとはドメインの保管用で、ブログに利用する予定はなかった。phpMyAdmin が使用できることすら最近知った。

共有サーバーなのでできることは限られている。
YSlowPage Speed の値は参考程度に、大した機能を組み込んでいるブログではないので、追加したものを見直すという作業にした。

ただ、できる限り最初に思ったままを維持したい。
1 月 12 日時点のサイト内のページの平均読み込み時間は 3.7 秒に改善した。欲を言えば、あと 3.7 秒は短縮したいのだが、ひとまずは良い。きっと、そのまま忘れる。
上記のグラフ推移は、年末のトラフィックが普段より多かったことも影響しているとは思う。

1. ウィジェットを制御

ホームを見て頂けると分かるが、直感的に 1 番怪しいものが、Flickr からの画像読み込み。Twitter もそう。
削除してしまえば良いのだが、とても読み込みの早いサイトを目指すわけではないので、制御をする。
プラグインは増えるのだが、もちろんこのあとにいくつか削除もする。
制御には TS Custom widgets を使用。このプラグインは、各ポストやページごとに各ウィジェットの表示、非表示を細かく選択できる。
Frickr を表示させないことで、表示時間に変化が見える。
以下は、Flickr 表示のウィジェットをホームとサイトマップに表示させる例になります。

2. プラグインを直接の記述に置き換える (Flickr Badge の画像サイズ変更のメモ)

上記で触れた Flickr に関してはプラグインの FlickrPress を使用していたが、Flickr Badge で置き換えることができるので、直接ウィジェットに記述。Flickr Badge にて生成された HTML、CSS を使用する。

サイズ S、4 枚 (count=4) の指定と書き換えているので、このままでは当サイトのウィジェットの幅 234 px に収まらない。
Flickr Badge のサイズを変えず、強制的に 4 枚並ぶように画像の一部を CSS にて隠してしまう。
1 行に並べるための変更点は 3 行目、display:inline-block;width:53px;height:53px;overflow:hidden; になる。ほかは適宜、調整をする。

#flickr_badge_uber_wrapper{text-align:left;width:234px;}
#flickr_badge_wrapper{padding:0;}
.flickr_badge_image{margin:0 5px 0 0;display:inline-block;width:53px;height:53px;overflow:hidden;}
#flickr_badge_source{text-align:left;margin:0x;}
#flickr_badge_icon{float:left;margin-right:5px;}
#flickr_www{display:block;padding:0 10px 0 10px !important;font:11px Arial, Helvetica, Sans serif !important;color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited{text-decoration:none !important;background:inherit !important;color:#404040;}
#flickr_badge_wrapper{}
#flickr_badge_source{padding:0 !important;font:11px Arial, Helvetica, Sans serif !important;color:#707070 !important;}

Twitter やほかの表示に関してはこちら (Web クリエイターボックス) が参考になる。

3. プラグインを削除する

公開から 3 カ月間はデータを見ようと思い、プラグインの AdRotate を使用して広告をローテーションさせて設置していたのだが、削除。このプラグインがそれなりに読み込みの時間を要する。
投稿と広告の関連性が何となく分かったし、当サイトで扱う内容と合いたさせる必要がない、合いたしないのでほぼ削除した。
AdRotate を削除したまでは良いのだが、独自の変数が残ったままになる。そこで、プラグインの Search Regex を使用して、投稿内の文字列を一括置換する。このプラグインに関しましては、次の投稿で触れたいと思う。
ほかにも削除、または Lightbox を prototype.js を使用するものから jquery を使用するものに変更している。
それでも下記とバックエンド含め 30 近くのプラグインが稼働している。

4. プラグインを追加する

キャッシュ管理には WP Super Cache をもともと使用しており、Recommended にはすべてチェック、Preload mode を使用している。
Gzip にて圧縮されているかどうかは HTML の最後にある <!– Compression = gzip –> の有無を確認する。
W3 Total Cache の方が高機能だが、共有サーバーではどの様に動作しているのかがはっきりしないというか、調べることがタイヘン。

今回は、定番の Head Cleaner を追加した。以前使用していた Lightbox Plus との相性が悪く、見送っていた。
CSS と JavaScript に関しては結合した場合、どうにも不具合が発生するので、ひとまず JavaScript をフッタに移動とタグの削除のみを使用。この点に関してはおいおい検証したいと思う。

WP Minify もインストールしたが、HTML の整形のみなのであまり効果は実感できていない。

5. 最終的には

ほかには ETag に関して .htaccess に記述した程度で、ありきたりの結論となってしまった…。
当然のことだが、Flickr、広告の画像読み込みが速度に大きくかかわっていたと思わる。
Head Cleaner の効果も大きい様な気がする。
ブログであれば、YSlow や Page Speed の値に執着がある、SEO が好きな方以外は、自分の思ったことを残しつつ調整することが良いと思う。

先頭に戻る