Harry Roberts Profile picture
🚀 Site-Speed Optimisation Expert; Web Performance Consultant. I make websites faster so you make more money. #webperf #corewebvitals https://t.co/tqsYJMXgS5
Aug 27 14 tweets 4 min read
This hamburger icon was costing me about 300ms of main thread time—AMA. Image 🧵 I’ve always had this suspiciously long Layout task on my site. Never quite knew why and never really thought to look into it—CWV are glowing regardless. But ~400–500ms in Layout for a simple page does feel off… Image
Oct 27, 2023 6 tweets 3 min read
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
Sep 10, 2021 5 tweets 1 min read
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.
Jan 18, 2021 5 tweets 1 min read
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.
Jan 13, 2021 10 tweets 3 min read
🧵 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
Dec 30, 2020 10 tweets 2 min read
🧵 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.
Jun 27, 2020 8 tweets 2 min read
🖼 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.
Jun 3, 2020 11 tweets 2 min read
📊 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.
Oct 22, 2019 20 tweets 7 min read
You WILL need a cast iron pan[1], a quick-read meat thermometer, and a high smoke point cooking oil[2]. Do not attempt this until you have all of these items. It will not work and you will be disappointed. Photograph showing the items listed above. 1. Cast iron can be heated up to crazy-high temps, and holds/spreads heat well. Mine was dirt cheap and I absolutely adore it. nisbets.co.uk/vogue-round-ca…
2. Do NOT attempt this with olive oil. It will burn before you can even get started. Avocado oil, beef fat, or clarified butter.
Oct 19, 2019 6 tweets 2 min read
Want to view a single image on @imgur (literally its only job)? Good luck! You gotta successfully download (354KB) and run (1.21MB) of client-side React in order to get your image requested as resource 110 of 553. What should have been an IMG element became… this. • Total page weight: 5,961KB
• Image I wanted to view: 37.5KB

Put another way, this page was 158.96× heavier than it needed to be.
Jul 22, 2019 7 tweets 3 min read
This is the first time I’ve knowingly seen the Battery Status API used for fingerprinting. Inevitable, really, but this is the first time I’ve spotted it in the wild. Screenshot showing a file in DevTools that contains identifying information about the charge-status of my laptop’s battery. Any developers not familiar with browser/device fingerprinting, I encourage you to please read up on it: en.wikipedia.org/wiki/Device_fi…
Jun 10, 2019 7 tweets 1 min read
✅ My very high-level performance checklist:

0. RUM and Analytics
1. Infrastructure
2. The Network
3. Assets and Payloads
4. Runtime
5. Monitoring and Budgeting 0. RUM and Analytics

• What do we know already?
• What issues exist?
• Where do we need to focus our efforts?
May 29, 2019 20 tweets 6 min read
The issues are manifold. In theory, loading CSS anywhere in the BODY is 💯% a great idea in 2019. See here: csswizardry.com/2018/11/css-an… and, more thoroughly, here: jakearchibald.com/2016/link-in-b… by @jaffathecake. Loading CSS in-BODY allows for a progressive render, as almost all browsers will only block rendering of *subsequent* content (that is to say, content beneath the rel=styleheet), as opposed to the traditional behaviour of blocking of all content.