Author
Chris Coyier
7 Comments
Join Conversation
“The Modern Web”
A couple of interesting articles making the rounds:
- Tom MacWrite: Second-guessing the modern web
- Rich Harris: In defense of the modern web
prerender.js
This is another player in the game of (pre)rendering the page of the link that you’re about to click on before you click it. The point of which is to get a performance boost for extremely little effort. You’re putting the browser to work getting that next page ready for, say, that half a second between where you hover a link and when you click it, when otherwise the browser wouldn’t have been doing anything.
Instant.page is another player, and … Read article “prerender.js”
Real-World Effectiveness of Brotli
Chris Coyier
… Read article “Real-World Effectiveness of Brotli”The numbers so far show that the difference between no compression and Gzip are vast, whereas the difference between Gzip and Brotli are far more modest. This suggests that while the nothing to Gzip gains will be noticeable, the upgrade from Gzip to Brotli might perhaps be less impressive.
The Cost of Javascript Frameworks
I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than non-JavaScript-framework-powered sites. Angular is the beefiest and React is hardest on the CPU. But as Tim says:
… Read article “The Cost of Javascript Frameworks”… it says very little about the performance of the core frameworks in play and
Web Performance Checklist
The other day, I realized that web performance is an enormous topic covering so very much — from minimizing assets to using certain file formats, it can be an awful lot to keep in mind while building a website. It’s certainly far too much for me to remember!
So I made a web performance checklist. It’s a Notion doc that I can fork and use to mark completed items whenever I start a new project. It also contains a … Read article “Web Performance Checklist”
Maintaining Performance
Chris Coyier
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”
Get Static
Robin Rendle
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”
Performance Links
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”
Build a Node.js Tool to Record and Compare Google Lighthouse Reports
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”
When CSS Blocks
Chris Coyier
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:
- You’ve kicked up the priority of the downloading higher than any other asset.
- You’ve blocked the HTML parser too (because
