Optimizing Your Next.js Website: A Guide to Google Core Web Vitals
Tags: nextjs, webdev, javascript, beginners
Published: 2024-01-30 22:53:01

In today's world of web development, delivering a seamless and efficient user experience is critical. Google Core Web Vitals has emerged as a crucial set of metrics to assess and optimize websites. In this article, we'll delve into what Core Web Vitals are, why they matter, and provide simple ways to enhance them for your Next.js project.

#Understanding Google Core Web Vitals

Core Web Vitals can be broken down into three main aspects
* Largest Contentful Paint (LCP)
* First Input Delay (FID)
* Cumulative Layout Shift (CLS)

![Google Core Web Vitals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x92nwpjm7wot9h0vlefs.png)


##Largest Contentful Paint (LCP)
LCP measures the time it takes for the main content of a page to load. It should ideally occur within 2.5 seconds of when the page first starts loading.

![Largest Contentful Paint (LCP)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lknm4yw90p6f3232xcy3.png)

Major Causes of Poor LCP


![Major Causes of Poor LCP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72577fpbhim9n42njc53.png)

How can we improve LCP in Nextjs

* Optimize images using `next/image` tag.
* Utilize lazy loading for images.
* Add `experimental: { optimizeCss: true }` in next config to generate critical css (experimental feature).

##First Input Delay (FID)
![First Input Delay (FID)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57qm65x921xxrd3y1oe9.png)

FID quantifies the responsiveness of a web page by measuring the time it takes for a user to interact with it. An ideal FID is less than 100 milliseconds. 

![Major Causes of Poor FID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1dmbeo457l13qj14luq.png)

How we can improve FID in Nextjs

* Make use of `@next/bundle-analyzer` to analyse bundle sizes.
* Use `next/dynamic` tag to implement lazy loading imports of React components where necessary.
* Utilize `next/script` tag to optimally load third-party scripts

##Cumulative Layout Shift (CLS)
![Cumulative Layout Shift (CLS)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg41uymz9nzxzrbpxtle.png)

CLS assesses the visual stability of a page by measuring unexpected layout shifts during its lifespan. A good CLS score is less than 0.1. 

![Major Causes of Poor CLS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmzw2ridi3hmtb7t5u2i.png)

How we can improve CLS in Nextjs

* Take advantage of `next/font` to automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.
* Add fixed dimensions to `next/image` tag images.

#Conclusion:
By prioritizing Google Core Web Vitals, you can significantly enhance the user experience of your Next.js project. Optimizing for LCP, FID, and CLS ensures that your website is not only search engine-friendly but also provides a seamless experience for your users. Incorporate these simple strategies into your development workflow to create faster, more responsive, and visually stable web applications.

######Resources
*https://www.youtube.com/watch?v=AQqFZ5t8uNc&t=137s