I love a good bookmarklet, and Harry has made a very good bookmarklet indeed.
Drag ct.css to your browser bar and then press it whenever you’re on a site you want to check for optimising what’s in the head element.
I didn’t know about scroll-margin-top! I wonder if you could apply a universal rule …like, say you’ve got a fixed header that’s 2em in height, couldn’t you declare:
:target {
scroll-margin-top: 2em;
}
Harry takes a deep dive into the performance metric of “time to first byte”, or TTFB if you using initialisms that take as long to say as the thing they’re abbreviating.
This makes a great companion piece to Drew’s article on server timing headers.
This is a really clever technique from Scott that he unveiled at An Event Apart in Seattle. It uses a header sent by a service worker to distinguish between returning and new visitors—much neater than relying on a cookie. I’ve updated my service worker on The Session to use this technique now.
One more reason not to use sticky headers on mobile.
A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:
With this bookmarklet you’re only ever one click away from the Lighthouse results for a page.
Making a checklist of things that fall somewhere between front-end and back-end development.
A performance boost in Chrome.
Performance sluething.
A few things to remember if you’re going to using position:fixed.