Why Your Homepage Must Load in Under 3 Seconds

## Speed Is the First Impression Amazon found that every 100ms of latency cost them 1% in sales. Google found that 53% of mobile users leave if a page takes longer than 3 seconds to load. Your homepage is your first impression. If it's slow, visitors leave before they see your product, your testimonials, or your call to action. No amount of beautiful design matters if nobody waits for it to render. ### The Design Culprits **Hero videos.** A 10MB background video takes 8+ seconds to download on a 10Mbps connection. That's beautiful but unusable. Compress to under 3MB, or use a static image on mobile where bandwidth is precious. **Custom fonts.** Loading 6 font weights from Google Fonts adds 200-400KB to your page. Use 2 weights maximum (regular and bold). Enable font-display: swap so text shows immediately while fonts load. **Carousels and sliders.** They load all slides upfront and add heavy JavaScript for animation. Studies consistently show that less than 1% of users interact with carousel slides beyond the first. Use a single hero image with a clear CTA instead. **Uncompressed images.** A 4000x3000px JPEG straight from your camera is 5-10MB. Resize to 1600px wide, compress to WebP at 80% quality, and it'll look identical at 200KB. That's a 25x reduction. **Third-party scripts.** Analytics, chat widgets, social embeds, marketing pixels — each adds 50-200KB and potentially blocks rendering. Audit every script and remove anything non-essential. ### The Design Constraint The best designers treat speed as a design constraint, not an afterthought. Set a performance budget before you start designing: - Total page weight: under 1MB - Time to First Byte: under 200ms - Largest Contentful Paint: under 2.5 seconds - Number of HTTP requests: under 40 Design within these constraints. Make it beautiful within the bounds of fast. That's the real skill.