Web Performance Optimization Practices for Trip.com Flight Site

Introduction : The article discusses the importance of website performance for user experience, conversion, SEO, especially for Trip.com overseas users, and describes a recent optimization that raised the PageSpeed score from ~30 to over 80.

Performance Metrics : It reviews traditional metrics (DOM Ready, load time) and their limitations, introduces Navigation Timing API‑based metrics (DNS, Connect, Request, Response, Blank, Domready, Onload) and user‑centric metrics such as FCP, LCP, TTI, TBT, CLS, plus other indicators like SI, TTFB, FID, FCI.

Performance Measurement : Differentiates laboratory measurement (using Lighthouse, CI integration) and real‑user monitoring (RUM), and outlines quantitative evaluation challenges and solutions.

Optimization Strategies : Package size reduction – removing dead code, duplicate code, large libraries, optimizing images. Resource loading – applying the PRPL model, resource hints (preconnect, preload, prefetch), Service Worker caching with Workbox. Third‑party script handling – on‑demand loading and defer. Component lazy loading – using React.lazy, @loadable/component, react‑lazyload. Rendering improvements – SSR, pre‑rendering, combining CSR and SSR. Long‑task mitigation – requestIdleCallback, Web Workers, memoization, debounce/throttle. React‑specific tips – PureComponent/Memo, useMemo, immer for immutable data, fragment usage. Layout shift reduction – reserving space, fixed image dimensions, skeleton screens.

Code Examples :

setTimeout(function() { tti = new Date() - navigationStartTime }, 0)

import React from 'react'; import loadable from '@loadable/component'; import LazyLoad from 'react-lazyload'; const LazyComponent = loadable(() => import(/* webpackChunkName: "home_lazy" */ './LazyComponent')); export function HomePage() { return ( <> ); }

import loadable from '@loadable/component'; export const SortLayer = loadable(() => import(/* webpackChunkName: "depart_select_layer" */ './SortLayer')); export const StopLayer = loadable(() => import(/* webpackChunkName: "depart_select_layer" */ './StopLayer')); export const TimeLayer = loadable(() => import(/* webpackChunkName: "depart_select_layer" */ './TimeLayer'));

Conclusion : After iterative measurement and applying the above techniques, the flight site maintained a PageSpeed score above 80, emphasizing that optimization should target the most impactful problems rather than indiscriminately adding techniques.

Recruitment : The article ends with a brief invitation to join Ctrip’s flight‑ticket R&D team, providing a contact email ([email protected]) for interested candidates.