imgタグにloading属性が付与される挙動について

  • 解決済 TsubasaHiga

    (@tsubasahiga)


    4週、 1日前

    WordPressのテーマにて、get_header()の有無でthe_content()より出力されるimgタグにloading="lazy"が付与されたり・されなかったりする挙動が見られるようですが、これは仕様でしょうか？

    Ver 6.3.5まではget_header()の有無で挙動は変わらないようですが、Ver 6.4系以降get_header()があるとloading属性は付与されないようでした。

    以下は挙動の確認をまとめた表です。

    確認に用いたコードは以下リポジトリよりご参照頂けます。
    https://github.com/TsubasaHiga/wp-lazy-test-theme

    以下は確認環境です。
    Ver 6.3.5
    get_header()あり（loading属性あり）
    https://sweet-router.localsite.io/hello-world
    amusement / loving

    get_header()なし（loading属性あり）
    https://innate-sunrise.localsite.io/hello-world
    recipe / flashy

    Ver 6.4.0（以降すべて同様の挙動のようです）
    get_header()あり（loading属性なし）
    https://cuddly-spiral.localsite.io/hello-world
    parachute / general

    get_header()なし（loading属性あり）
    https://panicky-mine.localsite.io/hello-world
    jewelry / noiseless

    仕様でしたらこの辺りのドキュメントを探しておりますので、ご存知の方がいらっしゃいましたら教えていただけますと幸いです。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • manbo

    (@manbo)

    4週前

    Image loading optimization enhancements in 6.4
    お読みください。

    トピック投稿者 TsubasaHiga

    (@tsubasahiga)

    3週、 6日前

    @manbo

    ドキュメントのリンクありがとうございます！

    template_part_headerコンテキストは例外的にabove the fold扱いになる事が分かり、疑問解決に至りました。

    また以下のコードでget_header()がthe_content()の出力に影響する理由がコンテキストの分離が正しく行えておらず、get_header()の呼び出しによりその後のthe_content()に意図しない副作用（above the fold扱い）をもたらしているものだと理解しました。

    <?php
      get_header(); // NOTE: ここの有無でloading属性が付与されたり・されなかったりする
      the_content();
    ?>

    テンプレートパーツで読み込む以下の記述にすることでコンテキストの分離が正しく行え、template-parts/content.phpでは期待通りのloading="lazy"属性が付与される事が分かりました。

    <?php
      get_template_part('template-parts/header');
      get_template_part('template-parts/content');
    ?>
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。