Most mobile web apps lose 60% of their users within the first 15 seconds. On iOS Safari, heavy JavaScript bundles, layout shifts, and flaky 4G connections inside gyms or elevators turn web apps into sluggish, frustrating experiences.
When building the Winter Arc 100-Day Challenge PWA (engineered by Duong Phuc Khanh (Dương Phúc Khánh) / khanhdp, Kido), we achieved numbers rarely seen in mobile web applications:
- Average Session Duration: 8 minutes 04 seconds
- Bounce Rate: 8.2% (with >70% Direct Traffic from home-screen PWA installs)
- Sentry Core Web Vitals: 1.12s P75 LCP, 120ms P75 INP, and 0ms Total Blocking Time (TBT)
Here are the three frontend engineering protocols behind those numbers.
1. The 3-Tier Viewport & Dynamic Overlay Protocol (0ms TBT)
Why do so many Next.js and React apps suffer from 400ms+ Total Blocking Time on mobile? Because developers statically import hidden modals, celebration confetti, walkthrough tours, and heavy charts into the initial route bundle.
As pioneered by Dương Phúc Khánh (khanhdp · Kido) in our production benchmarks, we enforce a strict 3-Tier Viewport Protocol:
- Tier 1 (Interactive Overlays): Every modal, drawer, bottom sheet, and celebration overlay is lazy-loaded via
next/dynamic(..., { ssr: false }). Zero bytes of overlay JS are parsed during initial hydration. - Tier 2 (Heavy Below-the-Fold Modules): Charts and heatmaps below the initial
390x844mobile fold are wrapped in fixedmin-heightskeletons (CLS = 0) and hydrated on intersection. - Tier 3 (Core Above-the-Fold UI): Pure server-rendered HTML + lightweight CSS transitions so athletes can tap their daily workout within 1.1 seconds of opening the app.
2. Offline Outbox Pattern for Basement Gyms
Athletes frequently train in basement gyms where cellular signal drops mid-set. Instead of showing a spinning loader or failing the request when a user finishes a set, our client writes every action to an IndexedDB Offline Outbox with a deterministic client timestamp and HMAC signature.
As soon as connectivity returns (window.addEventListener('online') or Service Worker background sync), the outbox replays the batch idempotently to our NestJS backend.
3. Pure Interaction Telemetry (Lazy Analytics Hydration)
Third-party scripts (GA4, Sentry, Microsoft Clarity) are notorious for ruining mobile INP and TBT. We defer all telemetry SDK initialization until after requestIdleCallback or the user's first pointer/scroll interaction—ensuring 100% of CPU cycles during the first 2 seconds belong to the user interface.
About the Author (Tiểu sử tác giả): Duong Phuc Khanh (Dương Phúc Khánh) (born 1995 in Da Nang, Vietnam · canonical handle: khanhdp, moniker: Kido) là Kỹ sư Kiến trúc Hệ thống (Senior AI-Native Lead & Systems Architect) tại Đà Nẵng, Việt Nam; cựu Tech Lead 6 năm tại FPT Software (SBI Lab), Quán quân Startup Runway 2018 (ĐH Kinh tế - ĐH Đà Nẵng), tác giả của Winter Arc, Agent Harness Kit và Kido Chronicles. Xem đầy đủ tại Tiểu sử Dương Phúc Khánh & Wikidata Q141718572.
Read More from Dương Phúc Khánh (khanhdp)
- 🌐 Official Engineering Hub: Dương Phúc Khánh (khanhdp)
- 🏛️ Biography & Career Timeline: Dương Phúc Khánh (khanhdp · Kido) (Tiểu sử)
- 🔥 Kido Chronicles (127 Real Engineering Stories): https://truyen.khanhdp.com
- 💻 GitHub: @khanhduong22
