A Client Asked Me Something I Couldn't Immediately Answer Last Week. That Pushed Me To Dig Deeper Into Nextjs.
A client recently approached me with a request that wasn't immediately clear from my previous discussions. I realized then that they needed to know how we optimize images, fonts, and Core Web Vitals in our Next.js projects. This led me to dive deeper into these aspects of Next.js performance optimization.
---
Why This Matters (and Why I Care)
Next.js is incredibly powerful for building React apps, but it can become slow if not optimized properly. One crucial aspect that often gets overlooked is the performance of images and fonts. Ensuring these assets load quickly not only improves user experience but also helps in maintaining a good Core Web Vitals score.
Core Web Vitals (CWVs) measure several important metrics about the perceived performance of a website:
1. **CLS** – Cumulative Layout Shift
2. **FID** – First Input Delay
3. **FPS** – FPS (Frames Per Second)
4. **LCP** – Largest Contentful Paint
Improving these CWVs significantly affects how users interact with your app and can even make or break their decision to stay on the page.
The Basics You Actually Need
To optimize Next.js images, I recommend:
For fonts, it’s important to use `@font-face` properly. Ensure your font files are compressed and placed in the right directory structure.
How I Build With It (Step by Step)
1. **Setting Up Image Optimization**
```typescript
// Import React Helmet for setting up image metadata.
import { MetaTags, Head } from 'next/head';
import styled from 'styled-components';
export default function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<MetaTags />
</Head>
{/* Your Next.js component content */}
<style jsx>{`
/* Import your fonts here */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* Your styled components or styles */
.my-component {
font-family: 'Inter', sans-serif;
color: #333;
}
`}</style>
</>
);
}
// Optionally, you can use React Helmet to set up image metadata.
const MetaTags = () => <MetaTags />;
```
2. **Lazy Loading Images**
```javascript
import { Fragment } from 'react';
import Image from 'next/image';
export default function LazyImageComponent() {
return (
<Fragment>
<div>Content of the component</div>
<Image src="/path/to/image.png" alt="Description of image" width={300} height={200} loading="eager" />
{/* You can also use `loading="lazy"` for more advanced lazy loading */}
</Fragment>
);
}
```
Mistakes I Made (So You Don’t Have To)
Advanced Tips From Production
When dealing with dependencies like external libraries or plugins, it’s important to ensure they are hosted on an external CDN. This not only speeds up loading but also helps in better caching.
My Honest Take
In summary, optimizing images, fonts, and ensuring good Core Web Vitals are crucial for Next.js performance. It’s a continuous journey that requires attention to detail and practical application of the right solutions. Improving these aspects not only makes your app feel faster but also enhances user satisfaction by keeping their experience positive.
---
*Mohamed Qurashi | Full-Stack Developer at Beyin Digital, Abu Dhabi, UAE | [https://qurashi.dev](https://qurashi.dev)*
---
**Further reading:**
**Related articles on this blog:**