オンラインRPGのプレイ日記や攻略メインのブログです。稀にWeb製作記事も更新。

2016年12月7日 レイドボス:コアの鍵開け条件と有効デバフを更新しました。

WordPressのWeb表示速度を極限まで高速化する6つの方法

2012年8月24日 【Web製作メモ

世界中で大流行しているWordPressは個人でも簡単にブログを構築できるので愛用していますが、ひとつだけ難点があります。

「動的ページなためアクセス数が多くなると極端に遅くなる。」
基本的なプラグインからCSSの裏技htaccessを活用してサーバー負担を極限まで減らす方法を書いていきます。

高速化するための目次
  1. 最速のキャッシュプラグインを発見、通常の3倍速い
  2. ソースを自動的に並び替えて体感速度アップ
  3. データベースをデフラグしてクエリ高速化
    • Cronで定期的にデータベースを自動掃除
    • Cronの書き方
  4. CSSとJavaScriptの転送量を1/5に削減
  5. サーバーリクエスト数が20万も減ったCSSの裏技
  6. Expire Headerの設定でブラウザにキャッシュさせる

ここでは方法を知ってもらうための簡潔な説明に留めておきます。
後日、詳細を書いた記事をアップし、まとめます。

1.最速のキャッシュプラグインを発見、通常の3倍速い

まずは一番基本的なキャッシュプラグインの紹介です。
W3 Total Cache」や「WP Super Cache」などの有名どころもありますが、機能が詰まっている分、初速の遅さを実感するのでここでは最速を目指し却下します。

表示速度だけに絞った場合、「Quick Cache」か「Hyper Cache」の二択になります。

この二種はCoreserver(xrea)でも問題なく使えることもメリット

ページが表示されるまでの時間を計測してみた

QuickかHyperの二択はコンマ一秒の世界なので、アテにできない体感は捨て置き、機械に計測してもらうことにしました。
計測するまえに余分な広告とスクリプトは切っておきましょう。

http://webwait.com/
WebWait
指定したURLをインターバルを置きながら、好きな回数表示して読み込みにかかった時間を計測してくれる。

30回ずつ計測してみた平均
プラグイン 表示時間 備考
なにもなし 1.00秒
Hyper Cache 0.34秒 安定している。常に0.34付近。
Quick Cache 0.45秒 0.3~0.4をフラフラ。1秒超えることもあった。

なかなか面白い結果に。
Quick Cacheは初速が速く最速で0.26を出したこともありましたが、なぜか不安定でした。
「Hyper CacheはQuick Cacheより、さらに32%高速化できる。」ということになります。

ちなみにHyper Cacheはキャッシュ化されたページをGzip圧縮することもできます。容量が約1/3になるのですが、表示速度だけで言えば圧縮しないほうが0.05秒速いです。
ここは転送量を取るか速度を取るかで選択してください。

とってもHyperなプラグインだった

Hyper CacheのハイパーなところはGzip圧縮だけではありません。

  • 予約投稿にも完全対応。
  • コメントがあった場合にもそのページだけリセットしてくれる。
  • Gzip圧縮できるので容量の面で貢献。
  • ひとつのフォルダしか作成しないので、初めにフォルダを777に設定さえすればxreaやCoreserverでも安全に運用できる。
    (サーバーの特性で作成されたフォルダは権限を与えてもらえないため、ページごとにフォルダを作られてしまうプラグインだとキャッシュできなくなってしまう。)
  • モバイル用のページを分けてる人でも、User-Agentで完全対応(手動入力する必要アリ)。

確かwp-config.phpを編集する必要があるので少しだけ面倒ですが、WordPress使うような玄人には問題ないでしょう。

▲目次へ戻る

2.ソースを自動的に並び替えて体感速度アップ

これも有名な一つで「Head Cleaner」というプラグインです。
日本人の作者であり連絡を取り合える安心感もあります。
いち早く欲しい機能が毎回搭載されているので驚く。

  • head内のJavaScriptを、フッタ領域に移動
  • Google Ajax Librariesを利用する

キャッシュみたいな分かりやすい機能ではありませんが、ページの重要な部分から表示することによって、体感速度が激速になることでしょう。

これ単体ではアクセスするたびにサーバーに若干の負担がかかりますが、キャッシュプラグインと非常に相性がよく、綺麗に整頓されたソースでキャッシュしてしまえば、次のキャッシュ期間まで恩恵をまるごと受けられるわけです。

また、jQueryのような膨大の容量を誇るスクリプトをGoogleのサーバーを利用できるようになるので、転送量をサックリと削減できます。
僕の例で言うと、一日の転送量が1.2GBから600MB程度まで減らすことができたので実は一番好きな機能です。

▲目次へ戻る

3.データベースをデフラグしてクエリ高速化

プラグイン紹介の最後の項目。
デフラグする方法と、Coreserver(xrea)専用の自動最適化してくれる方法を書いていきます。

WP-Optimizeというプラグインで、面倒なデータベースに直接アクセスしなくてもWordPress上でお掃除できてしまう便利ツール。

有効化したら5つ程あるチェック項目に全て入れ、Processを押すだけの簡単なお仕事。データベースを弄るからちょっと怖いけどね。

Cronで定期的にデータベースを自動掃除

ここからが本編のCoreserverでCronを動かしてしまおうという内容。
まずはCoreserverにログインして上の画像にある「CRONジョブ」という項目をクリックしてください。

クリックするとページ右側に設定を入力する欄が出てきますが、まずは仕事内容を記したファイルを作る必要があります。

Cronの書き方

適当にテキストファイルを作り、拡張子を.sh形式に変更します。
タイプ的にはCGI + htaccessみたいな感じ。
書く内容については以下を参照。

例) cron.sh
#!/bin/sh
/usr/local/mysql/bin/mysqlcheck -Aaro -uユーザーID -pパスワード
exit

■注意点
  1. -Aaroでデータベースのチェック、修復、最適化などを施す。
  2. -uユーザーIDにはデータベースのユーザ名を-u以降から入力してください。
  3. -pパスワードにはデータベースのパスワードを-p以降から入力。
CoreserverやFTPのID/パスではありませんので注意。

上のファイルを作成できたらFFFTPなどでアップロードします。
間違えて/public_htmlにアップしないように。最上位ディレクトリです。

CRONジョブの編集

先ほどのCoreserverの設定ページに戻ります。

次にCronを実行するタイミングを指定します。
上の画像の例ならば「毎週、月曜の1時11分に実行する。」となります。
サーバー負荷を考えてあえて変な時間帯を選択しています。

0~9の数字と*(いつでもいい)を使い、日にちや曜日を指定してください。ややこしいのが曜日で0が日曜日、1が月曜日、2が火曜日といった感じになっています。

logu.shの後に >/dev/null 2>&1と付いてる謎なワードは、書かなかった場合に「スクリプトを実行したよ」という内容のメールが届くので、「それ別にいいです。」と破棄するための記号。
初めはちゃんと実行できたかどうかを知るために、付けないほうがいいかもしれませんね。

4.CSSとJavaScriptの転送量を1/5に削減

「CSSやJavaScriptの転送量なんて少ないもんじゃん?」なんて思ってたら甘いですよ!ついつい楽しくスタイリングしていたら、転送量オーバーしそうになりましたから…。

頻繁にアクセスするファイルを極限まで容量削減

そこで手っ取り早く圧縮してしまいましょう。
Gzip圧縮という便利な方法があり、今では全てのブラウザが対応しています。
日本で一番有名(?)な2ちゃんねるでも採用されている方法です。

サーバー側の転送量を抑え、クライアント(ホームページを見る人たち)には圧縮されたデータを渡し、各自で解凍してもらうことでサーバーの負担は相当数減ります。
CSSファイルなんて、完成したらたまに弄る程度ですし、手動でGzip圧縮しても特に手間にもならないのでオススメ。

http://www.altech-ads.com/product/10000679.htm WinGZip
GZip圧縮できればどれでもいいのですが、指定してボタンを押すだけの簡単な作業なのでこれを愛用しています。

使用テーマフォルダの中から探し出す

使用しているテーマの中にある「style.css」を圧縮すると「style.css.gz」になります。
次にhead.phpのhead内を編集するため、以下のようなstylesheetの行があると思うので置き換えてください。

例) .gzと追記するだけでOK
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); >.gz" type="text/css" media="screen" />

おかげさまで、CSSファイルの一日平均転送量が200MBから40MBにまで削減することができました。ありがとうGZip!

あ、JavaScriptの方書いてなかったですね。
外部ファイルを利用してるなら、こちらも同じようにGZip圧縮することで容量が1/5まで減らせることができます。

その場合はsrc=”~~~.js.gz”と入力するだけで自動的にクライアントがそちらを読み込んでくれます。

▲目次へ戻る

5.サーバーリクエスト数が20万も減ったCSSの裏技

今回の一番難解なところでもあります。
これはhtml、cssについて「ほぼ全てタグは理解できるぜ。」という方のみが実践してください。
ペイント系ツールも必要になるのでかなり面倒です。

その名はCSS Sprite

CSS Spriteという裏技で、ホームページに使われているいくつかの画像ファイルを、特徴ごとに一つにまとめてしまおうという方法です。

これによってそれぞれの画像ごとにリクエストしていたのが一回で済むようになり、アクセス数の多いサイトでは雲泥の差になります。
企業ではYahoo!がいち早く活用したことで有名です。

参考までにうちのブログのまとめた画像たち
成功事例 失敗事例(右に無駄な領域がガッポリ)

これを利用したことにより、一日の平均サーバーリクエスト数が35万→15万にまで減りました。特に19時~23時のピーク時間帯での効果が顕著になります。

しかし転送量は+130MBに…。それでも表示速度は圧倒的に速い!

CSS Spriteのデメリット

まず一つに「超めんどくさい。」これに尽きます。
画像を一つにまとめる際、キチキチっと詰めていかないと、失敗事例のように無駄な空間ができてしまい転送量が大幅に増えてしまいます。

背景画像のような小さな画像を繰り返し貼り付ける場合には、他の画像も同時に貼られてしまうため使用することができません。
アイコン画像のように、画像の幅と描画領域が一致するような場合を基本として使えますのでご注意ください。

繰り返し貼り付けるのでなければ、当ページ右下に張り付いている「とあるゲームの模擬機」のようにbeforeやafterを応用することで可能となります。

body:after {
content: "";
display: block; /*初めはインライン要素なのでブロック化*/

position: fixed; /*スクロールしても画像の場所を固定*/
right: 1px; /*画面右端*/
bottom: 0px; /*画面下端*/
z-index: 0; /*文章などに被ったときの描画優先度、0が最低*/

background: url(back.png) no-repeat 0px -317px; /*使う画像の初期位置をpx単位で指定する*/
width: 151px; /*画像の横幅*/
height: 320px; /*画像の縦幅*/
}
■注意点
  1. 初期はインライン要素なのでwidthやheightでガッチリ指定できません。
  2. back.pngの右へ0px、下に317px移動した場所に使いたい画像が埋め込まれています。
    このとき、下に317pxではなく、-317pxと入力するので注意。
    なぜマイナスなのかと言うと、自分が317px移動するのじゃなくて、画像を-317px上に持ち上げるから。
  3. widthとheightでキッチリと指定しないと、周りの画像まで表示されてしまう。

▲目次へ戻る

6.Expire Headerの設定でブラウザにキャッシュさせる

これはあまり使われていませんが、地味に効きます。地味に。
ブラウザにはページの画像やファイルなどをキャッシュする能力が付いていますが、それをこちらで制御してしまいましょう。

クライアント(ページを見る側人のこと)のPCに画像やページのデータをキャッシュしてもらうことが一番効果的です。同じページなら何度アクセスしてもサーバーの負荷はほぼ0ですからね。

htmlのヘッダーに入力することもできますが、少しでも容量削減のためhtaccessに記入します。

大抵のことはできるhtaccess

今回やることはキャッシュの時間調整と、キャッシュデータをチェックする機能まで切ってしまおう企み。

アクセスするたびに「ねぇ~これ古くない?最新のデータと合ってる?」なんて問い合わせられたらサーバーの負荷が少し増えますからね。

いつものように、.htaccessに以下を記入します。
# Expire Header
FileETag None
<Files "\.(htm|php|css)">
    Header set Cache-Control "max-age=86400, public"
</Files>
<Files "\.(xml|txt)">
    Header set Cache-Control "max-age=3600, public"
</Files>
<Files "\.(ico|bmp|jpg|png|gif|js|swf)">
    Header set Cache-Control "max-age=604800, public"
</Files>
■注意点
  1. FileETag Noneでクライアントのキャッシュデータとサーバー側のデータをチェックしなくなり、指定した時間まで保持し続けます。
  2. ファイルごとに保持する時間を秒数で設定できます。一時間なら3600、一日なら86400、一週間なら604800。

高速化まとめ

駆け足で書いていったのでこの記事だけでは説明不足ですが、検索するための取っ掛かりにはなると思います。

興味のある内容がありましたらググってみてください。僕よりも分かりやすい記述してくれてる方がたくさんいますので!と逃げてみる。

詳細な解説についてはちょっと待っててね~。気がむいたら書くからー。

記事に対してコメントする

投稿ルール
  • 記事内容に関することであれば特に制限はありません。
  • コメントに画像を添付することも可能です。補足説明として使いたいときなど。
  • 投稿ボタンを押すとすぐにページ反映されます。
    (URLを含むコメントは安全性確保のためストックに保留されます。)

名前 (Name) ※無記名にすると「匿名さん」になります

内容 (Contents)

10MB以下のJPG/GIF/PNG形式の画像をアップロードできます。

  1. ホーム
  2. 雑記
  3. Web製作メモ
  4. WordPressのWeb表示速度を極限まで高速化する6つの方法
サイトに関するご要望や意見はこちらから

WordPressのWeb表示速度を極限まで高速化する6つの方法

2012年8月24日 20:00

▲ページの先頭へ戻る