feat(gatsby-plugin-google-analytics): Add preconnect and dns-prefetch

[pgilad]

Added preconnect and dns-prefetch link headers when using the gatsby-plugin-google-analytics plugin. It's recommended by the Lighthouse tool, also see the discussion on #12802

I also didn't like that all code had to be indented for the process.env.NODE_ENV check, so I changed it to early return (Sorry about that 😸 )

[yogeshkotadiya]

Thanks for this PR 👍
But can we please add plugin option to preconnect GA.

[wardpeet]

Thanks for this PR 👍
But can we please add plugin option to preconnect GA.

Honestly I don't think this is needed, preconnect has hardly any downside and is done when the browser is idle and has time to do it. Most connections are kept in cache which means that preconnect is probably already done.
@yogeshkotadiya if you have other experiences feel free to add more context why you would like to make this optional.

@pgilad could you check your formatting rules as lots has changed which shouldn't be changed (see linting errors)

[pgilad]

Thanks @wardpeet - no auto formatting 😢 ? Oh I see we use prettier, hold on

[sidharthachatterjee]

@pgilad Linting issues fixed thanks to @pieh

[yogeshkotadiya]

Honestly I don't think this is needed, preconnect has hardly any downside and is done when the browser is idle and has time to do it. Most connections are kept in cache which means that preconnect is probably already done.

@wardpeet That's prefetch not preconnect

preconnect initiates early in the browser and since some browsers have limited preconnect threads e.g. Chrome can request up to 6 DNS request simultaneously.

Pre-connecting to noncritical resource host can then block other DNS requests.
Also, the browser does not cache preconnect to browser cache instead it's stored into HTTP cache which expires in around ~2 Min.

[wardpeet]

@yogeshkotadiya it depends on how you look at it, the browser keeps the preconnect connection ready for 10s but there is more to it than that. The operating system is caching the dns. Also when using tls 1.3 the handshake will do 1 roundtrip instead of 2 which is also something the operating system will provide. Chrome dedicates 8 threads to dns resolution if not mistaken.

I agree that preconnect shouldn't be thought of lightly but for a resource like analytics it's probably not bad as it mostly already is resolved and will be used in 10s. If you feel really strongly about this feel free to create a PR to disable it but it should be enabled by default.

[yogeshkotadiya]

@wardpeet This makes sense, you made things very clear and I learned something also so thanks 👍
So go ahead and merge it.

[gatsbot]

Holy buckets, @pgilad — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!