Lighthouse — The booster pack for your app performance.

Lighthouse

Kunal is a freelancer in web development with experience of 3 years in web development. He worked on an e-commerce project for one of his clients, built it from scratch and delivered it on time. However, the client’s QA team blocked the project’s release to production as the site was taking close to ~12 seconds to load a page! Needless, the client obviously wasn’t happy.

He realized he never thought of performance improvement in the development phase and today it rang as Priority one.

Why is performance important?

• Website performance is proportional to revenue.
• It enhances a website’s ranking in SEO.
• According to Amazon:

Increasing page loading times by a fraction of a second costs $745 million a year in lost revenue!

In 2009, the company conducted a research study involving over 1,000 online shoppers.

The threshold is 2 seconds — more than that and the user will become impatient

40% of the respondents will abandon the site if it takes more than 3 seconds to load

• DoubleClick found that sites with less than five seconds of load time earned up to twice as much ad revenue as opposed to the ones loading within 19 seconds.

He started an investigation into the issue to measure the web performance and zeroed in on two major tools:

• Google Lighthouse
• WPT — Web Performance Test

Kunal wanted to explore Lighthouse because it had backing from Google. He thought to learn more about it.

What is Lighthouse really?

It is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. You can also use Lighthouse CI to prevent regressions on your sites.

It allows you to audit a page’s:

• Performance
• Accessibility
• Progressive web apps
• Best practices
• SEO and more

After Lighthouse has run these audits against your chosen page it generates a report for you.

Lighthouse provides performance metrics to measure website performance score

Lighthouse provides performance metrics to measure the score for your website.

Performance Metrics:

• First Contentful Paint marks the time at which the first text or image is painted.
• First Meaningful Paint measures when the primary content of a page is visible
• Speed Index shows how quickly the contents of a page are visibly populated.
• First CPU Idle marks the first time at which the page’s main thread is quiet enough to handle input
• Time to Interactive is the amount of time it takes for the page to become interactive.
• Max Potential First Input Delay that your users could experience is the duration, in milliseconds, of the longest task.

Why Metrics?

• It gives you suggestions and diagnostics of areas of improvement.
• You can run it against any web page, public or requiring authentication.
• It has audits for performance, accessibility, progressive web apps, SEO and more.
• It also provides low-level in-depth analysis of networks, the main thread, CPU usages, frame, etc.

Audit Reports and Diagnostics

Low-level in-depth analysis

When Kunal tested his developed e-commerce project, the lighthouse score was a low 37.

Lighthouse score for unoptimized version

After analyzing the issue he came up with an action plan to enhance performance

The Plan:

• Eliminate render-blocking resources: Any resources which block the whole rendering of the DOM. It should be asynchronous and independent…

Render-blocking resources example

• Small chunks “load-only-what-you-need”: It helps to load the page faster initially, and lazy load the rest of the components and images on a need basis:

Lazy component

• Latest version of libraries and frameworks: It helps to optimize the performance of dependencies.

bundle size comparison

• Move unnecessary dependencies to devDependencies section: It reduces the final production build size which further leads to a reduction in JS parse and execution time.

Moved unnecessary dependency to dev-dependency

• DOM Tree: Render and paint performance of DOM is dependent upon the depth of DOM’s tree. (Preferably less than 200)
• Image optimization: High-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Currently, WebP format is not supported by Safari and IE11 browsers.
• CSS optimization: Remove unnecessary styles, minify, compress and cache it, and split CSS not required at page load into additional files to reduce CSS render-blocking.
• CDN: It gets the resource from the nearest server which saves network call duration.
• HTTP/2: Browsers can send 6 requests simultaneously in HTTP whereas, in HTTP/2, they can send 100.

After these optimizations, the Lighthouse score jumped to 99 and page loading time fell to ~2 seconds and Kunal was able to release the application to production.

Lighthouse score for optimised version

Conclusion:

For most developers, website performance comes last when it should be the first phase of application design. Lighthouse plays a major role in audit and improves the performance of your website.

Remember what you gain by being conscious of performance:

• A good user experience
• Increased number of unique users
• Higher revenue

“Never neglect the performances at any cost otherwise it will cost you later.”