Reduce initial server response time with Netlify and Gatsby

Question

I'm running PageSpeed Insights on my website and one big error that I get sometimes is

Reduce initial server response time

Keep the server response time for the main document short because all other requests depend on it. Learn more.

React If you are server-side rendering any React components, consider using renderToNodeStream() or renderToStaticNodeStream() to allow the client to receive and hydrate different parts of the markup instead of all at once. Learn more.

I looked up renderToNodeStream() and renderToStaticNodeStream() but I didn't really understand how they could be used with Gatsby.

It looks like a problem others are having also

The domain is https://suddenlysask.com if you want to look at it

My DNS records

Kitchener

I think that gatsby-plugin-offline might help with this actually. If the server can respond offline then it can respond as soon as possible, but if it can't then this will cause some delay. Just guessing. – Kitchener

This is a useful post for anyone trying to increase Gatsby lighthouse scores – Kitchener

where did you end up with this? – Leaseback

@JohnathanCoker One of the issues I never solved – Kitchener

Answer 1

Use a CNAME record on a non-apex domain. By using the bare/apex domain you bypass the CDN and force all requests through the load balancer. This means you end up with a single IP address serving all requests (fewer simultaneous connections), the server is proxying to the content without caching, and the distance to the user is likely to be further.

EDIT: Also, your HTML file is over 300KB. That's obscene. It looks like you're including Bootstrap in it twice, you're repeating the same inline <style> tags over and over with slightly different selector hashes, and you have a ton of (unused) utility classes. You only want to inline critical CSS if possible; serve the rest from an external file if you can't treeshake it.

Heavierthanair

I actually don't know why there's all those repeating classes that are basically the same, I've thought they were really annoying but thought they just had to be there because of gatsby or something. The two bootstraps could possibly be because I have React-bootstrap, and I'm not sure if I have regular bootstrap also but I'll check. – Kitchener

Could you rephrase "You only want to inline critical CSS if possible". I'm not sure if you're telling to have inline css or not to have inline css – Kitchener

Prior to CSS in JS solutions, most websites put CSS in external files. This was good for caching since any shared styles could be used across pages without any additional data being transferred to the browser, but it meant that the browser had to load all of your CSS on the first page view. To optimize, styles required for the initial paint (think above the fold content) can be put directly into the HTML file in a style tag, making them available as soon as the browser can parse the file. – Heavierthanair

For anyone else reading this the plugin gatsby-plugin-purgecss worked pretty well for getting rid of unused css with almost no effort, although if you use the package react-bootstrap then this will get rid of some classes that you are actually using to style. – Kitchener

Could you explain how to do this Use a CNAME record on a non-apex domain ? – Kitchener

@Kitchener docs.netlify.com/domains-https/custom-domains/#definitions – Heavierthanair

Is CNAME short for custom domain? That link doesn't mention CNAME once – Kitchener

Could you give an example? – Kitchener

@Kitchener CNAME is a type of DNS record. Your site is slower because you're not using a CNAME record to point to Netlify, which would allow them to dynamically route to CDN edges. You can only use a CNAME record on a subdomain. docs.netlify.com/domains-https/custom-domains/… – Heavierthanair

I know it's a type of DNS record, but I don't know how to fill it in. I updated my question to show my dns records. This picture shows me trying to assign a DNS record. I set the value to suddenlysask.com because when I type @ and click save I receive the notification "Please match the requested format". I set name to www because I didn't know what else might be an option? I don't even know if www is a correct option but from what I've read on CNAME it seems like maybe www is an option? – Kitchener

Answer 2

Well the behavior is unexpected, I ran the pagespeed insights of your site and it gave me a warning on first test with initial response time of 0.74 seconds. Then i used my developer tools to look at the initial response time on the document root, which was fairly between 300 to 400ms. So I did the pagespeed test again and the response was 140ms. The test was passed. After that it was 120ms. See the attached image.

I totally think there is no problem with the site. Still if you wanna try i would recommend you to change the server or your hosting for once, try and go for something different. I don't know what kind of server you have right now where the site is deployed. You can try AWS S3 and CloudFront, works well for me.

Coaster

I use Netlify and Github. Netlify does the SSR and the files are all stored on Github – Kitchener

For once try switching to S3. test how it works, don,t completely switch yet. just deploy your build to s3 for once. Add cloudfront and test the response. I think that issue will be resolved. – Coaster