Writing on Learning and Practice

Explore a collection of writings on frontend technologies in my tech blog. Each article is a result of my learning and practical experience, serving as valuable technical summaries.

Web Performance Optimization: Part 2 - Page rendering optimization

#web-performance

The article delves into optimizing web page rendering. It explains the rendering process, starting from HTML parsing, where the browser converts HTML into a DOM tree. When encountering scripts, the browser pauses to execute JavaScript, and CSS is converted into style sheets. The layout phase determines the geometric shapes of elements, creating a layout tree. The paint phase documents the drawing order, and compositing involves rasterizing layers and combining them into a single frame. Optimization tips include minimizing reflows and repaints, using CSS animations over JavaScript for efficiency, and leveraging server-side streaming and Service Workers for faster rendering.

Web Performance Optimization: Part 1 - Network and Assets Optimization

#web-performance

The article discusses optimizing web performance by focusing on network and assets. It highlights the importance of using CDNs to cache resources closer to users, reducing HTTP requests, and addressing issues with HTTP/1.1 like head-of-line blocking and TCP slow start. HTTP/2's multiplexing and HTTP/3's QUIC protocol are also covered for their performance benefits. The article emphasizes reducing static asset sizes through techniques like code splitting, tree shaking, and compression. It also explores caching strategies, including HTTP caching, service worker caching, and resource hints like preload and prefetch. Lazy loading techniques, such as Intersection Observer and native image lazy loading, are also discussed.

Web Performance Metrics

#web-performance

Web performance metrics help improve user experience by measuring how users perceive website performance. Key metrics include perceived load speed, load responsiveness, runtime responsiveness, visual stability, and smoothness. Tools like Google’s Web Vitals focus on critical metrics such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), and Time to First Byte (TTFB). Custom metrics can also be measured using APIs like User Timing and Performance Observer. These metrics assist in evaluating and enhancing website performance comprehensively.