[Help] Trying to figure out why my TTI is so high

[lynnntropy]

Summary

Hi! I've optimized everything I could think of on my site, but I'm still having trouble getting my TTI under 7 seconds or so in Lighthouse. This is making my mobile Lighthouse score top out at 70-75, which isn't terrible, but I was kind of hoping for better.

Is there anything obvious I could still fix that I'm missing here? I think I've been pretty careful with my dependencies, but my common.js + app.js still adds up to about 200kB gzipped. Looking at the waterfall, pretty much all the main thread work comes from my site's bundles, so there's no third-party scripts killing my perf or anything. Is this just as good as it gets with the number/size of dependencies I have?

Relevant information

WebPageTest results Lighthouse results Site webpack-bundle-analyzer report (ignore the huge chunk with a dependency on phaser, that's only used on one page for an Easter egg)

Environment (if relevant)

System: OS: Linux 4.19 Ubuntu 18.04.2 LTS (Bionic Beaver) CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor Shell: 2.7.1 - /usr/bin/fish Binaries: Node: 13.7.0 - /usr/bin/node Yarn: 1.21.1 - /usr/bin/yarn npm: 6.13.6 - /usr/bin/npm Languages: Python: 2.7.17 - /usr/bin/python npmPackages: gatsby: ^2.18.12 => 2.18.12 gatsby-image: ^2.2.34 => 2.2.34 gatsby-plugin-canonical-urls: ^2.2.1 => 2.2.1 gatsby-plugin-google-gtag: ^1.2.1 => 1.2.1 gatsby-plugin-lodash: ^3.2.1 => 3.2.1 gatsby-plugin-manifest: ^2.2.31 => 2.2.31 gatsby-plugin-offline: ^3.0.27 => 3.0.27 gatsby-plugin-react-helmet: ^3.1.20 => 3.1.20 gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 gatsby-plugin-sharp: ^2.3.5 => 2.3.5 gatsby-plugin-sitemap: ^2.2.25 => 2.2.25 gatsby-plugin-styled-components: ^3.1.16 => 3.1.16 gatsby-plugin-typescript: ^2.1.23 => 2.1.23 gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.8 => 1.1.8 gatsby-source-filesystem: ^2.1.40 => 2.1.40 gatsby-source-wordpress: ^3.1.62 => 3.1.62 gatsby-transformer-sharp: ^2.3.7 => 2.3.7

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[herecydev]

The thing that jumps out immediately to me is how slow all the connections are. What are you hosting this on?

Second big thing is that it's hosted on http. So you're missing out on http2 and brotli. among other optimizations as well I'm sure.

I would suggest creating a simple CDN. I've used Azure's CDN and it supports all the above stuff and was extremely responsive.

[lynnntropy]

Ah, yeah, my bad - I just threw it on Surge for the demo, since I don't have a proper production deployment yet and I didn't think it'd make much of a difference. I've moved it to Netlify and updated the links to remove that from the equation.

[herecydev]

Looks like your html is crazy big and most of it is css. You're including the entirety of line awesome, so I would look to tree shake that and get your html way below 100kb

[lynnntropy]

Thanks for pointing that out! You're right, I didn't think to look at my HTML output. Now I've built my own icon font that only includes the parts of Line Awesome I actually use, and while it's certainly annoying to have to rebuild the font every time I need a new icon, the much smaller font file is definitely helping.

What I also didn't realize was that importing a CSS file in Gatsby always inlined it on every page - that seems kind of counter-intuitive, but okay, it's my fault for not noticing it did that. Anyway, I fixed that by refactoring the way I import the CSS for a few libraries.

One odd thing I noticed was that all the SVGs I imported were ending up in my JS bundles as well as being included in the page. I guess I understand why it does that (React needs to know the data URI so it can rehydrate the component, after all), but it seemed to be bloating my bundles a lot, so I moved some of my SVGs to /static/ instead.

Right now I'm seeing a ~75 Performance score on PageSpeed Insights, and 85-90 in my local testing, which is definitely a bit better than I was getting before. Is anyone seeing any other obvious issues I could fix?

[wardpeet]

If you're going to use netlify as your production host, I would suggest installing gatsby-plugin-netlify. It does some optimizations to get your assets downloaded faster.

Some things to consider as well if svgs are above the fold it might be good to include them as react components.

Thank you for opening this, @OmegaVesko

We're marking this issue as answered and closing it for now but please feel free to open this discussion on discord. We hope we managed to help and thank you for using Gatsby! 💜