JavaScriptの読み込み時にblocking=”render”でFOUC対策

Sena カレンダーアイコン 2023.11.10

⚠️ この機能は今後変わる可能性があり、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/5452774595624960

FOUCへの救世主 blocking=”render”

Feature proposal: `blocking="render"` attribute on <link>, <script> and <style> · Issue #7131 · whatwg/html

(Edit: The syntax is changed into blocking="render" for extensibility. ) (Please refer to the full proposal for formal details and more discussion) Explainer All current browsers already have a ren...

https://github.com/whatwg/html/issues/7131

<script async blocking="render" src="async-script.js"></script>

blocking=”render” を付けることにより、レンダリングの開始前に評価されます。

今まではレンダリングされた後に評価・実行されてしまっていたのでFOUCが発生していましたが、これで防ぐことが出来ます！

軽く実験

以下のようなJavaScriptを書いたとします。

'use strict';
{
    const root = document.getElementById('root');
    const div = document.createElement('div');
    div.style.paddingBlock = '1000px';
    root.appendChild(div);
}

同じコードをheadタグ内から様々な方法で読み込んでみます。

同期的に読み込みます。
```
<script src="/js/app.js"></script>
```

deferで読み込みます。

<script defer src="/js/app.js"></script>

asyncで読み込みます。

<script async src="/js/app.js"></script>

2.にblocking=”render”を付けて読み込みます。
```
<script defer blocking="render" src="/js/app.js"></script>
```

Performance InsightsでCumulative Layout Shift (CLS)の値を図ってみると、以下のような結果になりました。

レンダリング方法	Cumulative Layout Shift (CLS)
同期的に読み込む	0.436
deferで読み込む	0.436
asyncで読み込む	0.436
blocking=”render”を付けて読み込む	0