Redactor での画像表示の際の lazyload 用に loading 属性を追加する

Chrome の lazy-loading サポート用に設定しておこうかな、ということで。

Native lazy-loading for the web | web.dev
https://web.dev/native-lazy-lo...

img に loading="lazy" をつけるというだけではあるのだけど。

{{ block_richeditor | retconAttr('table', { class: 'table' }) | retconAttr('img', { loading: 'lazy' }) | retconWrap( 'table', 'div.table-responsive' ) }}

こんなかんじで、 Redactor の出力に

| retconAttr('img', { loading: 'lazy' })

を追加する。

retcon については以前も紹介してある。

mmikkel/Retcon-Craft: A collection of powerful Twig filters for modifying HTML
https://github.com/mmikkel/Ret...

とりあえずこれ使っておけば追加は可能なので Redactor でも対応が可能。

個別のアセットフィールドであれば問題にはならないはず。

なんかつけてみたけど、 206 のレスポンスはかえってきてるけどすぐ読み込んで200になってるきがするな。

Chrome も一応 flag は有効にしてあるけど。。。

テンプレートの他の記述かなにかが影響してそうな気もするのでもう少し調整が必要そうだ。

参考リンク

Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み （loading="lazy"） が実装される | WWW WATCH
https://hyper-text.org/archive...

Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に | 海外SEO情報ブログ
https://www.suzukikenichi.com/...

Chrome 75 lazy loading 遅延ロードのネイティブサポート - Qiita
https://qiita.com/tfutada/item...