From 0eba06f8614eca8237abaaf8b965f0c5992311d5 Mon Sep 17 00:00:00 2001 From: Olavi Haapala Date: Wed, 30 Sep 2020 15:12:47 +0300 Subject: [PATCH] Inline the CSS for improved first paint performance (#81) * Upgrade Next.js from 9.1.2 to 9.5.3 * Inline the CSS for improved first paint performance * Change ENV to NODE_ENV Possibly the CSS was not minified due to this --- package.json | 6 +++--- pages/_document.tsx | 22 +++++++++++++++++++++- yarn.lock | 2 +- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4cb683e..dbd7b87 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "scripts": { "start": "next", "build": "next build && next export", - "dev": "SERVER=http://localhost:9000/ ENV=development next", - "prod": "ENV=production next build && next export", + "dev": "SERVER=http://localhost:9000/ NODE_ENV=development next", + "prod": "NODE_ENV=production next build && next export", "lint": "eslint --ext .jsx --ext .js .", "prettify": "prettier --write components pages styles" }, @@ -21,7 +21,7 @@ "font-awesome": "^4.7.0", "less": "^3.10.3", "lodash": "^4.17.15", - "next": "^9.1.2", + "next": "^9.5.3", "next-fonts": "^1.4.0", "parse-github-event": "^1.1.3", "react": "^16.11.0", diff --git a/pages/_document.tsx b/pages/_document.tsx index 262ff40..b08c50a 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -3,6 +3,26 @@ import Document, { Html, Head, Main, NextScript } from "next/document"; import { Footer } from "../components/Footer"; import Fader from "../components/Fader"; import ReactGA from "react-ga"; +import fs from "fs"; +import path from "path"; + +class CustomNextHead extends Head { + // TODO: This might not be needed if Next.js implements built-in support + // https://github.com/zeit/next-plugins/issues/364 + getCssLinks({ allFiles }) { + return allFiles + .filter(file => file.endsWith(".css")) + .map(file => ( +