問題
-
Chromeに内蔵されているLCPとFCPのテスト結果は、デスクトップでは問題ないが、モバイルデバイスでは問題ないようだ。
再現の手順
-
DXPのバニラインスタンスを起動する
-
現在のホームページに留まり、検査する（Chromeブラウザ）
-
Lighthouseタブに移動し、モバイルまたはデスクトップを選択します。
-
ページ分析オプション（右端）をクリックする。
-
環境
- 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 を設定していることを確認することである。
追加情報
- Liferay製品への新しいアイデアの実装は、既存の製品コードを変更する必要があるため、その評価や調査次第であることをご了承ください。
- 新機能または機能改善のリクエスト