WordPressプラグインでjavascript最適化の検証
はじめに Core Web Vitals の指標の評価としてPageSpeed Insightsのスコアがよく用いられています。 今回はWordPressのプラグインを使用してjavascriptに関わる指標がどう変化するかを検証します。 1. Async JavaScript https://ja.wordpress.org/plugins/async-javascript/ WordPressでjavascriptを読み込む際のscriptタグにはasync/deferといった属性はなく、コンテンツののレンダリングをブロックすることになってしまいます。 このプラグインを使用すると、簡単にscriptタグにasync/deferを付与することができます。 async:非同期読み込み。読み込み順序は保証されない。 defer:非同期読み込みだが、読み込み順序が保証される。 Insigthsパーフォーマンス値 Mobile Desktop javascript 非同期未設定 51 82 javascript Async設定 55(↑) 83(↑) javascript Defer設定 57(↑) 93(↑) Deferの方が良い値となりました。 2. GTM Kit https://ja.wordpress.org/plugins/gtm-kit/ Google Tag Managerのタグ/Data Layerをページに簡単に差し込むことができます。 タグの遅延読み込みにも対応しています。 タグの遅延読み込みにはrequestIdleCallbackが使用されています。 requestIdleCallbackは、ブラウザがアイドル状態に実行されるようになります。 Insigthsパーフォーマンス値 Mobile Desktop GTM 遅延読み込み未設定 51 82 GTM requestIdleCallbackでの読み込み設定 41(↓) 79(↓) 残念ながら、パフォーマンスが落ちる結果となりました。 WordPressのプラグイン紹介サイトにあるスクリーンショットには設定項目に「Load…