feat: preload CSS in the <head /> (fixes #20)

gajus · Jul 13, 2017 · 9a9f2fe · 9a9f2fe
1 parent 9ab4e1f
commit 9a9f2fe
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -100,7 +100,8 @@ export type UserConfigurationType = {
   +deviceMetricsOverride?: UserDeviceMetricsOverrideType,
   +extractStyles?: boolean,
   +formatStyles?: FormatStylesType,
-  +inlineStyles?: boolean
+  +inlineStyles?: boolean,
+  +preloadStyles?: boolean
 };
 
 ```
@@ -112,12 +113,13 @@ The default behaviour is to return the HTML.
 
 |Name|Type|Description|Default value|
 |---|---|---|---|
+|`cookies`|`Array<{name: string, value: string}>`|Sets a cookie with the given cookie data.|N/A|
 |`delay`|`number`|Defines how many milliseconds to wait after the "load" event has been fired before capturing the styles used to load the page. This is important if resources appearing on the page are being loaded asynchronously.|`number`|`5000`|
 |`deviceMetricsOverride`||See [`deviceMetricsOverride` configuration](#devicemetricsoverride-configuration)||
-|`cookies`|`Array<{name: string, value: string}>`|Sets a cookie with the given cookie data.|N/A|
 |`extractStyles`|`boolean`|Extracts CSS used to render the page.|`false`|
+|`formatStyles`|`(styles: string) => Promise<string>`|Used to format CSS. Useful with `inlineStyles=true` option to format the CSS before it is inlined.|N/A|
 |`inlineStyles`|`boolean`|Inlines the styles required to render the document.|`false`|
-|`formatStyles`|`(styles: string) => Promise<string>`|Used to format CSS. Useful with `--inlineStyles` option to format the CSS before it is inlined.|N/A|
+|`preloadStyles`|`boolean`|Adds `rel=preload` for all styles removed from `<head>`. Used with `inlineStyles=true`.|`true`|
 |`url`|`string`|The URL to render.|N/A|
 
 #### `deviceMetricsOverride` configuration

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "chrome-remote-interface": "^0.24.1",
     "death": "^1.1.0",
     "debug": "^2.6.8",
+    "surgeon": "^2.1.0",
     "yargs": "^8.0.2"
   },
   "description": "Webpage pre-rendering service. ⚡️",

diff --git a/src/bin/commands/render.js b/src/bin/commands/render.js
@@ -52,6 +52,11 @@ export const baseConfiguration = {
     default: false,
     description: 'Inlines the styles required to render the document.',
     type: 'boolean'
+  },
+  preloadStyles: {
+    default: true,
+    description: 'Adds rel=preload for all styles removed from <head>. Used with inlineStyles=true.',
+    type: 'boolean'
   }
 };
 

diff --git a/src/factories/createConfiguration.js b/src/factories/createConfiguration.js
@@ -21,6 +21,7 @@ export default (userConfiguration: UserConfigurationType): ConfigurationType =>
   const extractStyles = userConfiguration.extractStyles || false;
   const formatStyles = userConfiguration.formatStyles;
   const inlineStyles = userConfiguration.inlineStyles || false;
+  const preloadStyles = userConfiguration.preloadStyles !== false;
 
   if (extractStyles && inlineStyles) {
     throw new Error('inlineStyles and inlineStyles options cannot be used together.');
@@ -41,6 +42,7 @@ export default (userConfiguration: UserConfigurationType): ConfigurationType =>
     deviceMetricsOverride,
     extractStyles,
     formatStyles,
-    inlineStyles
+    inlineStyles,
+    preloadStyles
   };
 };
diff --git a/src/types.js b/src/types.js
@@ -33,7 +33,8 @@ export type UserConfigurationType = {
   +deviceMetricsOverride?: UserDeviceMetricsOverrideType,
   +extractStyles?: boolean,
   +formatStyles?: FormatStylesType,
-  +inlineStyles?: boolean
+  +inlineStyles?: boolean,
+  +preloadStyles?: boolean
 };
 
 export type ConfigurationType = {|
@@ -42,5 +43,6 @@ export type ConfigurationType = {|
   +deviceMetricsOverride: DeviceMetricsOverrideType,
   +extractStyles: boolean,
   +formatStyles?: FormatStylesType,
-  +inlineStyles: boolean
+  +inlineStyles: boolean,
+  +preloadStyles: boolean
 |};
diff --git a/src/usus.js b/src/usus.js
@@ -5,6 +5,7 @@ import {
 } from 'chrome-launcher';
 import CDP from 'chrome-remote-interface';
 import createDebug from 'debug';
+import surgeon from 'surgeon';
 import {
   delay
 } from 'bluefeather';
@@ -30,9 +31,11 @@ const inlineStyles = async (DOM: *, Runtime: *, rootNodeId: number, styles: stri
   // e.g. How to create a new node using CDP DOM API?
   await Runtime.evaluate({
     expression: `
-      const styleElement = document.createElement('div');
-      styleElement.setAttribute('id', 'usus-inline-styles');
-      document.head.appendChild(styleElement);
+      {
+        const styleElement = document.createElement('div');
+        styleElement.setAttribute('id', 'usus-inline-styles');
+        document.head.appendChild(styleElement);
+      }
     `
   });
 
@@ -56,9 +59,11 @@ const inlineImports = async (DOM: *, Runtime: *, rootNodeId: number, styleImport
 
   await Runtime.evaluate({
     expression: `
-      const scriptElement = document.createElement('div');
-      scriptElement.setAttribute('id', 'usus-style-import');
-      document.body.appendChild(scriptElement);
+      {
+        const scriptElement = document.createElement('div');
+        scriptElement.setAttribute('id', 'usus-style-import');
+        document.body.appendChild(scriptElement);
+      }
     `
   });
 
@@ -75,6 +80,41 @@ const inlineImports = async (DOM: *, Runtime: *, rootNodeId: number, styleImport
   });
 };
 
+const inlineStylePreload = async (DOM: *, Runtime: *, rootNodeId: number, styleImports: $ReadOnlyArray<string>) => {
+  // @todo See note in inlineStyles.
+
+  await Runtime.evaluate({
+    expression: `
+      {
+        const scriptElement = document.createElement('div');
+        scriptElement.setAttribute('id', 'usus-style-preload');
+        document.head.appendChild(scriptElement);
+      }
+    `
+  });
+
+  const nodeId = (await DOM.querySelector({
+    nodeId: rootNodeId,
+    selector: '#usus-style-preload'
+  })).nodeId;
+
+  debug('#usus-style-preload nodeId %d', nodeId);
+
+  const x = surgeon();
+
+  const styleUrls = x('select link {0,} | read attribute href', styleImports.join(''));
+
+  const stylePreloadLinks = styleUrls
+    .map((styleUrl) => {
+      return `<link rel="preload" href="${styleUrl}" as="style">`;
+    });
+
+  await DOM.setOuterHTML({
+    nodeId,
+    outerHTML: stylePreloadLinks.join('\n')
+  });
+};
+
 export const render = async (url: string, userConfiguration: UserConfigurationType = {}): Promise<string> => {
   const configuration = createConfiguration(userConfiguration);
 
@@ -176,6 +216,10 @@ export const render = async (url: string, userConfiguration: UserConfigurationTy
       styleImportLinks.push(styleImportNodeHtml.outerHTML);
     }
 
+    if (configuration.preloadStyles) {
+      await inlineStylePreload(DOM, Runtime, rootDocument.root.nodeId, styleImportLinks);
+    }
+
     await inlineStyles(DOM, Runtime, rootDocument.root.nodeId, usedStyles);
     await inlineImports(DOM, Runtime, rootDocument.root.nodeId, styleImportLinks);
 

diff --git a/test/createConfiguration.js b/test/createConfiguration.js
@@ -14,7 +14,8 @@ const createDefaultConfiguration = () => {
     },
     extractStyles: false,
     formatStyles: undefined,
-    inlineStyles: false
+    inlineStyles: false,
+    preloadStyles: true
   };
 };
 

diff --git a/test/usus.js b/test/usus.js
@@ -34,7 +34,48 @@ test('renders HTML', async (t) => {
   `));
 });
 
-test('inlines CSS', async (t) => {
+test('inlines CSS (preloadStyles=false)', async (t) => {
+  const styleServer = await serve(`
+    body {
+      background: #f00;
+    }
+  `, 'text/css');
+
+  const server = await serve(`
+    <html>
+      <head>
+        <link rel='stylesheet' href='${styleServer.url}'>
+      </head>
+      <body>
+        <p>Hello, World!</p>
+      </body>
+    </html>
+  `);
+
+  const result = await render(server.url, {
+    delay: 500,
+    inlineStyles: true,
+    preloadStyles: false
+  });
+
+  await styleServer.close();
+  await server.close();
+
+  t.true(isHtmlEqual(result, `
+    <html>
+      <head>
+        <style>body { background: #f00; }</style>
+      </head>
+      <body>
+        <p>Hello, World!</p>
+
+        <link href="${styleServer.url}" rel="stylesheet">
+      </body>
+    </html>`
+  ));
+});
+
+test('inlines CSS (preloadStyles=true)', async (t) => {
   const styleServer = await serve(`
     body {
       background: #f00;
@@ -63,6 +104,7 @@ test('inlines CSS', async (t) => {
   t.true(isHtmlEqual(result, `
     <html>
       <head>
+        <link as="style" href="${styleServer.url}" rel="preload">
         <style>body { background: #f00; }</style>
       </head>
       <body>