Category: Core Web Vitals

はじめに Core Web Vitalsの各メトリクスは、各種ツールをだけでなくGoogle Chrome機能拡張をインストールするだけで簡単に計測・検証が可能になります。 簡単に使用できる無料・登録不要なものについて紹介いたします。 1. Web Vitals https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja&utm_source=ext_sidebar 特徴： サイトがCore Web Vitalsの基準を満たしているのかを簡単に確認するのに役立ちます。 表示されているページのCore Web Vitalsのメトリクスについて計測し、しきい値を超えていないかをバッチの色で教えてくれます。 （無効：灰色、緑：合格、赤：1つ以上のメトリックが失敗している） さらに1つ以上のメトリクスが失敗している場合は失敗しているメトリクスの値を表示します。 計測される指標は以下になります。 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP) 累積レイアウトシフト – Cumulative Layout Shift (CLS) 最初の入力遅延 – First Input Delay (FID) 次のペイントまでのインタラクション – Interaction To Next Paint (INP) 最初のコンテンツの描画時間 – First Contentful Paint (FCP) 最初の1バイト受信までの時間 – Time To…

はじめに WordPressプラグインのうち、タグ「core web vitals」が付けられているもの（https://ja.wordpress.org/plugins/tags/core-web-vitals/ ）から有効インストール数が1000以上のプラグインの比較を行いました。（特定の環境に依存するものと最近更新が行われていないものは除外） 比較したプラグイン LiteSpeed Cache バージョン:5.7.0.1 https://ja.wordpress.org/plugins/litespeed-cache/ 有料 WP Fastest Cache バージョン:1.2.2 https://ja.wordpress.org/plugins/wp-fastest-cache/ 無料／有料 Autoptimize バージョン:3.1.10 https://ja.wordpress.org/plugins/autoptimize/ 無料／有料 Speed Booster Pack ⚡ PageSpeed Optimization Suite バージョン:4.5.7 https://ja.wordpress.org/plugins/speed-booster-pack/ 無料 Cloudinary – Deliver Images and Videos at Scale バージョン:3.1.5 https://ja.wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/ 無料／有料 ※Cloudinary ( https://cloudinary.com/ )アカウント作成が必要 Core Web Vitals & PageSpeed Booster バージョン:1.0.16 https://ja.wordpress.org/plugins/core-web-vitals-pagespeed-booster/ 無料…

はじめに 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の使用等）…