Speed at Scale: What's new in Web Performance?

New launches from Google I/O 2019.

The cost of JavaScript in 2019

The dominant costs are now download and CPU execution time.

“On projects: Done is better than none. It’s easy to set expectations so high you never finish. Sometimes ‘done’ is enough. Ship then iterate.”

Native lazy-loading for the web

Browser-level native lazy-loading is finally here.

Adaptive Loading

Improving web performance on low-end devices.

Monitoring Performance with the PageSpeed Insights API

A way to automate website performance measurement.

“It’s okay to admit when you don’t know something. One of the most important skills in software is being able to find answers and learn from them.”

“‘If you want to go fast, go alone. If you want to go far, go together.’ You can do so much with a great team.”

“If you want a fast site, test on slow hardware. Regularly.”

Emoji Selectors

Yes, emojis can be used as CSS selectors.

Puppeteer Web Performance testing

Recipes for automating web performance measurement.

Scroll Overflows

How to find out what DOM nodes have an unexpected scrollbar.

Quicklink

A tiny library to speed next-page navigations by prefetching in-viewport links.

Modern Touch-Friendly Design

Steven Hoober’s guidelines for UI designers in a nutshell.

Tools to measure Core Web Vitals

Google‘s tools for web developers now deliver essential UX metrics.

“border: 1px solid red; is the console.log of CSS.”

It's time to lazy-load offscreen iframes

Browser-level native lazy-loading for iframes is here.

Infinite Scroll without Layout Shifts

How to optimize loading long lists for the Core Web Vitals.

Highlighting great user experiences on the mobile web

Chrome introduces ‘Fast page’ labelling for links.

Visualize Data Structures in VSCode

The power of the VSCode Debug Visualizer extension.

Chrome UX Report Comparison Tool

Compare real-world performance of sites and URLs.

The import on interaction pattern

Lazy-loading of resources that aren’t immediately necessary.

“Best practices should be automated as much as possible.”

Ojoy

Enlarge low-resoluton images and improve their quality.

Enhanced preview of images in Chrome DevTools

It shows file size, rendered and intrinsic size/aspect ratio.

AVPress

An in-browser video compressor for MP4, WEBM, GIF.

Using modern image formats: AVIF and WebP

Strengths and weaknesses of JPEG, PNG, AVIF, and WebP.

Best practices for using third-party embeds

An overview of techniques to load popular third-party embeds efficiently.

Patterns.dev: Modern web app design patterns

How to build powerful web apps with vanilla JavaScript and React.

“Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox.”

“Write about what you learn. It pushes you to understand topics better. Sometimes the gaps in your knowledge only become clear when you try explaining things to others.”

Picture perfect images with the modern ‘img’ element

The HTML ‘img’ element now supports lazy-loading, async decoding, and more.

How do modern frameworks perform on the new INP metric

The Interaction to Next Paint of popular JavaScript frameworks in comparison.

Can browsers optimize the loading of third-party resources?

Google’s vision of third-party scripts with minimal impact on web performance.

Stick to boring architecture for as long as possible

“Our primary goal is to deliver value to the customers.”

Effective code reviews

What to consider as a code author or as a code reviewer.

Write about what you learn

It pushes you to understand topics better.

Chrome now shows each active tab’s memory usage

The new feature is helpful for both users and developers.

Photoshop is now on the web

The challenge of bringing a complex desktop app to the browser.

How Core Web Vitals saved users 10,000 years of waiting

Today, over 40% of sites pass all of Google’s UX metrics.

The Developer Experience Book

A roadmap to high-performance developer experiences.

The debugger’s toolkit

How to master the art of troubleshooting code.