gatsby-plugin-google-analytics should pre-connect to https://www.google-analytics.com

[pgilad]

Running lighthouse-4.2.0 on Gatsby blog, that includes gatsby-plugin-google-analytics will result in the following note:

I ran lighthouse from the cli, with Gatsby info:

% npx gatsby info

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 11.11.0 - ~/.nvm/versions/node/v11.11.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v11.11.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 66.0
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.2.8 => 2.2.8
    gatsby-cli: ^2.4.17 => 2.4.17
    gatsby-image: ^2.0.34 => 2.0.34
    gatsby-plugin-canonical-urls: ^2.0.12 => 2.0.12
    gatsby-plugin-catch-links: ^2.0.13 => 2.0.13
    gatsby-plugin-feed: ^2.1.0 => 2.1.0
    gatsby-plugin-google-analytics: ^2.0.17 => 2.0.17
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24
    gatsby-plugin-netlify: ^2.0.13 => 2.0.13
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10
    gatsby-plugin-robots-txt: ^1.4.0 => 1.4.0
    gatsby-plugin-sharp: ^2.0.30 => 2.0.30
    gatsby-plugin-sitemap: ^2.0.10 => 2.0.10
    gatsby-plugin-typescript: ^2.0.11 => 2.0.11
    gatsby-remark-autolink-headers: ^2.0.16 => 2.0.16
    gatsby-remark-copy-linked-files: ^2.0.11 => 2.0.11
    gatsby-remark-embed-gist: ^1.1.7 => 1.1.7
    gatsby-remark-emojis: ^0.3.1 => 0.3.1
    gatsby-remark-images: ^3.0.10 => 3.0.10
    gatsby-remark-prismjs: ^3.2.6 => 3.2.6
    gatsby-source-filesystem: ^2.0.28 => 2.0.28
    gatsby-transformer-remark: ^2.3.8 => 2.3.8
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

[yogeshkotadiya]

Add this in gatsby-ssr.js

import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <link
      rel="dns-prefetch"
      key="dns-prefetch-google-analytics"
      href="https://www.google-analytics.com"
    />,
  ]);
};

[pgilad]

Thanks! Maybe it should be added to the plugin code?

[pgilad]

Also, should it be preconnect perhaps? https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect

Maybe both?

[yogeshkotadiya]

@pgilad You can certainly use both dns-prefetch and preconnect If you are going to use put preconnect first because preconnect lacks better browser support compare to dns-prefetch.
So even if it fails it can always fall back to dns-prefetch.

Although for something noncritical and low prioritized resource like analytics dns-prefetch is just fine.

[pgilad]

I'm doing it because Lighthouse complains ;)

[wardpeet]

feel free to open a PR to fix this in google analytics plugin.

I'm going to close this as the issue got resolved but we are still open to get a PR to get this in.

[pgilad]

Thanks! https://github.com/gatsbyjs/gatsby/pull/12826