As developers, ensuring optimal site performance is crucial for both user experience and SEO. One tool that helps assess this is Google's PageSpeed Insights, which uses Lighthouse to measure various performance metrics. However, interpreting these results, especially in relation to third-party scripts like Klevu JS, can sometimes be challenging.
This guide will help you understand these metrics and provide actionable steps to improve your Lighthouse score.
If you'd prefer to skip the details and jump straight to the solutions, please scroll down to the section titled Proactive Solutions to Improve Lighthouse Scores.
Understanding PageSpeed Insights Reporting
Firstly, Lets try to understand how PageSpeed generates its reports, Here are some bullet points:
- PageSpeed uses Lighthouse internally which visits your webpage and measures how long different tasks take, using simulated settings to mimic a mid-range mobile device.
- PageSpeed adjusts the raw data from Lighthouse. For mobile tests, it multiplies results by a factor (e.g. 4) to simulate a slower device.
- PageSpeed simulates a 4G connection by limiting speed and adding delays to requests.
- The simulated CPU power is much lower than a powerful desktop. For mobile, PageSpeed uses a 4x multiplier to bring the values closer to what you'd see on a low-end mobile device. The more details are available in this link from Lighthouse official documentation.
- The initial test run is unthrottled, but subsequent runs may show different results due to high variability (30-60%). This is mitigated to some extent by comparing results to expected values, reducing the error rate to 10-30%. Again the source of above info is lighthouse official repo documentation and metrices doc.
Klevu's Impact on PageSpeed Score
Klevu JS, like any third-party script, can influence several performance metrics that Lighthouse measures. Here’s how:
Direct Impacts
JavaScript Execution Time
Adding JavaScript code naturally increases the execution time, which includes both compilation and evaluation. The more code we send, the longer this process takes. While reducing the amount of code can minimize compilation time, this only accounts for less than 10% of the total execution time and does not directly affect the PageSpeed score.
Largest Contentful Paint (LCP)
On pages where Klevu generates most of the content, such as category navigation or landing pages, the Largest Contentful Paint is affected. This is because the content is rendered on the client side instead of the server side, delaying when the main content appears. To address this, we prioritize Klevu’s JavaScript to run before other scripts. On simpler pages with limited JavaScript, such as a base Shopify page, this can significantly reduce LCP—even if it slightly increases total blocking time (e.g., a 1-second increase in blocking time might reduce LCP by up to 5 seconds). However, on more complex pages with additional scripts, this effect can vary and the ratio may be much higher.
Total Blocking Time (TBT)
We influence TBT by prioritizing Klevu scripts to load content quickly. On simpler pages, such as a base Shopify page, Klevu typically contributes up to 20% of the total blocking time. However, on more complex pages, while Klevu may still take around 100-150ms, its percentage contribution to total blocking time will vary, particularly if the total blocking time is much longer (e.g., 1 second versus 10 seconds). Since TBT can contribute up to 30 points to the overall score, Klevu’s impact could potentially reduce the score by a maximum of 6 points.
Other Factors
Other issues like excessive DOM size or improperly sized images do not directly affect the final score. These are usually due to the theme code, customer data sources, or configuration limits (e.g., displaying 100 products on a single page).
Indirect Impacts
Cumulative Layout Shift
While we do not directly impact Cumulative Layout Shift, we do have an indirect effect due to content being loaded after the initial render. CLS measures how much content shifts on the screen from when it first appears until the page is fully loaded (usually between the First Contentful Paint and the Largest Contentful Paint). Since our scripts and CSS are not active at the time of the First Contentful Paint, there is little we can do from the script side to control CLS. However, this can be mitigated by fixing the sizes of pre-rendered and post-rendered boxes, which must be handled by the app/customer.
Other Factors affecting Metrics
SEO Score
- Some links are not crawlable, typically those affecting design elements like grid vs. list views for product lists. This can be improved by reviewing and adjusting the HTML/CSS of the theme.
- The mobile design may have issues with overlapping elements or improperly sized elements for tap actions.
Proactive Solutions to Improve Lighthouse Scores
Cumulative Layout Shift (25% Contributor to Report)
If the page has content below the search results, such as a footer, it should be hidden until the results are available. Any shifting content falls under this category. Once the results are displayed, footer can be displayed again.
Total Blocking Time (30% Contributor to Report)
- First Party Integration: Move Klevu JS to first party as an inline script or platform asset directory to remove it from the list and include it under the platform loading time.
Consideration:
1. Since this would lock the client Klevu JavaScript into fixed versions, it's important to regularly monitor for newer versions and update as needed.
2. This will also remove the Klevu entry from the JavaScript execution time in the report. - Defer or Not: Depending on whether Klevu is responsible for the main content generation, a decision can be made to use defer or not. To use defer, it is strongly recommended that the other JS on the page should also be using defer.
Largest Contentful Paint (25% Contributor to Report)
Synchronous Loading: For customers using defer or async loading for the Klevu scripts, we recommend switching to synchronous loading. Remove the defer attribute from the script tag. Be aware that removing defer or async may increase the total blocking time, so consider this option based on your site's JavaScript configuration.
Shopify Consideration: Shopify defaults to deferring the loading of all script tags.