Tiered implementation model

Contents

Overview

The tiered implementation model provides a phased path to LRO adoption so teams can improve progressively without requiring full optimisation from day one.

Key idea: progress over perfection. Start with essentials, then advance based on context, maturity, and impact.

Why this matters for LRO

User impact

• Early-stage releases can still be usable in constrained environments
• Continuous improvement is built into delivery
• Risk of unusable early implementations is reduced

Risks if ignored

• Over-optimisation attempts stall delivery
• Critical optimisations are delayed or skipped
• No consistent progression model across teams

Common problems

• No prioritisation of optimisation efforts
• Attempting advanced techniques before foundations
• No measurable checkpoints for progress
• Inconsistent standards between teams
• Weak benchmarking and validation discipline

Design principles involved

• Progressive enhancement
• Impact-based prioritisation
• Incremental improvement
• Measurable outcomes and benchmarks
• Standardisation across teams
• Context-aware optimisation

Strategy options

Baseline tier

Minimum viable optimisation to ensure basic usability under poor conditions.

• Page size target up to 500 KB
• Minimal JavaScript and text-first rendering
• Optimised images and compressed assets
• Basic caching and limited third-party dependencies
• Core functionality works without JavaScript where possible

Recommended tier

Balanced optimisation for strong day-to-day production performance.

• JavaScript bundle target up to 150 KB
• Request count target up to 50
• Modern image formats and code splitting
• Service worker caching and compression
• Progressive enhancement and adaptive loading

Advanced tier

High maturity optimisation for mission-critical or large-scale systems.

• Dynamic delivery by device and network profile
• Fine-grained caching and advanced service worker logic
• RUM-driven optimisation and predictive preloading
• Chunked uploads, robust retry logic, and degraded modes
• Edge and backend optimisation at scale

Benchmark alignment

• Baseline: LCP around 3 to 4s on slow 3G, page size up to 500 KB
• Recommended: LCP up to 2.5s, FCP up to 2s, CLS up to 0.1
• Advanced: LCP around 1.5 to 2s, INP up to 200ms, high cache hit ratios

Implementation guidance

1. Assess current performance and classify current tier
2. Set a target tier based on product context and team capability
3. Implement baseline practices before higher-tier techniques
4. Track benchmark progress and iterate incrementally
5. Advance tier only when gains justify complexity

Examples

Adaptive loading

if (navigator.connection.effectiveType === '2g') {
  loadLowQualityImages();
} else {
  loadHighQualityImages();
}

Native lazy loading

<img src="image.jpg" loading="lazy" alt="Optimized image">

Do / Don't

Do

• Start with baseline optimisation
• Progress incrementally with clear benchmarks
• Adapt implementation to real user context
• Continuously evaluate performance outcomes

Don't

• Skip foundational optimisation work
• Over-engineer too early
• Ignore benchmarking discipline
• Apply advanced techniques without clear need
• Treat all users and contexts the same

Checklist

Metrics and tools

Key metrics

• Core Web Vitals (LCP, FCP, CLS, INP)
• Page weight and request count
• Cache efficiency
• Error and retry rates
• User engagement outcomes

Tools

• Lighthouse
• WebPageTest
• Chrome DevTools
• RUM platforms
• Bundle analysers

Related topics

• Measurement and testing
• Embedding LRO in development
• Resilience and offline patterns
• Network and delivery optimisation
• Rendering strategies

Further reading

• Web Vitals
• web.dev performance
• WebPageTest