みなさんこんにちは、ガノー（Twitter:Ganohr）です。
WordPressのバージョンが上がるたびにLazy Loadingの仕組みが変わり、仕組みが変わるたびにAMPのエラーを誘発する。WordPressでは日常茶飯事。
この記事では、
WordPress6.1以降で発生するAMPエラーの解消コードを共有します。
当サイトのAMPエラーは、本対策によりエラーが改善しました
今回の対策で、AMPエラーが解消していることが確認できます。
2件がまだ保留中になってますが、その2件ともAMP Validatorにてエラーがないため、問題ありません。
対処はコピペするだけなので、AMPエラー解消して他のサイトより検索上位を目指しましょう。
エラーの原因
decoding="async"が本文他のimgタグへ付与されるようになったため。まず、今回はdecoding="async"という属性をWordPressが自動的に付加するようになったことでAMPのエラーが発生するようになりました。
この属性は、画像を遅延ロードさせるloading="lazy"と併用することで、画像のデコードを非同期に実行します。画像のロード自体が非同期になったとしても、読み込んだ後に画面に表示するには「デコード」をせねばなりません。デコードは処理に時間がかかり、この属性がない場合は表示が必要になった際に画像のデコードが走ることでブラウザのブロッキング（メインスレッドの遅延）が発生します。
そこでWordPress6.1で発生するAMPエラーの修正には、この両方の属性を削除する必要があります。
加えて、5.9ではサムネイル関数のpost_thumbnail_html()にのみloading="lazy"が出力されていましたが、6.1からはサムネイルに限らず、本文内の全ての画像にもdecoding="async"が出力されるようになりました。
注意：簡単版とAMP識別版があります
WordPress6.1のAMPエラー対処コード：簡単版
まず、あまり難しいことはしたくない方は以下のコードをfunctions.phpへコピペしてください。なお、編集の際は細心の注意を払ってください。最悪の場合WordPressが停止します。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
function gnr_delete_amp_lazyload($html_src) {
return preg_replace('#loading="lazy"|decoding="async"#', '', $html_src);
}
add_filter('post_thumbnail_html', 'gnr_delete_amp_lazyload', 9999);
add_filter('the_content', 'gnr_delete_amp_lazyload', 9999);
また、もしも上記のコードを適用してもうまくいかない場合は、gnr_delete_amp_lazyload()関数が既に定義されていないか確認してください。
WordPress6.1のAMPエラー対処コード：AMP識別版（推奨）
こちらはAMPでのみloading="lazy"とdecoding="async"を除去します。gnr_is_amp()関数が必要です。
以下に示す2つのコードをfunctions.phpへコピペしてください。既にWordPress5.9で同様の対処をしている場合、gnr_is_amp()関数は不要です。gnr_delete_amp_lazyload()関数とgnr_stop_lazyloading_when_amp関数を入れ替えて下さい。
gnr_is_amp()関数
function gnr_tail_pattern_matched($target, $pattern) {
if (empty($target) && empty($pattern)) {
return true;
} else if (empty($target)) {
return false;
} else if (empty($pattern)) {
return false;
}
$s_end = strlen($target);
$s_len = strlen($pattern);
$offset = $s_end - $s_len;
if ($offset < 0) {
return false;
}
$pos = strpos($target, $pattern, $offset);
return $pos === $offset;
}
////AMPページか否か判定する
function gnr_is_amp() {
if (function_exists('is_amp') && is_amp()) {
return true;
} else if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
return true;
} else if (function_exists('ampforwp_is_amp_endpoint') && ampforwp_is_amp_endpoint()) {
return true;
} else if (@$_GET['amp'] === '1') {
return true;
} else if (@$_GET['type'] === 'AMP') {
return true;
}
$uri = gnr_get_uri_full();
return gnr_is_amp_pattern($uri);
}
function gnr_is_amp_pattern($uri) {
if (gnr_tail_pattern_matched($uri, '/amp')) return true;
if (gnr_tail_pattern_matched($uri, '/amp/')) return true;
if (gnr_tail_pattern_matched($uri, '?amp=1')) return true;
if (gnr_tail_pattern_matched($uri, 'type=AMP')) return true;
return false;
}
function gnr_get_uri_full() {
return (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http')
. '://'
. $_SERVER['SERVER_NAME']
. $_SERVER['REQUEST_URI'];
}
function gnr_remove_amp_uri_part($uri, $pattern) {
$s_end = strlen($uri);
$s_len = strlen($pattern);
$offset = $s_end - $s_len;
if ($offset < 0) {
return $uri;
}
$pos = strpos($uri, $pattern, $offset);
if ($pos === $offset) {
return substr($uri, 0, $pos);
}
return $uri;
}
function gnr_remove_amp_pattern($uri) {
$uri = gnr_remove_amp_uri_part($uri, '/amp');
$uri = gnr_remove_amp_uri_part($uri, '/amp/');
$uri = gnr_remove_amp_uri_part($uri, '?amp=1');
$uri = gnr_remove_amp_uri_part($uri, 'type=AMP');
return $uri;
}
function gnr_get_amp_pattern($uri) {
$ret = '/amp'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
$ret = '/amp/'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
$ret = '/?amp=1'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
$ret = 'type=AMP'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
}gnr_delete_amp_lazyload()関数とgnr_stop_lazyloading_when_amp関数
function gnr_stop_lazyloading_when_amp() {
return !gnr_is_amp();
}
add_filter('wp_lazy_loading_enabled', 'gnr_stop_lazyloading_when_amp');
function gnr_delete_amp_lazyload($html_src) {
if(!gnr_is_amp()) {
return $html_src;
}
$html_src = preg_replace('#loading="lazy"|decoding="async"#', '', $html_src);
return $html_src;
}
add_filter('post_thumbnail_html', 'gnr_delete_amp_lazyload', 9999);
add_filter('the_content', 'gnr_delete_amp_lazyload', 9999);
