【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy

Hammyは、スマホ閲覧時に表示する画像を、PC閲覧時よりもサイズの小さなものに置換するプラグイン。WordPressサイトのモバイル閲覧時における表示高速化に大きく貢献します。

注意：2017.7.13現在、2年以上もの長期にわたってプラグインの更新が停止しているので、作者がもはや熱心には管理していない可能性があります。

序章:Googleさんから、モバイルのみ「画像を最適化しろ」と警告された。

ドヤ顔でWordPress高速化～Google PageSpeed Insights 90点達成対策まとめを書いたくせに、しばらくPageSpeed Insightsを見てませんでした。

先日、久しぶりに自サイトの記事の表示速度を測りました。すると衝撃的事実が判明。

なんと「モバイル」で画像最適化の警告を受けました。

修正が必要:
画像を最適化する
画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます。
次の画像を最適化すると、サイズを 210 KB（50%）削減できます。

あれ？半年前に見たときは、こんな警告無かったけどな…。

モバイルはもともと90点未達成でしたが、それでも半年前より10ポイント近くスコア低下はショック。

ドヤ顔エントリ書いた手前ヤバイ…。

一方、PCでは画像最適化は合格。

画像を最適化する
このページでは、画像は最適化されています。詳しくは、画像の最適化に関する説明をご覧ください。

画像をスマホ対応すべき⇒Hammyだ!!

モバイルのみ警告された理由を考えたところ、「モバイルでもPCと同じ横幅600px以上の画像を使っているから?」と思い至りました。

cssで幅可変にしているとはいえ、幅に応じて伸縮させるだけでは、スマホなどのモバイルデバイスに対して画像を最適化しているとは言いがたいですよね。

スマホにはサイズが小さい画像、タブレットには中くらいの画像、PCにはサイズの大きい画像

…こういうイメージを何とか形にしたい。切実にそう思いました。

しかし、何とかする技術はないので、プラグイン探しの旅に。

そこで「コ・レ・ダ・！・！」となったのがHammyです。

Hammyのインストールと設定

まず、WordPress管理画面左サイドバー「プラグイン」⇒「新規追加」からインストール･有効化してください。

次に、「設定」にマウスホバーして「Hammy」をクリック。
2014-10-11_0825
ここで必要な設定をします。

1)Enter your Content Container

「この中ではデバイス幅に応じて表示する画像サイズを適宜入れ替えてね！！｣というブロック要素（コンテナ）を指定します。

普通は投稿や固定ページの本文の部分を囲むブロック要素（コンテナ）を指定します。

入力欄にクラス名またはidを記入すればいいのですが、

クラス名を記入する場合は「（.）+（クラス名）」
idを記入する場合は「（#）+（id名）」

の形式で記入してください。

デフォルトの値は「.entry-content」です。

私のように、名前が「Twenty～」で始まるテーマを使っている方は、多分デフォルトのままで大丈夫です。

2) Add your Breakpoints

画像サイズを切り替えるデバイス幅を設定します。デフォルトでは、320px、480px、625pxに設定されています。

特にこだわりが無ければデフォルトのままでいいと思います。

3) Add Classes to Ignore

1)で「この中ではデバイス幅に応じて表示する画像サイズを適宜切り替えてね！！｣というブロック要素を設定しました。

でも、ブロック内の画像を全て入れ替えるのではなく、一部の画像については、デバイス幅に関係なく、常に同じサイズを表示したい場合もあるかもしれません。

その場合に、デバイス幅によるサイズ変更の対象としない画像を、クラス名で設定するのが「Add Classes to Ignore」です。id名での設定は出来ないようです。

デフォルトではnextgen 、thumbnailが指定されています。
2014-10-11_2252

「投稿本文の全ての画像を適宜入れ替えてね！！｣と思っているなら、基本的にはデフォルトのまま弄らなくていいです。

しかし、固定ページや投稿の本文中に、画像を含むアフィリエイトタグがある場合は、デフォルトのままだと表示が崩れてしまうケースがあるので注意が必要です。

私の場合は以下のようなアフィリエイトタグが含まれていたので、デフォルトのままだと表示が崩れました。

<a href="http://px.a8.net/svt/○○○○○○○○">
×××××××××
</a>
<img border="0" width="1" height="1" src="http://www12.a8.net/○○○○○○○○" alt="">

そこで、アフィリエイト絡みのimgタグにclass「kokokuimg」をつけ、

<a href="http://px.a8.net/svt/○○○○○○○○">
×××××××××
</a>
<img class="kokokuimg" border="0" width="1" height="1" src="http://www12.a8.net/○○○○○○○○" alt="">

3) Add Classes to Ignore に「kokokuimg」を追加指定しました。
2014-10-11_2253

すると、表示崩れはなくなりました。

4) Check if you want to use Lazy Loader

ここではlazy loadのON/OFFを設定します。

lazy load はページのスクロールに応じて順次画像を読み込む仕組みです。

それによってabove the fold（ページを開いたときに最初に見える領域）の表示速度がアップします。

当然ONに設定します。

スマホには小、タブレットには中、PCには大…という風に画像がホントに入れ替わる

スマホにはサイズが小さい画像、タブレットには中くらいの画像、PCにはサイズの大きい画像

この画像↑でデバイス幅の変化に応じて画像ファイルが入れ替るかどうかを、確認してみました。

Google Chromeでブラウザの幅を色々変えながら、画像を右クリックして「新しいタブで画像を開く」で↑の画像を開きまくりました。すると…

スマホ幅での画像ファイル⇒https://webshufu.com/top/wp-content/uploads/cache/2014/10/Hammy/2827417567.png
タブレット幅での画像ファイル⇒https://webshufu.com/top/wp-content/uploads/cache/2014/10/Hammy/2827417567.png
PC幅での画像ファイル⇒https://webshufu.com/top/wp-content/uploads/cache/2014/10/Hammy/209768181.png

Hammyを有効化してLazy Loaderをオンにした状態では、このようにきちんと入れ替っていました。