You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.
Here’s a clever idea from Harry if you’re willing to play the long game in tracking down redundant CSS—add a transparent background image to the rule block and then sit back and watch your server logs for any sign of that sleeper agent ever getting activated.
If you do find entries for that particular image, you know that, somehow, the legacy feature is potentially still accessible—the number of entries should give you a clue as to how severe the problem might be.
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
Amber has been investigating which image formats make sense for which situations.
Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!
A Mac app for converting PNGs and JPEGs to WebP.
The transcript of a really great—and entertaining—talk on performance by Wilto. I may have laughed out loud at points.
Just like many people develop with an average connection speed in mind, many people have a fixed view of who a user is. Maybe they think there are customers with a lot of money with fast connections and customers who won’t spend money on slow connections. That is, very roughly speaking, perhaps true on average, but sites don’t operate on average, they operate in particular domains.
Some solid sensible advice on optimising performance.
A comprehensive overview of
rel="preload" which looks very useful indeed …I just wish it wasn’t (like “nofollow”) a nonsensical value for the
rel attribute: a resource can’t have a relationship of “preload” to the linking document.
The missing font generator for Mac OS X.
Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.
Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.
Google has updated its advice to people making websites, who might want to have those sites indexed by Google. There are two simple bits of advice: optimise for performance, and use progressive enhancement.
Just like modern browsers, our rendering engine might not support all of the technologies a page uses. Make sure your web design adheres to the principles of progressive enhancement as this helps our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported.
A great in-depth description by Paul of how he optimised his site. More of this please!
This looks like a really handy tool for reducing the file size of JPEGs without any perceptible loss of quality (in much the same way that ImageOptim works for PNGs)—available as a Mac app or an installable web service.
Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.
Trent offers some excellent advice for dealing with the effects of the iPad’s retina display on your websites. That advice is: don’t panic.
An in-depth analysis (graphs! data!) of how popular sites are using—or not using—compression.
Some practical advice for optimising your images on the web.