calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

WordPressを高速化する使い方！CDNサービスやプラグインまとめ

  • 作成：2013/04/22
  • 更新：2018/03/31
  • WordPress >
WPSpeedUp

mod_pagespeed、CSSスプライト、CDN、圧縮、プラグイン…

2013年、ページが軽いサイトが上位表示されてきました。

「検索で10位以内に入っているサイト」を仕事の関係で1日に何百件と調べるのですが、2012年よりも明らかに「1～2秒台」が増えてきてます。

10位以内には、遅いサイトもありますが1、2秒台もざらです。今回は、WordPressの高速化を手早くするために、検討したいCDNサービス、導入必須のプラグインや計測ツール、ハウツーなどをまとめました。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

高速化するプラグイン
１．QuickCache
２．MOCache
３．LazyLoad
４．WPSuperCache
５．DBCacheReloadedFix
６．WPFileCache
７．HeadCleaner
８．BetterWordPressMinify
９．WPWidgetCache
１０．WPHyperResponse
CDNサービス
１１．ClaudFlare
１２．Akamai
１３．AmazonWebService
Googleのサイト高速化モジュール
１４．modpagespeed
CSS軽量化
１５．CSSの書き方を改善
１６．CSSスプライト
画像ファイルに有効期限を設定する
１７．Apacheの設定
.htaccess
１８．WordPressサイト用の.htaccess例
SNSボタン対策
１９．5秒経ったあと、SNSボタンを読み込む設定
サーバー容量圧迫を少なくする
２０．リビジョン機能を停止する方法
画像を圧縮する
２１．画像圧縮系ソフトやツール
２２．速度計測ツール

高速化するプラグイン

2013年に入り、ページ表示速度が早いサイトがますます上位表示されるようになってきました。ここでは２秒台を目指す為に導入するプラグインです。

Quick Cache

Quick_Cache

ページ表示毎にDBにアクセスしに行くのをやめて、自動的に作成されたキャッシュを参照しに行くようにしてくれる。以下のサイトに詳しい設定方法が記載されている。

2016/07/04：リンク切れのご指摘ありがとうございます！新しいリンクを追加しております。（Broken Link Thank you for pointing out! We have to add a new link.）

MO Cache

MO_Cache

7割も読み込みのリソースを奪う翻訳ファイル「moファイル」。このファイルをキャッシュし、次にアクセスされたときはそれを使いまわすので早い。

Lazy Load

Lazy_Load

文章中に画像を入れると読み込み速度は低下するけど、入れないわけにもいけない。このプラグインは画像が閲覧者の画面内に表示された後に、画像を読み込む。

WP Super Cache

WP_Super_Cache

劇的に早くなったのがこれ。このプラグインはエラーが出やすいということでしたが、現在は改良されているので問題なく動作。僕もガッツリいれてます。

WordPressがページ表示のために吐き出す処理をすべてキャッシュ（http/php/MySQL/php/レスポンス）するので随分早く表示されるように。

以前は不具合の問題があったのですが、今は問題ありません。どうしても不安であれば、WordPressの自動バックアッププラグインBackWPupの使い方 | WP SEOブログで解説してあるように自動バックアップ。

DB Cache Reloaded Fix

DB_Cacheeloaded_Fix

データベースをキャッシュし管理画面すら軽くしてくれる。プラグインや記事が増えてくると、WordPressの管理画面がドンドン重くなります。効率化のために必須のプラグイン。

WP File Cache

WP_File_Cache

データベースへのクエリを減らすプラグイン。上で紹介したMOCacheと一緒にインストールすることで効果を発揮。

Head Cleaner

Head_Cleaner

複数のCSSとJSを整理し順番を最適化したり、JavaScriptをフッターに移動させるプラグイン。チェックするだけで使えるので簡単。

WP Minify

WPify

複数のCSSやJavascriptファイルを1つにまとめて圧縮、軽量化する。以下のサイトはトラブルが生じたときの対処方法なども書かれている。

WP Widget Cache

WP_Widget_Cache

ウィジェットまでもキャッシュしてしまおうというプラグイン。有効化した後に、時間を3000くらいに設定してみよう。

WP Hyper Response

WP_Hyperesponse

下記サイトによるとWordPressサイト及び管理画面のヘッダ（CSSファイルを読み込んだ直後）にPHPの flush() 関数を実行するらしいです。

CDNサービス

ClaudFlare

ClaudFlare

CloudFlareを使って高速化する方法。詳しい使い方はCDN ~はじめてのCloudFlare（クラウドフレア）導入~ - SINAPlogに。

Akamai

Akamai

Geekなぺーじ:みんなが知らずに使ってるAkamaiによると、「Web閲覧の高速化とWebサーバの負荷軽減を実現するソリューションを世界的に提供している」会社とのこと。回線強化というか導入している会社は多いみたいです。

Amazon Web Service

Amazon_Web_Service

ブログの高速化に役立つAWS(アマゾン ウェブ サービス)のCDNであるCloudFrontの設定について。

Googleのサイト高速化モジュール

mod_pagespeed

mod_pagespeed

面倒な高速化処理を自動化させるモジュール。サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、どんなサイトでも高速化出来る。

CSS軽量化

CSSの書き方を改善

高速化を実現する初心者でもすぐできる、スタイルシートの書き方。

僕が高速化のためにやっていること３つ↓

  • @importを使わない
  • 空白、改行を削除
  • 行数を短くする

CSSスプライト

CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの使い方です。

画像ファイルに有効期限を設定する

Apacheの設定

有効期限の設定により、クライアントのブラウザがキャッシュをより有効に利用するようになりトラフィックを軽減させることが可能。以下のページ中央あたりに、書いてあります。

.htaccess

WordPressサイト用の.htaccess例

コンテンツの圧縮転送、画像のキャッシュ設定など。

SNSボタン対策

5秒経ったあと、SNSボタンを読み込む設定

速度チェックでよく引っかかるのが、ソーシャルボタンの外部ファイルなど。どうにかならないかと悩んでいましたが、後読みで出来る方法を発見。

サーバー容量圧迫を少なくする

リビジョン機能を停止する方法

他にリビジョンの本数を制限する方法なども。

画像を圧縮する

画像圧縮系ソフトやツール

高速化する上で一番手軽に出来る画像圧縮。PNG/JPEG/GIFなどを簡単に圧縮できるもの１３個です。ちなみに今回のページで使っている画像の平均ファイルサイズは「7KB」です。

サイト速度 計測ツール

ページ速度をチェックする定番ツールを載せておきます。

以上、高速化のために出来ること。WordPressの使い方でした。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。