Skip to content

PRD: Homepage HTML Size Reduction

Project: superside Date: 2026-02-12 Status: draft

Context

The superside project's homepage currently has an HTML payload size of approximately 5MB, which significantly impacts SEO performance and search engine rankings. Large HTML sizes negatively affect page load times, Core Web Vitals scores, and overall user experience, particularly on slower networks and mobile devices. This bloat requires investigation to identify root causes and implement targeted optimizations.

Goals

  • Reduce homepage HTML size by at least 30% (from ~5MB to ~3.5MB or less)
  • Improve SEO performance and search engine rankings
  • Maintain all existing functionality and visual design
  • Identify and document root causes of HTML bloat for future prevention

Requirements

Functional

  • Investigate and identify sources of HTML bloat (inline styles, scripts, data, repeated markup, embedded content)
  • Implement optimizations to reduce HTML size by minimum 30%
  • Verify all homepage functionality remains intact after optimization
  • Ensure visual design and user experience are unchanged
  • Document findings and optimization strategies applied

Non-functional

  • Performance: HTML payload reduced to 3.5MB or less
  • SEO: Improved page load metrics and Core Web Vitals
  • Maintainability: Solutions should be sustainable and not regress over time
  • Compatibility: Changes must work across all supported browsers and devices

Technical Approach

  1. Investigation Phase: Analyze the homepage HTML to identify bloat sources:
  2. Inspect inline styles and scripts
  3. Check for large inline JSON/data payloads
  4. Identify repeated markup patterns
  5. Review embedded media or base64 content

  6. Analyze component rendering and hydration data

  7. Optimization Phase: Apply targeted fixes based on findings:

  8. Extract inline styles/scripts to external files
  9. Implement code splitting and lazy loading
  10. Reduce or externalize data payloads
  11. Optimize component rendering strategies
  12. Remove duplicate or unnecessary markup

  13. Compress and minify where applicable

  14. Validation Phase: Verify improvements and functionality:

  15. Measure HTML size reduction
  16. Test all homepage features
  17. Validate SEO metrics improvement

Constraints and Risks

  • Constraint: Must work within existing framework and architecture
  • Constraint: Cannot break existing functionality or integrations
  • Constraint: Must preserve all SEO metadata and structured data
  • Risk: Optimization changes could inadvertently break functionality
  • Risk: Some bloat sources may be deeply integrated and difficult to refactor
  • Risk: Changes might impact page rendering or hydration behavior
  • Mitigation: Thorough testing after each optimization, incremental changes

Open Questions

  • Are carousel markup and large image srcSet attributes the primary contributors to HTML bloat? (Initial hypothesis to validate during investigation)
  • Can image srcSet be optimized or lazy-loaded to reduce initial HTML payload?
  • Are there framework-specific patterns causing bloat that need architectural changes?
  • Should optimizations be applied to other pages after homepage success?