Improve lighthouse performance score

Admin 1
Viewed 1897

I am hosting an Ionic-React web app via firebase-hosting here:

https://drakapoor-65d6d.web.app/

I ran a lighthouse audit on the page via chrome dev-tools and got a very poor performance rating...

I am not able to understand which part of the code is causing the score to fall.

I've commented on all the routes and components for this demo, even removed the fonts, if you try to run the Lighthouse via chrome dev tools and go to "View Original Trace", It'll show the detailed analysis of the website, Below is the result that came out:

Performance

Now, if you see around 4 seconds are lost trying to load a specific chunk "https://drakapoor-65d6d.web.app/static/js/6.53bd499b.chunk.js", I have no idea what's in it, I've commended the entire project and deployed. How can I get rid of this? what is going on, I am clueless to even proceed in any direction...

LightHouse score: here if you see the largest contentful paint and speed index are very poor, what Is causing this? I'm barely even doing anything..

please let me know if I can provide anything that'll help you help me, thanks. LightHouse Performance Score

lighthouse google-chrome-devtools javascript
1 Answers

TL;DR; Bad lighthouse score can be caused by your network, hardware or any other 3rd party addons.

Largest Contentful Paint (LCP) is the metric of FCP + N seconds to the first image or text block

First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen - a fast FCP helps reassure the user that something is happening.

And also, quoting from Web Dev #In the Field;

The performance of a site can vary dramatically based on a user's device capabilities and their network conditions. It can also vary based on whether (or how) a user is interacting with the page.

Your First Contentful Paint (FCP) which has 7.3s is considered Poor since it's over 3s. FCP is measured the first time when audit starts.

These are the classifications on the metrics (Based on Developer Insight);

        Good            Needs Improvement       Poor
FCP     [0, 1000ms]     (1000ms, 3000ms]        over 3000ms
FID     [0, 100ms]      (100ms, 300ms]          over 300ms
LCP     [0, 2500ms]     (2500ms, 4000ms]        over 4000ms
CLS     [0, 0.1]        (0.1, 0.25]             over 0.25

More details for each metric above can be found here;

As per Performance Scoring. Your score might also fluctuate based on;

  • A/B tests or changes in ads being served
  • Internet traffic routing changes
  • Testing on different devices, such as a high-performance desktop and a low-performance laptop
  • Browser extensions that inject JavaScript and add/modify network requests
  • Antivirus software

In order to improve your page performance, consider the following practices;

  1. Serve static assets with cache policy and CDNize them
  2. Consider code-splitting, and lazy loading components, when possible
  3. Minify CSS and JS. And resize image + compress with lossless compression if possible
  4. Use preload in your links for assets that eventually will be loaded the first time when your page loads.
  5. Minimize third party usage
  6. Consider using passive listener for touch and wheel event listeners. Read more about it here

And there are more to it which you can also find at Lighthouse Audit Documentation

Last but not least, if you have published your site - you can also have Lighthouse to audit your site at here. Which all tests are run using a simulated mobile device, throttled to a fast 3G network and 4x CPU slowdown.

Site audit

user_16272710
Related