iOSアプリ・Webシステム開発のイリテク

HOME > Web > WordPressを高速化する9つのステップ
2012.08.26

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

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

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

SPONSOR

高速化に役立つツール

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

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

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

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

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

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

2. CSSやJavascriptを圧縮する

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

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

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

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」」が便利です。

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

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

関連記事

イリテクはIT・経営に関する情報を発信しています!

  • follow us in feedly
    RSSで最新記事を取得

SPONSER

開発したWebサービス
記事を書いている人
入江 慎吾 イリテク(株)代表
Web/iOSエンジニア。単なる制作ではなく、お客さまの一員となって共に考え「攻めのIT投資」でビジネスを加速させます。
SPONSOR

最新記事
Facebook
Twitter
人気記事