(記事内リンクにPR含む場合があります)

WordPressサイト高速化でSEO対策!17の表示速度アップ術

Webサイト高速化

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとGoogleにも評価されなくなるので実質SEO対策にもなります。今回はWordPressに特化した高速化についてまとめてみました。

ひとことで表示の高速化と言っても、キャッシュ系プラグインを利用する方法から、使用する画像を圧縮したり、スタイルシートやJavaScriptの効率的な書き方など手法は様々です。

ゆめぴょんです。こんちはっ(^^)/

このブログも表示速度の高速化をいろいろ試みて1秒台とGTmetrixのAA判定を達成しました。しかしその後のテーマ編集や新たなプラグイン導入により今はBBまで低下しています。特にツイート数表示が低速化の原因です。さらなる改善中です。

  1. 無料CDNサービスCloudFlareの導入による高速化
  2. キャッシュ系プラグインを使って表示を高速化
    1. DB Cache Reloaded Fix – データベースのクエリキャッシュ
    2. WP Hyper Response – PHPの表示を高速化
    3. 001 Prime Strategy Translate Accelerator – 翻訳キャッシュ
    4. W3 Total Cache – 最も高機能でClourFlareの機能アップ
    5. その他の高速化プラグイン
    6. プラグインを減らすことも高速化
  3. アイキャッチ画像・写真やサムネイル最適化による高速化
    1. Auto Post Thumbnail – 過去記事にもアイキャッチ
    2. アイキャッチやサムネイルの重複をなくし高速化
    3. Regenerate Thumbnails – サムネイルのリサイズで高速化
    4. アイキャッチや掲載写真の加工・圧縮方法
    5. 過去アイキャッチもまとめて圧縮化
    6. その他 – lazyload、CSSスプライト
  4. ソーシャルボタンを工夫して表示を高速化
    1. WP Social Bookmarking Light – プラグインで簡単設置
    2. プラグインなしで横型・縦型ソーシャルボタンを設置
    3. FacebookのOGP設定をプラグインなしで設置
    4. ツイッターのTwitter Cards設定をプラグインなしで
    5. ソーシャルボタンのあと読み設定
    6. ソーシャルボタンを1つにまとめて高速化
  5. データベースの最適化、リビジョン停止で高速化
    1. WordPressの自動保存やリビジョンを削除するプラグイン
    2. データベースの最適化により表示速度アップ
  6. まとめ:今日のゆめぴょんの知恵

無料CDNサービスCloudFlareの導入による高速化

CDNサービスを利用した表示速度の高速化はWordPress限定ではなく、Webサービスや全てのサイトに適用できる方法です。

中でも無料のCloudFlareを用いた高速化は比較的リスクも少なく手順も簡単なのでおすすめです。しかし切替時にはアクセスが不安定になることもあるため導入は早い時期が良いです。

キャッシュ系プラグインを使って表示を高速化

WordPressには簡単に表示を高速化できるキャッシュ系プラグインがたくさんあります。ありすぎて選ぶのが大変です。よく調べないと機能が重複したり相性が悪くて逆に低速化してしまうこともありそうです。

DB Cache Reloaded Fix – データベースのクエリキャッシュ

「DB Cache Reloaded Fix」はデータベースへのアクセス(クエリ)をキャッシュ(データを記録して使いまわすこと)することにより、パフォーマンスの低下を抑えて高速化させるプラグインです。管理画面も高速化します。簡単に導入できます。

WP Hyper Response – PHPの表示を高速化

「WP Hyper Response」は、PHPのバッファ(表示するもの)を先出しして体感速度だけでなく実速度も上げてくれます。管理画面も高速化します。

001 Prime Strategy Translate Accelerator – 翻訳キャッシュ

「001 Prime Strategy Translate Accelerator」は翻訳用の「MOファイル」をキャッシュします。翻訳機能を使わない場合も日本語化したWordPressなら効果あります。翻訳ファイルは7割も読み込みのリソースを奪うと言われています。

記事でも触れていますが、翻訳キャッシュのプラグインには「MO Cache」というのもあります。しかしこれは単独では効果を出せず、オブジェクトキャッシュ系プラグインが必要になります。各自でどちらか選択してください。

W3 Total Cache – 最も高機能でClourFlareの機能アップ

「W3 Total Cache」は様々なキャッシュ機能を実現してくれます。私が利用しているのは、ページキャッシュ、ブラウザキャッシュ、CDN(CloudFlare)共存機能です。

「W3 Total Cache」は他のキャッシュ系プラグインや、スピードアップ対策との併用に少し知識が必要です。またスマホ対応などの設定方法についても知っておいた方がいいと思います。

その他の高速化プラグイン

まだ導入していませんが気になっているのが「Head Cleaner」と「WP Widget Cache」です。「Head Cleaner」は複数のCSSとJavaScriptを整理したり最適化します。「WP Widget Cache」はウィジェットをキャッシュします。

どちらも「W3 Total Cache」のページキャッシュ、ブラウザキャッシュでカバーできている気もしますが、いつか効果を試したいとも思っています。「Head Cleaner」はテーマの作り方により不要にもできそうです。

プラグインを減らすことも高速化

上のように導入が容易で効果もすぐでて便利なWordPressプラグインですが、使い過ぎると逆に表示速度も低速化してしまいます。キャッシュ系プラグインは必要ですが、他のプラグインはなるべく減らす努力もしましょう。

アイキャッチ画像・写真やサムネイル最適化による高速化

ブログでは文章だけでなく、アイキャッチ画像・写真や、それを縮小したサムネイルなどで見栄えをよくした方が読みやすくなります。しかし多用は低速化をまねくので、圧縮や最適化が重要になります。

Auto Post Thumbnail – 過去記事にもアイキャッチ

高速化の前に各記事にアイキャッチを設定するには、プラグイン「Auto Post Thumbnail」が便利で楽です。記事の一番最初の画像を自動で登録します。新規投稿だけでなく過去記事のFlickrやPicasaの画像さえアイキャッチにしてくれます。

アイキャッチやサムネイルの重複をなくし高速化

ブログに利用するアイキャッチ画像をFlickrやPicasaなどの外部サービスから貼り付けている場合、サムネイルやアイキャッチを重複生成する可能性があります。気づいていない重複画像を1本化して高速化できます。

Regenerate Thumbnails – サムネイルのリサイズで高速化

「Regenerate Thumbnails」はアイキャッチ画像のサムネイルのリサイズを簡単に実現できます。ブログの見栄えやテーマを変えたり、関連記事にサムネイルを設定した場合に便利です。

アイキャッチや掲載写真の加工・圧縮方法

ブログは内容が一番大切ですが、文章を説明するためやイメージしやすいようにアイキャッチ画像や写真などを掲載した方が読者に優しいです。画像(JPG)の簡単な編集・加工・圧縮方法の記事です。

PNGについてはまだ記事にしていませんが、加工には無料アプリ「Fotor」、圧縮には無料Webサービス「TinyPNG」や無料アプリ「ImageAlpha(Mac)」。「ImageOptim(Mac)」「PNGGauntlet(Windows)」も併用すると更に圧縮可能です。

過去アイキャッチもまとめて圧縮化

「EWWW Image Optimizer」は過去記事の画像をまとめて圧縮・最適化するWordPressプラグインです。ブログの画像ファイル容量を最適化できれば、それだけでブログ表示を高速化できます。簡単です。

その他 – lazyload、CSSスプライト

「lazy load」とは記事の画像を表示部分のみ読み込むことにより待ち時間を短縮する技術です。WordPressでもずばり「lazy load」というプラグインがあります。

私も「lazy load」プラグインを利用していました。しかし「W3 Total Cache」を導入後は少し表示が乱れたりしたので利用を停止しました。「W3 Total Cache」で画像もキャッシュされるので問題ありません。

「CSSスプライト」とは複数のアイコン画像などを1つにまとめることにより、HTTPリクエスト回数を減らせる技術です。導入は少し難しいですけど、Webサービスの出現により簡単に作成できるようになりました。(記事を追記:2013.9.18)

高速の飛行機

ソーシャルボタンを工夫して表示を高速化

今や必須になりつつあるソーシャルボタンの設置。しかし表示速度の点においてはマイナスです。そのソーシャルボタンをいかに効率よく設置するかによって高速化をはかることができます。高速化の前に導入から。

WP Social Bookmarking Light – プラグインで簡単設置

WordPressなら数分で複数のソーシャルボタンを同時に設置できます。ボタンのタイプは横型のみです。高速化には対応していません。

プラグインなしで横型・縦型ソーシャルボタンを設置

WordPressプラグインを使わずにソーシャルボタンを設置したい場合は下の記事を参考にしてください。ツイッター/Twitter、Facebook、Google+、はてブ(はてなブックマーク)、Pocketに対応しています。

FacebookのOGP設定をプラグインなしで設置

ソーシャルボタンを設置したらシェアした場合のタイトル、説明文、画像について最適化する必要があります。WordPressプラグインを使わないOGP設定を解説しています。WordPress以外のサイトでも応用できます。

ツイッターのTwitter Cards設定をプラグインなしで

Facebookだけでなく、ツイッターのOGP設定(Twitter Cards)も欠かせません。ブログ記事をシェア・リツイートされた時にサムネイル画像や説明文が表示されるのでクリック率も上がるかもしれません。

ソーシャルボタンのあと読み設定

ソーシャルボタンの読込みには負荷がかかるため、表示をあと読みすると体感速度がアップします。しかし「W3 Total Cache」と「CloudFlare」を導入すると「Rocket Loader」により不要になるので注意してください。


ソーシャルボタンを1つにまとめて高速化

記事の中に複数の同じソーシャルボタンを設置している場合、スクリプトを1つにまとめることができます。さらに各ソーシャルボタンを1つのコードに集約するとリクエスト回数も減ってブログ表示を高速化できます。

データベースの最適化、リビジョン停止で高速化

WordPressは使い続けていると、パソコンと同じように速度が遅くなったり処理が重くなったりします。これはデータベースに大量のゴミがたまってきているからです。たまに掃除・最適化する必要があります。

WordPressの自動保存やリビジョンを削除するプラグイン

WordPressのリビジョン機能は記事を保存するたびに履歴を残します。公開時だけでなく下書きや自動保存によりどんどんデータベースに蓄積されます。やがてはブログ表示速度を遅くする要因にもなりかねません。


記事でも紹介していますが、たまにプラグイン「Delete-Revision」も有効化して実行すると蓄積されたリビジョンを削除できて高速化につながります。

データベースの最適化により表示速度アップ

上のリビジョン削除以外にもデータベース全体の最適化を定期的に行うことにより表示速度の高速化をはかれます。データベースに精通している人は直接実施してもいいと思いますがプラグインも多数あります。

最適化だけなら「WP-Optimize(プラグイン新規追加から)」。データベースのバックアップもするなら「WP-DBManager」。データベースだけでなく全ファイルをバックアップするなら「BackWPup」が便利です。

参考:BackWPup – Webサイトを丸ごとバックアップできるWordPressプラグイン | ネタワン

まとめ:今日のゆめぴょんの知恵

このように一言で高速化といっても様々な方法の組み合わせになります。

上で挙げた以外にも、HTML、CSS、JavaScript、PHPなどの効率的な書き方など考慮するべき要素はまだまだあります。少しづつ記事にしていこうと考えていますので、今後もよろしくお願いします。

WordPressの高速化については次の記事もかなり役立ちます。興味のある方は参考にしてみてください。

WordPressを高速化する使い方!CDNサービスやプラグインまとめ | コムテブログ

ゆめぴょん(@yume_pyon)でした。
では、ばいちゃお! こてっZzz

タイトルとURLをコピーしました