Google is using Core Web Vitals as a factor in search results rankings. They’ve also found that improving Core Web Vitals can lead to increased traffic, sales and ultimately conversions. But how can you see your Core Web Vitals easily? Request Metrics is the best solution for monitoring Core Web Vitals across your entire site, but if you just want a quick way to see the Core Web Vitals directly from your browser - check this out.

Webpack is great for building Javascript applications, but did you know it can optimize static HTML assets too? In this article, we use Webpack to process HTML files while automatically optimizing their images too. Hey! Don’t want to read all the in’s and outs of bending Webpack into shape? Jump to the final webpack configuration.

Images are a constant source of pain when developing websites. There are many formats and resolutions a developer must consider in order to maximize web performance. You’ll often end up with a cartesian explosion of the same image in different sizes and formats to support different scenarios. For example, you don’t want to send a high res image meant for high DPI screens to a low DPI screen - you’d be wasting bandwidth and burning time. Using the right file format is equally important.

Google Fonts is a fantastic tool for web designers and developers, but it is sometimes one of the slowest resources on your website. It’s frustrating and ironic that Google’s own font service is the long pole in so many web performance reports, but it doesn’t have to be! Here’s 5 ways to supercharge your install of Google Fonts to make it download less, load faster, and reduce layout shifts of your website.

Brotli is gaining steam as the compression algorithm du jour for high performance websites. Created back in 2013 by Google to decrease the size of WOFF files, Brotli was standardized in 2016 as part of RFC 7932. The sales pitch for Brotli is better compression than Gzip - with similar CPU usage. Better compression leads to faster performance, but how much better is it?

HTTP/3 is here, and it’s a big deal for web performance. See just how much faster it makes websites! Wait, wait, wait, what happened to HTTP/2? Wasn’t that all the rage only a few short years ago? It sure was, but there were some problems. To address them, there’s a new version of the venerable protocol working its way through the standards track. Ok, but does HTTP/3 actually make things faster? It sure does, and we’ve got the benchmarks to prove it.

The fastest website is the website that is already loaded, and that’s exactly what we can do with HTTP caching. HTTP caching lets web browsers reuse of previously loaded resources, like pages, images, JavaScript, and CSS. It’s a powerful tool to improve your web performance, but misconfiguration can cause big performance problems. Here’s what you need to know to use HTTP caching without reading hundreds of pages of HTTP Caching Spec.

Synthetic Testing and Real User Monitoring are the most important tools in your performance toolbox. But they do different things and are useful at different times and many developers only spend time mastering one of these tools and only see a part of their performance problems, like trying to hammer in a screw. Let’s look at these tools, what they measure, and when to use them.