My web performance journey with Nuxt, Storyblok & Netlify

• lite-youtube-embed

  9 5,396 6.3 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!

• critical

  11 9,957 7.2 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.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• terser

  28 8,432 8.9 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.

• vue-lazyload

  2 7,962 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

• web.dev

  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!

• squoosh

  267 21,014 5.8 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/

• purgecss

  51 7,672 8.4 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.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Nuxt.js

  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