WordPressのサイト表示速度を高速化させるために行っている施策まとめ

あなたのサイトの表示速度を向上するためのTipsをいくつかご紹介します。全て弊サイトで実際に行っている施策ばかりです。サイトの表示速度は、SEOにとっても重要な要素です。ぜひ挑戦してみてください。

WordPressアップロード前の下準備

画像ファイルの圧縮

WordPressに限らず、Webサイト表示のロード時間の大部分を要するのは、容量の多い画像ファイルです。出来る限りアップロード前に圧縮を済ませておくことが望ましいです。画像を圧縮するソフトウェアやWebサービスは星の数ほどありますが、オススメはPNGファイルが「pngquant」、JPEGファイルが「jpegoptim」です。

pngquant、jpegoptimのインストール

どちらもCUIで使用するツールです。OS Xのパッケージ管理ソフト「Homebrew」でインストールできます。Homebrewのインストールについては、初めてのgulp.js!MacでCSSファイル、JavaScriptの圧縮を行おうを参照してください。

brew install pngquant jpegoptim

使用方法

どちらもターミナルから使用します。「pngquant」は、PNGの色数を減らすオプションもありますが、デフォルトのままでも十分な圧縮が期待できます。

pngquant --force XXXX

「jpegoptim」は、メタ情報を全て削除した上で、画質を80%程度に落とすのがオススメです。これ以上画質を落とした場合、劣化が気になり始めます。

jpegoptim -f -s -m80 XXXX

JPEG形式とPNG形式の使い分け

そもそもJPEG形式とPNG形式はどのように使い分ければ良いのでしょうか。

JPEG形式は色数が多い写真のような媒体に向いています。高精細な媒体を使用する場合は、JPEGを選びましょう。iPhoneのカメラアプリで撮影した写真はJPEGで保存されます。

PNG形式は色数が少ないイラストのような媒体に向いています。iPhoneのスクリーンショットはPNG形式で保存されます。写真とスクリーンショットで種類が違う理由はここにあるのです。

1600×1059サイズのJPEGファイルのもともとの容量は約200KBですが、あえてPNG形式で保存し直すと、容量は1.3Mと約7倍近くに膨れ上がります。画像を適切に扱うだけで、画像ファイルのサイズは増加したりも減少したりもしますので、注意しましょう。

画像ファイルのリサイズ

例えば、 <div> タグの横幅が200pxしかないにも関わらず、同タグの中に横幅が1,000pxの画像を配置することは、リソースの無駄遣いになります。適切な横幅のボックスに適切なサイズの画像を配置することが重要です。

WordPressには便利なオプションが用意されています。例えば、上記の <div> タグに横幅一杯の画像を表示する予定であれば、functions.phpに以下を追加しましょう。

add_image_size( 'custom-size', 200, 9999 )

と、指定しておくことにより、新規アップロード時に横幅200px(縦幅は任意)の画像ファイルを自動生成してくれます。ただし、新規アップロード時のみです。既にアップロード済みの画像ファイルには適用されませんので注意してください。

the_post_thumbnail( 'custom-size' ),

上記の画像ファイルを読み込むためには、 the_post_thumbnail() 関数を使います。「custom-size」という名称が定義されている場合には、事前に add_image_size で指定した画像が読み込まれます。

なお、WordPressではデフォルトで3種類の画像サイズが定義されており、画像ファイルの新規アップロード時には3種類のファイルが自動生成されるようになっています。もし、必要としないのであれば「設定」→「メディア」から全て空白にしておきましょう。

Force Regenerate Thumbnails

もし、既にアップロード済みの画像に対して、サムネイルのサイズを変更したい場合には、WordPress › Force Regenerate Thumbnails « WordPress Pluginsがオススメです。古いサイズのサムネイル画像を削除した上で、新しいサイズの画像ファイルを自動生成してくれます。

スタイルシート、JavaScriptの圧縮

塵も積もれば山となる、スタイルシート、JavaScriptもその対象です。Webサイトで読み込むスタイルシート、JavaScriptのサイズが小さければ小さいほど、そして少なければ少ないほどサイトの表示速度は向上します。

ブラウザはHTMLファイルを上から下に順番に読み込んでいくため、HTMLの上位に大きなサイズのスタイルシートやJavaScriptが存在する場合、そこで読み込みが止まってしまいサイト表示速度が著しく遅くなります。

よって、ページのレンダリングに必要なスタイルシートは上位で、ページのレンダリングに不要なJavaScriptは下位で読み込むのが、サイト表示速度を上げる定石とされています。

スタイルシートの圧縮

スタイルシートの圧縮については初めてのgulp.js!MacでCSSファイル、JavaScriptの圧縮を行おうでご紹介した「gulp.js」をオススメします。手元に「gulp.js」の実行環境がない場合は、Webサービスを利用する手もありますが、この際ですから是非「gulp.js」の環境構築をオススメします。手間が随分違いますよ。

また、上記はスタイルシート(CSSファイル)の圧縮についてのみ触れていますが、JavaScriptも同様に「gulp.js」で圧縮できます。

gulp-uglify

gulp-uglifyは、JavaScriptを圧縮してくれる便利なプラグインです。インストールは、その他のgulpプラグインと同様です。

npm install gulp-uglify --save-dev

また、gulpfile.jsには以下のように記述します。

var gulp = require('gulp');
gulp.task('jsmin', function() {
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');
    gulp.src('wordpress/wp-content/themes/macious/src/js/*.js').pipe(uglify()).pipe(rename({
        suffix: '.min'
    })).pipe(gulp.dest('wordpress/wp-content/themes/macious/js'));
});

圧縮前のファイルを残すために、拡張子の前に「.min」という文字列を付与しています。このように、「gulp.js」を使用すれば全てのタスクを自動化できます。

Webサーバの設定

Webサーバ側の設定です。今回は弊サイトを運営しているエックスサーバーに採用されているApacheについて触れます。その他のWebサーバについても同様の設定が可能ですが、検証できる環境がありませんので、今回はApacheのみとさせてください。

ブラウザキャッシュの活用

JPEGファイル、PNGファイル、スタイルシート、JavaScriptなど、一度アップロードしてしまえば、初期構築時を除き、なかなか更新することはありません。このような「静的」リソースは、一度表示した後は、ブラウザ(すなわちクライアント)のキャッシュから表示してもらう方法が高速です。

キャッシュが無効の場合、サイトへアクセスするたびに画像やスタイルシートがダウンロードされてしまうため、サイト表示に時間がかかります。スタイルシート、JavaScriptは結構変更することが多くて、という場合でも、画像ファイルだけでもキャッシュするとサイト表示速度向上に大きな効果が望めます

Webサーバ(Apache)の設定は「.htaccess」ファイルで行います。WordPressインストールディレクトリ直下のこのファイルを編集してください。なお、# END WordPressより上の項目は、サーバ初期構築時、WordPressインストール(パーマリンク設定時)に自動更新されたものです。誤って編集しないよう注意しましょう。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
</IfModule>

これでブラウザ側に画像ファイルがキャッシュされるようになります。サーバ側に高負荷をかけることもなく、ユーザーのサイト表示の体感速度も大幅に向上するためオススメです。(ただし、mod_expiresがサポートされているWebサーバのみで有効です)

圧縮可能なリソースの圧縮

画像ファイルはブラウザにキャッシュさせることでサイト速度を向上させることができましたが、その他のコンテンツはどうすればよいでしょうか。Apacheを始めとするWebサーバにはコンテンツを圧縮して転送する技術があります。これを使用します。

具体的には、.htaccessに以下のように記述します。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

画像ファイルは圧縮した上でアップロードしているため、Webサーバによる圧縮の対象外としてます。また、mod_deflateはサーバのCPU使用率を向上させる可能性があります。設定を間違えると、特にレンタルサーバの場合、第三者が害を被ることがありますので注意してください。mod_deflateについては以下のサイトが参考になりました。

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

Webサイトの高速化に関して、以前の投稿で「Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法 」を解説しました。 今回は同じくApacheのモジュール mod_deflate について解説します。 mod_deflate はコンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、ボトルネックがCPUの処理能力の場合は逆にレスポンスが低下します。 そのため導入後のリソースの監視と速度測定が必要になります。ただ、最近の高速なCPUであればどちらかと言えば回線がボトルネックになるため、多くの場合は mod_deflate の導入によって高速化されます。 このページではmod_deflateの基本的な使い方について解説します。詳細はApache公式ページにある「mod_deflateのページ 」にあります。興味のある方はご覧ください。 サーバの設定を変更することができる場合はモジュールの読み込みを「 httpd.conf」に記述しますが、このページではレンタルサーバで「.htaccess 」に記述する方法を解説します。 基本的な書式 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE 「 IfModule」でモジュールを読み込み。 「 SetOutputFilter」でモジュール「 DEFLATE」を指定します。 「 AddOutputFilterByType」で圧縮を有効にするコンテンツの「 MINIタイプ 」を指定します。 MINIタイプはスペース区切りで連続して書いたり、1行ごとに書くこともできます。 AddOutputFilterByType DEFLATE text/plain text/html 上下の例はどちらも同じ指定 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html mod_deflate は多くのサーバで運用されており、有効な設定が確立されています。手っ取り早く有効にしたい場合は、以下の設定を利用しましょう。 SetOutputFilter DEFLATE # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外 BrowserMatch ^Mozilla/4.0[678] no-gzip

WordPressの設定

最後は、WordPressの設定です。上記で補えない箇所を、WordPressやjQueryのプラグインを使用して高速化します。

001 Prime Strategy Translate Accelerator

WordPressは、世界各国で使用されている万国共通のCMSです。そのため、日本語のみならず英語やドイツ語といった外国語をサポートしているのが特徴です。そのために、WordPressは環境に応じて言語を使い分けているのですが、この言語の翻訳に多少時間を要します。

そこで、この翻訳ファイルを改めて翻訳しないようキャッシュして表示を高速化するのがこのプラグインです。公式リポジトリに登録されているプラグインのため、WordPressのダッシュボードからインストールできます。オンにしておくだけで効果が表れますので、ぜひ導入しましょう。

001 Prime Strategy Translate Accelerator

This plugin makes the translation cache files, and shortens the execution time to display of your WordPress site. Functions Make cache files of the translation to shorten reading time to display faster. In the environment in which APC is installed, you can use the cache function of APC, and your site will operate more faster.

なお、WordPressのデバッグモードをONにしている場合で、かつこのプラグインを利用している場合、以下のような警告が表示されます。動作に影響はありませんが、本番環境ではデバッグモードはOFFにしておきましょう。

Strict Standards: Redefining already defined constructor for class Prime_Strategy_Translate_Accelerator in /var/www/wordpress/wp-content/plugins/001-prime-strategy-translate-accelerator/001-prime-strategy-translate-accelerator.php on line 34

wp-config.php

define( 'WP_DEBUG', false );

EWWW Image Optimizer

画像ファイルの圧縮に使用するプラグインです。冒頭で述べた通り、できる限りローカル環境において、画像ファイルの圧縮、最適化を行った上でアップロードすることが望ましいですが、環境がない場合はこのプラグインを使いましょう。

アップロードした画像を自動で圧縮、最適化してくれます。投稿以外のファビコンで使用している画像など、意図せぬところにまだ最適化、圧縮の余地が残されている画像が存在したりするものです。導入しておいて損はないプラグインです。

EWWW Image Optimizer

The EWWW Image Optimizer will increase your page speeds by way of image optimization. Increased page speeds can result in better search engine rankings, and will also improve conversion rates (increased sales and signups). It will also save you storage space and bandwidth. While EWWW I.O.

WP-Optimize

WordPressは、MySQLというリレーショナルデータベースを使用しています。データベースは、データの挿入、削除を繰り返すと、ハードディスクのように無駄な空き領域がうまれたり、検索パフォーマンスが著しく低下する可能性があります。

そのため、MySQLも定期的にメンテナンスを行うことが望ましいのですが、データベースに直接アクセスするのは敷居が高いことがよくあります。(エックスサーバーはphpMyAdminからアクセスできます)

そんなときに便利なのが、このプラグインです。一時的に使用されたテーブルのレコード削除や、データベース全体の最適化を行ってくれます。常時オンにしておく必要性はありませんが、導入しておいて損はないプラグインといえます。

WP-Optimize

WP-Optimize is an effective tool for automatically cleaning your WordPress database so that it runs at maximum efficiency. Major Features Removes all unnecessary data (e.g.

ソーシャルネットワーク

最後にソーシャルネットワークのシェアボタンの設置についてです。Twitter、Facebook、Google+、はてなブックマークなど、まともに公式サイトのボタンを設置して取得しようとすると時間がかかってしまいます。

そのため、弊サイトではjQueryを使用してTwitter、Facebook、Google+、はてなブックマークのシェア数を非同期で取得する方法のまとめでもご紹介したように、全て非同期による読み込みを行い、サイト表示速度向上を図っています。ぜひこちらもご覧いただければと思います。

その他、非同期で読み込む方法は既に定石化されています。下記のサイトの他、多数のサイトで紹介されていますので、読み込む時間が遅く感じる場合には参考にされてみてください。

| 最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみたゆっくりと…

ひょんなことから normalize.css のページを覗いていたら、Google Analytics、Google +1、Twitter、Facebook の各 JavaScript をまとめて非同期で読み込んでいるスクリプトが使われているのを見つけました。 「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 でも書きましたが、スクリプトの非同期読み込みは、Google Analytics のコードスニペット で一応の決着を見た感じで (実は、標準化を巡って第2ラウンドが始まってはいますが…)、今や Google+1 はもちろん、Facebook も同様の手法を推奨しています。 調べてみたら、「それなら Twitter のスクリプトだって同じように読めばいいじゃないか」 という感じでどんどん まとめスクリプト の改良が進んできたようです。 我が日本としてはこれに 「はてな」 を加えるしかない!、ということで作ってみましたので、公開したいと思います。 背景と経緯 事の発端は、冒頭の normalize.css の作者であり HTML5 Boilerplate の開発者でもある Nicolas Gallagher が2011年6月 Gist に投稿した 次のスクリプト です。 その日のうちに、同じく HTML5 Boilerplate 開発メンバーでもある Mathias Bynens が乱入し、コードが洗練されていきました。彼は、2010年4月のブログ記事 「Optimizing the asynchronous Google Analytics snippet」 で、Google Analytics のコードスニペットに関して、これでもかというぐらいに無駄なコードをそぎ落とす記事を書いていますので、この手のスクリプトにかけては造詣が深いのです。 ただこの時点ではまだ、Google Analytics、Google +1、Facebook の3つだけが非同期読み込みの対象でした。 一方、Object-Oriented JavaScript の著者である Stoyan Stefanov は、2011年9月にブログ記事 「Social button BFFs」

まとめ

いかがでしたでしょうか。少しでもWordPress運営者の皆様の参考になればと思います。

上記の施策は一例です。その他にも様々な施策を行われているところもあると思います。もし、そのような事例があれば、ぜひコメント欄または @おったんまで教えてくださいね。

この記事が気に入ったら
いいね ! しよう

Twitter で