Improving Cashfree Payments Website Performance Using Unlighthouse

Table of Contents

Optimising web performance is essential to guarantee customer satisfaction and improve search engine results. With Google prioritising performance as a key factor, we Cashfree Payments, have employed UnLighthouse to acquire comprehensive insights and streamline performance evaluation.

This powerful open-source tool uses Google Lighthouse’s capabilities to provide complete configuration and effective website scanning.

Challenges in Evaluating Site Performance

The website engineering team faced challenges to test the website overall performance effectively due to the growing number of website pages. We needed a complete platform to manage all pages from a single location, provide an overall website score, and address scalability issues.

Previously, we could only use PageSpeed Insights and Lighthouse to assess individual pages, which made it time-consuming and unproductive to look at the overall performance.

Solution: UnLighthouse

To solve these problems, we integrated UnLighthouse with the help of CI/CD pipelines. This provides the overall website performance by automating the process and simultaneously monitoring several pages.

UnLighthouse is a game-changing solution that optimises our website by tackling certain issues and improving the process of performance monitoring in general.

Lighthouse vs. UnLighthouse

Lighthouse is useful for assessing web performance, accessibility, and best practices. It is integrated with Chrome DevTools and can audit Individual pages.

However, UnLighthouse expands on Lighthouse to offer quicker audit times and the capacity to audit several pages simultaneously. It is open-source and easily incorporates automated website audits with CI/CD processes.

These features show how UnLighthouse is more functional and capable than Lighthouse.

Unique Insights and Benefits

From the above insights in the table, we can clearly outline the benefits of UnLighthouse which demonstrates its superior capabilities in performance monitoring and optimisation compared to Lighthouse.

Here’s how we are leveraging UnLighthouse effectively:

1. Integration and Monitoring

To implement UnLighthouse CI, we have installed both UnLighthouse and Puppeteer globally. Puppeteer is required to automate and test web pages to help in the audit process in UnLighthouse.

2. Configuring UnLighthouse

We create an unlighthouse.config.js file to add UnLighthouse configuration which works only for public URLs.

Include the following scripts in the package.json file to facilitate running and auditing the website locally.

3. Schedule Automated Testing

The SEO Report Generation step in our CI/CD pipeline automates creating and committing SEO reports. The pipeline involves the following steps:

Commit Check: The Commit Check process is skipped if the commit message contains the phrase “skip seo report.”
Setup: Removes unnecessary packages and configures npm credentials.
Browser Installation: Installing Google Chrome on a browser is necessary to generate SEO reports.
Report Generation and Commit: This process generates reports and commits the outcomes.
Artifacts: The artifacts generated are saved to display the reports for future use.

This setup streamlines SEO auditing in a self-hosted Linux environment, enhancing workflow automation for web applications.

Currently, we include it in the deployment pipeline after the staging deployment.

4. SEO Monitoring

We can monitor the UnLighthouse configuration by adding budget thresholds to track SEO and performance scores.

With these thresholds added, if the SEO score is below 70 or the performance score is below 30, the CI pipeline will fail, displaying an error and a list of the pages that don’t satisfy the requirements.

Evaluating SEO scores and putting thresholds in place for notable variations in SEO metrics, aids in monitoring missing SEO information. By doing this, the website’s search engine optimisation is maintained.

Data Management and Visualisation

The data stored after the successful pipeline completion can be deployed to a centralised storage system, such as S3, allowing better data management. We can utilise this dashboard to visualise the core web vital metrics.

The default UnLighthouse dashboard helps us understand the performance of multiple pages across the website.

UnLighthouse Dashboard for Mobile

UnLighthouse Dashboard for Desktop

UnLighthouse Dashboards give a thorough overview of the performance of our website together with specific indicators like SEO performance and accessibility, they show the total performance score and provide particular insights for individual pages as well as overall site data.

Enhancing UnLighthouse Setup for Improved Understanding

We can use the following to customise our UnLighthouse settings to locate performance bottlenecks and apply efficient optimisation techniques:

1. Optimise Testing Parameters

Use the UnLighthouse metrics to assess and prioritise our performance concerns.

2. Identifying Performance Bottlenecks and Using Optimisation Strategies

Determine performance bottlenecks:

Sort performance issues according to priority by using the UnLighthouse metrics.
Increase your focus on problems that impact the user experience.

Implement Optimisation Strategies:

Enhancement of image: Reduce and compress the assets to fasten the loading process.
Code minification: Reduce the rendering time by minifying HTML, CSS, and JavaScript.

Conclusion

To sum up, adding UnLighthouse to our toolkit has boosted how we monitor and improve our website’s performance. We’ve put a strong focus on automation and scalability, which has helped us maintain efficient SEO and performance scores across all our pages.

With the insights and configurations we’ve made, our site is now more user-friendly and efficient. We’re excited to keep leveraging the benefits of these upgrades as we continue to grow and adapt.