My web performance journey with Nuxt, Storyblok & Netlify

1. lite-youtube-embed

   1 13 6,176 5.6 HTML

   A faster youtube embed.

   

   What I use → For Youtube videos I started using lite-youtube-embed package, following the advice of Debbie O'brien and web.dev!

2. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

3. critical

   2 14 10,156 3.7 JavaScript

   Extract & Inline Critical-path CSS in HTML pages

   

   Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.

4. terser

   3 34 9,074 8.6 JavaScript

   🗜 JavaScript parser, mangler and compressor toolkit for ES6+

   

   Solution JS → The new uglify-js: https://github.com/terser/terser or continue using webpack, Teser is already included in the prod.js file.

5. vue-lazyload

   4 2 8,048 4.0 JavaScript

   A Vue.js plugin for lazyload your Image or Component in your application.

   

   What I use → In my case I'm using Vue Lazyload to lazy-load my images and background images: https://github.com/hilongjw/vue-lazyload#demo

6. web.dev

   5 148 3,547 9.0 Nunjucks

   Discontinued The frontend, backend, and content source code for web.dev

   

   What I use → For Youtube videos I started using lite-youtube-embed package, following the advice of Debbie O'brien and web.dev!

7. squoosh

   6 294 23,626 4.3 TypeScript

   Make images smaller using best-in-class codecs, right in the browser.

   

   If you don't use any image CDN, you can use this online tool: https://squoosh.app/

8. purgecss

   7 55 7,959 7.2 TypeScript

   Remove unused CSS

   

   Solution (unused css rules) → Take into account Critical/Non-Critical CSS technique as per render-blocking stylesheets section, but combined with a tool that deletes the CSS not used in your page, as the famous PurgeCSS.

9. Sevalla

   sevalla.com featured

   Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

   

10. Nuxt.js

    8 207 42,699 8.0 TypeScript

    Discontinued Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]

    

    To build my website I have used technologies such as: Nuxt, my static site generator, Storyblok, as my headlessCMS with an image service provider, and Netlify to host my full static site.

Suggest a related project