サムネイルを適切なサイズにすることで高速化できるとしたら?

 

WordPressテーマの中には、トップページやカテゴリアーカイブなどで、記事のアイキャッチ画像を自動的に小さく表示してくれる便利なテーマがたくさんあります。ただし、このサムネイル画像(小さい画像)、テーマによってはフルサイズのアイキャッチ画像をCSSなどで小さく見せているだけということも有りえるのです。

極端な例を出すと、アイキャッチに利用する画像が、ものすごーく綺麗で画素数の高い写真で実は10MBあります!という場合でも、見かけ上は小さく表示することだって可能です。ただし、この際のデータ通信量が少なくなるか?というとそうでは有りません。きっちり10MBかかってしまい、せっかく来てくれたユーザーさんにとって、すごく不親切なページになってしまいます。

今回は、WordPressのメディアアップローダーに備わっているサムネイル作成機能を利用した、テーマに最適な画像の作成と使用により、ページの表示速度をアップさせるのが目標です。

流れをざっくりまとめると

  1. WordPressテーマで利用している画像サイズを調べる
  2. メディアアップローダーの設定を変更
  3. 既にアップしている画像を一括でリサイズ
  4. テーマが読み込むサムネイル画像を修正

といった感じです。

 

サムネイルの最適化前のページ表示速度

今回の記事は、『 知らないと損する!WordPress高速化の10のルールと14の方法』における2つ目の方法、「 テーマに沿った画像の選択をするに対応した内容になります。当ブログで、本日時点(2月16日)で実施している高速化は、1つ目の方法である「 画像の最適化のみのため、まずは下記の記事の最終時点でのページ速度を見ておきましょう。

PageSpeed Insight のモバイルの点数は50点。

image-compression-08

パソコンは49点

image-compression-09

GTmetrixは、D69%/D69%、ロードタイムは5.0秒、ページサイズは1.82MBとなっています。

image-compression-10

 

スポンサーリンク

手順1:テーマに必要な画像のサイズを調べよう

それではさっそく、具体的な作業の流れを見ていきましょう。

まずは、テーマがサムネイルで利用している画像サイズを調べます。いろいろと方法は有りますが、一番簡単なのは、Google ChromeやFirefoxといったブラウザの開発者ツールを利用する方法です。今回は、Firefoxを例に手順を見ていきましょう。

 

サイズを調べたいページでF12をプッシュ

optimal-thumbnail-size-01

「ページから要素を選択します」をプッシュ

optimal-thumbnail-size-02

調べたい要素をクリックするとサイズが判明

optimal-thumbnail-size-03

他に調べたいところがあれば同じことを繰り返す

optimal-thumbnail-size-04

 

スポンサーリンク

手順2:メディアアップローダーの設定変更

続けて、WordPressに画像をアップ(メディアを追加)する際に自動で作成されるサムネイルのサイズを設定しましょう。※設定できるサイズは3種類なので、もしそれ以上に種類が必要、という場合には、似たようなサイズのものについて間を取る、もしくはどちらかに合わせる、等の選択が必要になります。

 

WordPressにログインしたら「設定」⇒「メディア」をクリック

optimal-thumbnail-size-05

「サムネイルのサイズ」「中サイズ」「大サイズ」に数値を記入して変更を保存をクリック(もしサイズの指定を0にした場合は、そのサイズのサムネイルの作成を中止することもできます。)

optimal-thumbnail-size-06

 

手順3:過去にアップした画像を一括リサイズ

手順2の注意点としては、サムネイルのサイズの設定を変更すると、それ以降にアップした画像については、設定に従ったサイズの画像を生成してくれますが、設定する前の画像は変更してくれない、ということ。そこで今回は、メディアにアップしている画像を一括でリサイズしてくれる、Regenerate ThumbnailsというWordPressプラグインを紹介します。

 

サイドメニューの「プラグイン」⇒「新規追加」をクリック

optimal-thumbnail-size-07

「 Regenerate Thumbnailsと検索し今すぐインストールをクリック

optimal-thumbnail-size-08

プラグインを有効化をクリック

optimal-thumbnail-size-09

サイドメニューの「ツール」の中に増えたRegen. Thumbnailsをクリック

optimal-thumbnail-size-10

すべてのサムネイルを再生成するをクリック

optimal-thumbnail-size-11

サムネイルの作成が開始される

optimal-thumbnail-size-12

無事に一括リサイズが終了

optimal-thumbnail-size-13

 

補足
もし「EWWW Image Optimizer」などの画像圧縮用のプラグインを導入している場合は、再圧縮が必要となりますのでご注意下さい。また、プラグインの説明文にも記載がありますが、過去に生成されたサムネイル画像は自動で削除されませんので、FTPなどでアクセスして、自分で削除する必要があります。

 

手順4:テーマで利用する画像を修正

WordPressでサムネイル画像を呼び出すタグは以下の通り。

 

そこで、自分のテーマのテンプレートでサムネイルを指定している箇所を探してみる。当ブログはマテリアルを利用しているので、「 loop.phpと「 cat_lists.phpを修正する必要がある。修正後の各テンプレートの該当箇所の記述はこちら。

 

テーマで利用する画像の最適化で表示速度は改善したのか?

モバイルは50点のまま

optimal-thumbnail-size-14

パソコンは49点→59点へ

optimal-thumbnail-size-15

GTmetrixは、D69%→C78%/D69%→C70%、ロードタイムは5.0秒→4.5秒、ページサイズは1.82MB→1.66MBとなっています

optimal-thumbnail-size-16

今回の施策で効果を発揮したのは、パソコンでの閲覧についてですね。数値上はだいぶ改善された印象ですが、ロードに4.5秒……。お、遅い……。

 

TSUNJI(@tsunji1983)的まとめ

WordPressテーマに最適な画像サイズを探し、テンプレートをカスタマイズする方法について紹介しました。

本来は、ブログにアップする前に画像を圧縮する程度で問題無いのかもしれませんが、マテリアルのように画像をたくさん利用するWordPressテーマでは、こういった細かい最適化を継続し、表示スピードを向上させていく必要があります。

例えば、自分のブログを往訪するユーザーは、パソコンの方が多いのか?それともスマホの方が多いのか?など想像力を働かせながら、よりよいブログを目指して頑張りましょう。

 

以上、TSUNJI(@tsunji1983)でした。