Why Page Speed Matters
Page load time directly impacts user experience, SEO rankings, and conversion rates. Google has made Core Web Vitals a ranking factor, and studies consistently show that users abandon pages that take more than 3 seconds to load. Every 100ms of added latency costs measurable engagement.
The single biggest contributor to slow pages? Oversized images and unoptimized resources.
The Problem We Found on Our Own Site
We recently ran our own Mega Report against codefrog.app and discovered our landing page was shipping 3.24 MB of images to users. The breakdown:
- codefrog-1024-transparent.png – 1.10 MB (hero logo, displayed at 200px)
- owasp.png – 594 KB (screenshot, 2880×1800 source)
- githubpr.png – 410 KB (screenshot, 2880×1800 source)
- megareport.png – 322 KB (screenshot, 2880×1800 source)
- Plus 4 more oversized screenshots
The hero logo was a 1024×1024 PNG being displayed at a maximum of 200px CSS width. The screenshots were all 2880×1800 retina captures being served at full resolution regardless of display size.
How We Fixed It
1. Right-Size Your Images
Never serve an image larger than it needs to be. If your CSS displays an image at 200px wide, a 512px source is plenty (accounts for 2x retina). If your screenshots display in a grid at ~700px, a 1440px source covers retina displays.
We resized our hero logo from 1024px to 512px and all screenshots from 2880×1800 to 1440×900.
2. Use WebP Format
WebP provides significantly better compression than PNG for photographic and screenshot content, while still supporting transparency. Browser support is now above 97%.
Our results after converting to WebP:
Total page image weight dropped from 3.24 MB to ~248 KB – a 92% reduction.
3. Use the <picture> Element for Fallback
The <picture> element lets you serve WebP to browsers that support it while falling back to PNG for older browsers.
4. Lazy Load Below-the-Fold Images
Add loading="lazy" to any image that isn’t visible in the initial viewport. The browser will defer loading these images until the user scrolls near them, dramatically improving initial page load time.
For your hero/above-the-fold image, use fetchpriority="high" instead to tell the browser to prioritize it.
5. Quick Optimization with Command-Line Tools
You don’t need fancy build pipelines. On macOS, you can optimize images with tools you already have:
# Resize with sips (built into macOS)
sips -z 900 1440 screenshot.png
# Convert to WebP with ImageMagick
magick screenshot.png -resize 1440x900 -quality 80 screenshot.webp
Common Thresholds for Page Weight
Based on industry best practices, here are reasonable targets:
| Metric | Good | Needs Work | Poor |
|---|---|---|---|
| Total page weight | < 1.5 MB | 1.5 – 3 MB | > 3 MB |
| Single image | < 200 KB | 200 KB – 500 KB | > 500 KB |
| Single resource | < 1 MB | 1 – 5 MB | > 5 MB |
| Total images | < 1 MB | 1 – 3 MB | > 3 MB |
PNG images over 100 KB are almost always candidates for WebP conversion.
New in CodeFrog: Page Size & Performance Test
We built these insights directly into CodeFrog’s Mega Report. The new Page Size & Performance test, coming in an upcoming release, automatically:
- Discovers all page resources – images, scripts, stylesheets, fonts, and other assets
- Measures compressed and uncompressed sizes for each resource
- Flags oversized resources with severity ratings:
- Critical: Any single resource over 5 MB, or total page over 10 MB
- High: Any image over 1 MB, or total page over 5 MB
- Medium: Any image over 500 KB, or total page over 3 MB
- Low: Any image over 200 KB, or total page over 1.5 MB
- Info: PNG images over 100 KB that could benefit from WebP conversion
- Shows a breakdown by resource type (images, scripts, styles, fonts)
- Shows compression savings so you can see how much transfer encoding helps
- Works in Sitemap Mode to audit every page across your entire site
The Page Size test integrates with the existing Mega Report alongside Accessibility, Security, SEO, Meta Tags, and HTML Validation tests. You get a single comprehensive report covering all aspects of your site’s health.
How It Looks
When you run a Mega Report, the Page Size section shows:
- Summary card with total page weight, compression savings percentage, resource count, and breakdown by type
- Sorted resource list showing every asset on the page, color-coded by size, with file type icons
- Severity counts that feed into the overall health score grade (A through F)
Export Support
Page Size results are included in both Markdown and PDF exports, so you can share findings with your team or include them in client reports.
Try It Yourself
The Page Size & Performance test will be available in the next release of CodeFrog for macOS and Windows. In the meantime, you can manually audit your pages using browser DevTools (Network tab, sort by size) or run Lighthouse.
The fastest page is the one that loads the least. Start with your images – they’re almost always the biggest win.
CodeFrog is a developer tool for macOS and Windows that helps you find and fix bugs with comprehensive code analysis, web testing, and GitHub automation. Learn more at codefrog.app.