It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Real talk from Dave:
I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals… somehow goofed and added 33 SECONDS to their page load.
This stuff is hard even when you care a lot. The 33 seconds came from font preloading rather than … Read article “Maintaining Performance”
In this piece, Eric Meyer argues that performance is more important than ever right now — especially for websites that contain critical information for the public:… Read article “Get Static”
I've had a number of browser tabs open to articles all related to web performance and gosh darn it if blogging them is a way for me get some closure. They are all good! … Read article “Performance Links”
In this tutorial, I’ll show you step by step how to create a simple tool in Node.js to run Google Lighthouse audits via the command line, save the reports they generate in JSON format and then compare them so web performance can be monitored as the website grows and develops.
I’m hopeful this can serve as a good introduction for any developer interested in learning about how to work with Google Lighthouse programmatically.… Read article “Build a Node.js Tool to Record and Compare Google Lighthouse Reports”
One particular pattern [for loading non-critical CSS] I’ve seen is the preload/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their
onloadevents to change them back to a stylesheet once the browser has them ready.
So you're trying to make your stylesheet more async, but it causes two big problems:
Here’s a neat idea from Tim Kadlec. He uses the Modheader extension to toggle custom headers in his browser. It also lets him see when images are too big and need to be optimized in some way. This is a great way to catch issues like this in a local environment because browsers will throw an error and won’t display them at all!… Read article “In-Browser Performance Linting With Feature Policies”
In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser. Then it needs to repaint the page after that which pushes all the content around. I’ve definitely seen this problem a lot on big news … Read article “Do This to Improve Image Loading on Your Website”
There is a growing number of things that we have to do to help the browser achieve for peak performance.
sizes attribute and how big the images are with w descriptors. width and height presentational attributes, which have always been somewhat useful and are now really useful. will-change property in 
Every so often, the fruits of innovation bear fruit in the form of improvements to the foundational layers of the web. In 2015, HTTP/2 became a published standard in an effort to update an aging protocol. This was was both necessary and overdue, as HTTP/1 rendered web performance as an arcane sort of discipline in the form of strange workarounds of its limitations. Though HTTP/2 proliferation isn’t absolute — and there are kinks yet to be worked out — I … Read article “Innovation Can’t Keep the Web Fast”
If you're interested in leveling up your knowledge and skill of web performance, you can't do better than learning directly from Scott Jehl.… Read article “Lightning-Fast Web Performance”