Skip to content

nuxt-booster will help you to improve the lighthouse performance score (100/100) of your website. πŸš€

License

Notifications You must be signed in to change notification settings

basics/nuxt-booster

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

nuxt-speedkit

Grabarz & Partner - Module

Master

npm version npm version npm downloads

Renovate - Status License

⚠️⚠️⚠️ This Package is work in progress… ⚠️⚠️⚠️

Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website. All used components and resources are loaded on demand based on the viewport.

Features:

  • automatic preloading critical font resources
  • dynamic viewport based loading of font resources (subselectors, media queries)
  • dynamic loading of images based on bandwidth

Result:

  • delivery of the minimum required resources based on the current viewport

Release Notes πŸ“–

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
Vivaldi
Vivaldi
Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

Setup

  1. Add nuxt-speedkit dependency to your project.
npm run add nuxt-speedkit # or npm install nuxt-speedkit
  1. Add nuxt-speedkit to the modules section of nuxt.config.js.
{
  modules: [
    // Simple usage
    'nuxt-speedkit',

    // With options
    ['nuxt-speedkit', { 
        fonts: [{
          family: 'Font A',
          fallback: ['Arial', 'sans-serif'],
          variance: [
            {
              style: 'normal',
              weight: 300,
              src: '@/assets/fonts/font-a-300'
            }, {
              style: 'italic',
              weight: 300,
              src: '@/assets/fonts/font-a-300Italic'
            }, {
              style: 'normal',
              weight: 400,
              src: '@/assets/fonts/font-a-regular'
            }, {
              style: 'italic',
              weight: 400,
              src: '@/assets/fonts/font-a-regularItalic'
            }, {
              style: 'normal',
              weight: 700,
              src: '@/assets/fonts/font-a-700'
            }, {
              style: 'italic',
              weight: 700,
              src: '@/assets/fonts/font-a-700Italic'
            }
          ]
        }]
     }]
  ]
}

Options

Property Type Description Default
fonts Array List of included fonts. []
componentAutoImport Boolean If set Component automatically import from module. []
componentPrefix String Defines a prefix for the module components, important for auto import (componentAutoImport). E.g.: LazyPicture -> PrefixLazyPicture []

Font Object

Property Type Description Default
family String Font-Family Name undefined
fallback Array Fallback fonts e.g. ['Arial', 'sans-serif'] undefined
variance Array List of font variances []

Font Variance Object

Property Type Description Default
style String CSS-Prop. font-style undefined
weight String CSS-Prop. font-weight undefined
src String File Path without extension. require path available. []

Components

The use of the components is default lazy.
lazy components are activated by IntersectionObserver.
If you use the attribute critical, the components switch to eager.

It is recommended that you declare components visible in the initial viewport with critical.
Any Vue component can be set with the attribute critical.

Important critical option is inherited on child nodes.

When using slot and v-font on a component set directly with critical, the font must be set as critical separately via isCritical.

LazyIframe [code]

Use native attributes to configure iframe (eg. <iframe>).

<lazy-iframe src="…" />

LazyImage [code]

Use native attributes to configure image (eg. <img>).

Do not use the loading attribute, this will break the LazyLoad mechanism.

<lazy-image src="…" />

LazyPicture [code]

Use native attributes to configure picture (eg. <picture>).

<lazy-picture src="…" />

Properties

{
  alt: '…', // Image alt
  title: '…', // Image Title    
  sources: [
    {
      // srcset can be filled with additional objects for different densities. 
      srcset: [
      {
        url: '…', // File path
        density: undefined// Value for density eg. 1x, 2x, by default not set.
      }
      ],
      type: // mimetype
    }
  ]
}

Using

Critical Attribute & Option

Use critical to switch the component contained in the module or $getFont to eager.

Examples

Attribute

<!-- use default attribute -->
<lazy-picture src="…" critical/>

<!-- use boolean -->
<lazy-picture src="…" :critical="true"/>

Single File Example

<template>
  <div>
    <span v-font="$getFont(…)"></span>
  </div>
</template>

<script>
export default {
  critical: true,
  props: { … }
}
</script>

v-font

For using the v-font directive, you can use $getFont to register a font on the current node.
By multiple Fonts Variants you can set a array.

Single Variance

<node v-font="$getFont(…)">…

Multiple Variance

<node v-font="[$getFont(…).bySelector('b,strong'), $getFont(…).bySelector('i')]">…

When registering the font with $getFont, a font object is returned.
This can be used to restrict the font to selectors (bySelector) or set as critical (isCritical).

$getFont (family, weight = 400, style = 'normal')

Parameters

Property Value Default
family Font-Family (eg. Custom Font) required
weight Font-Weight (eg. 700) 400
style Font-Style (eg. italic) normal

$getFont returns a FontObject, with these can be used for other operations.

FontObject Methods

isCritical()

Return: FontObject

Sets the font as critical. Use critical for Font, that you see in the initial viewport.
Other fonts load by lazyload, when show in viewport.

<node v-font="$getFont(…).isCritical()">…

addMedia(...media)

⚠️ Font preload not supported orientation media query. e.g. (orientation: portrait)

Font load and show by current CSS Media Query.

Ideal for Viewport optimized font load.

<node v-font="$getFont(…).isCritical().addMedia('(min-width: 992px)')">…

bySelector(selector)

⚠️ Order must be respected when using selectors. CSS Specificity

Return: FontObject

Defines css selectors to which the font should be applied.

<node v-font="$getFont(…).bySelector('strong')">…

OR operators can be defined by string or array.

<!-- String -->
<node v-font="$getFont(…).bySelector('strong,i')">…

<!-- Array -->
<node v-font="$getFont(…).bySelector('strong', 'i')">…

…

TODOS tasks the release

  • add critical images as preload
  • merge fontTools into font classes
  • check: convert html scripts into dynamic imports -> better & stable load performance
  • rename package
  • add package logo

TODOS

  • Complete readme
  • Cross Browser (IE Edge, Firefox, Chrome, Edge, Safari)
  • Live example website (eg. grabarzundpartner.de)
  • Example/Test pages
  • Create jest test based on test pages
    • v-font
    • LazyImage
    • LazyPicture
    • LazyIframe
    • LazyVideo
  • Clean Up!
    • Namings
    • code optimization
  • Publish module (npm, nuxt-modules)

if we have time

  • vFont-Collector as standalone vue plugin
  • Documentation and preparation for video streaming with LazyVideo
  • IE 11 (FontFace): https://github.com/bramstein/fontloader
  • Cypress visual regression tests

Development

  1. Clone this repository
  2. Install dependencies using npm run install or npm install
  3. Start development server using npm run dev

Preview

  1. Clone this repository
  2. Install dependencies using npm run install or npm install
  3. Build and start with express npm run start:generate
  4. Open http://127.0.0.1:3000 in Browser.

or look here

License

MIT License