How Taobao Optimizes Its Homepage Performance: Key Frontend Strategies

Challenges of the Taobao Homepage

The new personalized homepage introduces several performance problems: multiple data sources, serial module rendering requests, matching operational and personalized data, fallback mechanisms, excessive system dependencies, inability to output first‑screen data directly, a large number of modules, and many images without fixed dimensions.

Web Performance Metrics

FPS (frames per second) is the most direct indicator of page performance. A typical screen refreshes at 60 fps; dropping below 60 causes stutter, below 24 is noticeably laggy, and below 12 is considered broken. Each frame lasts about 16 ms, leaving roughly 10 ms for script execution; exceeding this leads to lost frames.

DOMContentLoaded and Load

DOMContentLoaded fires when the DOM is fully parsed. Large or deeply nested DOM trees increase parsing time by 50–200 ms, which should be minimized for first‑screen rendering. The Load event measures total data received; many large images or numerous backend requests can prolong this time.

Smoothness

Smoothness reflects visual FPS feedback. To avoid user anxiety, content is often loaded lazily, and animations are rendered with CSS3 easing to reduce CPU load.

Key Module Prioritization

Critical modules must load first. The initialization code (shown in the image) ensures that essential modules are prioritized, while non‑critical modules are added to a lazy‑load queue.

Lazy Execution

Non‑critical modules are loaded only after user interaction events such as mousemove, scroll, mousedown, touchstart, keydown, resize, or onload. If no interaction occurs, a timeout (e.g., 5 seconds) forces loading.

Image Size Control and Lazy Loading

All images are compressed via Alibaba CDN (e.g., adding _100x100.jpg) and converted to WebP to reduce size by about one‑third. Lazy‑load functions handle image loading uniformly across the page.

Module Hook Removal and Configuration

TMS modules embed data IDs in hooks. To reduce redundancy, modules with identical data formats are extracted into separate data pages, decreasing source size and DOM parsing. Low‑frequency modules (e.g., fallback data) are cached for a day using timestamps or local storage.

Optimization Principles

First‑screen must be fast

Scrolling must be smooth

Load only what is necessary

Execute only when needed

Progressive and smooth rendering

Conclusion

Performance optimization of a large, unoptimized page often requires extensive refactoring. Starting from Taobao's personalized homepage, this article outlines micro‑ to macro‑level practices and several "golden rules" that can guide developers in improving page speed and stability.