diff --git a/.env.default b/.env.default index ca6bdd30..441d8883 100644 --- a/.env.default +++ b/.env.default @@ -14,27 +14,30 @@ GFW_API_KEY= MAPBOX_API_KEY= DOCUMENTS_MINDATE= -// Transifex token +# Transifex token TX_TOKEN= -// Sentry DSN +# Sentry DSN SENTRY_DSN= SENTRY_ORG= SENTRY_PROJECT= SENTRY_AUTH_TOKEN= -// for development env to disable pushing release to sentry +# for development env to disable pushing release to sentry SENTRY_DISABLE_RELEASE= -// Osano Cookie Consent Manager +# Osano Cookie Consent Manager OSANO_ID= -// Hotjar - you can disable for e2e or development in prod mode +# Hotjar - you can disable for e2e or development in prod mode # DISABLE_HOTJAR=true -// Features +# Critical CSS +CRITICAL_CSS=true + +# Features FEATURE_COUNTRY_PAGES=false -// map page should be enabled only in dev environment +# map page should be enabled only in dev environment FEATURE_MAP_PAGE=true -// Next +# Next NEXT_TELEMETRY_DISABLED=1 diff --git a/package.json b/package.json index f6818e1e..5863bcc9 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dayjs": "^1.11.11", "deck.gl": "7.3.6", "dotenv": "^16.4.5", + "dropcss": "^1.0.16", "foundation-sites": "^6.8.1", "fuse.js": "^7.0.0", "html-react-parser": "^5.1.10", diff --git a/pages/_document.js b/pages/_document.js index a0e2a9b7..ed22cc26 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,10 +1,42 @@ import React from 'react'; -import { Html, Head, Main, NextScript } from 'next/document'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; import Script from 'next/script'; +import path from 'path'; +import fs from 'fs'; +import dropcss from 'dropcss'; import GoogleTagManager from 'components/layout/google-tag-manager'; -export default function Document({ locale }) { +const isCriticalCssEnabled = process.env.NODE_ENV === 'production' && process.env.CRITICAL_CSS === 'true'; + +class CustomHead extends Head { + constructor(...args) { + super(...args); + if (isCriticalCssEnabled) { + this.context.optimizeCss = true; + } + } + + getCssLinks(files) { + const links = super.getCssLinks(files); + if (links && links.length && isCriticalCssEnabled) { + links.forEach((link) => { + link.props.media = 'print'; + }); + links.push( +