Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Harry Roberts Profile picture
@csswizardry
Oct 27, 2023 • 6 tweets • 3 min read • Read on X
Scrolly
Some sensible defaults for your img elements: img { max-width: 100%; /* [1] */ height: auto; /* [1] */ vertical-align: middle; /* [2] */ font-style: italic; /* [3] */ background-repeat: no-repeat; /* [4] */ background-size: cover; /* [4] */ shape-margin: 0.75rem; /* [5] */ }
1. Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes

⬅️ With : Without ➡️
Image
Image
2. Remove ‘phantom’ whitespace

⬅️ With : Without ➡️
Image
Image
3. Italicise alt text to visually offset it from surrounding copy

⬅️ With : Without ➡️
Image
Image
4. [Inert] Set up backgrounds for optional LQIP

⬅️ With : Without ➡️
Image
Image
5. [Inert] Set up margin for optional `shape-outside`

⬅️ With : Without ➡️
Image
Image

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Harry Roberts

Harry Roberts Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @csswizardry

Harry Roberts Profile picture
Sep 10, 2021
Simple yet significant thing all developers should keep in mind: CSS resources (fonts, background images) are not requested by your CSS, but by the DOM node that needs them [Note: slight oversimplification, but the correct way to think about it.]
It’s not until the browser finds e.g. an H1 that needs Open Sans that it will dispatch the request. Ergo, it’s often the speed of the DOM that determines CSS-resource discovery, and not the speed of the CSS itself.
While there is no catch-all fix for this, it does help to explain why you might see waterfalls like this: It looks like the font was requested by the JS, right? But actually, the JS was blocking the discovery/construction of the DOM node that needed the font. Image
Read 5 tweets
Harry Roberts Profile picture
Jan 18, 2021
JS framework (developer)s inventing CSR, realising it was a misfire, and then *rebranding ‘websites’ as SSR* is a level of spin that a disgraced politician would kill for.
This absolutely is the case and it kills me. In performance audits I have to suggest ‘have we tried SSR?’ like it’s a step forward. Like it’s a groundbreaking development we’ve recently been gifted.
The fix is never ‘do SSR’; it’s ‘don’t do CSR’. The difference is significant. Selling SSR like it was invented after or in response to CSR is pernicious and disingenuous.
Read 5 tweets
Harry Roberts Profile picture
Jan 13, 2021
🧵 Two of my most- and first-used checks when doing a performance audit are surprisingly old school: 1) Validate HTML 2) Disable JS.
Validate HTML? Yep. We haven’t really cared about ‘valid HTML’ for valid HTML’s sake for about a decade, but certain errors can actually be pretty significant. What’s wrong with this picture? Screenshot of the <head> tags of my own website. The code co
It’s this lil’ fella right here. <span> isn’t allowed in the <head>, so when the browser encounters the <span>, it assumes the <head> should have been closed already. Closeup screenshot showing an erroneous span element in my H
Read 10 tweets
Harry Roberts Profile picture
Dec 30, 2020
🧵 A lot of my clients stress about Critical CSS. It’s very difficult and error-prone to retrofit to a site, yet a lot of tools make a huge deal of it. The thing is, it’s not always that effective…
Critical CSS only helps *if CSS is your biggest bottleneck*. Your HEAD is the single biggest render-blocking part of your page, so if your HEAD takes, for example, 1000ms, your Start Render will never be faster than that.
Put another way: getting your CSS time down from 250ms to 50ms will do nothing if you have a synchronous JS file that takes 250ms.
Read 10 tweets
Harry Roberts Profile picture
Jun 27, 2020
🖼 If you’re building hero-style content with background images—maybe even through a CMS—you can hugely improve rendering times (LCP) with one additional line of HTML.
With the before, the browser won’t request the image until it knows it needs it—when the Render Tree is built. The problem is that the Render Tree can’t be built until the CSSOM is built, which means the browser needs to download and (re)calculate all applicable stylesheets.
Your Render Tree is only as fast as your slowest stylesheet.
Read 8 tweets
Harry Roberts Profile picture
Jun 3, 2020
📊 I took the csswizardry.com homepage and tested it over a 3G connection. I then ‘improved’ bandwidth or latency by 10% until 2× change, then I did 4× and 8× changes.
📈 For every 10% improvement in bandwidth, we see an average 0.21% *increase* in FCP.
📉 An 8× improvement in bandwidth only yields a 1.64% improvement in FCP.
📉 For every 10% improvement in latency, we see an average 2.1% improvement in FCP.
📉 An 8× improvement in latency yields a 94% improvement in FCP.
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(