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

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.

• In my last newsletter, I talked about React Server Components and what they mean for the future of React. The team at Vercel has put together a comprehensive resource on Server Components, including a video by yours truly. We've also created a demo of React Server Components using Next.js.
• I hosted a live Next.js & Vercel AMA (Ask Me Anything) on YouTube. Over an hour of questions on performance, CSS-in-JS vs CSS, deployment tips, the future of Next.js, and more. I'm debating doing another live stream, so let me know if you found this valuable.
• My latest project was adding a Guestbook to my site. This was an opportunity to try serverless Redis and bring back an artifact of the early web. There's already been over 200 entries 🤯
• I also posted a new video 10 Next.js Tips You Might Not Know talking about redirects, rewrites, preview mode, Preact, caching, and even mobile apps.

Images

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.