CODEWITHSUNDEEP
performancegatsby
lumenwrites
lumenwrites

Reputation: 1507

Performance tools (Lighthouse) show very slow "Time to Interactive" on my Gatsby site. How can I improve it?

I'm looking for some help. My website is getting a very low time to interactive score (over 10 seconds).

It tells me I need to "Minimize main-thread work" and "Reduce JavaScript execution time".

Could you share some advice/tips on what I can do? How do you improve these metrics in your projects?

From googling, it seems like the main thing people do is code splitting, but Gatsby does that automatically already, right?

What else can be done?

Upvotes: 2

Views: 1914

Answers (1)

Drag13
Drag13

Reputation: 5988

You have quite a good Lighthouse Score. Try to test your page in anonymous mode to disable extensions.

However, you can improve it.

  • Load bundle-analysys and check what is inside your bundles. Try to find duplicated scripts or scripts you are not using.
  • Check importing strategy for the big scripts. If you are doing smth like import * from 'lodash' change it to import {groupBy} from 'lodash'
  • Find possibility to use lazy loading. This is not done automatically. The best candidates for this would be other pages of your site.
  • Then do revision for all scripts you have. Might be you can remove something that is not very important for you. Some people using jQuery for the querying page only.

Do general performance improvements:

  • Reduce image sizes (on your landing page you have one quite big image for the 450KB).
  • Reduce the number of fonts (you have 4 of them 547kb)
  • Think about removing analytics or change it for something simpler

For tracking performance changes use perfrunner or lighthouse-ci

Upvotes: 4

Related Questions