👀 Views: 8529 💬 Answers: 1 📅 Created: 2025-06-12

next.js image performance seo javascript

I keep running into I'm facing an issue with the Next.js Image component where images are causing a significant Cumulative Layout Shift (CLS) when dynamically loading content. I have a page that pulls in articles from an API, each with an associated thumbnail image. I’ve set the width and height properties for the images, but I still notice the layout shifting as the images load. The CLS score remains above the recommended threshold, which is frustrating for SEO. Here’s a snippet of how I’m rendering the images: ```javascript import Image from 'next/image'; const ArticleList = ({ articles }) => { return ( <div className="article-list"> {articles.map((article) => ( <div key={article.id} className="article-item"> <h2>{article.title}</h2> <Image src={article.thumbnailUrl} alt={article.title} width={300} height={200} quality={75} placeholder="blur" blurDataURL="/placeholder.jpg" /> </div> ))} </div> ); }; ``` I’ve tried several things to mitigate the CLS issue: 1. Ensured that every image has specified width and height attributes, which should theoretically reserve space. 2. Used the placeholder prop to render a low-quality image while the main image loads. 3. Verified that the thumbnail URLs are accessible and that there are no issues with loading them. Despite these efforts, the layout still shifts noticeably when images start loading, especially for users on slower connections. The CLS score in Lighthouse reports is around 0.25, which is above the acceptable limit. Is there an additional technique I can apply, or something I might be missing in my implementation that could help reduce the CLS caused by these images? This is my first time working with Javascript LTS.