Designing for Performance
by Lara Callender Hogan · Lara Callender Hogan
A practical guide for designers and developers on balancing visual richness with page speed, covering image and font optimization, mobile-first performance budgets by breakpoint, measurement tools, and building a performance-focused team culture.
This link may earn us a small commission at no extra cost to you. Affiliate disclosure
More resources on Web Performance
smashingmagazine.com
Smashing Magazine is a design-focused publication offering practical articles, tutorials, and ebooks for web designers and developers. It covers layout, composition, typography, UX, and responsive design, with code samples and design patterns.
HTTP Archive
An open-source project that crawls millions of web pages monthly using Chrome UX Report data, recording page composition, load times, and technology adoption to reveal long-term trends in how the web is built.
WebPageTest
A free tool that tests page load speed from real browsers and global locations, producing waterfall charts, filmstrips, and Core Web Vitals scores developers use to diagnose and fix front-end performance bottlenecks.
web.dev/performance
Google's hub of free guides, case studies, and tools such as Lighthouse and PageSpeed Insights covering Core Web Vitals, image and font optimization, and JavaScript performance for improving real-world page load speed.
Web.dev Learn - Performance
Learn web performance best practices with Google's web.dev course! Optimize your site for speed and a better user experience.
HTTP | Web Performance
Learn HTTP fundamentals & boost your website's speed! Barry Pollard's course unlocks key web performance optimization techniques.