Speed Up Gatsby Performance

Question

I was given a task at work to increase the performance of my project. Currently, the Google Lighthouse score fluctuates but overall it\'s not that great of a score so we are try

Answer 1

I looked into this a lot about 4 months ago and this is what I found, but some of the reasons below were due to bugs in how lighthouse determined pagespeed on Gatsby websites, so a few may not true anymore (for example, using fadeIn={false} and loading="eager" on images, and using a tags instead of Link from gatsby-link. Please leave a comment or edit if one of these tips is no longer true.

---

• using gatsby-plugin-preact (big and easy change)

• using <a> tags instead of gatsby-link

• using gatsby-plugin-purge-css (removes all you unused CSS. Useful if you're using a CSS framework like bootstrap)

• using fadeIn={false} and loading="eager" on Gatsby Images, or setting the duration of the fade in to be lower: durationFadeIn={250}

• Preconnecting to certain 3rd party sites with gatsby-plugin-preconnect

• If you have a background image, split it into 2 images, one for above the fold and one for below the fold (your initial view of the page has to load less at the beginning)

• Optimizing my above the fold images manually before letting gatsby optimize them. This was a website I found helpful for doing that, but you may be able to find a good open source software for that.

• Loading third party iframes after only after the user scrolls past them. Ex:

     ...
     const ref = useRef()
     const onScreen = useOnScreen(ref, '0px')
     let showWidget
     if (onScreen){
         showWidget = true
     }
     ...
     return (
         <div ref={ref}>
             {showWidget && <ThirdPartyIframe /> }
         </div>
     )
  

Other tips I've read about include

• Using inline styling (although I've heard Gatsby does this automatically)

• Using a 301 redirect instead of 307 (If this applies to you)

• Not using Typography.js

• Possibly using an S3 & Cloudfront and not Netlify to host the website

---

RESOURCES TO READ FURTHER

I created a reddit post where I posted something similar, I'd recommend reading the comments underneath. It references this github thread which is pretty popular, and I found this post to be the most helpful on the thread.

As well, here's a number of questions I posted related to increasing the lighthouse score for Gatsby projects. You shouldn't need them with the information listed above, but maybe they'll be useful or you'll learn something from them

• Largest contententful paint (LCP) on lighthouse is a p tag. (Using gatsby)
• Pagespeed insights avoid chaining critical request only lists Initial navigation followed by my domain twice
• Reduce initial server response time with Netlify and Gatsby
• Largest contentful paint is one big gatsby-background-image and very slow, PageSpeed Insights tells me to preconnect third-party origins and then tells me they are not used by the browser after preconnecting
• PageSpeed Insights diagnostic “Ensure text remains visible during webfont load”
• Load third party iframe in React after page load, so that the iframe does not affect PageSpeed score