ページ表示速度の重要性

プラグインに頼りっぱなしの、ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！今回はページの表示速度を速くするプラグインをご紹介させていただきます。

サイトを開いて表示されるまでの時間が長いと嫌になりませんか？という事で、サイトが開くスピードが遅くなればそれだけ見てもらえない可能性が高くなります。

Amazonではページ速度が0.1秒遅くなると、売上が1％低下する。

Googleではページ速度が0.5秒遅くなるとアクセス数が20％下がる。

また、ページ速度が１秒遅くなると、コンバージョンが７%下がり、顧客満足度は16％も低下する。

上記のような調査結果が出ています。

Amazonのように買い物するんだ！とサイト訪問者に各個たる意志があったとしても売上は落ちていくのです。もし自分のサイトにたまたまやってきた人がいたら、一瞬でページを閉じられるかもしれません。

それゆえ、一瞬で目を引くデザインとページ速度は重要になってくるのです。

Googleでもページ速度はサイト評価の指標の一つになると発表しています。明確な速度は明示されていませんが、目標は2秒以内！今までの趣味サイトでも3秒くらいが限界だったので、このサイトでは是非達成してみたいと思います！

それではこのサイトの対策前のページ速度を計測してみましょう！

 

計測時の仕様

• レンタルサーバー　：　エックスサーバー
• プラン　：　X10
• WordPress　：　バージョン 3.9.1
• テンプレート　：　TCD　「Gorgeous (tcd013)」

 

調査に使ったツール

GTmetrix
ページロードタイムが6.58s・・・。お　遅い・・・。

 

Pingdom
こちらも6.86sと目標には程遠い。

 

注意点

プラグイン等で最適化する前に、現在の速度を計測し後でどれくらい早くなっているのか比較しましょう。

データ取り結構重要です！

また、サーバーの環境により計測する時間帯によってデータが違ってきます。何度か計測し平均値を出すようにしましょう。

 

使用したプラグイン

性格的にあまりメンドクサイ設定が必要なプラグインは使いたくないので、簡単なプラグインをご紹介します。この性格だから3秒切れないのかな・・・？いやいやみんなそうでしょ？

また、巷ではキャッシュ系のプラグイン推しの方もいるようですが、稀に不具合も起きるらしく僕は怖くて使えない・・・。

なので、できるだけキャッシュ系のプラグインは使わないようにしたいと思います。使わないとどうしようもないものは使うけど。

 

これが私的基本

• 簡単設定である事。
• キャッシュ系は怖いからなるべく使わない。

 

WP Hyper Response

通常、WordPressは DOCTYPE宣言 から </html> まで全てバックエンドに書きこみ終わってからブラウザに送信しますが、flush() 関数を使うとその時点で一旦ブラウザに送信します。

そのため、通常であればWordPress側で演算が終わるまで待たなければいけないのですが、このプラグインを使うことにより待たずに済みます。

http://stocker.jp/

という事でいつものワカンナイ？？って感じですが、早速試してみましょう。

 

導入方法

1. プラグイン新規追加
2. WP Hyper Response　インストール
3. 有効化

これだけ。あまりに簡単なのでキャプチャなしの親切解説。で、早速計測です。

 

GTmetrix　6.82ｓ　あまり変わってないというか若干遅い？計測時の環境もあるので判断が難しい所ではあります。

 

5.97s　お～　少し早くなってる！

 

感想

管理画面なんかのもっさりした感じも解消できるというのがこのプラグイン。ハッキリとした数値ではあまり差は感じなかったものの、こういった積み重ねが後あと生きてくるのかも！

不具合

今の所このサイトではこのプラグインの不具合は発生してません。

 

Lazy Load

画面に出てきていない画像の読み込みを後回しにするプラグインです。画像がフワっと出てくるのもなんとなくかっこいい！(かっこよさも大切！)

導入方法

1. プラグイン新規追加
2. Lazy Load　インストール
3. 有効化

これだけ。これもあまりに簡単なのでキャプチャなしの親切解説です。

ページ速度を計測する前にサイトの不具合をチェック！な～～トップページのスライダーがおかしい！！

他のサイトでLazy Load試した時は、テーブルに挿入した画像が表示されなかったっけ・・・。デザイン崩してまではって事で、このプラグインの使用を断念します。(あっさりも大切。)

 

EWWW Image Optimizer

画質をなるべく落とさずに画像を圧縮させるプラグインです。すでにアップロードされた画像も一括変換でき、新規追加画像も圧縮してくれる超簡単なプラグインです。

 

導入方法

1. プラグイン新規追加
2. EWWW Image Optimizer　インストール
3. 有効化

 

設定方法

1. 管理画面の設定
2. EWWW Image Optimizer

 

ほぼ初期設定でいけますが、変更しておいた方が良い個所のキャプチャを載せておきます。

Remove metadataの所にチェックを入れておくと、画像の撮影日時や位置などのEXIF情報を削除できます。個人情報に敏感な方はチェックを入れておきましょう。

 

Hide Conversion Linksにチェックをしておくと、画像の拡張子を変換する機能を停止できます。

ここにチェックを入れておかないと、メディアライブラリにJPGからPNGに変換するボタンが表示されますが、誤って変換しないようにボタンを非表示にする機能です。

 

注）キャプチャは乗せていませんが、Delete originalsはチェックを入れると元画像が消えてしまいますのでチェックはいれないようにしましょう。

 

変更箇所がある場合は、Save changeをクリックして設定を保存しておきましょう。

 

圧縮開始方法

 

保存後、管理画面のメディアのBulk Optimizeから画像のインポートを完了して下さい。

 

再び管理画面のBulk Optimizeをクリックすると圧縮スタート画面に遷移します。

Start optimizingをクリックすると圧縮が始まります。

 

進捗状況がバーで表示されます。

 

全ての圧縮が完了したら、メディアライブラリに行ってみます。 一番右端が圧縮後のデータです。一番上の画像でReduced by 7.9% (3.1 kB) 　なんと7.9%の圧縮に成功しました。

 

さぁここまで完璧！気になるページスピードは？ うああああああ！！

GTmetrixは1秒以上速くなった！！感激！圧縮神だね！

 

感想

サイトをチェックしましたが、画質が大きく変わった感じはありません！現在は圧縮率はデフォルトのままで、もう少し下げる事も可能ですが、画質が荒くなるのも嫌なのでこのまま行こうと思います。

不具合

今のところ問題はありません。停止すると元の画像に戻せますし良いと思います。

 

WP Hyper Responseも追加して計測。

EWWW Image Optimizerに加えWP Hyper Responseも再有効化します。いくぜ計測！

 

GTmetrx 　4.26s(変更前6.58)　キターーー！

 

Pingdom　4.92s(変更前6.86)　こちらもキター！

 

 

まとめ

計測した日時や、サーバー環境によって差が発生する場合がありますので、何度か試してみる必要はありますが、EWWW Image Optimizerについては、違いがはっきりと数値に現れました。圧縮するんだもんそりゃ早くなるよね。

という事でEWWW Image Optimizerの効果はかなり高いのではないでしょうか？さて、更なる高速化の為に別のプラグインも検討していきたいと思います。

あっ！プラグインは不具合が起こる可能性もあるので、しっかりとバックアップをとってからインストールするようにしておきましょう。

 

実は、高速化についてはこの後紆余曲折がありました。高速化に興味がある方は最終章まで読まれることを強くおすすめいたします。

WordPress高速化第2弾「Photon」を導入してみた！