フロントのエンド

Web開発をがんばりたいブログ

WordPress

[WordPress] Lazyload系プラグインを迂闊にかけてるとAMPで死ぬ

by:
16/09/08

はい、死にました。普通に画像が出ません。

状況

WordPressをAMPプラグインでAMP対応。

画像遅延読み込みにもいろいろと種類があるとは思いますが、僕が死んだプラグインは

Crazy Lazy — WordPress Plugins

↑このプラグイン自体は軽くて効果抜群です。通常の画像遅延読み込みでパフォーマンス改善の歳はこのプラグインを挿しておけば間違いないかとは思います。が、AMPページ活用で死ねます。

特に、AMPページでアニメーションGIFが出ないのが最高にしんどい。

スポンサーリンク

問題

順番に言いますと、

  • AMPの仕様から、アニメーションGIF用のタグじゃないとアニメーションGIFは出ない。
  • AMPプラグインは、.gifを判別して、自動でタグを出力
  • Lazy loadさせていると、.gifでAMPに変換されない
  • 画像が出ない。

というわけで。

対応

取り得る対応は2種類

  • Lazy loadを自前で実装する(プラグインやめて、拡張子とかクラスとかに適用する)
  • AMP変換される際はlazy loadを切ってくれる親切なプラグインをつかう。

そんな都合いいプラグインがあるわけ…

a3 Lazy Load — WordPress Plugins

あった。

[a3 Lazy Load] AMPの時は自動でオフしてくれる画像遅延読み込みWordPressプラグイン – フロントのエンド

まとめ

たまにはAMPページもチェックしよう。

Add/amp anim for gif by j3j5 · Pull Request #90 · Automattic/amp-wp

<amp-anim> – AMPで利用できるタグ

コメントを残す