今回は、WordPressのテーマ、CocoonでAMPを導入した際に空白が表示されてしまうという現象が起こりましたので、解決方法を書いて行きたいと思います。AMPとはモバイルページを高速に表示させる技術です。
CocoonではAMPへの対応は、チェックボックスにチェックを入れるだけで出来ます。
面倒なことはすべてテーマから出来てしまうので、作者であるわいひらさんに感謝ですね(^^)/
AMPに対応することでGoogle Discover（グーグル・ディスカバー）に登録されやすくなるなどのメリットがあります。そこで僕はいち早くAMPを導入しましたが、自分でいじった訳ではないので不具合など起こるはずもないと信じて、一年ぐらいそのままにしていたんですが、スマホから昨日アクセスしてみたところ謎の空白が出来ていました。
画像は、とある記事の一部を表示しています。実際には縦スクロールして右側へと移動しますが、今回は分かりやすく二列に並べてみました。
画像のように見出しの下の赤の枠部分には本来、画像が表示されるのですが、表示されていないことが分かると思います。
画像が表示されない原因とは？
最初は画像サイズが大きすぎるので遅延ロードがスクロールした際に読み込めていないのかなと疑って表示されていない画像を半分のサイズにしてみたんですが。同じ位置の画像だけが表示されない…
そこで表示されていない箇所の画像をコピーしてみてURLを貼り付けてみたところlazy_placeholder.gifという真っ白な画像が表示されていることがわかりました。
lazyという文字を見てピンと来たかも知れませんが、遅延ロードする際の代替え画像が表示されたままになっているのかもしれません。
謎の空白の正体とは？
冒頭の赤の枠の位置、画像の前に白い空白が出来ていたのですが、ぱっと見、見当もつきませんでした。
一瞬、CSSが関係しているのではないかと恐怖しました。「うわーこれ自分じゃ解決できないぞどうしよう」という思いが頭をよぎりましたが、何度かアクセスしてみると、一瞬遅延ロードっぽい動作をしていることが判明しました。
そしてこの画像にカーソルを合わせてみるとなんと画像が保存できるではありませんか！？
画像の保存を試みてみると 「a Lazy なんたらかんたら」という名前でした。
a Lazy、と言えば、WordPressのプラグインである。 「Lazy Loader」のことですね。
「Lazy Loader」はページを読み込む際に画像の読み込みを後回しにしてページの読み込みを高速化するというものです。
AMPは画像の表示に
<amp-img>
というタグを使っていますが、
遅延ロードでは
<img>タグですので２つのイメージタグが被ってしまい、<img>の方では空白が表示されていたのだと思います。
僕は以前のテーマではプラグインを使って遅延ロードしていたのでそのままCocoonを導入したら今回のようなことが起こりました。
解決方法
遅延ロード系のプラグインを入れていてCocoonで今回のような空白が出来てしまった場合、「Lazy Loader」系のプラグインを削除すれば解決します。
遅延ロードさせたい方は、画像の遅延ロードは、Cocoonの設定→高速化→Lazy Loadを有効にするという項目をチェックすることで使うことができます。
無事解決できたどうか確認するには、Googleからページを検索して確認するとキャッシュされたページが表示されるためしばらく以前の空白のある状態のままのページが表示されると思います。
そこで、ページの最後に「?amp=1」と入れることで現在の状態をチェックすることが出来ます。
解決しない場合、Cocoonの項目からキャッシュ削除→AMPのキャッシュを削除もしくわ全てのキャッシュを削除してみましょう。その他のキャッシュ系のプラグインを入れている方はそちらも削除しておきましょう。
まとめ
今回は、Cocoonで画像の前に空白が出来てしまった時の対処法について書きました。
思いついた機能は大体揃っているWordPressやCocoonですが、なんでも入れてしまうと今回のように不具合が起こることもあるということですね( ;∀;)
遅延ロードがテーマに最初から含まれていたり、Javascriptで埋め込んでいたりすると遅延ロードが重複して画像が表示されない不具合が発生しそうです。
僕も入れていてチェックしたんですがLiteSpeed Cacheを入れている方はこちらの遅延ロードも確認してみるといいと思います。
コメント