Usage
The following tools are provided to optimize your webpage:
Critical prop for critical components
A critical component is visible in the viewport when the web page is initially loaded. This can be communicated to the automated background process via a critical prop. The flag is passed on to all child components. This means that only the main component (organism) must be provided with it. With the help of this flag, the corresponding static resources (images & fonts) are also declared as preload tags in the page head. All other components and their associated resources, that do not have a positive critical prop, are lazy loaded on demand.
<component :critical="true" />
Font declaration
The integration of fonts is component-based directly in the Vue template. All fonts, which have been declared in nuxt.config
, can be assigned directly to the corresponding HTML element or component. In addition, subselectors and media queries can be defined, which enable viewport-based declarations or rich-text declarations.
The cool thing about this is that it saves the additional declaration in the CSS. You no longer have to keep the template and the CSS with its corresponding selectors for fonts in sync. Yeah! This is extremely helpful, especially when it comes to theming.
<component v-font="$fonts.getFont(…)" />
Learn more about directive v-font
.
Import components
Until now, the components available in the page were always declared via the attribute components
. The import was done statically (import component from '@/component';
) or dynamically (import('@/component')
). nuxt-speedkit
provides a new attribute named speedkitComponents
that only allows dynamic imports. This ensures that only the components visible in the viewport are executed on initial load and the remaining components outside the viewport are executed on demand. In the background, the module by Markus Oberlehner is used in a standardised way.
{
speedkitComponents: {
Stage: () => import('@/components/organisms/Stage'),
}
}
Whether a component is in the viewport or not is determined in the background by the intersection observer. If the initialisation is to take place earlier, e.g. when scrolling, this can be adjusted accordingly via the rootMargin
option in the nuxt.config.
Speedkit Components
In order to be able to load further static resources such as pictures, iFrames or Youtube videos in the iFrame in a performance-optimised way, we provide the following components. The speedkit components can be imported via the namespace #speedkit/components
.
- SpeedkitLayer
- SpeedkitPicture
- SpeedkitPicture (Experimental)
- SpeedkitIframe
- SpeedkitYoutube
- SpeedkitYoutube (Experimental)
<template>
<speedkit-picture>
</template>
<script>
import SpeedkitPicture from '#speedkit/components/SpeedkitPicture'
export default {
components: {
SpeedkitPicture
}
}
</script>
Example
You can check out a sample integration of nuxt-speedkit
at Nuxt Speedkit Example.
Browser compatibility
You can use nuxt-speedkit
with Internet Explorer 11 browser.
You need the following polyfills:
The PostCSS Plugin postcss-object-fit-images
and following build.transpile
entries for @nuxt/image
:
@nuxt/image
image-meta
For the polyfills, it is recommended to integrate them as a plugin, polyfills loading must follow a specific order.
You can see a live example at Nuxt Speedkit Example.
Example
async function polyfills (){
if (!('IntersectionObserver' in global)) {
await import('intersection-observer');
}
if (!('objectFit' in document.documentElement.style)) {
await import('object-fit-images');
}
if (!('HTMLPictureElement' in global || 'picturefill' in global)) {
await import('picturefill');
await import('picturefill/dist/plugins/mutation/pf.mutation.js');
}
}
polyfills ();
{
build: {
transpile: ['@nuxt/image', 'image-meta'],
postcss: {
plugins: {
'postcss-object-fit-images': {}
}
}
},
plugins: [
{ src: "@/plugins/polyfills.js", mode: "client" }
]
}