[試] サイト表示速度を高速化する方法 | 画像最適化による表示速度改善

[試] サイト表示速度を高速化する方法 | 画像最適化による表示速度改善
photo credit: Pörrö via photopin cc

こんにちは、marubon(@marubon_jp)です。

サイト表示速度を高速化する手法の一つとして、画像の最適化があります。

表示速度改善手法の中でも比較的効果が大きく、簡単なのですが対応されていないサイトが多く見受けられます。Googleは、サイト表示速度を検索順位決定の一指標として採用しており、SEOの観点でも画像の最適化は重要です。

今回は、WordPressのテーマカスタマイズとプラグインの組み合わせにより、画像最適化を自動化し、対応負荷を大幅に軽減する方法を紹介します。

SPONSORED LINK

アウトライン

本エントリのアウトラインです。

  1. サイト表示速度高速化のための画像最適化とは
  2. 画像サイズを適正化する効率的な方法
  3. 画像を圧縮する効率的な方法
  4. まとめ

サイト表示速度高速化のための画像最適化とは

Webサイトの表示高速化には、基本的に「データ容量の削減」、「HTTPリクエスト数の削減」、「各処理プロセスの速度向上(HTTPリクエスト~Webブラウザ上の描画)」の3つを柱として、これらをブレイクダウンした施策を実施します。

サイト表示速度高速化のための画像最適化は、画像の「データ容量の削減」と「各プロセスの処理速度向上(Webブラウザ描画の高速化)」のために以下の対応を行います。

画像サイズ(縦、横)の適正化
画像を表示サイズにリサイズします。(表示サイズとソース画像のサイズを一致させます)。HTMLやCSSで画像をリスケールし縮小表示させる場合と比較して、データ容量削減による画像ダウンロード時間短縮リスケール処理削減によるブラウザ描画時間の短縮がはかれます。尚、Retina対応を考慮する場合はこの限りではなく、表示サイズの2倍の画像を準備し、リスケールします。
画像の圧縮
画像圧縮によりデータ容量を削減し、ダウンロード時間を短縮します。

画像サイズを適正化するための効率的な方法

画像リサイズ作業は、リサイズした画像の管理まで考えると大変面倒な作業ですが、WordPressの機能を使うと自動化でき負荷を大幅に軽減することができます。

WordPressは、画像がアップロードされると複数のサムネイル(※)を自動生成します。WordPressでは、この対象サイズを追加する機能が提供されており、これを応用して必要なサイズ(表示サイズの画像)を自動生成することができます。

これを使用すれば、執筆者はわざわざ画像をリサイズしてアップロードするのではなく、元画像をアップロードするだけで必要なサイズの準備が完了します。

※デフォルトでは、「大サイズ」、「中サイズ」、「サムネイルのサイズ」の3サイズが生成されます。このサイズは、WordPress管理画面のサイドバー[設定]→[メディア]から確認及びサイズ変更ができます。

必要な画像サイズの生成とその画像の利用には、使用中のWordPressテーマをカスタマイズします。

  1. カスタム画像サイズの追加(functions.phpに実際に表示するサイズを指定)
  2. カスタム画像サイズの参照(single.phpやhome.php等のテーマ内での出力コード書き換え)

カスタム画像サイズの追加

functions.phpに必要なパラメータを添えて、以下のコードを追記します。

$name … 新しい画像サイズの名前
$width … 画像の幅(ピクセル単位)
$height … 画像の高さ(ピクセル単位)
$crop … 画像の切り抜きを行うか否かを指定:true または false

以下は、設定例です。画像を中央切り抜きで横(90px)x 縦(90px)にリサイズする設定です。thumbnail-90×90は、この画像を参照する時に使用する画像名です。私は、サイズがわかりやすいように<画像の用途>-<サイズ横>x<サイズ縦>とすることが多いです。

余談ですが、すでにアップロード済みの画像に関しては、新規追加サイズの再生成が自動で行われません。画像は、アップロード時にリサイズされる仕様になっているためです。

再アップロードしてもよいですがあまりに非効率なので、以下サムネイルを再生成してくれるプラグインの利用をおすすめします。

WordPress › Regenerate Thumbnails « WordPress Plugins

カスタム画像サイズの参照

使用中テーマ(single.php、home.php、sidebar.php等)の画像表示部分のコードを設定したカスタム画像サイズを参照する様に書き換えます。

$size … 画像サイズの名前

あらかじめ設定した画像サイズの名前を指定することで、リサイズされた画像を参照するHTMLコードが出力されます。

例として上述した画像(thumbnail-90×90と命名した画像)を出力する場合は、以下の様に画像名を引数に渡します。

以下は、出力されるHTMLコードの例です。

画像を圧縮する効率的な方法

上述した画像サイズの適正化は、リサイズはしてくれても圧縮はしてくれません。できれば、WordPress側で画像の圧縮まで自動でやってもらいたいものです。

実はその方法が存在します。WordPressのプラグイン「EWWW Image Optimizer」を使用します。

前述した画像サイズ適正化とこのプラグインを組み合わせることで、画像リサイズと圧縮をまとめて対応できます。

執筆者は元画像のアップロードのみ対応すればよく、画像の最適化を維持しながらのサイト運用が非常に楽になります

WordPressプラグイン EWWW Image Optimizer

このプラグインは、オープンソースの画像最適化コマンド(jpegtran、optipng、pngout、gifsicle等)を使用して、画像(jpeg、png、gif)を圧縮します。上述した画像アップロード時にWordPressによって自動生成される複数のサムネイルをまとめて最適化してくれます。

WordPress › EWWW Image Optimizer « WordPress Plugins

インストール後、[設定]→[EWWW Image Optimizer]で各種画像最適化コマンドが利用可能となっているか確認します。

method-speed-up-display-of-web-site-image-optimization-02

これまでの画像を一気に圧縮したい場合は、[メディア]→[Bulk Optimize]から”Start optimizing”を選択します。画像が順次圧縮されていきます。尚、画像数が多い場合、完了するまでそこそこの時間と負荷がかかるので、共用レンタルサーバを使用している場合は負荷が低い時間帯を狙って実施した方がよいかもしれません。

method-speed-up-display-of-web-site-image-optimization-03

個別に圧縮することも可能です。[メディア]→[ライブラリ]のメディア一覧にImage Optimizerのカラムが追加されています。そこの最適化のリンク(”Optimize”ないし”Re-optimize”)を選択します。この画面で各メディアの圧縮状況を確認することができます。

method-speed-up-display-of-web-site-image-optimization-04

まとめ

サイト表示速度を高速化する方法として、WordPressで画像サイズの適正化と画像の圧縮を行う方法を紹介しました。

WordPressのテーマカスタマイズとプラグインを組み合わせることにより、画像最適化を自動化し、対応負荷を大幅に軽減する方法でした。