coiai Logo

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

❓ これは何

まずはあなたのサイトの速度をチェックしてみましょう。

Google公式のサイトの速度チェッカーを使ってみてください
https://pagespeed.web.dev 

自分のサイトのURLを入力すると、結果が出てくるはずです。

今回はこれの改善の一つとして、画像系の最適化をするのに役たつPerformance Lab の使い方を紹介します。

Performance Lab を導入する

画像のファイル形式を Jpeg や PNG から WebP にするだけでも、
ファイルサイズを削減できます。

WebP形式はJpegよりも効率的な圧縮ができます。同じ画質でもWebPであればJpegよりも軽くなります。

今回はWordPressに “Performance Lab” というプラグインを導入しましょう。

プラグインの追加は左サイドバーの
プラグイン / 新規プラグインを追加
からPerformance Lab を検索してインストール、有効化すればOKです。

プラグインを有効化したら、
設定のタブにPerformanceの項目が追加されています。

そちらを選択します。

開くと次のような選択肢が出てくると思います。
これらを有効化していきましょう!!

設定方法

Performance Lab には次の設定項目があります。
それぞれの項目の説明をします。

個人的には Performant Translations 以外は有効化していいかと思います。

Image Placeholders

WordPress 内のメディア ライブラリに新しくアップロードされた画像の主な色を決定して保存し、
それを使用して、画像が読み込まれるまで表示される、フロントエンドにその色のプレースホルダー背景を作成します。

Modern Image Formats

WordPressで画像をアップロードする際にWebPやAVIF形式に対応させるものです。
ホスティングサーバーがAVIFをサポートしている場合は自動的にAVIF形式の画像が作られ、サポートしていない場合はWebP形式になります。
両方に対応している場合は、どちらの形式にするか「設定」>「メディア」で選べます。


新しい画像をアップロードするときにだけ、これらの形式が適用されます
既存の画像はRegenerate Thumbnailsプラグインも使えます。

wp-cli でやると各自に出来るため、私はwp-cliで実行しました。

wp media regenerate

この記事でwp-cliの導入方法を解説しています。

Performant Translations

WordPress 6.5 以上では標準で組み込まれているので有効化する必要はないはずです!

これは多言語対応用の機能です。

Speculative Loading

ユーザーの操作に基づいて特定のURLを動的に事前読み込み(プリフェッチ)や事前レンダリングできるようにします。

デフォルトでは、ユーザーがリンクにマウスを重ねたときにWordPressのフロントエンドURLが事前レンダリングされるように設定されていますが、これは「設定」>「表示設定」の「Speculative Loading」セクションでカスタマイズできます。

Embed Optimizer

YouTube動画やTikTokなどの埋め込みコンテンツのパフォーマンスを最適化するために作られています。具体的には、埋め込みが画面に表示されたときにだけ読み込む「遅延読み込み」を行い、ページの読み込み中に他のリソースと競合しないようにすることで、パフォーマンスを向上させます。将来的には、さらに多くの最適化機能が追加される予定です。

また、このプラグインは「Optimization Detective」プラグインのインストールと有効化を推奨します。このプラグインが有効な場合、訪問者の行動に基づいて、画面上部に表示される埋め込みが記録され、これらの埋め込みに対しては遅延読み込みが適用されません。遅延読み込みは読み込みに遅れを生じさせ、ユーザー体験やページのLCPスコアに悪影響を与える可能性があるためです。

さらに、Optimization Detectiveが有効な場合、人気のある埋め込みコンテンツ(YouTube、Twitter、Vimeo、Spotify、VideoPressなど)に必要なネットワークリソースに対して事前接続リンクを追加することで、読み込み速度が向上します。

このプラグインは設定やユーザーインターフェースがなく、インストールするだけで動作するように設計されています。

Enhanced Responsive Images

WordPressでのレスポンシブ画像機能を実験的に強化するものです。現在、次の機能を提供しています:

1. テーマのレイアウト情報を使用して、sizes 属性の精度を向上させる。

2. 遅延読み込み画像に sizes=”auto” を追加する新しいHTML仕様の実装。

また、このプラグインは「Image Prioritizer」プラグインと連携します。このプラグインが有効になると、実際の訪問者のデータに基づいて、画面外(ページ下部)にある画像を学習し、それらの画像に対して loading=”lazy” を自動で追加します。そして、このプラグインはさらにその画像に sizes=”auto” を追加することで、遅延読み込みのパフォーマンスを向上させます。

このプラグインには設定やユーザーインターフェースはなく、インストールするだけで自動的に動作するように設計されています。

Embed Optimizer


ページの表示速度を左右するLCP(Largest Contentful Paint)要素の画像読み込みを最適化します。LCP要素には、<img>タグの画像やCSSの背景画像が含まれます。テーマのレスポンシブデザインでは、異なる画面サイズ(ブレークポイント)で異なるLCP要素が存在する可能性があるため、各ブレークポイントごとにLCP画像を特定し、その画像の読み込みを優先するようにプリロードリンクが追加されます。

この記事をシェア

投稿日: 2024年8月22日
カテゴリ: GA4
タグ: GA4, SEO, WordPress
coiai

coiai

この記事もおすすめ

デフォルトサムネイル

【WSL入門】Ubuntu on WSL2 に開発ツールを一式そろえる — Git / nvm / pnpm / AWS CLI / Terraform

前回の記事では、Windows に WSL2 を導入して Ubuntu が動くところまでを扱いました。ただ、素の Ubuntu はあくまで「まっさらな Linux」です。ここから実際に開発を始めるには、バージョン管理・ランタイム・クラウド操作のツールを自分で入れていく必要があります。 この記事では、すべて公式ドキュメントに載っている手順だけを使って、次のツールを順番にセットアップします。 各セクションの末尾に出典 URL を置いてあるので、手順が古くなったと感じたらそこを見に行ってください。記事末尾には出典一覧もまとめています。 検証環境Windows 11 / WSL2 / Ubuntu 24.04 LTS(x86_64)確認日:2026年7月28日 バージョン番号は執筆時点のものです。インストールコマンド自体は基本的に「常に最新を取ってくる」形になっているので、そのまま実行して問題ありません。 はじめに:WSL開発の大原則 コマンドに入る前に、ひとつだけ。Microsoft の公式ドキュメントが繰り返し書いている重要な原則があります。 使う予定のツールと同じ OS 側にファイルを置く。Linux ツールで Linux コマンドラインから作業しているなら、最速のパフォーマンスを出すためにファイルは WSL ファイルシステムに格納します。 具体的には、プロジェクトは次の場所に置きます。 /mnt/c/ 配下はファイルシステムをまたぐため、npm install や git status が体感でわかるほど遅くなります。第2弾でこれから入れるツールも、すべて Linux 側のホームディレクトリを前提に使ってください。 出典:WSL 開発環境を設定する — Microsoft Learn 1. まずは基本ツール Ubuntu を起動したら、最初にやることはパッケージの更新です。Microsoft の公式ドキュメントにもこう書かれています。 ディストリビューションの優先パッケージ マネージャーを使用して、パッケージを定期的に更新およびアップグレードすることをお勧めします。Windows [&hellip;]

デフォルトサムネイル

WindowsでWSL2をセットアップしてUbuntuを使えるようにする

TerraformやAWS CLI、Dockerを快適に使うために、WindowsにWSL2を導入しました。 この記事では、実際に行ったセットアップ手順と、途中で遭遇したエラーへの対処方法をまとめます。 なぜWSLを使うのか? WSL(Windows Subsystem for Linux)は、Windows上でLinux環境を動かすための仕組みです。 AWSやTerraform、Dockerなど、多くの開発ツールはLinux環境との相性が良いため、Windowsで開発する場合でもWSL2を利用するのが一般的です。 今回の開発環境では以下のような構成を想定しています。 1. WSLをインストール PowerShell(管理者)を開き、以下を実行します。 2. Ubuntuの初回セットアップ Ubuntuを起動すると、Linuxユーザー名とパスワードの設定を求められます。 例 好きなユーザー名を入力します。 続いてパスワードを設定します。 ※入力中は文字が表示されませんが正常な動作です。 3. パッケージを更新 Ubuntuを起動したら、まず最新状態へ更新します。 4. エラーが表示された アップグレード中に次のようなメッセージが表示されました。 一見エラーに見えますが、今回は最後まで と表示され、更新自体は正常に完了していました。 WSLではsystemd関連の処理で、このような警告が表示されることがあります。 5. WSLの状態を確認 PowerShellで以下を実行します。 今回は となっていました。 6. Docker DesktopとUbuntuの違い ここで少し混乱しやすいポイントがあります。 Docker Desktopをインストールすると、docker-desktopというWSLディストリビューションが作成されます。 しかし、これはDockerが内部で利用するためのもので、普段の開発を行う場所ではありません。 おすすめの構成は次の通りです。 開発はUbuntuで行い、Docker Desktopはコンテナ実行基盤として利用します。 7. Ubuntuを既定のディストリビューションに変更 現在登録されているWSLを確認します。 Ubuntuがインストールされていることを確認したら、 を実行します。 これで だけでUbuntuが起動するようになります。 今後インストール予定 WSL環境では今後以下を導入していきます。 この環境をベースに、AWS Organizations、IAM [&hellip;]

AWS IAM Identity Centerとは?IAM Userを使わないAWS認証・権限管理のベストプラクティス

AWS IAM Identity Centerとは?IAM Userを使わないAWS認証・権限管理のベストプラクティス

AWS Organizationsによるマルチアカウント環境を構築した後、次に設定したのがAWS IAM Identity Centerです。 以前はAWSへログインするためにIAM Userを作成することが一般的でしたが、現在AWSでは、人がAWSへログインする場合はIAM Identity Centerの利用を推奨しています。 今回は、IAM Identity Centerを導入した理由と、実際の設定内容についてまとめます。 IAM Identity Centerとは IAM Identity Center(旧 AWS Single Sign-On)は、複数のAWSアカウントやAWSアプリケーションへの認証・認可を一元管理するサービスです。 従来のように各AWSアカウントへIAM Userを作成する必要はなく、 というメリットがあります。 AWS Organizationsと組み合わせることで、マルチアカウント環境の運用が大幅に容易になります。 なぜIAM UserではなくIdentity Centerなのか 以前は、このような構成が一般的でした。 しかし、この方法では といった課題があります。 Identity Centerを利用すると、ユーザー情報は一元管理され、各AWSアカウントには必要な権限だけを割り当てる運用になります。 AWS Well-Architected Frameworkでも、人によるアクセスにはフェデレーション認証を利用し、長期認証情報(IAM Userのアクセスキーなど)をできる限り利用しないことが推奨されています。 今回の構成 今回は次のようなシンプルな構成にしました。 グループ Administrators AWS環境全体を管理するメンバーです。 現在は を所属させる予定です。 Developers アプリケーションやインフラ開発を行うメンバー向けです。 今回はまだ利用していませんが、開発メンバーが増えた際に使用します。 将来的には などを割り当てる予定です。 ReadOnly 閲覧専用グループです。 監査やレビュー、外部アドバイザー向けとして利用します。 今回は技術メンターにReadOnly権限を付与することを想定しています。 Permission [&hellip;]

この記事を書いた会社

株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC(概念実証)、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。

商号株式会社 coiai創業2022年1月設立2025年1月23日資本金1,500,000円(設立時点)本社所在地東京都練馬区関町北 3-6-9代表者代表取締役 竹村 啓佑 / 代表取締役 服部 陽良

主なご相談内容

会社概要・役員紹介を見る

詳しい会社情報は会社概要ページでご覧いただけます。

資料請求・無料相談

導入要件のヒアリングからPoC、本番運用まで伴走します。まずはお気軽にご相談ください。

お問い合わせの前に 個人情報保護方針 をご確認ください。