blog.hakozu.me

WordPress の表示高速化を試みました

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

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

Google ウェブマスターツール スクリーンショット

共有サーバーなのでできることは限られています。
YSlowPage Speed の値は参考程度に、大した機能を組み込んでいるブログではありませんので、追加したものを見直すという作業にしました。
ただ、できる限り最初に思ったままを維持したいと思います。
1 月 12 日時点のサイト内のページの平均読み込み時間は 3.7 秒に改善しました。欲を言えば、あと 3.7 秒は短縮したいのですが、ひとまずは良いでしょう。きっと、そのまま忘れます。
上記のグラフ推移は、年末のトラフィックが普段より多かったことも影響しているとは思います。

1. ウィジェットを制御

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

TS Custom widgets スクリーンショット

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

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

<div id="flickr_badge_uber_wrapper"><div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&display=random&size=s&layout=x&source=user&user=40810471%40N08"></script>
</div></div>

サイズ 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 が好きな方以外は、自分の思ったことを残しつつ調整することが良いと思います。

このごろ少し

Time Machine ですが、バックアップ先のディスク容量が少ない場合、どの様なバックアップをしているのでしょう。
LAN の接続が停滞し、異常に大きな容量のファイルをバックアップし始めます。
iMac が 2 TB、Time Capsule が 1TB の時点で間違えている気がしますが…。

関連しそうな商品

関連しそうな記事

コメント