Display a dynamic uptime claim without hurting Core Web Vitals

WHAT THIS TESTS: This question evaluates whether you can keep dynamic data from polluting the critical rendering path. Interviewers want to see that you understand the difference between a data pipeline and a presentation layer, and that you know how to use caching and server-side rendering to protect Core Web Vitals like INP and LCP. The uptime claim is a proxy for any slowly-changing metric that must be accurate but cannot be allowed to block the main thread or trigger layout shifts.

A GOOD ANSWER COVERS: First, an asynchronous calculation layer. You should propose a background worker or cron job that reads uptime logs from the past month, computes the 99.9 percent SLA, and writes the result to a durable store. Second, a caching and serving strategy. The computed value should live in a low-latency cache such as Redis or an edge key-value store with a TTL of a few minutes, and it should be served through server-side rendering or an edge function so the browser receives the number in the initial HTML. Third, resilience and accuracy. Mention stale-while-revalidate or a fallback cached value so that if the latest calculation fails, the page still shows a recent valid number rather than an error or a loading spinner. Fourth, Web Vitals guardrails. Avoid client-side rendering of the claim because it requires shipping JavaScript that competes for the main thread; instead, send static HTML and optionally hydrate around it without rehydrating the metric itself.

COMMON WRONG ANSWERS: Proposing to query a raw events database directly from the homepage request path. This introduces unpredictable latency and can spike TTFB. Suggesting a client-side fetch after the page loads, which hurts INP and can cause cumulative layout shift when the number finally appears. Ignoring cache invalidation or claiming the metric should be real-time to the second; uptime is inherently retrospective, so sub-minute freshness is unnecessary. Failing to mention a fallback when the cache expires or the worker stalls.

LIKELY FOLLOW-UPS: How would you handle a last-minute outage that changes the monthly number right before the month ends? How do you prevent a thundering herd if the cache expires during a traffic spike? What would you do if the uptime logs live in a data warehouse with slow query times? How would you verify the accuracy of the displayed claim against the raw logs?

ONE CONCRETE EXAMPLE: Imagine a Node service running on a schedule every five minutes. It queries a time-series database for the past thirty days of health-check results, filters out planned maintenance windows, and writes 99.92 to a Redis key homepage.uptime_sla with a ten-minute TTL. A Next.js edge function reads this key at request time and embeds the string directly into the server-rendered headline. If Redis is unreachable, the edge function serves the value from a stale-while-revalidate header cached at the CDN layer, ensuring the headline never blocks on a database and the main thread remains free for user interactions.

Source: web.dev Rendering on the Web