[v2] CSS preloading observations

[thescientist13]

Description

Seeing a Chrome and Lighthouse warning related to CSS assets not being preloaded (correctly?) when using gatsby serve after upgrading to latest v2 beta releases.

Steps to reproduce

Upgraded to latest beta releases of Gatsby v2 as recommended in the v2 beta announcement blog.

Expected result

No console warning or recommendation from Lighthouse. (compared to v1)

Actual result

Chrome

Lighthouse

Environment

$ ./node_modules/.bin/gatsby info --clipboard

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.87
    Firefox: 60.0.1
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.0-beta.1 => 2.0.0-beta.1
    gatsby-cli: ^1.1.58 => 1.1.58
    gatsby-plugin-google-analytics: ^1.0.20-10 => 1.0.20-10
    gatsby-plugin-react-helmet: ^2.0.12-7 => 2.0.12-7
    gatsby-plugin-sitemap: ^1.2.14-10 => 1.2.14-10
    gatsby-plugin-typography: ^2.0.1-11 => 2.0.1-11

File contents (if changed)

gatsby-config.js: N/A
package.json

$ git diff package.json
diff --git a/package.json b/package.json
index efa965a..ca4a395 100644
--- a/package.json
+++ b/package.json
@@ -31,12 +31,12 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.7.0",
-    "gatsby": "next",
+    "gatsby": "^2.0.0-beta.1",
     "gatsby-cli": "^1.1.58",
-    "gatsby-plugin-google-analytics": "next",
-    "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-sitemap": "next",
-    "gatsby-plugin-typography": "next",
+    "gatsby-plugin-google-analytics": "^1.0.20-10",
+    "gatsby-plugin-react-helmet": "^2.0.12-7",
+    "gatsby-plugin-sitemap": "^1.2.14-10",
+    "gatsby-plugin-typography": "^2.0.1-11",
     "glob": "^7.1.2",
     "jest": "^22.4.3",
     "prop-types": "^15.6.1",

gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[KyleAMathews]

Ah nice catch! Yeah, we inline the critical CSS so shouldn't also preload it. I don't use CSS really so didn't catch this. I believe the logic should be if style.rel is preload, we just inline and if prefetch we add prefetch and don't inline.

Could you make a PR for this?

gatsby/packages/gatsby/src/cache-dir/static-entry.js

Lines 238 to 264 in a3cb256

	styles
	.slice(0)
	.reverse()
	.forEach(style => {
	// Add <link>s for styles.
	headComponents.push(
	<link
	as="style"
	rel={style.rel}
	key={style.name}
	href={urlJoin(pathPrefix, style.name)}
	/>
	)
	headComponents.unshift(
	<style
	type="text/css"
	data-href={urlJoin(pathPrefix, style.name)}
	dangerouslySetInnerHTML={{
	__html: fs.readFileSync(
	join(process.cwd(), `public`, style.name),
	`utf-8`
	),
	}}
	/>
	)
	})

[thescientist13]

Thanks for the quick feedback and pointer @KyleAMathews ! Will give it my best shot!

[KyleAMathews]

Closed by #6009

[ooloth]

Hmm... this change has led to new layout jumps on the first page load when using v2.

For those of us using CSS, the v1 inlining resulted in a seamless first load experience (all styles implemented immediately), while the new page jumps on load resulting from not inlining the styles are less ideal.

Can we please either revert to always inlining the styles (like v1) or add the option to do so when a particular site would benefit from that approach?

[ooloth]

I just noticed that while the styles are not inlined in development, they do appear to be inlined in production. Is this the intended behaviour?

Sorry if I'm missing something obvious here... I'd love to jump to the v2 beta, but just want to make sure that client sites will still have their styles inlined in production.

[ooloth]

I've moved my follow-up discussion to #6211.