カテゴリー: GA4

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

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

  • 【Google Analytics】 invalid parameter: ‘site_id’

    【Google Analytics】 invalid parameter: ‘site_id’

    これは何?

    WordPress で Google Site Kit を使用していて、プラグインのアップデートなどで設定ボタンを押した際に、

    invalid parameter: 'site_id'

    というエラーが出てくる場合の対処方法です。

    なおし方

    WordPress左のサイドバーから

    ツール/ 利用可能なツール を選択します。

    タブを開くと、「Site Kit をリセット」ボタンが出てくるので、
    それを押すと、最初から設定が出来、解決します。

Home
About
Blog
Works
Contact