feat(lighthouse): add option to ignore prefetches in lighthouse

GrabarzUndPartner · Apr 28, 2020 · 131b17e · 131b17e
1 parent 53d3d24
commit 131b17e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,8 +1,11 @@
 # nuxt-font-loader-strategy
 
+[![Grabarz & Partner - Module][grabarz-partner-module-src]][grabarz-partner-href] 
+
 [![Build Status][travis-build-status-src]][travis-build-status-href]
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Renovate - Status][renovate-status-src]][renovate-status-href]
 [![License][license-src]][license-href]
 
 > Helps to load the fonts and activate them by preloading.
@@ -38,6 +41,7 @@ yarn add nuxt-font-loader-strategy # or npm install nuxt-font-loader-strategy
   modules: [
 
     ['nuxt-font-loader-strategy', { 
+        ignoreLighthouse: true,
         ignoredEffectiveTypes: ['2g', 'slow-2g'],
         fonts: [
           // Font
@@ -99,7 +103,8 @@ yarn add nuxt-font-loader-strategy # or npm install nuxt-font-loader-strategy
 
 | Property                | Type       | Description                                                                                                               | Default                     |
 | ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
-| `useWorker`             | `Boolean`  | If set, the non-preloads are loaded via WebWorker.                                                                        | `false`                     |
+| `useWorker`             | `Boolean`  | If set, the non-preloads (prefetches) are loaded via WebWorker.                                                           | `false`                     |
+| `ignoreLighthouse`      | `Boolean`  | If set, the non-preloads (prefetches) in Lighthouse are disabled (ignored).                                               | `false`                     |
 | `classPattern`          | `Boolean`  | Font css class pattern.                                                                                                   | `[family]_[weight]_[style]` |
 | `importPathResolve`     | `Function` | Path resolve for font `src: url(fontPath)`                                                                                | Replace `@/` to `~`         |
 | `requirePathResolve`    | `Function` | Path resolve for `require(fontPath)`                                                                                      | no changes                  |
@@ -253,6 +258,12 @@ Connection speed dependent font loading, requires the support of `navigator.conn
 
 <!-- Badges -->
 
+[grabarz-partner-module-src]: <https://img.shields.io/badge/Grabarz%20&%20Partner-Module-d19700>
+[grabarz-partner-href]: <https://grabarzundpartner.de>
+
+[renovate-status-src]: <https://img.shields.io/badge/renovate-enabled-brightgreen>
+[renovate-status-href]: <https://renovate.whitesourcesoftware.com/>
+
 [travis-build-status-src]: <https://travis-ci.org/GrabarzUndPartner/nuxt-font-loader-strategy.svg?branch=master>
 [travis-build-status-href]: <https://travis-ci.org/GrabarzUndPartner/nuxt-font-loader-strategy>
 

diff --git a/example/nuxt.config.js b/example/nuxt.config.js
@@ -54,6 +54,7 @@ module.exports = {
   modules: [
     [
       resolve(__dirname, '..'), {
+        ignoreLighthouse: true,
         prefetchCount: 2,
         fonts: [
           {

diff --git a/lib/module.js b/lib/module.js
@@ -100,6 +100,7 @@ function addPlugins (moduleScope, fonts, options) {
       fontFaceCSS: PATH_FONT_FACE_CSS,
       loadFontsOptions: {
         ignoredEffectiveTypes: options.ignoredEffectiveTypes,
+        ignoreLighthouse: options.ignoreLighthouse,
         unlockDelay: options.unlockDelay,
         prefetchCount: options.prefetchCount
       }

diff --git a/lib/utils/fontLoader.js b/lib/utils/fontLoader.js
@@ -1,11 +1,13 @@
 export function loadFonts (options) {
   options = Object.assign({
     ignoredEffectiveTypes: [],
+    ignoreLighthouse: false,
     unlockDelay: 0,
     prefetchCount: 2
   }, options)
 
   if (isSlowConnection(options.ignoredEffectiveTypes)) { return }
+  if (options.ignoreLighthouse && isLighthouse()) { return }
 
   if (linkFeaturePreload() && linkFeaturePrefetch()) {
     const preloads = document.querySelectorAll('link[rel=\'delay-prefetch\']')
@@ -67,6 +69,14 @@ export function isSlowConnection (ignoredEffectiveTypes) {
   return navigator.connection && (ignoredEffectiveTypes.find(type => navigator.connection.effectiveType === type))
 }
 
+/**
+ * Checks if user-agent on Google Pagespeed (Lighthouse)
+ * @return Boolean
+ */
+export function isLighthouse () {
+  return new RegExp('(Speed Insights)|(Chrome-Lighthouse)').test(window.navigator.userAgent)
+}
+
 export function linkFeaturePrefetch () {
   const link = document.createElement('link')
   return link.relList && link.relList.supports('prefetch')