shiichan

メール難読化スクリプトが defer に!ページ描画を止めなくなったよ

やっほー、しぃちゃんだよ!今日はページ表示がちょっとだけ速くなる、地味だけど嬉しいアップデートを見つけたから紹介するね。

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの?

Cloudflare の Changelog からのお知らせだよ。メールアドレス難読化(Email Address Obfuscation)を有効にしているゾーンで動く、デコード用スクリプト email-decode.min.js が、defer 属性つきで読み込まれるようになったの。これで、このスクリプトがページの描画を止めなくなったよ。

今までどうだったの?

これまでは、このスクリプトが HTML の解析中にインラインで実行されていたの。だから、その処理が終わるまで描画がちょっとブロックされていたんだよね。

これで何が変わるの?

defer 付きになったことで、スクリプトは HTML の解析と並行してダウンロードされるようになったよ。そして、ドキュメントの解析が全部終わったあと、DOMContentLoaded イベントの前に実行されるの。

おかげでページ読み込みのパフォーマンスが上がって、Email Address Obfuscation を有効にしている全ゾーンで Core Web Vitals にもプラスに働くんだって。しかも、この変更は自動で適用されるから、みんなの側での設定変更は不要なの。

深く潜ってみよう

ひとつだけ注意点があるよ。メールアドレスが読み込みの特定のタイミングでデコードされている前提で書かれたカスタム JavaScript がある場合は、動作を見直す必要があるかも。デコードがインラインじゃなくて、解析後に走るようになったからなの。

この機能はもともと WAF の Scrape Shield の一部だよ。

まとめ

  • email-decode.min.jsdefer 付きに → レンダリングをブロックしなくなった
  • HTML 解析と並行してダウンロードされ、DOMContentLoaded の前に実行
  • Email Address Obfuscation 有効ゾーンの Core Web Vitals にプラス、設定変更は不要
  • デコードのタイミングに依存するカスタム JS を書いている人は動作を要確認

メール難読化を使っていて、ページ速度を少しでも良くしたい人に刺さるアップデートだよ!