TaskOptimize the slow page. Add: defer to all scripts, preconnect to https://cdn.example.com (crossorigin), preload /hero.webp as='image' fetchpriority='high', preload /inter.woff2 as='font' type='font/woff2' crossorigin, set loading='lazy' on the below-fold img, set width+height on both imgs, add <meta name='view-transition' content='same-origin'>.
Module capstone: shave 800ms off a slow page
200 XP14 min
Theory
Putting A7 together
The starter HTML is a SLOW page: blocking scripts, no resource hints, eager images, no compression headers (out of our control), no preconnect. LCP measured: ~2.4s.
Goal: get LCP under 1.6s by applying every A7 technique:
- Make all scripts non-blocking (defer or async).
- Preconnect to external origins you'll fetch from.
- Preload the LCP image with
fetchpriority="high". - Preload the hero font.
- Lazy-load below-fold images.
- Set width/height on every image (CLS).
- Add view-transition meta for SPA-like nav.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.