How To Dev

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

Introduction In the previous article, I introduced Core Web Vitals as well as how to optimize for the LCP index and in this article, we will continue with the next index, which is INP. This index measures responsiveness when users interact, as fetching too much data then rendering a large list (like hundreds of thousands of items) will block the Main-thread. The solutions I will mention in this article to optimize INP include: Virtualization: there are many packages supporting Data-heavy Lists, you can choose to apply them effectively, just render what is in the viewport. Handling thousands of DOM nodes simultaneously and continuously is the main factor directly affecting the INP index. Web Workers: If you need to process heavy logic (calculating, formatting a large amount of data) before displaying, push that logic part to a Web Worker to free up the Main-thread. Debouncing & Transitions: Use a combination of debounce and hooks like useTransition or useDeferredValue to mark state ...

Introduction In the previous article, I introduced how to use D3 to visualize data as charts. For most chart visualization needs, using D3 to create individual HTML DOM elements is sufficient. However, if you need to build a web application with superior performance to handle complex cases with relatively large datasets, then applying Canvas is a good solution for you Canvas is an HTML5 element that allows for extremely high-performance 2D graphic drawing via JavaScript. Unlike SVG, which creates separate DOM elements for each object, Canvas operates as a "blank canvas" where pixels are drawn directly onto a single surface. For instance, in real-world products like Figma, Canva, and TradingView, they all utilize Canvas to handle complex graphical operations. Outstanding advantages of Canvas include: superior render speed when processing thousands of objects simultaneously, memory resource savings as it does not increase the size of the DOM tree, and flexible customization for...