Kakao Webtoon Reveals Frontend Performance Optimization Cases Including SSR Caching and Loading Shimmer

Kakao Entertainment introduced cases of frontend performance and user experience improvements applied to Kakao Webtoon. First, to reduce rendering costs occurring with every request in a Next.js-based SSR (Server-Side Rendering) environment, caching was applied to SSR results. Load testing results in the same server environment confirmed improvements of tens of times or more in TPS (Transactions Per Second) and response time depending on whether caching was applied. Initially, caches were invalidated immediately upon expiration and re-rendered, but to resolve request delay issues caused by this, it was optimized to only trigger refresh requests and replace the cache at the completion point. Additionally, strategies such as considering ISR (Incremental Static Regeneration) or separating areas where SEO is unnecessary into static pages were pursued in parallel.

In terms of user experience, to enable fast page transitions in the SPA, Loading Shimmer (Skeleton) similar to the actual layout was applied instead of blank screens or spinners to increase perceived speed. For resource optimization, a custom React component utilizing the <picture> tag was developed to select optimized image formats such as SVG, WebP, and PNG based on browser support, and videos were configured to automatically select supported formats among MP4, WebM, and MOV. Specifically, to address the issue where WebM videos with alpha channels did not display correctly in Safari on iOS 15 and macOS Big Sur, OS and browser detection logic was added.

To improve interaction performance, Intersection Observer was used to lazy load resources outside the viewport, and requestAnimationFrame was used to implement smooth animations that do not block rendering. When registering scroll event listeners, the {passive: true} option was applied to allow the compositor thread to perform composition immediately without waiting for the main thread to check for preventDefault() calls, thereby minimizing scroll latency. Finally, a Lite mode was applied to limit heavy motion or video features for users on low-spec devices or older browsers, considering trade-offs to ensure it did not hinder content consumption.