How To Dev

Introduction The NextJS Image component is a powerful solution that helps automatically optimize images in web applications. The Image component has been implemented by NextJS with many superior functions that support displaying images more effectively than a standard HTML image tag, such as Automatically resizing images to fit the device Supporting modern image formats (like WebP and AVIF) Preventing Cumulative Layout Shift (CLS) by holding space for images Integrating a built-in lazy loading mechanism to speed up initial page load speeds. Detail In this article, I will provide an example of loading a product list in ecommerce pages so you can see the advantages of NextJS Image in automatic image optimization. Create file app/image/types.ts export interface Product { id : number title : string description : string price : number thumbnail : string category : string } export interface ProductResponse { products : Product [] total : number skip : number ...

Introduction Core Web Vitals are Google's real-world metrics used to measure user experience regarding loading speed, interactivity and visual stability of a website. Optimizing these metrics not only helps retain users longer but also serves as an important ranking factor in SEO, helping your website achieve higher positions on search engines. This set of metrics includes 3 main components: LCP (Largest Contentful Paint): Measures loading performance, specifically the time it takes for the largest content element to become visible. FID (First Input Delay): Measures interactivity, evaluating the response time when a user first interacts. CLS (Cumulative Layout Shift): Measures visual stability, preventing situations where elements unexpectedly jump positions. Impact from a Technical Perspective SEO and Ranking (Search Signal) : Google has officially made Core Web Vitals (CWV) one of its ranking signals. If two websites have equivalent content (Relevance), the one with better CWV...