Quick summary
I am going to introduce nuxt-speedkit module.
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.
Introduction
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
Top comments (0)