Why Is There a Large Gap Between TTFB and FCP on Alibaba.com PC Homepage?
During performance tuning of Alibaba.com’s PC new‑user homepage, the Time To First Byte became acceptable while the First Contentful Paint remained 3 seconds slower, revealing that CSS download and parsing blocked rendering and that inlining critical CSS dramatically reduced FCP latency.
Why Is There Such a Large Gap Between TTFB and FCP
When optimizing the Alibaba.com PC new‑user homepage we discovered that after several rounds of improvement the Time To First Byte (TTFB) was acceptable – the 90th percentile in key overseas markets dropped below 480 ms – but the First Contentful Paint (FCP) lagged by about 3000 ms, far exceeding the expected 2000 ms for a streaming‑rendered, well‑structured SSR page.
HTML That Looks Normal at First Glance
The simplified HTML structure looks harmless from a performance perspective:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alibaba.com</title>
<link rel='preconnect' href='https://s.alicdn.com' />
<link rel="preload" href="https://s.alicdn.com/LCP图片.jpg" as="image" />
<link rel="stylesheet" type="text/css" href="https://s.alicdn.com/5k-页面通用样式.css" />
<link rel="stylesheet" type="text/css" href="https://s.alicdn.com/30k-页面主体内容.css" />
</head>
<body>
<header>这里是一些没有图片的可视 DOM 元素</header>
<div class="content">
...
<img src="https://s.alicdn.com/LCP图片.jpg" />
...
</div>
<footer>...</footer>
<script src="https://s.alicdn.com/页面通用脚本.js"></script>
</body>
</html>From a performance standpoint this structure does not appear to have major issues.
Adding Timing Marks to Diagnose the Problem
Because the page loads instantly on domestic networks, the issue was not obvious from waterfall charts. We added manual timing marks to capture critical moments:
<script>
window._timing.css1_start = Date.now();
</script>The measurements showed that the majority of the delay was spent on the first connection to s.alicdn.com , not on the actual CSS download. Because CSS parsing blocks DOM rendering, the FCP element could not be painted.
Inlining Critical CSS for the First Paint
After identifying the cause, we inlined the CSS required for the above‑the‑fold content (under 4 KB) and moved non‑critical CSS to load after the DOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alibaba.com</title>
<link rel='preconnect' href='https://s.alicdn.com' />
<link rel="preload" href="https://s.alicdn.com/LCP图片.jpg" as="image" />
<style>/* critical CSS for first paint */</style>
</head>
<body>
<header>这里是一些没有图片的可视 DOM 元素</header>
<div class="content">
...
<img src="https://s.alicdn.com/LCP图片.jpg" />
...
</div>
<footer>...</footer>
<link rel="stylesheet" href="https://非首屏css.css" />
<script src="https://s.alicdn.com/页面通用脚本.js"></script>
</body>
</html>After deploying the change, the 90th‑percentile FCP in key overseas markets dropped by more than 800 ms while TTFB remained unchanged.
Conditions for the Optimization to Work
Users with a slow first‑time visit and no existing TCP connection to the static‑asset domain.
The above‑the‑fold CSS must be small enough to inline efficiently.
According to web.dev , to minimise the number of round‑trips for the first render, critical CSS should stay under 14 KB (compressed). TCP slow‑start limits the amount of data that can be sent in the first RTT, typically around 10 packets (~14 KB).
Takeaways
Performance strategies for the 90th‑percentile user differ from Google CWV’s 75th‑percentile recommendations; deep knowledge of HTTP and browser rendering is essential.
Optimisation is not a silver bullet – data‑driven analysis is required to uncover hidden bottlenecks.
In high‑performance scenarios, roughly one‑third of effort goes to data analysis, one‑third to code refactoring, and the remaining third to addressing the “good‑enough” debt.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.