Introduction
You are reading the documentation for Nuxt Speedkit (v3)!
- Nuxt Speedkit (v2) documentation has been moved to nuxt-speedkit.grabarzundpartner.dev/v2/.
- Upgrading from Nuxt Speedkit (v2) ? Check out the Migration Guide.
Nuxt Speedkit takes over the lighthouse performance optimization of your generated website.
In order to achieve a performance score of 100/100, only the necessary resources located in the current viewport may be initialized when the page is loaded. This includes images, fonts and the js-modules. Until now, there has been no practical and usable concept to help developers maintain an overview and enable accurate targeting in NuxtJS projects.
This module addresses this problem and provides a holistic approach to intelligently load the necessary viewport related resources to reduce FCP, DCL, TTI, TBT and CLS.
We didn't reinvent the whole wheel. We adapt the lazy hydration concept of Markus Oberlehner to load js components in an efficient way, use the nuxt/image module as a base to retrieve optimized image resolutions for our picture and image components and add some new stuff to obtain a holistic solution.
Requirements
- NodeJS
>= 19 - NuxtJS
>= 3.5.0
Features
We provide the following CMS-friendly features:
- dynamic loading of viewport based page resources like fonts, components, pictures, images and iframes
- optional blocking of javascript execution by initial performance measuring
- optimized initial load of javascript files by eliminating of unnecessary javascript files
- 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.
- completely new approach of font declaration
- optimized picture component (supports viewport based sources e.g. landscape/portrait)
- optimized image component
- supports SEO-friendly lazy hydration mode (picture + image)
- optimized youtube/vimeo component (auto generated poster image in different resolutions)
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