How To Improve Largest Contentful Paint for Faster Load Times - Calibre
A no-nonsense checklist of good performance advice from Karolina.
Link tags: preload
11
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.)
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
Scott re-examines the browser support for loading everything-but-the-critical-CSS asynchronously and finds that it might now be as straightforward as this one declaration:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
I love the fact the Filament Group are actively looking at how deprecate their loadCSS polyfill—exactly the right attitude for polyfills in general.
Preload, prefetch and other link tags: what they do and when to use them · PerfPerfPerf
Following on from Harry’s slides, here’s another round-up of thoserel attribute values that begin with pre.
More Than You Ever Wanted to Know About Resource Hints - Speaker Deck
Slides from Harry’s deep dive into rel values: preconnect, prefetch, and preload.
Performance Calendar » All about prefetching
A good roundup of techniques for responsible prefetching from Katie Hempenius.
The Font Loading Checklist—zachleat.com
This checklist came in very handy during a performance-related workshop I was running today (I may have said the sentence “Always ask yourself What Would Zach Do?”).
- Start Important Font Downloads Earlier (Start a Web Font load)
- Prioritize Readable Text (Behavior while a Web Font is loading)
- Make Fonts Smaller (Reduce Web Font load time)
- Reduce Movement during Page Load (Behavior after a Web Font has loaded)
The first two are really straightforward to implement (with rel="preload" and font-display). The second two take more work (with subsetting and the font loading API).
AMP: the missing controversy – Ferdy Christant
AMP pages aren’t fast because of the AMP format. AMP pages are fast when you visit one via Google search …because of Google’s monopoly on preloading:
Technically, a clever trick. It’s hard to argue with that. Yet I consider it cheating and anti competitive behavior.
Preloading is exclusive to AMP. Google does not preload non-AMP pages. If Google would have a genuine interest in speeding up the whole web on mobile, it could simply preload resources of non-AMP pages as well. Not doing this is a strong hint that another agenda is at work, to say the least.
Can Preload Cut the Mustard? | Filament Group, Inc., Boston, MA
Ooh, this is clever! Scott shows how you can use rel="preload" to conditionally load JavaScript (say, for screens above a certain size). The browser support isn’t quite there yet, but the thinking here is smart.
Preload: What Is It Good For? – Smashing Magazine
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.
Pretty Loaded - preloader museum curated by Big Spaceship
A collection of Flash preloaders. Out of context, they make for surprisingly compelling viewing all together.