Setting Up CloudFront to Host Your Web App

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. […]

7 Fresh Links on Performance For March 2022

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 […]

Using the CSS Me Not Bookmarklet to See (and Disable) CSS Files

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] […]

Links on Performance V

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

Low framerate in Safari on M1 Mac

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 […]

When is it “Right” to Reach for contain and will-change in CSS?

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, […]

Frameworks Helping Image Usage

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 […]

Don’t attach tooltips to document.body

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 […]

Links on Performance IV

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 […]

Learnings From a WebPageTest Session on CSS-Tricks

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 […]

Pin It on Pinterest