legacy-knowledge-base
公開されました Jun. 30, 2025

モバイルデバイスのChrome Lighthouseの結果が悪い

投稿者

Kanchan Bisht

knowledge-article-header-disclaimer-how-to

knowledge-article-header-disclaimer

legacy-article

learn-legacy-article-disclaimer-text

問題

  • Chromeに内蔵されているLCPとFCPのテスト結果は、デスクトップでは問題ないが、モバイルデバイスでは問題ないようだ。

    再現の手順

    1. DXPのバニラインスタンスを起動する

    2. 現在のホームページに留まり、検査する(Chromeブラウザ)

    3. Lighthouseタブに移動し、モバイルまたはデスクトップを選択します。

    4. ページ分析オプション(右端)をクリックする。

環境

  • Liferay DXP 7.4

解像度

  • 実際、Lighthouseを使用した場合、モバイルのロード時間はデスクトップのロード時間よりも遅くなることが予想されます。 その理由は、Lighthouseがモバイルデバイスがよく利用する低速ネットワークをシミュレートするためにスロットリングを使用しているからだ。 その結果、その期待は製品側から達成しようとするものではない。
  • さらに、 、グーグルのパフォーマンス分析がどのように行われているかを考慮する必要がある。 デフォルトでは、グーグルはこの解析を4Gスロットルで実行しているため、ネットワークはデスクトップの場合よりも大幅に遅くなる。 実際、デフォルトのオプション「Simulated throttling」を「Dev Tools throttling」に変更するだけで、モバイルのスコアを少し改善することができます。
    しかし、ユーザーはデバイスも考慮する必要があります。ほぼすべてのラップトップは、Moto G Powerデバイスよりも高速である可能性が高いGoogle Lighthouseは、このパフォーマンス分析を実行するためにデフォルトで使用しています。
    この2つの理由により、ほとんどのページがモバイルよりもデスクトップで著しく優れたパフォーマンスを発揮する。
  • 一方、、いくつかのケースでは、主な問題は、ユーザーがLiferayの clay.css ファイルでこの問題に遭遇しており、そのページで他のリソースがロードされるのを妨げています。 LiferayのCSSフレームワークがすべて含まれているため、このファイルはかなり大きいからです。
  • 解決策: この問題を避けるには、ファイルを分割してオンデマンドでロードできるようにする必要がありますが、現在のところ、Liferayはコンテンツを1つのファイルで提供することしかできないため、これは製品の制限となっています。
    このような方法でコンテンツを配信したのは、クライアントとサーバー間で複数のリクエストが発生するのを避けるため、パフォーマンス上の理由もあった。 しかし、私たちは、このソリューションがいくつかのユースケースにとって完璧でないことを認識しており、より良いソリューションを見つけるために今後努力するつもりです。

    その結果、機能リクエスト #LPS-201788 が提出されました。
  • あるいは、、モバイル用のライトハウス・スコアを素早く向上させる最善の方法は、ユーザーがウェブサーバーで gzip を設定していることを確認することである。

追加情報

did-this-article-resolve-your-issue

legacy-knowledge-base