How To Improve Largest Contentful Paint for Faster Load Times - Calibre
A no-nonsense checklist of good performance advice from Karolina.
Essential Image Optimization
Following on from Amber’s introduction, here’s a really in-depth look at image formats, compression and optimisation techniques from Addy.
This is a really nicely put together little web book released under a Creative Commons licence.
Related links
Basic Pattern Repository
A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.
Swipey image grids.
This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.
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.)
A Guide to the Responsive Images Syntax in HTML | CSS-Tricks
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset and sizes.
Related posts
Accessibility testing
It’s not just about finding the issues—it’s about finding the issues at the right time.
Dark mode revisited
Adding another theme to my stylesheet switcher.
Dark mode
Adarktio
Inlining SVG background images in CSS with custom properties
A clever technique I learned from Trys.
The top four web performance challenges
Counting down the charts—what will be in the number one spot?