The five best design links, every weekday

Category: Performance

All Categories

smashingmagazine.com

Improving Core Web Vitals, A Case Study

How to improve Core Web Vitals, a case study on how to detect and fix bottlenecks, and how we ended up with green scores, all the way.

bjango.com

Design tool performance signatures

When pushed, how do various design tools utilise the hardware they’re running on?

web.dev

Towards an animation smoothness metric

Learn about measuring animations, how to think about animation frames, and overall page smoothness.

cloudfour.com

Which SVG technique performs best for way too many icons?

When I started giving talks about SVG back in 2016, I’d occasionally hear a question I never had a great answer for.

medium.com

How I made Google’s data grid scroll 10x faster with one line of CSS

And the debug process leading up to it.

web.dev

Towards an animation smoothness metric

Learn about measuring animations, how to think about animation frames, and overall page smoothness.

web.dev

Building an effective Image Component

Images are a common source of performance bottlenecks for web applications and a key focus area for optimization.

zachleat.com

The Art of Deception, Lighthouse Score Edition

Some folks are talking about Lighthouse scores in a way that is—in my opinion—not as forthright as it could be (intentionally or not).

philipwalton.com

My Challenge to the Web Performance Community

Performance optimization should be about making your users happy, not about making your tools happy.

smashingmagazine.com

Using Modern Image Formats: AVIF And WebP

In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality.

smashingmagazine.com

Refactoring CSS: Optimizing Size And Performance

CSS optimization techniques that we can apply to tackle common performance issues.

web.dev

The performance effects of too much lazy-loading

Eagerly loading images within the initial viewport—while liberally lazy-loading the rest—can improve Web Vitals while loading fewer bytes.

jakearchibald.com

Serving sharp images to high density screens

Why compressing images for dense screens is different, and how to serve them.

web.dev

Best practices for fonts

Learn about how to optimize web fonts for Core Web Vitals.

pustelto.com

Real-world CSS vs. CSS-in-JS performance comparison

I took a real app and converted it from Styled Components to Linaria to compare the app performance of CSS-in-JS and normal CSS.

web.dev

CSS for Web Vitals

This article covers CSS-related techniques for optimizing Web Vitals.

smashingmagazine.com

A New Way To Reduce Font Loading Impact: CSS Font Descriptors

Web fonts are often terrible for web performance. With CSS font descriptors, we might be able to solve our font loading troubles for good.

jakearchibald.com

Who has the fastest F1 website in 2021?

Deep-diving on the load performance of F1 websites.

iainbean.com

5 steps to faster web fonts

Fine-tune your font files and optimise your loading strategy for maximum speed + minimum FOUT.

web.dev

Best practices for cookie notices

Learn about how cookie notices affect performance, performance measurement, and UX.