Introduction

Module for NuxtJS.

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