JavaScript Start-up Performance

What might slow down rendering and how you can fix it.

Progressive Web App Libraries in Production

Service Worker, Web Push, Analytics libraries, and real-world sites.

Preload, Prefetch And Priorities in Chrome

Loading performance pro-tips.

Essential Image Optimization

Ways to reduce image size through modern compression techniques.

The Cost Of JavaScript

Best practices for making real-world sites load instantly today.

“Be humble, communicate clearly, and respect others. It costs nothing to be kind, but the impact is priceless.”

Speedometer 2.0

A benchmark for modern web app responsiveness.

Web Performance Optimization with webpack

How the bundling tool can help to optimize site resources.

Using JavaScript modules on the web

JavaScript modules are now supported in all major browsers.

Speed is now a landing page factor for Google Search and Ads

What you can do to speed up things.

The Cost Of JavaScript In 2018

Many small changes can lead to big performance gains.

Start Performance Budgeting

Let’s make performance part of project goals from the start.

“Keep code simple. Make it easy to read and maintain by others. Design patterns are great, but use them when it’s clear they add value.”

Rendering on the Web

Where to implement logic and rendering in web apps.

JavaScript Loading Priorities in Chrome

How Chrome schedules and executes scripts.

Native image lazy-loading for the web!

Chrome soon supports the loading attribute.

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.”