👀 Check out the full episode: youtu.be/TyJsTsVlKo0
Posts by Blazity
Unoptimized images can (and will!) slow your #Nextjs app! 🐢
This quick video shows why optimization matters, and how next/image makes it easy. 🚀
go.blazity.com/qmcwK46
We cut a client’s Total Blocking Time - and their Next.js app now feels 🔥 fast!
Learn how we did it in this quick video. 🚀
Watch the full podcast ep, link below🧵
Why did we make the Next.js Optimization Ebook? 📘
This short video explains how it helps you dodge common pitfalls & build lightning-fast Next.js apps. 🚀
Grab your free copy in the👇 thread
And don't forget to grab your "Expert Guide to Next.js Performance Optimization" copy here: go.blazity.com/yFYMsTa
🤯 You might not be tracking your Next.js performance the right way.
💡 In this short video, we’ll show you the effective and ineffective methods for measuring performance, helping you pinpoint the optimizations that truly enhance the user experience.
Join us: youtube.com/live/8nXGU4...
🚨 We’re LIVE!
Confused by SSR / SSG / ISR / RSC in Next.js?
We’re breaking down what to use - and when.
Just real-world rendering strategy insights 💡
Link down below 👇🏼
Why Use Dynamic Imports for External Functions?
• Improved Initial Load Time;
• Optimized Resource Usage;
• Scalability.
Dev tip: It’s worth checking the bundle size of the packages you import to the project. You can find many popular websites for that purpose (e.g., bundlephobia, pkg-size) or IDE extensions (e.g., for VSCode import cost).
New on the blog: 🚀 How to Optimize Web Vitals
Learn how to improve your LCP, INP & CLS scores for faster pages, better UX & SEO.
Tools, tips & team alignment; all in one read.
Check it out 👇
Code splitting is a technique for optimizing web applications, and you probably already know that. But ignoring Code Splitting can lead to serious consequences ⬇️
📺 Watch the replay → www.youtube.com/live/eUXSbt...
Missed our livestream? Too bad (but not crucially). Cuz we stored it on our YouTube channel
We took a slow Next.js app and optimized it live ⚙️
Got compliments ✅
Improved Core Web Vitals to a nearly perfect score ✅
Discussed and applied caching strategies ✅
Link below ⬇️
6️⃣ Lazy-loaded content without placeholders;
7️⃣ Layout-affecting CSS animations or transitions.
Revealing "Top 7" CLS nightmares we've seen at our work:
1️⃣ Images without dimensions;
2️⃣ Ads, embeds, or iframes without reserved space;
3️⃣ Web fonts causing FOIT/FOUT;
4️⃣ Dynamic content injection (popups, accordions, etc.);
5️⃣ Third-party scripts modifying the layout;
👇👇👇
Font tip in #Nextjs: Prefer variable fonts over multiple weights to reduce font file payload and improve render performance.
youtube.com/live/eUXSbt...
🎙️And we're live in 3, 2, 1…
Join us on our first live stream! (link below👇)
Our devs optimizing #Nextjs app real-time 🧑💻
youtube.com/live/eUXSbt...
Quick reminder: our devs are going LIVE tomorrow.
They will optimize a purposely slow Next.js app and show you how to improve web performance in the real world ( fixing server component fetch waterfall, improving CLS and LCP, and many more)
📅 27th of May, 15:30 UTC
Link👇
💡 We are completing an incredible time at @GITEXEUROPE, and what a week it was for us! Our warmest thanks to the GITEX team for organizing it.
Thanks to everyone who came by, asked questions and made this event so impactful 🚀
Berlin, you were great.
See ya next time, GITEX
If you need to use window in Next.js, don’t use it directly in JSX. Put it inside a useEffect - that way it only runs on the client and avoids hydration errors.
3. Complex UI Interactions
2. Real-Time features or pagination implementation
1. Interactive Forms
⏰ Time for dev tip
Client Components bring interactivity and dynamic behavior to modern Next.js apps. While they still participate in server-side rendering for the initial page load, they become fully interactive on the client side after hydration.
See optimal use cases in 🧵