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で幅可変にしているとはいえ、幅に応じて伸縮させるだけでは、スマホなどのモバイルデバイスに対して画像を最適化しているとは言いがたいですよね。
…こういうイメージを何とか形にしたい。切実にそう思いました。
しかし、何とかする技術はないので、プラグイン探しの旅に。
そこで「コ・レ・ダ・！・！」となったのがHammyです。
Hammyのインストールと設定
まず、WordPress管理画面左サイドバー「プラグイン」⇒「新規追加」からインストール･有効化してください。
次に、「設定」にマウスホバーして「Hammy」をクリック。
ここで必要な設定をします。
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が指定されています。
「投稿本文の全ての画像を適宜入れ替えてね！！｣と思っているなら、基本的にはデフォルトのまま弄らなくていいです。
しかし、固定ページや投稿の本文中に、画像を含むアフィリエイトタグがある場合は、デフォルトのままだと表示が崩れてしまうケースがあるので注意が必要です。
私の場合は以下のようなアフィリエイトタグが含まれていたので、デフォルトのままだと表示が崩れました。
<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」を追加指定しました。
すると、表示崩れはなくなりました。
4) Check if you want to use Lazy Loader
ここではlazy loadのON/OFFを設定します。
lazy load はページのスクロールに応じて順次画像を読み込む仕組みです。
それによってabove the fold（ページを開いたときに最初に見える領域）の表示速度がアップします。
当然ONに設定します。
スマホには小、タブレットには中、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をオンにした状態では、このようにきちんと入れ替っていました。
Google PageSpeed Insights で効果を測定してみました
WordPressでテーブル・表を作成するプラグイン9個まとめ｜ウェブシュフの表示速度をPageSpeed Insights（サードパーティのリソースはフィルタで除外）で計測しました。
Hammyを有効化する前
モバイル74点、PC93点。モバイルのみ「画像最適化」警告が出ていました。
画像30枚以上、テキスト5000字とボリュームあるエントリなので、モバイルが激しく遅い…。
Hammy有効化・Lazy Loaderオン
Hammy有効化・Lazy Loaderオンでモバイルスコアが劇的に改善。
PCはほぼ横ばいです。
Hammy有効化・Lazy Loaderオフ
あまりにスコアが悪くて、ムンクの叫びの顔になりました。
Lazy LoaderオフにするくらいならHammy使うな！！という感じです。
以前にLazy Load系プラグインが高速化の妨げになっている事例に遭遇したので疑心暗鬼でしたが、これで自信を持ってLazy LoaderをONに出来ます。
Hammyはスマホ表示の高速化に効果抜群
このようにHammyはモバイルでのサイト表示を劇的に改善します。
今や、サイトを運営している方で、モバイルでサイトを見たときの表示速度を意識しない方はいないでしょう。
ならば、デバイス幅によって画像サイズを臨機応変に切り替えるHammyのようなプラグインは必須です。
導入がまだの方にはHammyを強くオススメします。