How I Achieved a 74% Performance Increase on a Page

1. ipx

   1 4 2,131 6.0 TypeScript

   🖼️ High performance, secure and easy-to-use image optimizer.

   

   I started by optimizing images with Nuxt Image. Since we were already using CloudFlare Images in other projects, setting up Nuxt Image was straightforward. For local development, I used UnJS's IPX to avoid unnecessary CloudFlare costs. The provider alternates dynamically based on the environment:

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. nuxt-vitalizer

   2 1 105 7.8 TypeScript

   🪿 Instantly better LCP scores in Google Lighthouse

   

   I also tested nuxt-lcp-speedup (now called Nuxt Vitalizer), which removes unnecessary prefetching of dynamic assets and eliminates some duplicate CSS, reducing LCP (Largest Contentful Paint).

4. core

   3 356 49,203 9.8 TypeScript

   🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)

   

   Our monolith is built with Laravel and Vue.js, where Vue.js powers dynamic features at the expense of performance, since it runs completely on the client-side. For performance-sensitive features, we rely on Blade (Laravel's template engine) with raw JavaScript or jQuery, resulting in a more complex and less developer-friendly approach.

5. nuxt

   4 118 56,425 9.9 TypeScript

   The Intuitive Vue Framework.

   

   A natural next step was adopting Nuxt, Vue.js’ meta-framework, which improves both DX and performance. We started by introducing Nuxt in less performance-sensitive areas, such as the user panel. As adoption grew, we eventually ended up with 3 Nuxt projects, each focused on specific sections of the product designed for logged-in users, where performance was less critical. The clear benefit was that developers enjoyed working with Nuxt due to its DX, enabling more dynamic features that are shipping faster.

6. Laravel

   5 410 80,300 8.5 Blade

   Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.

   

   Our monolith is built with Laravel and Vue.js, where Vue.js powers dynamic features at the expense of performance, since it runs completely on the client-side. For performance-sensitive features, we rely on Blade (Laravel's template engine) with raw JavaScript or jQuery, resulting in a more complex and less developer-friendly approach.

7. image

   6 10 1,401 9.5 TypeScript

   Plug-and-play image optimization for Nuxt applications. (by nuxt)

   

   I started by optimizing images with Nuxt Image. Since we were already using CloudFlare Images in other projects, setting up Nuxt Image was straightforward. For local development, I used UnJS's IPX to avoid unnecessary CloudFlare costs. The provider alternates dynamically based on the environment:

Suggest a related project