⚠️ この機能は今後変わる可能性があり、2023/11/09現在の状況で実験して書いた物です。
はじめに
以前、JavaScript呼び出し時のasyncにていての記事を書きました。
https://www.fourier.jp/techblog/articles/call-webcomponents-with-perser-blocking/要約すると、JavaScriptのコードの内容によっては、deferやasyncで読み込むとFOUC(ちらつき)が発生してしまうことがあるという内容になります。
https://en.wikipedia.org/wiki/Flash_of_unstyled_content特に React や Vue.js を使ったサイトでは、ローディング画面を作って FOUC を防止することが多いと思いますが、閲覧者にとっては(ブラウザの)ローディングした後にローディングとなってしまいます。
なんとかする方法は無いかと Chrome の開発ブログを見ていましたが、ついに出ました!
https://chromestatus.com/feature/5452774595624960FOUCへの救世主 blocking=”render”
https://github.com/whatwg/html/issues/7131
blocking=”render”
を付けることにより、レンダリングの開始前に評価されます。
今まではレンダリングされた後に評価・実行されてしまっていたのでFOUCが発生していましたが、これで防ぐことが出来ます!
軽く実験
以下のようなJavaScriptを書いたとします。
同じコードをheadタグ内から様々な方法で読み込んでみます。
-
同期的に読み込みます。
-
deferで読み込みます。
-
asyncで読み込みます。
-
2.にblocking=”render”を付けて読み込みます。
Performance InsightsでCumulative Layout Shift (CLS)の値を図ってみると、以下のような結果になりました。
レンダリング方法 | Cumulative Layout Shift (CLS) |
同期的に読み込む | 0.436 |
deferで読み込む | 0.436 |
asyncで読み込む | 0.436 |
blocking=”render”を付けて読み込む | 0 |
濫用に注意
blocking=”render”
を使えばレンダリングブロックを意図的に行える事が分かりました。
ただし、レンダリングが遅くなるため、UXやSEO的には弱くなります。
https://developers.google.com/publisher-ads-audits/reference/audits/ad-render-blocking-resources?hl=ja
そのため blocking=”render”
が必要なリソースかどうか見極める必要があります。
まとめ
blocking=”render”
が使えるようになれば、簡単にFOUCを防ぐ事が出来ます。
執筆時では対応しているブラウザが少ないですが、非常に便利な機能なので対応ブラウザが増えて欲しいところです。
https://caniuse.com/mdn-api_performanceresourcetiming_renderblockingstatus