How To Dev

Introduction In previous articles, I provided guidance on Core Web Vitals and how to optimize metrics such as LCP and INP. Now, we will continue to explore the final metric, which is CLS (Cumulative Layout Shift). Receiving data from multiple API requests at different times can easily cause sudden layout changes. Here are the solutions to address this: Explicit Dimensions : This involves declaring exact width and height for elements (especially images, videos and iframes) in HTML or CSS before they are downloaded. This helps the browser know the element size to build the layout beforehand. Without this, the browser will default to treating the element as 0px X 0px before assets are loaded. Once assets finish loading, they will suddenly expand in size, pushing surrounding content to different positions and c reating Layout Shift errors. Aspect Ratio: Instead of setting hard pixels, using Aspect Ratio is a modern solution to solve Explicit Dimensions by defining the ratio between the wi...

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...