Your speed budget at a glance
Targets below assume a modern phone, 4G radio, and a fast host near users.
| Metric | Target | Notes |
|---|---|---|
| LCP | < 1.0s | Hero image or title paints fast |
| TTFB | < 200 ms | Edge cache, PHP 8.3 |
| HTML | < 20 KB | No builder bloat |
| CSS critical | < 12 KB | Inline abovefold |
| JS blocking | 0 KB | All deferred |
| Hero image | < 90 KB | No lazy |
| Fonts | 0-1 custom | System stack preferred |
Step 1. Hosting and PHP runtime
- Use a performance host with page caching
- Enable PHP 8.2 or newer and OPcache
- HTTP/2 or HTTP/3 required
Step 2. Start with a lean theme
Avoid themes shipping 200 KB of CSS before content. Choose block-native.
Step 3. Make the LCP element predictable
- No lazy loading on the hero image
- Preload it
- Set width and height
Step 4. CSS: inline critical, defer the rest
- Inline under 12 KB
- Load main sheet async
- Remove plugin CSS where possible
Step 5. Images: compress and freeze layout shift
- Explicit dimensions
- Bulk optimize library
- Native lazy loading for non-LCP
Step 6. JavaScript: avoid render blocking
- Defer scripts
- Delay analytics where legal
- Limit sliders and carousels
Step 7. Measure on real conditions
- Use WebPageTest with Moto 4G throttling
- Track LCP element candidate in DevTools
- Check field data weekly
Want a speed budget set and implemented
I define your targets, clean the stack, and ship a sub 1s LCP homepage with a repeatable process.
Request a speed plan