SEO WordPress の画像をWebPに対応させて検索パフォーマンスを上げる

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画像を特定し、その画像の読み込みを優先するようにプリロードリンクが追加されます。