”属性「loading」はタグ「amp-img」で使用できません”対策とし、AMPのみ”Lazy-load”機能をオフ

2021.09.27

WordPress 5.5以降の新しいバージョンを使っていると、Lazy-load機能（loading=”lazy”）がオート追加されます。
一方で、この状態でAMPテストをすると、”属性「loading」はタグ「amp-img」で使用できません”のエラーが出ます。

今回、そちらへの適切と思われる対応をし、まとめてみました。

＊テーマによっては対応されていると思います。自分のサイトのテーマは”LionMedia”で、対応されていません。

ページエクスペリエンスの診断結果が・・・（Lazy-loadオフ状態）

さて、直近の問題としてはGoogle search consoleでページエクスペリエンスに問題があると出ていました。

”サイトに優れたページエクスペリエンスのURLはありません”と出て、良好0%です・・・。

これはなかなか厳しい状況です・・・

その内容を確認すると「LCPが遅い」と出ます。

LCPは”Largest Contentful Paint”の略で、ページ表示までの時間です。
これは Lazy-loadという機能などを使うと改善するようです。

Lazy-loadはWordpressの比較的新しいversion（5.5以降）では、元々全部の画像につくのがデフォルトですが、
AMPエラーが出る関係で、Lazy-loadはオフにしていました。

こちらについて、上記のような問題点が出ましたので、とりあえずLazy-loadをオンに戻してみました。

Lazy-loadをオンに戻してみる

さて、1週間ほどたったところで確認してみました。

下図の右端の1週間分のところですが、
”サイトに優れたページエクスペリエンスのURLが24.3%あります”とあり、ページエクスペリエンスは改善しています。

＊24%という値はそんなに高くはないのは気になりますが、平均的には速度が上がった、ということを表しているはずです。

一方、AMPエラーは、というと、Lazy-loadをONにして以来、エラーが増加しています。
“許可されていない属性または属性値が HTMLタグにあります”のエラーです

＊元々30件レベルであるのは、別件です。

AMPエラーを減らすために、Lazy-loadをOFFにする処理を行っていたので、予想された結果ではあります。

AMPテストをすると”属性「loading」はタグ「amp-img」で使用できません”のエラーです

ここまでまとめると
・ページエクスペリエンスの観点では、Lazy-loadを使ったほうがよい（表示が速い）
・AMPサイトではLazy-loadがONだとエラーが出る（許可されていない）
ということです。

Lazy-loadを通常オン、AMPではオフにするコード作成

さて、この件の対応について検索しましたが、なかなかぴったりの対処が見つかりません。

・WORDPRESSテーマが”AFFINGER”のときの対処はこちらのサイトにありました。
　 ＊”AFFINGER”独自の関数などを使っている点について対応が必要でした
・こちらのサイトはもっと一般的な例がありました。
　 ＊複数の独自関数を組み合わせてAMPかどうかを判別しており、おそらく厳密なのだと思います。
　 　その辺をどこまで厳密にやる必要があるのかはちょっとわかりませんでした。　　　
・こちらのサイトには”LIONMEDIA”という同じテーマでのAMPかどうかを判別する部分がありました。


これらを参考にして、以下のようにfunction.phpに追記しました。
・前半11行目まではAMPかどうか判別する部分
・13行目以降は、AMPのときは’wp_lazy_loading_enabled’を’false’にする部分
です。

  1. //// AMP判別関数
  2. function is_amp(){
  3. $is_amp = false;
  4. if (empty($_GET[‘amp’]) ) {
  5. return false;
  6. }
  7. if (is_single() && $_GET[‘amp’] === ‘1’){
  8. $is_amp = true;
  9. }
  10. return $is_amp;
  11. }
  12.  
  13. //// Lazyload対策
  14. function amp_no_lazyload(){
  15. return !is_amp();
  16. }
  17. add_filter( ‘wp_lazy_loading_enabled’, ‘amp_no_lazyload’ );

対処一週間後の状況確認！

上記対処から約1週間後です。
AMPエラーを確認しました。
下図のように全体としては、赤で示したエラー数が徐々に減少しています。

ページエクスペリエンスの方などはまた確認してみます。

phpは正直わかっていませんが、結果的にOKそうだし、これでええんとちゃうのかな、と思っています。
AMPかどうかの分岐はややラフなのかもしれません。

おしまい！

コメント