How to get the fastest web fonts & images (updated for 2021) (#27)

Joao Garin

Joao Garin / January 21, 2021

3 min read

Part of my job at Vercel is helping people build better websites. Build back better, you might say. Two common themes with slow sites are incorrect usage of fonts and images. In this newsletter, I'll share some practical tips you can apply today to improve performance.

First, a few miscellaneous updates.


I gave a short talk about the Next.js Image Component at Jamstack Toronto with some fine folks from Gatsby, Netlify, and Sanity. No recording yet, but I've compiled some best practices for image performance on Twitter. In summary:

  1. Use width and height to prevent layout shift
  2. Lazy-load images as they enter the viewport
  3. Use modern image formats (WebP, AVIF)
  4. Serve correctly sized images using srcset
  5. Provide blur-up placeholders

Check out the full thread for more details (along with my video if you missed it).

Web Fonts

It's easy to forget typography accounts for 95% of web design. Performant font loading is critical for improving your Core Web Vitals. Here's how to get high-performance web fonts in 2021:

  1. Use a variable font
  2. Preload your font file
  3. Self-host instead of Google Fonts
  4. Use font-display: optional to prevent layout shift

Check out my video Web Fonts in 2021 for more details. It's one of my best yet, in my opinion. It's also available as a blog post if you prefer.

Final note: I'm personally thrilled about Vercel Integrations. Deploying a full-stack Next.js application with a PostgreSQL database in less than 3 minutes feels like cheating. Combine that with a Stripe Integration and you can deploy a complete SaaS application before your coffee finishes.

If you have any suggestions for videos or blog posts, I'd love to hear them. I'll be spending more of 2021 focused on creating. Thanks y'all – I appreciate this community we have.

Subscribe to the newsletter

Get emails from me about web development, tech, and early access to new articles.

- subscribers – 30 issues