WordPressでAMPページの画像が重複して表示される

サイトをAMP対応にしたく安易にAMPを有効にしました。

Cocoonテーマを使用していたこともありワンクリックでAMPを有効にできたのですが…。

画像が2～5枚重複して表示された

何故重複して表示されるか不明でしたが、下記のフォーラムにて案内がありました。

画像を遅延表示させてコンテンツ表示速度を向上させる目的のLazy Loadですが、正しく動作せず何度も画像の呼び出しを行ってしまったことが原因でした。

マルチスレッド関連のバグだとは思いますが、詳細は不明です。

Lazy Loadを無効化します。

「DEACTIVE」をクリックして右下の「UPDATE SETINGS」をクリック。

最後にプラグインやCDN(キャッシュサーバー)を利用している場合はキャッシュを削除することで画像が正しく表示されます。

なお筆者の環境の場合はCocoonを使用していましたので「AMPキャッシュ」を削除、CDNのCloudflareを利用していたのでキャッシュを「Custom Purge」しました。

Cloudflareにはこちらのページで触れています。ご参考にしてください。おすすめです！

問題のAMPページにて「Ctrl+Shift+R」でブラウザキャッシュを無視して再読み込みします。

問題が解決していれば作業は以上です。