Gutenbergで「decoding="async"」
Helper Lite for PageSpeedプラグインを利用
imgタグに「loading=”lazy”」とか「decoding=”async”」を加えると、ちょびっと表示速度が改善されるらしい。
そんなことで改善される可能性があるなら使わない手はないと思い、いつものようにfunction.phpを使って生成されるコードをゴリゴリ強引に改変したれと思ったけれど、勉強がてら自分でGutenbergのブロックを作ってみようと思い立った。
が、これがめちゃくちゃ難しい。今までは浅く狭い知識をやりくりしてなんとかしてきたけれど、Gutenbergのカスタムブロック 作成にはReact？とかいうものを使わないといけないらしい。はっきり言って、ちんぷんかんぷん。
五里霧中の中、四苦八苦しながら先達のありがたい情報を解読したりしなかったりして、なんとか自力で画像ブロックに任意の属性を追加できるプラグインを作ることができた。
ところがWordPress 5.6にアップデートすると、動かないどころかエラーで編集画面すら開かない。
こりゃもう根本的に勉強しないとどうにもならないと匙を投げ、WordPressを使っている人たちはimgタグに「decoding=”async”」を使いたくないのんか！？とイラつきながら調べると、我が意を得たりといった感じのプラグイン「Helper Lite for PageSpeed」を発見。
Speed up your site with attributes decoding=”async” & loading=”lazy” for <img> and <iframe>.
ややこしい設定は無し。こういうことに興味を持っている人なら、インストールすれば即使える。しかもiframeにも「loading=”lazy”」を追加してくれたりもする。
結構な時間を費やした自作のプラグインがゴミになったのは哀しいけれど、「こんなのあったらいいのに」と思っていたプラグインがあってとても嬉しい。
