The Right way to Optimize Next.js to Score 100 in lighthouse

August 18, 2024
4 min read
628views
Chinonso Chikelue

Software Engineer | CEO of CollabChron | Building Strimlinq | CTO at Inkreo I build sleek, scalable web and mobile apps with expressive UIs and clean backend logic. Passionate about AI-driven systems, futuristic design, and creator-focused innovation. Currently crafting StrimLinq.

Discover the secrets to achieving a perfect Lighthouse score of 100 with Next.js! In this video, we dive into the best practices and optimization techniques that will skyrocket your Next.js application's performance. From image optimization and lazy loading to code optimization and SEO enhancements, we cover it all. Join us to learn the right way to optimize Next.js and unlock maximum performance, improved user experience, and better search engine visibility. Don't settle for average scores when you can achieve greatness. Watch now and start optimizing like a pro!



🎉Our Newsletter is live! Join thousands of other developers

https://islemmaboud.com/join-newsletter



⭐ Timestamps ⭐

00:00 Intro

03:58 1) Optimize Images

08:16 2) Remove Unused Dependencies

09:32 3) Font Optimization

11:03 4) Disabling Animations on Mobile

13:22 5) Lazy Load Animations

15:17 6) SEO Optimization

21:02 7) Accessibility Hacks



-- Special Links


✨ Join Figma for Free and start designing now!

https://psxid.figma.com/69wr7zzb1mxm


👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

https://psxid.figma.com/ucwkx28d18fo-...



🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

   • Build Login/Register API Server w/ Au...  


🧭 Turn Design into React Code | From prototype to Full website in no time

   • Turn Design into React Code | From pr...  


🧭 Watch Tutorial on Designing the website on Figma

   • I Design a onecolor Website in 1 hour...  


🧭 Watch Create a Modern React Login/Register Form with Smooth Animations

   • Create a Modern React Login/Register ...  


🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

   • Debug React Apps Like a Pro | Master ...  


🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

   • Master React Like Pro w/ Redux, Types...  


🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

   • Debug React Apps Like a Pro | Master ...  


🧭 Introduction to GraphQL with Apollo and React

   • Introduction to GraphQL with Apollo a...  



👉 Personal Links:


✨ My Portfolio https://islemmaboud.com

🐦 Follow me on Twitter:   / ipenywis  

💻 GitHub Profile https://github.com/ipenywis


Made with ❤️ by Coderone

Rate this article

Share this article

Related Articles

How to Build Your First Next.js App: A Beginner's Guide.

How to Build Your First Next.js App: A Beginner's Guide.

Introduction


Next.js is a powerful framework built on top of React that allows for server-side rendering, static site generation, and more. In this tutorial, we'll...

1014
1
0

Setting up ADB Path on Windows: Android Tips.

ADB (Android Debug Bridge) is a crucial tool for Android app developers, allowing you to communicate with Android devices from your computer. To use ADB effectively, you need to set up the ADB path...

745
0
0