1

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

enter image description here

Sam
  • 1,765
  • 11
  • 82
  • 176
  • 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. – Sam Jul 14 '20 at 14:09
  • 1
    [This is a useful post](https://www.reddit.com/r/gatsbyjs/comments/ionebl/what_are_all_the_tips_to_improve_lighthouse/?utm_source=share&utm_medium=ios_app&utm_name=iossmf) for anyone trying to increase Gatsby lighthouse scores – Sam Nov 29 '20 at 17:44
  • where did you end up with this? – Johnathan Coker Aug 14 '21 at 21:57
  • @JohnathanCoker One of the issues I never solved – Sam Aug 15 '21 at 02:33

2 Answers2

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.

coreyward
  • 77,547
  • 20
  • 137
  • 166
  • 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. – Sam Jul 14 '20 at 23:36
  • 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 – Sam Jul 14 '20 at 23:38
  • 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. – coreyward Jul 14 '20 at 23:53
  • 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. – Sam Aug 10 '20 at 01:15
  • Could you explain how to do this `Use a CNAME record on a non-apex domain` ? – Sam Aug 10 '20 at 01:15
  • @Sam https://docs.netlify.com/domains-https/custom-domains/#definitions – coreyward Aug 11 '20 at 19:17
  • Is CNAME short for custom domain? That link doesn't mention CNAME once – Sam Aug 11 '20 at 21:50
  • Could you give an example? – Sam Aug 11 '20 at 22:15
  • @Sam 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. https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/ – coreyward Aug 11 '20 at 22:54
  • 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](https://i.stack.imgur.com/bda1V.png). 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? – Sam Aug 11 '20 at 23:13
0

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.

enter image description here

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.

Kuldeep
  • 489
  • 6
  • 10
  • I use Netlify and Github. Netlify does the SSR and the files are all stored on Github – Sam Aug 17 '20 at 00:00
  • 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. – Kuldeep Aug 17 '20 at 07:11