画像の最適化でWordPressを高速化!

WordPressを高速化する方法は多数存在しますが、自分は3つのことを行うだけで充分な効果を発揮することができました。具体的にはプラグインの導入と、PHPの編集を行っただけ。

あまりに簡単で効果も高かったので記事としてまとめておきます。自分のサイトが重くて困っている人は参考にしていただければ幸いです。

サイトが重いとどのような悪影響があるか

サイトの表示が遅いということは、離脱率が上がることに直結します。どれだけ上質なコンテンツを揃えていても、表示が遅いとユーザーはすぐに離脱してしまいます。表示がわずか2秒遅いだけで、直帰率は50%も増加という事例も実際にあるようです。

サイト表示が2秒遅いだけで直帰率は50%増加! 

またSEO的にも悪影響を及ぼします。これまではページの表示速度が向上しても検索順位などには大きく影響しないとされてきました。しかし今月より導入されたモバイルフレンドリーでは、将来的にページの表示速度がSEOに一定の影響を及ぼすことが予想されています。

現段階ではモバイル検索でもPCページの表示速度が検索順位の判断基準となっていますが、早めに対策を打っておくに越したことはありません。

モバイルフレンドリーかそうでないかの2択でモバイル検索ランキングは決まる from 13th #inhouseseo

3つのことを行っただけで速度が劇的に改善

サイトの速度を測るサービスとして「GTmetrix」を利用しました。サイトの表示速度をレポートとして表示してくれます。

対策前の結果がこちらでした。この結果を見た時は正直目眩がしました。スコアはA~Fまでの6段階表示になっていて、Eはかなり悪い結果だと思われます。因みに「Page Speed Grade」はGoogleによる速さの評価、「YSlow Grade」はYahoo!による速さの評価となっています。

screenshot_80-min

惨憺たる結果……。

しかし少しの対策を行い、再測定をしてみたところ劇的に改善!自分でも驚きました。

screenshot_87-min

サイトの重さの原因は画像だった

レポートにはその他にもページの速度を下げている原因などが羅列されているのですが、自分の場合は画像がサイトを重くしている主な原因となっていることが書かれていました。記事で画像を頻繁に使用する割には対策らしいものはしていなかったので当然と言えば当然です。

そういうわけで対策は画像の最適化を中心に考えて実行していきました。以下からは自分が実際に対策した内容を紹介していきます。

1.画像最適化プラグイン「EWWW Image Optimizer」の導入

EWWW Image Optimizerは「アップロードした画像を自動で圧縮する」「過去に記事で使った画像を全て圧縮できる」などが可能なまさに願ったり叶ったりのプラグインです。無劣化のままで容量だけ削減してくれるので、画像が粗くなったりする心配もありません。

初期設定

プラグインをインストールし有効化すると「設定」に「EWWW Image Optimizer」が追加されているはず。クリックすることで詳細設定画面に進むことができます。

設定画面の「Remove metadata」の項目にチェックをいれます。これにより、アップロードする際に画像に付いてくる余分なデータを削除してくれるようになります。

screenshot_88-min

その他は初期設定で問題ないでしょう。

メディア内の画像を全部圧縮

次は既にアップロードしている画像全体の圧縮をします。「メディア」に「Bulk Optimize」という項目が出現しているのでクリックしてください。

「Optimize Media Library」という項目があります。「Start optimizing」をクリックすることでメディア内の画像の圧縮が始まります。

screenshot_89-min

圧縮中はこのような画面が表示されます。画像では既に一回圧縮を行った後なので容量の2%ほどしか削減できていませんが、実際は30%ぐらいはコンスタントに削ってくれると思います。この作業はメディア内の画像量によっては一時間以上掛かるようです。

screenshot_90-min

終了するとFinishedと表示されます。

テンプレートに使用されている画像の最適化

種類によりますが、テンプレート内で画像を使用している場合もあります。「Scan and optimize」でそのような画像も一括圧縮することができます。自分の場合は使用されている画像は一種類しかありませんでしたが。

screenshot_91-min

先ほどと同じような画面がでて「Finished」と表示されたら終了です。

手動で行うことはこれでひと通り終了です。今後はWordpressにアップロードした画像は「EWWW Image Optimizer」が自動で圧縮をしてくれるようになるので、容量に関しては一安心です。

 2.画像の遅延読込プラグイン「Unveil Lazy Load」の導入

次は画像の表示に関する最適化を実行する為に「Unveil Lazy Load」を導入しました。これは一言で言うと画像の読み込みを敢えて遅延させることで、ページの読み込みを快適にするプラグインです。

Webサイトの表示速度改善方法の一つとして、画像の遅延読込という技術があります。

これは、ページロード時に画像を一度に読み込むのではなく、ページロード後にスクロールによって画像が表示領域に入った段階で順次読み込むテクニックです。

Unveil Lazy Loadを導入することで、上記のテクニックを自分のサイトに適用することができます。ユーザーの画面に表示された時点から画像が読み込まれるので、最初にページを開いた時の負担が軽減されます。

導入方法も非常に簡単で、インストールした後に有効化をすればいいだけ。細かい設定は不要です。

他のサイトで遅延表示されている画像を見て「どうやっているんだろう」と思っていましたが、このプラグインを使用していたのですね。フッと画像が出てくるエフェクトが格好良く、実用性もあるのが素晴らしいです。

3.キャッシュを利用して画像表示を高速化

キャッシュというのは、一度ページで読み込んだ文字や画像を保存したデータのことです。これを上手く利用すれば、再度そのページが表示された時は遠くにある本来のデータを呼び出すのではなく、保存して近くに置いてあるキャッシュを表示して時間短縮といったことも可能になります。

記事の文章などに関しては比較的頻繁に変化が起こるのでキャッシュを利用するのは危険が伴いますが、画像に関しては見た目が全く変わらないのでキャッシュを積極的に利用していいと思っています。

「.htaccess」を編集してキャッシュを設定

「.htaccess」というPHPファイルに記述を加える事でキャッシュの最適化を行っていきます。

ロリポップの場合は「WEBツール」→「ロリポップ!FTP」へ進みます。

自分のWordpressのフォルダを開くと、一番最初の階層に「.htaccess」ファイルが存在するので開きます。記述を加えていくわけですが、念のためバックアップは常に取っておくようにしましょう。

「.htaccess」に以下の記述を加えていきます。場所は先頭で問題ありませんでした。

記述ができたら保存して終了です。サイトを表示してみて問題がなければ完了です。

この項を書くにあたって以下の2つの記事をかなり参考にさせていただきました。本当にありがとうございました。

参考:

追記(2015/04/16)

キャッシュ系プラグインを導入している場合は、設定が競合する可能性があるので.htaccessに編集は加えないのが無難です。

自分は現在は『W3 Total Cache』というキャッシ制御プラグインを導入しているので.htaccessに追加した上記のコードは全て削除しました。

キャッシュ系プラグインを使用しない人は.htaccessに記述を加える方法は有効なのでご安心を。

まとめ

以上の3つの施策を行っただけですが、序盤に言った通りかなりの改善を実現することができました。

しかしこれは最低ラインを標準ラインまで上げることに成功しただけであって、まだまだ改善の余地は多いと思っています。今回は画像に絞って対策を取ったので、それ以外の部分で対策を行っていかなければなりません。

現在一番着手をしたいのがサーバー移転でしょうか。「Xサーバー」が優秀だということなので快適なサイトを作成するためにも実現したいものです。高速化に関してはまだまだ改善の余地が多いので、その都度記事にしていこうと思います。

SNSでもご購読できます。