Tech Decisions

• hosting, site generator, CDN
• Cloudflare

CDN

• HTTP/2
• Compression
• TLS

CSS (and critical path)

• Network Performance - very important concepts for page loading, rendering and the critical path
• Content Visibility - can help, but limited browser support still
• Paint Containment - can improve user experience when interacting with elements

Orchestration

• Head Tags - optimize order of resources to allow browser speed and parallelization

Resource Hints - preload, preconnect, prefetch

• Preconnect - hints for the browser to let them know that third-party domains are coming
• Preload - don’t use it! (at least for now. Maybe for web fonts)
• Prerender - anticipate user path and preemptively download content

Fonts

• Font-display: swap or optional
• Use SVG instead of font icons

Images

• Basic Optimization - ImageOptim for Mac, Cloudinary/ImageIX/Fast.ly for automation
• Hero Imagery - loading critical above-the-fold images
• CLS & LQIP - prevent layout shift and improve LCP
• Lazy Load - use browser native not JS; only for images “below the fold”

Enhancements

• Instant.page
• Service Worker for pre-caching

Testing

• WebPageTest.org
• GTMetrix
• Page Speed Insights (by Google) https://pagespeed.web.dev/

Monitoring

• Analytics
• Treo
• Speedcurve

Resources

• CSS-Wizardry by Harry Roberts (actually way more about web perf than CSS nowadays)
• Web Perf Courses by Harry Roberts