diff --git a/README.md b/README.md index 40b2040..0161677 100755 --- 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 +[grabarz-partner-module-src]: +[grabarz-partner-href]: + +[renovate-status-src]: +[renovate-status-href]: + [travis-build-status-src]: [travis-build-status-href]: diff --git a/example/nuxt.config.js b/example/nuxt.config.js index 226094c..e8b1e19 100644 --- 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 index 7e177f5..15c939a 100644 --- 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 index 917e477..096d2fb 100644 --- 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')