Options

crossorigin

• Type: String, Boolean
  • Default: 'anonymous'
  • Valid values: anonymous, use-credentials, '', true, false

Sets the global crossorigin value of the Nuxt Speedkit preloads.
The default value is the crossorigin value from the Render Configuration.

Set false to disable the crossorigin.

MDN - HTML.Attributes.crossorigin

optimizePreloads

• Type: Boolean
  • Default: true

Activating this option optimizes the initial script preloads and removes unnecessary loads.

The following NuxtJS settings are made or overwritten in the nuxt.config:

detection

• Type: Object

These options can be used to define the initial checks to display the SpeedkitLayer. The prerequisite are that the SpeedkitLayer has been embedded into the layout.

{
  performance: true,
  browserSupport: true
}

performanceMetrics

• Type: Object

With the help of the metrics, the actual performance check on client side can be configured.

{
  device: {
    hardwareConcurrency: { min: 2, max: 48 },
    deviceMemory: { min: 2 }
  },
  timing: {
    fcp: 800,
    dcl: 1200 // fallback if fcp is not available (safari)
  }
}

device

• Type: Object

Definition of the minimum hardware requirements for visiting the website.

{
  hardwareConcurrency: { min: 2, max: 48 },
  deviceMemory: { min: 2 }
}

timing

• Type: Object

Definition of the max. FCP duration (ms). If the specified value is exceeded, the SpeedkitLayer will be displayed. If the browser does not grant access to the FCP, as fallback the DCL will be evaluated.

{
  fcp: 800,
  dcl: 1200 // fallback if fcp is not available (safari)
}

fonts

• Type: Array

List of all font families used in the project. Only the fonts that are listed in the configuration can be retrieved and integrated via $fonts.getFont(...).

[
  {
    family: 'Font A',
    locals: ['Font A'],
    fallback: ['Arial', 'sans-serif'],
    variances: […]
  },
  {
    family: 'Font B',
    locals: ['Font B'],
    fallback: ['Arial', 'sans-serif'],
    variances: […]
  }
]

Font-Family

• Type: Object

Describes a font family with all its variants.

{
  family: 'Font A',
  locals: ['Font A'],
  fallback: ['Arial', 'sans-serif'],
  variances: […]
}

Font-Variance

• Type: Object

A font variant describes an instance of a font family and is used to generate the FontFace declaration. Font variants differ in style and weight.

{
  style: 'normal',
  weight: 400,
  sources: [
    { src: '@/assets/fonts/font-a-regular.woff', type:'woff' },
    { src: '@/assets/fonts/font-a-regular.woff2', type:'woff2' }
  ]
}

sources

• Type: Array

List of all available font files of a font family variation.

[
  { src: '@/assets/fonts/font-a-regular.woff', type:'woff' },
  { src: '@/assets/fonts/font-a-regular.woff2', type:'woff2' }
]

targetFormats

• Type: Array
  • Default: ['webp', 'avif', 'jpg|jpeg|png|gif']

Sets the default formats for the SpeedkitPicture.

Can be overridden in the SpeedkitPicture via the formats property.

For png, jpeg and gif formats we have added the | operator in the declaration.
This adjusts the destination format to the source format.

Example

Bad

The declaration below generates a png, jpeg and gif (destination format) for each jpeg (source format). The same applies to a png and a gif as source format. However, this is not practical for the source specifications in the Picture.

{
  targetFormats: ['jpg', 'jpeg', 'png', 'gif']
}

Good

Based on the source format, the appropriate target format is created using the declaration described below.

{
  targetFormats: ['jpg|jpeg|png|gif']
}

lazyOffset

• Type: Object

Global option for the IntersectionObserver built into the Nuxt Speedkit.

{
  component: '0%',
  asset: '0%' 
}

disableNuxtCritters

• Type: Boolean
  • Default: false

If set, @nuxtjs/critters will not be integrated.

disableNuxtFontaine

• Type: Boolean
  • Default: false

If set, @nuxtjs/fontaine will not be integrated.

disableNuxtImage

• Type: Boolean
  • Default: false

If set, @nuxt/image will not be integrated.