BestHub
Sign in
Tag

TTI

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 12, 2024 · Frontend Development

Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It

This article explains why Lighthouse removed the Time to Interactive (TTI) metric after version 10, describes how TTI was calculated, discusses its inaccuracies, and introduces the more reliable replacement metrics such as Total Blocking Time (TBT), First Input Delay (FID) and Interaction to Next Paint (INP) for assessing web performance.

FIDINPTBT
0 likes · 13 min read
Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 12, 2024 · Frontend Development

Front‑End Performance Optimization: Metrics, Data Reporting, and Practical Improvements

This article presents a comprehensive guide to front‑end performance optimization, covering metric selection (FCP, LCP, TTI, x‑fmp), data collection and reporting, dashboard creation, network‑ and application‑layer bottleneck analysis, and concrete code‑level improvements for faster page loads.

FCPReactTTI
0 likes · 17 min read
Front‑End Performance Optimization: Metrics, Data Reporting, and Practical Improvements
Baidu Geek Talk
Baidu Geek Talk
Dec 18, 2023 · Frontend Development

Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics

The guide explains the browser’s event‑loop cycle, how macro‑tasks, micro‑tasks, requestAnimationFrame and requestIdleCallback interact with rendering, details long‑task impacts, React’s time‑slicing via MessageChannel, key interaction metrics such as TTI, FID and upcoming INP, and practical optimizations like task splitting, lazy loading and service‑worker caching.

Event LoopFIDINP
0 likes · 19 min read
Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics
Qunar Tech Salon
Qunar Tech Salon
May 19, 2023 · Frontend Development

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

This article presents a detailed case study on how Qunar's front‑end team reduced the Time to Interactive of the hotel‑detail page by introducing pre‑fetching, cache‑key redesign, view‑model batching and longer cache lifetimes, achieving up to a 70% TTI improvement on Android devices.

OptimizationTTIcaching
0 likes · 10 min read
Optimizing Time to Interactive (TTI) for the Hotel Detail Page in Qunar's Mobile App
Qunar Tech Salon
Qunar Tech Salon
Mar 21, 2023 · Frontend Development

Performance Analysis of React CSR, SSR, and React 18 Streaming SSR

This article examines how different React rendering strategies—client‑side rendering, server‑side rendering, and the new React 18 Streaming SSR—affect key web performance metrics such as TTI, FCP, and first‑paint, and demonstrates substantial latency reductions achieved through streaming and selective hydration.

ReactSSRStreaming
0 likes · 11 min read
Performance Analysis of React CSR, SSR, and React 18 Streaming SSR
Qunar Tech Salon
Qunar Tech Salon
Dec 7, 2022 · Mobile Development

Optimizing Time‑to‑Interactive (TTI) in the Qunar Travel App: JSBundle Loading, Rendering, and Service Request Strategies

This article describes how Qunar’s travel app team built a unified performance measurement platform and applied a series of frontend‑focused optimizations—including JSBundle pre‑loading, slimming, splitting, rendering‑stage improvements, and service‑request prefetching—to consistently reduce the Time‑to‑Interactive metric by double‑digit percentages across core booking pages.

JSBundleMobile FrontendReact Native
0 likes · 12 min read
Optimizing Time‑to‑Interactive (TTI) in the Qunar Travel App: JSBundle Loading, Rendering, and Service Request Strategies
Ctrip Technology
Ctrip Technology
Jul 7, 2022 · Mobile Development

Performance Optimization Practices for a Flutter‑Based Hotel App at Ctrip

This article details how Ctrip's hotel team used Flutter to improve app performance over two years by monitoring FPS, TTI, memory, applying widget‑tree optimizations, lazy loading, frame rendering, service‑channel enhancements with Protobuf, and systematic memory‑leak detection and mitigation.

FPSFlutterMemory Leak
0 likes · 22 min read
Performance Optimization Practices for a Flutter‑Based Hotel App at Ctrip
Kuaishou Tech
Kuaishou Tech
Sep 28, 2021 · Mobile Development

Understanding and Optimizing Time To Interactive (TTI) on the Kuaishou Android App

This article explains the concept of Time To Interactive (TTI) for the Kuaishou Android app, details how to quantify the metric using FrameTime instead of FPS, describes data collection methods, offline and online tracing, a performance lab, and comprehensive governance and task‑scheduling strategies to reduce startup lag.

AndroidFrameTimeOptimization
0 likes · 17 min read
Understanding and Optimizing Time To Interactive (TTI) on the Kuaishou Android App
Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Sep 17, 2021 · Mobile Development

How Kuaishou Optimizes Android TTI: From Definition to Real‑Time Monitoring

This article explains the concept of Time To Interactive (TTI) for Kuaishou's Android client, details how the metric is quantified using FrameTime instead of FPS, describes offline and online data‑collection methods, and outlines the scheduling framework and governance measures designed to reduce post‑cold‑start jank.

AndroidFrameTimeTTI
0 likes · 18 min read
How Kuaishou Optimizes Android TTI: From Definition to Real‑Time Monitoring
Ctrip Technology
Ctrip Technology
Jun 29, 2020 · Frontend Development

React Native Rendering Performance Optimization Practices at Ctrip

This article analyzes the challenges of React Native rendering performance, introduces quantitative metrics such as FMP and TTI, and presents practical optimization strategies across native containers, bundle handling, API bridging, front‑end code slimming, service request prioritization, and tooling for offline and online performance analysis.

FMPReact NativeRendering
0 likes · 18 min read
React Native Rendering Performance Optimization Practices at Ctrip
360 Tech Engineering
360 Tech Engineering
Dec 19, 2019 · Frontend Development

Understanding Key Web Performance Metrics: FP, FCP, FMP, LCP, TTI, and More

This article explains essential web performance metrics such as First Paint, First Contentful Paint, First Meaningful Paint, Largest Contentful Paint, Time to Interactive, and related indicators, showing how they reflect different stages of page rendering and user experience.

FCPFIDFP
0 likes · 9 min read
Understanding Key Web Performance Metrics: FP, FCP, FMP, LCP, TTI, and More