In my last article, we went over how to set up a web app that serves chunks and bundles of CSS and JavaScript from CloudFront. We integrated it into Vite so that when the app runs in a browser, the assets requested from the app’s root HTML file would pull from CloudFront as the CDN. […]
I have a handful of good links to articles about performance that are burning a hole in my bookmarks folder, and wanna drop them here to share. The new WebPageTest website design From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that […]
Stoyan is absolutely correct. As much as we all love CSS, it’s still an important player in how websites load and using less of it is a good thing. He has a neat new bookmarklet called CSS Me Not to help diagnose unnecessary CSS files, but we’ll get to that in a moment. The [problem] […]
Need to learn about web performance? Frontend Masters has an in-depth course all about Web Performance Fundamentals from Todd Gardner. There is a lot to know, from the psychology of web performance, to measuring the new Core Web Vitals, to building a culture of performance at your organization. Source
John James Jacoby: I recently noticed that animations in Safari were stuttering pretty badly on my M1 powered 2020 MacBook Air, and dove in to figure out why. The why: This wasn’t a bug. This was a feature. By default, macOS Monterey enables “Low power mode” on Battery power and disables it when using a Power […]
I’ve got some blind spots in CSS-related performance things. One example is the will-change property. It’s a good name. You’re telling the browser some particular property (or the scroll-position or content) uh, will, change: .el { will-change: opacity; } .el.additional-hard-to-know-state { opacity: 0; } But is that important to do? I don’t know. The point, […]
I recently blogged about how images are hard and it ended up being a big ol’ checklist of things that you could/should think about and implement when placing images on websites. I think it’s encouraging to see frameworks — these beloved tools that we leverage to help us build websites — offering additional tools within them to help tackle […]
Here’s Atif Afzal on using a <div> that is permanently on the page where tooltips are added/removed and how they perform vastly better than plopping those same tooltips right into the <body>. It’s not really discussed, but the reason you put them that high-up in the DOM is so you can absolutely position them exactly […]
for HTML there would be few different strategies, from naively and blindly just caching for few minutes (instead of days or even months) that could introduce slight delay and cause unnecessary transfers overhead to relying on modification date or ETag that remove delay completely and reduce transfers but still require server hits and may be […]
I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance testing on CSS-Tricks. Essentially use the tool, poke around, and identify performance pain points to work on. You can watch the video right here on the site, or over on their Twitch channel, which is […]