Introduction
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
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.
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
Edit this page on GitHub
Updated at Tue, Oct 12, 2021