Nuxt Speedkit
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.
Demos
- Grabarz & Partner (Lighthouse, Sitespeed)
- Grabarz Group (Lighthouse, Sitespeed)
- Nuxt Speedkit Example (Lighthouse, Sitespeed)
Getting Started
Please follow the 📖 Documentation
Nuxt Speedkit (v1) documentation has been moved to nuxt-speedkit.grabarzundpartner.dev/v1/.
Requirements
- NodeJS
>= 12.x.x
- NuxtJS
>= 2.15.0
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
Browsers support
You can use
nuxt-speedkit
with Internet Explorer 11 browser. Learn more at Browser compatibility
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Samsung |
Opera |
Vivaldi |
---|---|---|---|---|---|---|---|
Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Development
- Clone this repository.
- Install dependencies using
npm install
oryarn install
. - Start development server using
npm run dev
oryarn dev
.
Preview
- Clone this repository.
- Install dependencies using
npm install
oryarn install
. - Build and start with express
npm run start:generate
oryarn start:generate
. - Open http://127.0.0.1:3000 in Browser.
or look here