Skip to content

Tasks: Homepage HTML Size Reduction

Project: superside PRD: Homepage HTML Size Reduction Progress: 0/5

Task 1: Investigate HTML Bloat Sources

  • Status: pending
  • Description: Analyze the homepage HTML to identify what's contributing to the 5MB size. Focus on carousel markup and image srcSet as primary suspects.
  • Subtasks:
  • Measure current homepage HTML size and document baseline
  • Analyze carousel component markup size and structure
  • Examine image srcSet attributes and their contribution to HTML size
  • Check for inline styles, scripts, and JSON data payloads
  • Identify repeated markup patterns
  • Document findings with size breakdown by component/source

Task 2: Optimize Image srcSet Attributes

  • Status: pending
  • Description: Reduce HTML bloat from image srcSet attributes through optimization or lazy loading strategies.
  • Subtasks:
  • Evaluate current srcSet implementation and necessity of all variants
  • Implement lazy loading for below-the-fold images
  • Reduce number of srcSet breakpoints if excessive
  • Consider moving srcSet data to JavaScript for dynamic loading
  • Test image loading behavior across devices
  • Status: pending
  • Description: Reduce carousel component HTML size through markup optimization and lazy rendering.
  • Subtasks:
  • Analyze carousel markup structure and identify redundancies
  • Implement lazy rendering for carousel slides (load on demand)
  • Simplify carousel HTML structure where possible
  • Extract inline styles to CSS classes
  • Test carousel functionality after optimization

Task 4: Additional HTML Optimizations

  • Status: pending
  • Description: Apply additional optimizations based on investigation findings.
  • Subtasks:
  • Extract inline styles to external CSS files
  • Move inline scripts to external files
  • Externalize large JSON data payloads if present
  • Remove duplicate or unnecessary markup
  • Implement code splitting where applicable

Task 5: Validation and Documentation

  • Status: pending
  • Description: Verify HTML size reduction meets goals and all functionality works correctly.
  • Subtasks:
  • Measure final HTML size and calculate reduction percentage
  • Verify 30%+ reduction achieved (target: 3.5MB or less)
  • Test all homepage functionality (carousels, images, interactions)
  • Validate visual design unchanged
  • Check SEO metrics and Core Web Vitals improvement
  • Document optimization strategies applied and results