30% offEnding soon
FSD-053Frontend system design Premium

Design a News Publication Homepage

Design a fast, stable news homepage with edge rendering, controlled breaking-news patches, recirculation, ad contracts, and correction-aware publishing.

Advanced 64 min read

A news homepage is a live printing plate. Editors can cut a new edition quickly, but every headline, image, timestamp, ad well, and correction must still land in a measured place.

The interview is not only about arranging cards. It is about editorial authority, edge delivery, cache coherence, responsive image priority, breaking-news patches, correction history, commercial layout contracts, accessible updates, and recirculation that respects reader intent.

Clarify the publication contract

Ask which desks publish, how many regional editions exist, what counts as breaking, whether editors can pin or embargo stories, how fast corrections must propagate, which ad sizes are sold, and how much personalization is acceptable. Quantify peak requests, edition frequency, hero-image weight, live subscribers, ad fill, cache-hit ratio, and origin render capacity.

Measure useful HTML time, LCP, CLS, edge-hit ratio, edition age, patch rejection and recovery, correction propagation, image bytes, ad blank rate, scroll depth, recirculation quality, accidental duplicate exposure, accessibility defects, and rollback time.

The public interview prompt

Design the homepage of a large news publication. It must render quickly around the world, express a deliberate editorial hierarchy, support regional editions and optional reader preferences, insert advertising without destabilizing the page, recommend useful next stories, and react safely to breaking news.

Explain:

  • story, revision, edition, placement, image, correction, and commercial-slot identity;
  • CMS publication, validation, embargoes, edition composition, immutable artifacts, cache invalidation, and rollback;
  • static, server, and edge rendering boundaries, streaming, hydration, images, fonts, and performance budgets;
  • breaking-news delivery, ordering, patch rejection, reader control, accessibility announcements, and reconnect behavior;
  • ad reservation, consent, auction timing, creative isolation, measurement, failure states, and CLS protection;
  • recirculation candidates, editorial rules, contextual signals, deduplication, privacy, experiments, and metrics;
  • SEO, structured data, news sitemaps, observability, abuse controls, testing, and staged rollout.

What the premium solution covers

The complete solution models the homepage as an immutable editorial edition with named placement slots and narrowly scoped live patches. A moving printing plate makes the edition transition visible. An ad gutter contract, recirculation switchboard, and correction ledger explain commercial, discovery, and trust behavior as separate newsroom artifacts. A deterministic lab turns traffic, cache, imagery, live-update, and ad assumptions into operational pressure.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

What is the core invariant of a news homepage?
The visible story slots, navigation, metadata, images, corrections, and live patches must resolve against one explicit front-page edition. A patch applies only to the edition it was built from.
Should the homepage be fully personalized at request time?
Usually no. Cache a strong shared editorial edition and layer small, privacy-aware regional or preference modules behind stable boundaries. Keep the main news judgment cacheable and inspectable.
How should breaking news update an open homepage?
Send a small sequenced patch, verify its base edition, announce it politely, and let the reader choose when replacement would disrupt reading. Never reorder the whole page beneath them.
How can ads avoid layout shift?
Declare slot geometry in the server HTML, reserve it before the auction, constrain accepted creative sizes, and retain a labeled house or empty state when no ad fills.
What makes recirculation trustworthy?
Use explicit editorial relationships and bounded contextual ranking, label recommendation reasons, deduplicate stories, and measure satisfied continuation rather than raw click loops.
What belongs in a correction workflow?
Keep immutable story revisions, a reader-visible correction note, timestamps, responsible editors, cache-purge scope, structured-data updates, and an audit trail.