Optimizing Time to Interactive (TTI) for the Hotel Detail Page in Qunar's Mobile App

Background – Qunar’s front‑end team aims to improve user experience on the hotel‑detail page of its mobile app, where the current Time to Interactive (TTI) is far from the desired “page‑second” goal.

What is TTI? – TTI is the time from the start of page load until the page becomes fully interactive. Qunar measures TTI from the moment of route navigation until all effective data is rendered.

Current performance – Measurements show that on Android devices the hotel‑detail page takes about 1332 ms TTI, with API latency accounting for roughly 43% of that time, while the hotel‑list page takes 1900 ms TTI with 50% contributed by API latency.

Pre‑request principle – Pre‑request sends the next page’s API calls ahead of time without blocking the current page, effectively eliminating network latency from the next page’s TTI. Two core challenges are when to trigger the pre‑request and ensuring the cached data remains valid.

Current pre‑request implementation – The team pre‑fetches the hotel‑detail quote API from the list page at three moments: (1) when the first n cards render, (2) when a card becomes visible during scrolling, and (3) when a user clicks a card or promotional overlay. The response is cached using the request parameters as the cache key.

Reasons for not achieving instant page load – (1) The timing of cache‑hit checking is delayed, mixing with other rendering tasks; (2) Parsing parameters to build the cache key is time‑consuming; (3) View‑model generation for the quote data is costly; (4) Cache validity was limited to 30 seconds, causing misses for users who linger on the list page.

Optimization plan – (1) Move cache‑hit checking to the earliest possible moment during detail‑page initialization; (2) Redesign the cache key to use a trace‑ID combined with the hotel ID, eliminating expensive parameter serialization; (3) Render the first‑screen quote immediately and process the remaining view‑model asynchronously; (4) Extend cache validity to 60 seconds.

Results – After applying these optimizations, Android TTI dropped from 1332 ms to 1024 ms (≈24% reduction) and iOS TTI from 683 ms to 203 ms (≈70% reduction). The page‑smoothness score increased by about 36 points, and the overall user experience improved significantly.

Future work – The pre‑request strategy will be extended to other core pages to further enhance the booking flow.