Category: Core Web Vitals

はじめに 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…

はじめに Core Web Vitalsに重要な画像の最適化について、WordPressに関しては標準機能では弱い部分があります。 次世代フォーマットであるWebPへの変換に対応したプラグインのうち、無料で使用できるものについて紹介します。 （有料版の購入が必須なものや、無料の場合に容量・呼び出し回数などに制限のあるものは除外しています。） .htaccessにより、対応ブラウザへはWebP画像を配信する形式が主ですが、pictureタグでの対応が可能なものもあります。 1. Converter for Media https://ja.wordpress.org/plugins/webp-converter-for-media/ （旧名称：WebP Converter for Media） 特徴：プラグインが完全日本語対応。 対応画像フォーマット jpg、png、gif プラグインの日本語対応 ○ すでにメディアファイルにあるファイルへの対応 ○ プラグイン有効化以降のメディアファイルへの対応 ○ テーマで使用されているメディアファイルへの対応 ○（有効・無効の切り替えあり） プラグインで使用されているメディアファイルへの対応 ○（有効・無効の切り替えあり） 有料版 あり（AVIFフォーマットの対応等） 2. EWWW Image Optimizer https://ja.wordpress.org/plugins/ewww-image-optimizer/  特徴：最適化スコア、ローカル圧縮の節約の指標が確認できます 対応画像フォーマット jpg、png、gif プラグインの日本語対応 △（一部対応） すでにメディアファイルにあるファイルへの対応 ○ プラグイン有効化以降のメディアファイルへの自動対応 ○ テーマで使用されているメディアファイルへの対応 ○（有効・無効の切り替えなし） プラグインで使用されているメディアファイルへの対応 × pictureタグでの画像切り替え ○（「Picture WebP Rewriting」オプション） 有料版 あり（画像最適化CDNの使用等）…