Introduction
WARNING
You are reading Nuxt Speedkit v1 docs. For Nuxt 3 go to the v3 docs
Nuxt Speedkit takes over the lighthouse performance optimization of your generated website.
In order to achieve a performance score of 100/100, only the resources that are necessary in the current viewport may be loaded. Concepts already exist for the loading of javascript components and images. However, there is not yet a practicable concept for loading fonts dynamically. This module provides a holistic approach to load all necessary resources on demand, including fonts, based on the current viewport.
This module implements the lazy-hydration concept of Markus Oberlehner and embeds a modified version of nuxt/image.
Requirements
- NodeJS
>= 12.x.x - NuxtJS
>= 2.15.0
Features
- dynamic loading of viewport based page resources like fonts (subselectors, media queries), components, pictures
- optional loading prevention of resources at low bandwidth or weak hardware
- prevents the loading of unnecessary resources (including components) that are outside the current viewport.
- optional info layer concept to inform users about a reduced UX when bandwidth or hardware is compromised.
Results
- delivery of the minimum required resources based on the current viewport
- if you use the tools as specified you will get a lighthouse performance score of 100/100