賢威6.1のブログを高速化するための7個の方法

top賢威6.1に入替えて1週間ほど経ちました。

デザインはほぼ固まったので、
ブログの表示速度(レスポンス)改善に挑戦しました。

その全過程をご覧ください。


表示速度改善のためにやったこと

このブログで表示速度改善(チューニング)のために実践したことをまとめます。

プラグインを導入するだけでできる簡単なことから、
いろいろと難しい(面倒くさい)ことまであるので、
もし、レスポンス改善を目指している人は、簡単なことからやってください。

今回、このブログはこの順番で実施しただけであって、
絶対にこの順番でなければならない!!なんてことはありません。

環境

使っているサーバーやテンプレートなどによって、
結果が変わってくるので、当ブログが利用している環境を説明します。

このブログを書いている当日(2013年11月9日)の環境です。

  • サーバー:Xサーバー
  • WordPressバージョン:3.7.1
  • MySQL5バージョン:5.0.95
  • PHPバージョン:5.5.0
  • テンプレート:賢威6.1
  • 計測ページURL:http://www.dicetower.net/

事前準備

まず、事前準備として絶対にやっておかなければならないのは、
ブログ(データベース)のバックアップです。

もし、途中で「思わぬ影響」を受けてしまった場合は、
すぐにもとに戻す必要があるためです。

実は、バックアップは大掛かりな作業をするときだけでなく、
サーバーが障害にあったり、ファイルが壊れたりしてしまった場合のために
常日頃から定期的に取得しておくのが理想です。

しかし、毎回手動でバックアップを取得するのも面倒なので、
これを機に自動でバックアップを取得できるようにしましょう。

バックアップにもプラグインがあります。
「WP-DBManager」というプラグインです。

そして、Xサーバーはデータベースごとバックアップが可能なので、
念のため、データベースのバックアップも手動で取得しました。

パフォーマンスの計測

それでは、実際にレスポンスの改善方法を説明していきます。
まずは、現時点のパフォーマンスを計測します。

使用するのは「GTmetrix」というパフォーマンス測定サイトです。
表示速度だけでなく、主原因はなんなのか?など細かくわかり、使いやすいです。

URLを入力するだけで簡単に計測できるので、
ブログをお持ちの方はぜひ実行してみてください。

他にも、Google公式の「PageSpeed Insights」もありますが、
「GTmetrix」は「PageSpeed Insights」を使っているため、どちらでも構いません。

lpr-001

これが、チューニング前の状態です。
Summaryの各項目はGTmetrix使い方に載っていますので、参考にしてください。

最初なので、全ての結果を書きます。

  • Page Speed Grade:D(69%)
  • YSlow Grade:D(67%)
  • Page load time:8.52秒
  • Total page size:1.79MB
  • Total number of requests:96

この中で、特に気にしたのが「Page Speed Grade」と「Page load time」です。

「Page load time」は、指定されたページが表示完了するまでの時間です。
つまり、この数字が小さくなればなるほど、表示速度が早くなります。

8.52秒です・・・数字だけ見るとかなり遅いです。

ただし、測定する時間帯によっても結構変わりますし
共有サーバーであれば、一緒のサーバーを利用している人が、
測定時に作業していたりすると遅くなるので数字は参考程度にしましょう。

また、ページ全てが表示完了するまでの秒数なので
人間が見た時にはそこまでの時間は感じません。(基本上から表示されるため)

私は5回測って、中間値を採用しました。

「Page Speed Grade」はGoogleが指定するHTML構造かどうかのランクです。
Aランクが一番良いのですが、Aランクになったからといって
検索順位が一気に上がったりするわけではありません。

あくまでも、Googleが「まだまだパフォーマンス改善できる箇所あるよ!」
というのを教えてくれていて、改善点が多いとランクが下がります。
このランク秒数で決まるわけではありません、改善点があるかどうかです。

先程も説明しましたが、いろいろな理由で秒数が参考程度にしか使えないので、
このランクをあげることで、パフォーマンス改善された(はず)というのを見ていきます。

D(69%)です・・・70点ぐらいはありますが、まだまだ改善の余地ありです。

既に導入済みのプラグイン

パフォーマンス改善にプラグインをいくつか導入しています。
その中で、計測前から導入していたプラグインを紹介します。
上の測定結果は、導入後の数字ということになります。

  • DB Cache Reloaded Fix:データベースのクエリ数を抑える
  • Better Delete Revision:リビジョン数を制限する

詳しくは、リンク先のページを見ていただきたいのですが、
両プラグインとも、入れておいて損はありません。

quick cacheの導入

次に「quick cache」を導入しました、これもキャッシュ系プラグインです。

簡単に導入できますが、注意点としてスマホ・モバイル対応で
「WP touch」「Ktai Style」を使っている場合は注意が必要になります。

他の有名なキャッシュプラグインとして「W3 Total Cache」がありますが、
リンク先の記事を見て利用を控えました。

quick cacheの導入後の測定結果です。

lpr-002

  • Page Speed Grade:D(68%)
  • Page load time:6.32秒

ランクはほぼ変わっていませんが、表示速度が「8.52秒→6.32秒」と
2秒以上早くなったことがわかります。やはりキャッシュ強し。

MO Cache と WP File Cacheの導入

次に「MO Cache」と「WP File Cache」を導入しました。
またまたキャッシュ系プラグインです。

  • MO Cache:日本語翻訳ファイル(.mo)のキャッシュ
  • WP File Cache:PHP変数やオブジェクトのキャッシュ(MO Cacheの補佐)

プラグインのインストールのみで完了するので、入れない手はありません。
ただし、使用中の他のプラグインによっては少々変更するところがあります。
詳しくはリンク先をご覧ください。

MO Cache と WP File Cache導入後の測定結果です。

lpr-003

  • Page Speed Grade:D(69%)
  • Page load time:6.23秒

そんなに改善はされていません。
誤差かもしれませんが、0.1秒ほど早くなったのでよしとします。

wp minifyの導入

次に「wp minify」を導入しました。
これは、CSSやjavascriptファイルをまとめて軽量化し、
読み込むファイルの数も減らしてくれるプラグインです。

元々、賢威のCSSやjavascriptファイルは管理者が修正しやすいように
ファイルが細かくわかれています。

keni-css
※クリックで拡大画像が表示できます

CSSファイルだけで7ファイルあります。
確かに直しやすいので、管理者にはメリット大なのですが、
画面表示する時に、かなりの時間がかかってしまいます。

そこで、修正する時は分割前のファイルで
画面表示の時は分割後のファイルにしてくれるのがwp minifyです。

結果的に、このプラグインが1番効果的でした。
やはり、賢威はCSSファイルの分割がレスポンスのボトルネックになっていたようです。

しかし、分割されているCSSファイルを1つにしてしまうことで
デザインが崩れてしまう可能性もあります。
javascriptも同様に、画面がうまく動かなくなってしまう可能性もあります。

賢威6.1をそのまま使っているのであればうまく動くはずです。
詳細は、リンク先で確認できますが自信がない人はスルーしてください。

wp minify導入後の測定結果です。

lpr-004

  • Page Speed Grade:D(62%)
  • Page load time:2.94秒

表示速度が劇的に変わりました。
「6.23秒→2.94秒」と3秒以上早くなったことがわかります。

実は「Total page size」と「Total number of requests」が
変わっているのに気づいて頂けましたでしょうか?大幅に減っています。

CSSファイルを軽量化してファイル数を減らしたことで、
サイズを下げて、ファイルをサーバーへ取りに行く回数を減らすことができました。
その結果として、表示速度が大幅に改善できたということになります。

これで導入するプラグインは終了です。

画像ファイルを軽量化

次は、画像ファイルを軽量化していきます。

トップページには、いくつも画像ファイルを使っていたのですが・・・
なぜか、拡張子「png」ファイルが大多数を占めていました。

pngファイルは確かに綺麗なのですが、その分サイズがかなり大きくなります。
そこで、見た目上の劣化がほとんどない「jpg」ファイルへと変更します。
ちなみに、私の場合png→jpgでファイルサイズは70%ほどカットできました。

拡張子を変えるといっても直接拡張子を変更するわけではありません。
私は「GIMPを使ってpng画像取り込み→jpg画像で保存」で変更しました。

Webサービスで画像の拡張子を変更できるサイトもありますので紹介します。

画像軽量化後の測定結果です。

lpr-005

  • Page Speed Grade:C(77%)
  • Page load time:2.76秒

表示速度は0.2秒ほど早くなりました。
そして、ランクがCになり77%まであがりました。
これは、画像の数が多ければ多いほど効果がありますので試してください。

ブラウザキャッシュの設定

ここまで表示速度が早くなったので、後はランクの上昇を目指します。
次に実施したのは、ブラウザキャッシュの設定です。

簡単に説明すると、ブログを見ている人がわざわざサーバーから
ファイルを取ってきてブラウザ上に表示するのではなく、
ブラウザに残っている情報(キャッシュ)から表示する方法です。

このページの「mod_expires が使える場合は、有効にして画像ファイル等の静的ファイルをブラウザにキャッシュさせる」というところをご覧ください。

また出てきました、キャッシュ。
キャッシュという技術はネットワークとは切っても切れません。
確かに、キャッシュのせいで表示がおかしくなったり、
更新したはずなのに、されなくて困った事もありますが、
しっかり理解して使えば、かなり便利です。

ブラウザキャッシュ設定後の測定結果です。

lpr-006

  • Page Speed Grade:B(87%)
  • Page load time:2.67秒

表示速度は誤差ですが、ランクがBまであがりました。

gzipで転送を圧縮する

これは、サーバーから取ってくるファイルを圧縮して、
早く画面を表示する方法です。

先ほどと同じですが、こちらが参考になります。

このページの「mod_deflate が使える場合は、有効にしてコンテンツを圧縮転送する」というところをご覧ください。

gzipで転送を圧縮した後の測定結果

lpr-007

  • Page Speed Grade:A(93%)
  • Page load time:5.73秒

ランクはあがりましたが、表示速度が倍ぐらいかかるようになってしまいました。
ページサイズとリクエスト回数が増えています、理由は不明。

この後、gzip圧縮での転送をやめて再測定もしたのですが戻らず。
表示速度だけなら、その時のサーバー起因ということで片付けてもよかったのですが、
ページサイズとリクエスト回数も増えてしまったので、ちょっと気持ち悪いです。

ですが、ランクも上がったのでこのまま残します。

CloudFlareの導入は見送り

CloudFlareという、負荷分散用のキャッシュサーバーもあり、
レスポンスが改善できると各所で紹介されていました。

当ブログでも導入しましたが、全く効果がなかったのでやめました。

もしかすると、効果が出るブログもあるかもしれませんので
参考になるページを紹介いたします。

CSSやjavascriptにバージョン番号が入ってしまっている場合は、
こちらの対応も同時に行ってください。

賢威6.1でのレスポンス改善結果まとめ

ここまでで賢威6.1でのレスポンス改善は終了です。
チューニング前後の結果を再度記載します。

  • Page Speed Grade:D(69%) → A(93%)
  • YSlow Grade:D(67%) → C(75%)
  • Page load time:8.52秒 → 5.73秒
  • Total page size:1.79MB → 0.96MB
  • Total number of requests:96 → 83

途中で紆余曲折ありましたが、全項目改善できました。

そもそもブログの表示速度の改善は必要?

さて、ここまで時間をかけてレスポンス改善しましたが、
そもそも、ブログ表示速度の改善は必要なのか?という
身も蓋もないお話をしようと思います。

単純な話、「できるならやればいい」です。

よほど遅くない限り、それほど影響ありませんし、
コンテンツ作りを後回しにしてまでやる必要はありません。

Googleの検索順位の条件の一つとして、
表示速度を使っていると公式発表されています。

ただし、コンテンツの関連性や質よりはかなり重要度は低いです。
ですので、空き時間があればやってみる程度で良いと思います。

賢威6.1は素晴らしいテンプレートですが、さらなる改善ができました。

公開日:2013年11月9日
最終更新日:2013年11月12日

カテゴリー:賢威

“賢威6.1のブログを高速化するための7個の方法” への2件のフィードバック

  1. こんにちは。

    副業サラリーマン@ジーパンと申します。

    ブログを拝見させて頂きました。

    ネットビジネスなどで副収入を

    得られている方々のブログやサイトを

    探しているときに拝見しました。

    とても勉強になります。

    またホームページを拝見したいと思います。

    ポチっと応援させて頂きました。

    私もサイトを運営していますので、

    一度お越し頂けるとうれしいです。

    よろしくお願いします。

    • さいとう より:

      ジーパンさん

      はじめまして、さいとうです。

      今後も、より有益な情報を発信できるように精進します。
      コメントありがとうございました。

コメントを残す

サブコンテンツ

ネットビジネスマン:さいとう

人気ブログランキング

お問い合わせ

質問やノウハウに関するご相談など
お気軽にお問い合わせください。


お問い合わせ

購入者の方へ

私から購入頂いた方で、特典を受け取っていない方はこちらをご覧ください。

このページの先頭へ