Issue
-
Chrome's built-in lighthouse testing results for LCP and FCP rates, appear to be fine for desktop but not mobile devices.
Steps to reproduce:
-
Start a vanilla instance of DXP
-
Stay on the current home page and inspect (Chrome browser)
-
Navigate to the Lighthouse tab and select mobile or desktop
-
Click on the page analyzes option (on the extreme right up).
-
Environment
- Liferay DXP 7.4
Resolution
- It is actually expected that a mobile load time will be slower than a desktop load time using Lighthouse. The reason for this is that Lighthouse uses throttling to simulate a slower network that mobile devices are often on. As a result, the expectation is not one that we can seek to achieve from the product side.
- Moreover, users need to consider the way how Google performance analysis is run. By default, Google is running this analysis with a 4G throttling, so the network is going to be significantly slower than in the Desktop case. Actually, just by changing the default option Simulated throttling by Dev Tools throttling is enough to improve a bit your mobile score.
But users also need to consider the device, almost any laptop is likely to be faster than the Moto G Power device Google Lighthouse makes use by default to run this performance analysis.
These two reasons make most of the pages get a significantly better performance on Desktop than on Mobile. - Whereas, in some of the cases, the main issue is that users are encountering this with Liferay's
clay.cssfile which is preventing other resources from being loaded on their page. This is possible because that file is quite large since it contains all of Liferay's CSS frameworks. -
Solution: To avoid this issue, we’d need to be able to split that file into small chunks we can load on demand, however, as of today, this is a product limitation since Liferay only can offer that content in one single file.
The reason why we delivered that content that way was also for performance reasons to avoid multiple requests between client and server. Although, we are aware that the solution is not perfect for some use cases and we’ll work in the future to find a better solution.
As a result, a feature request #LPS-201788 has been submitted for this. - Alternatively, the best way to quickly improve the lighthouse score for mobile is to make sure users have set up gzip on the web server.
Additional Information
- Please be aware that the implementation of new ideas within Liferay products is entirely dependent on their evaluation or investigations since this will need modifying our existing product code, therefore there will be no ETA on this, but users can certainly vote for it.
- Requesting-a-New-Feature-or-Feature-Improvement