まずはあなたのサイトの速度をチェックしてみましょう。
Google公式のサイトの速度チェッカーを使ってみてください
https://pagespeed.web.dev
自分のサイトのURLを入力すると、結果が出てくるはずです。
今回はこれの改善の一つとして、画像系の最適化をするのに役たつPerformance Lab の使い方を紹介します。
画像のファイル形式を Jpeg や PNG から WebP にするだけでも、
ファイルサイズを削減できます。
WebP形式はJpegよりも効率的な圧縮ができます。同じ画質でもWebPであればJpegよりも軽くなります。
今回はWordPressに “Performance Lab” というプラグインを導入しましょう。
プラグインの追加は左サイドバーの
プラグイン / 新規プラグインを追加
からPerformance Lab を検索してインストール、有効化すればOKです。
プラグインを有効化したら、
設定のタブにPerformanceの項目が追加されています。
そちらを選択します。
開くと次のような選択肢が出てくると思います。
これらを有効化していきましょう！！
Performance Lab には次の設定項目があります。
それぞれの項目の説明をします。
個人的には Performant Translations 以外は有効化していいかと思います。
WordPress 内のメディア ライブラリに新しくアップロードされた画像の主な色を決定して保存し、
それを使用して、画像が読み込まれるまで表示される、フロントエンドにその色のプレースホルダー背景を作成します。
WordPressで画像をアップロードする際にWebPやAVIF形式に対応させるものです。
ホスティングサーバーがAVIFをサポートしている場合は自動的にAVIF形式の画像が作られ、サポートしていない場合はWebP形式になります。
両方に対応している場合は、どちらの形式にするか「設定」>「メディア」で選べます。
新しい画像をアップロードするときにだけ、これらの形式が適用されます。
既存の画像はRegenerate Thumbnailsプラグインも使えます。
wp-cli でやると各自に出来るため、私はwp-cliで実行しました。
wp media regenerateこの記事でwp-cliの導入方法を解説しています。
WordPress 6.5 以上では標準で組み込まれているので有効化する必要はないはずです！
これは多言語対応用の機能です。
ユーザーの操作に基づいて特定のURLを動的に事前読み込み（プリフェッチ）や事前レンダリングできるようにします。
デフォルトでは、ユーザーがリンクにマウスを重ねたときにWordPressのフロントエンドURLが事前レンダリングされるように設定されていますが、これは「設定」>「表示設定」の「Speculative Loading」セクションでカスタマイズできます。
YouTube動画やTikTokなどの埋め込みコンテンツのパフォーマンスを最適化するために作られています。具体的には、埋め込みが画面に表示されたときにだけ読み込む「遅延読み込み」を行い、ページの読み込み中に他のリソースと競合しないようにすることで、パフォーマンスを向上させます。将来的には、さらに多くの最適化機能が追加される予定です。
また、このプラグインは「Optimization Detective」プラグインのインストールと有効化を推奨します。このプラグインが有効な場合、訪問者の行動に基づいて、画面上部に表示される埋め込みが記録され、これらの埋め込みに対しては遅延読み込みが適用されません。遅延読み込みは読み込みに遅れを生じさせ、ユーザー体験やページのLCPスコアに悪影響を与える可能性があるためです。
さらに、Optimization Detectiveが有効な場合、人気のある埋め込みコンテンツ（YouTube、Twitter、Vimeo、Spotify、VideoPressなど）に必要なネットワークリソースに対して事前接続リンクを追加することで、読み込み速度が向上します。
このプラグインは設定やユーザーインターフェースがなく、インストールするだけで動作するように設計されています。
WordPressでのレスポンシブ画像機能を実験的に強化するものです。現在、次の機能を提供しています：
1. テーマのレイアウト情報を使用して、sizes 属性の精度を向上させる。
2. 遅延読み込み画像に sizes=”auto” を追加する新しいHTML仕様の実装。
また、このプラグインは「Image Prioritizer」プラグインと連携します。このプラグインが有効になると、実際の訪問者のデータに基づいて、画面外（ページ下部）にある画像を学習し、それらの画像に対して loading=”lazy” を自動で追加します。そして、このプラグインはさらにその画像に sizes=”auto” を追加することで、遅延読み込みのパフォーマンスを向上させます。
このプラグインには設定やユーザーインターフェースはなく、インストールするだけで自動的に動作するように設計されています。
ページの表示速度を左右するLCP（Largest Contentful Paint）要素の画像読み込みを最適化します。LCP要素には、<img>タグの画像やCSSの背景画像が含まれます。テーマのレスポンシブデザインでは、異なる画面サイズ（ブレークポイント）で異なるLCP要素が存在する可能性があるため、各ブレークポイントごとにLCP画像を特定し、その画像の読み込みを優先するようにプリロードリンクが追加されます。
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
