自分ハックで毎日を楽しく!イリテク!

HOME > IT/Web > WordPressを高速化する9つのステップ
2012/08/26 (2016/08/19更新) タグ: , , , ,

WordPressを高速化する9つのステップ

このエントリーをはてなブックマークに追加

WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7sかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。

SPONSOR

高速化に役立つツール

まずはじめに、改善に役立つツールを2つご紹介します。

一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。

次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で使われていたツールのようです。

PageSpeed Insightsを使った具体的な改善方法はこちら。

[保存版] PageSpeed InsightsでWebサイトを高速化するまでのすべて。0点→90点へ改善!

1. 画像を圧縮してサイズを軽くする

まずは王道。読み込む画像サイズが小さいほど、表示も早くなります。PNGを圧縮してくれる「ImageAlpha」というソフトを使えば、見た目に影響を与えず3分の1程度まで圧縮することが可能です。

>> PNG画像のファイルサイズが1/3に!PNG画像を超軽量化する「ImageAlpha」

2. CSSやJavascriptを圧縮する

CSSやJavascriptもサイズを小さくすることで、読み込み時間を短縮します。

CSSの圧縮は「CSS Minify!!
Javascriptの圧縮は「Online Javascript Compression Tool
というツールでかんたんに圧縮できます。

頻繁に変更することが多い場合は、元々のファイルを別名で保存して残しておきましょう。

JavaScriptやCSSを圧縮・展開してくれるサービスあれこれ

3. CSSスプライト

ブラウザは画像の数に応じて、何度もリクエストを投げて繰り返し読み込みを行います。この回数が多いほど、時間がかかりますが、画像を一つにまとめておいて、CSSで画像を表示する範囲を操作することで読み込みを早くする技術をCSSスプライトといいます。

>> CSSスプライトについてあれこれ。
>> CSSスプライトで画像を円滑に表示させる

4. CSS・JavaScriptファイルの読み込み順

CSSは複数同時に読み込めますが、JavaScriptは一つずつしか読み込めません。

例えば

<link rel="stylesheet" type="text/css" href="cs1.css" />
<script type="text/javascript" src="js1.js" />
<script type="text/javascript" src="js2.js" />
<link rel="stylesheet" type="text/css" href="cs2.css" />
<link rel="stylesheet" type="text/css" href="cs3.css" />

とあった場合、以下のように読み込みが行われます。

順番を変えるだけで、読み込み回数を削減できます。

5. gzip圧縮

サーバー上でCSSやJS、HTMLファイルをgzip圧縮してサイズを小さくして、ブラウザで解凍して表示します。転送量が下がるため、表示の高速化につながります。70〜80%も圧縮してくれます。

gzip圧縮はhtaccessでの設定や、Apacheのmod_deflateモジュールでも設定することができます。

>> Webサイトの.htaccessをいじってGZIP圧縮を使う
>> 【Apache】サイトのコンテンツ全てをgzip圧縮する

gzip圧縮できたかどうか確認するにはサイトがgzip圧縮されているかどうかをテストできる「GIDZipTest」が便利です。

サイトがgzip圧縮されているかどうかをテストできる「GIDZipTest」

6. Expiresヘッダーを追加する

画像やJS、CSSファイルなどに期限をつけて、ブラウザ側にキャッシュをしてもらいます。そうすることで、2回目以降はサーバーにリクエストを行わないため、負荷もかかりませんし、表示も早くなって一石二鳥です。

>> Expiresヘッダを追加しよう!

7. nginxを利用する

専用サーバーやVPSを利用している場合は、nginxという超軽量のWebサーバー+リバースプロクシがおすすめです。nginxは静的ファイルの扱いが非常に得意で、apacheとは比べものになりません。

>> さくらVPSとnginxリバースプロクシで最速WordPressブログを作る方法(ベンチマーク付き)

うちのブログはapache+nginx兼用でリバースプロクシを使って、かつ静的なファイルはnginx、HTMLやphpはapacheで処理を行っています。

8. APCを使う

APCはコンパイルしたファイルをキャッシュして、phpの動作を速くするというものです。これも専用サーバーやVPSを利用しているならぜひ。

>> php-apcでPHPの高速化 on CentOS5

9. WordPressのプラグインを使う

高速化のためのプラグインはたくさんありますが、3つご紹介します。

一つ目はW3 Total Cache。ほかにもキャッシュプラグインは多数ありますが、設定が豊富な点が便利です。また、WordPressを日本語で利用すると、翻訳の時点で読み込みが遅くなってしまいます。この部分のキャッシュをして高速化してくれるのがMO Cache。さらにWP Hyper Responseで表示側だけでなく、管理画面も早くなります。

これらの対策をしてもブログが重い原因は、そもそもサーバーのスペックが弱いのかも。サーバーを変えるとWordPressはサクサク快適になります。

Web制作会社のイリテクがお薦めしているレンタルサーバー

もしくは、異常に重たい場合、サーバーアタックを受けているかもしれません。

サーバーが高負荷の原因はWordPressのxmlrpc.phpを狙った攻撃だった

WordPressやサーバーの状況等に応じて、試せそうなものがありましたら、ぜひ試して高速化を楽しんでください!

この記事をシェアする
このエントリーをはてなブックマークに追加

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

こちらの記事もおすすめです

SPONSER

開発したWebサービス
記事を書いている人
入江 慎吾 ITゼネラリスト
イリテク(株)代表。webシステム、デザイン、iOSアプリ開発に携わって15年目。複数の企業と専属エンジニア契約中。自社で見積請求CLOUD PAPER運営。iPhoneアプリ全国総合ランキング3位を記録。イリテクブログは月間約5万PV。(もっと詳しく
SPONSOR
最新記事
Facebook
Twitter
おすすめ記事