Performance-Optimized Video Embeds with Zero JavaScript – Frontend Masters Blog
This is a clever technique for a CSS/HTML only way of just-in-time loading of iframes using details and summary.
Link tags: loading
75
V7: Video Killed the Web Browser Star | Rob Weychert
Grrr… it turns out that browsers exhibit some very frustrating behaviour when it comes to the video element. Rob has the details…
Standing still - a performance tinker | Trys Mudford
What Trys describes here mirrors my experience too—it really is worth occasionally taking a little time to catch the low-hanging fruit of your site’s web performance (and accessibility):
I’ve shaved nearly half a megabyte off the page size and improved the accessibility along the way. Not bad for an evening of tinkering.
Sizes=”auto” pretty much requires width and height attributes — ericportis.com
Huh! I did not know this. Good to know!
Intent to Ship: Auto Sizes for Lazy Loaded Images with Srcset
Remember when I wrote about sizes="auto"? Well, it’s coming to Chrome! Hallelujah!
How To Improve Largest Contentful Paint for Faster Load Times - Calibre
A no-nonsense checklist of good performance advice from Karolina.
In Defence of the Single Page Application | William Kennedy
This is very convincing.
Picture perfect images with the modern img element - Stack Overflow Blog
Addy takes a deep dive into making sure your images are performant. There’s a lot to cover here—that’s why I ended up splitting it in two for the responsive design course: one module on responsive images and one on the picture element.
[css-fonts-5] @font-face supports incremental · Issue #6063 · w3c/csswg-drafts
This could give a big boost to web performance!
Conditional JavaScript - JavaScript - Dev Tips
This is a good round-up of APIs you can use to decide if and how much JavaScript to load. I might look into using storage.estimate() in service workers to figure out how much gets pre-cached.
AddyOsmani.com - Preload late-discovered Hero images faster
Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?
I didn’t. (Until Amber pointed this out.)
AVIF has landed - JakeArchibald.com
There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.
The beauty of progressive enhancement - Manuel Matuzović
Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.
Some great practical examples of progressive enhancement on one website:
- using grid layout in CSS,
- using
type="module"to enhance a form with JavaScript, - using the
pictureelement to providewebpimages in HTML.
All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.
Scripts: async, defer
I’m constantly forgetting the difference between the async attribute and the defer attribute on script elements—this is a handy explanation.
Page Speed Benchmarks | SpeedCurve
This is going to be so useful for client work at Clearleft—instant snapshots of performance metrics across industries and regions!
For example, we’ve been working a lot with the travel sector, and now we can call up these benchmarks without having to generate a whole bunch of Web Page Test results ourselves.
See Tammy’s blog post for me details.
Move Fast & Don’t Break Things | Filament Group, Inc.
This is the transcript of a brilliant presentation by Scott—read the whole thing! It starts with a much-needed history lesson that gets to where we are now with the dismal state of performance on the web, and then gives a whole truckload of handy tips and tricks for improving performance when it comes to styles, scripts, images, fonts, and just about everything on the front end.
Essential!
Request with Intent: Caching Strategies in the Age of PWAs – A List Apart
Aaron outlines some sensible strategies for serving up images, including using the Cache API from your service worker script.
How Web Content Can Affect Power Usage | WebKit
The way you build web pages—using IntersectionObserver, for example—can have a direct effect on the climate emergency.
Webpages can be good citizens of battery life.
It’s important to measure the battery impact in Web Inspector and drive those costs down.
Paint Holding - reducing the flash of white on same-origin navigations | Web | Google Developers
This is an excellent UX improvement in Chrome. For sites like The Session, where page loads are blazingly fast, this really makes them feel like single page apps.
Our goal with this work was for navigations in Chrome between two pages that are of the same origin to be seamless and thus deliver a fast default navigation experience with no flashes of white/solid-color background between old and new content.
This is exactly the kind of area where browsers can innovate and compete on the UX of the browser itself, rather than trying to compete on proprietary additions to what’s being rendered.
Redux: Lazy loading youtube embeds
Remy has an excellent improvement on that article I linked to yesterday on using srcdoc with iframes. Rather than using srcdoc instead of src, you can use srcdoc as well as src. That way you can support older browsers too!