I’ve implemented a series of performance enhancements based on my GTMetrix analysis to significantly improve the blog’s loading speed, particularly for users in China. The most impactful changes addressed the critical request chain latency — previously measured at 796ms — and reduced JavaScript execution time. This was accomplished by introducing resource preloading, applying defer attributes to non-critical scripts, and refining the requestIdleCallback logic with appropriate timeouts. Additionally, I improved the font loading strategy by switching from font-display: optional to font-display: swap, which helps ensure that text remains visible during font downloads. This is especially important in regions where Google Fonts tend to load slowly.

To further boost rendering efficiency, I implemented content-visibility: auto with intrinsic size hints for key elements such as images (800x600px), post content (1000px), and post items (500px). This allows the browser to skip rendering off-screen content, improving scrolling performance. I also adopted a non-blocking CSS loading technique for Lightbox styles, where styles initially load using media="print" and switch to media="all" after loading, thereby avoiding render-blocking. These combined optimizations reduce First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Total Blocking Time (TBT), delivering a noticeably faster, smoother, and more responsive experience for users.