This content originally appeared on Web Performance Calendar and was authored by Stoyan
Photo by Macau
Characters:
- Alice (senior performance consultant): efficient, sometimes brusque, with deep industry experience
- Carrie (performance engineer): quiet, extremely capable
- James (junior performance engineer): young, fun, sometimes foolhardy
- Ankit (senior performance engineer): considered, careful, rarely misses anything
- Dave (performance engineer): quick-witted,
- Jan (junior performance engineer): newest member of the team, keen, but unsure of her place
Scene:
An emergency room. A patient has just been wheeled in, and the medical team are assembling.
Script:
Alice: Listen up people, we have a patient in a serious condition here. 12 year old e-commerce website, recently undergone a redesign – and we all know what that means. Performance is on the floor, bounce rates through the roof.
James: We’re hooking up some analytics tools now, we’ll have metrics soon.
Alice: Good. We also need devtools opening. Look for render blocking resources first, then long-running processes. Carrie, you’re on image optimisation – check for incorrect formats, bad sizing, anything you can replace with inline SVGs.
Carrie: OK.
Alice: Carrie, if you need any help call Dr Verou – particularly around optimising SVGs. Ankit – work with James on the metrics.
Ankit: Sure. I’ll run the usual set of WebPageTest reports.
Alice: Good, and remember you can call on Professor Meenan if needed. Dave – UI stabilisation. There’s some nasty HTML contamination in here, we need that clearing up pronto.
Dave: On it, boss.
James: We have those metrics, and they are nasty.
Alice: Great.
James: TTI of over 25 seconds, FCP is 15 seconds if you’re lucky, and checkout numbers are down 70% on last year. We suspect a JavaScript overdose, that will be confirmed by the flame charts.
Jan: Oh, that sounds bad.
Alice: That is bad, but we’ve seen worse. Ankit, mobile view – how’s it looking?
Ankit: In popular devices first renders are between 9 and 27 – that’s right, 27 – seconds. Desktop is better, but I can see layout problems in anything other than Chrome.
Dave: Not this again, why can’t people test in different browsers?
Alice: Keep on task Dave, what about the HTML?
Dave: Yup, contaminated alright – serious case of divitis. Lack of semantic structure, and don’t get me started on the lack of input labels.
Alice: OK, but all fixable. If you need a hand cleaning that up get hold of Mr Coyier, or even better Dr Lawson.
Dave: Lawson, the HTML love-doctor. Right-on.
Alice: Carrie? Images – what’s happening there?
Carrie: I see wrong image formats used, I can even see some BMPs. Maybe the CMS has been configured incorrectly, or users not trained. I can fix all these, but it will take a while.
Alice: Good. And icons?
Carrie: Some can be replaced with SVGs, some are not needed at all – just the text would be better.
Ankit: Reducing the number of images would make performance much better.
Alice: I agree, do it. Next thing – JavaScript. Jan, you have devtools open – how about thoe flame charts?
Jan: Really bad, loads of hot paths eating CPU. I’m not even sure why all this stuff is here.
Alice: If it turns out to be as bad as the last patient we’ll need help – get Dr Russell on the line.
Jan: What, the Dr Russell?
Alice: Yes, there’s no-one better to help wade through traces. Plus Alex is an old friend, he owes me one.
James: More metrics coming in. FID is over 500ms, and only 12% of users who navigate to more than one page go on to interact with their basket. There are deeper problems here, Alice.
Alice: Those are bad numbers, any idea what could be wrong?
Ankit: TTFB looks fine, a little slow but nothing to be worried about. Looks like most of the problem is injected scripts.
Alice: As we thought. What are the scripts, Jan?
Jan: I can see two, no, three different analytics libaries being used. All of them have their hooks all over the place. Plus many other things, most of them not deferred.
Alice: Then we’ll need a JavaScriptectomy, and someone should talk to the site owners about better script management. But for now, let’s clean out what we can and get the patient stable again.
Carrie: I see that CLS is bad – on some pages it’s over 0.3. Looks like there are strange things happening in the CSS.
Dave: We need the CSS Wizard.
Alice: I agree, call Harry. And Jen Simmons, too – there must be more efficient ways to get this layout and we need all the experts we can get.
James: These changes are having an effect – LCP is now under 8 seconds for the majority of visits.
Alice: Good work everyone, keep it up.
Ankit: Dave, looks like your streamlined HTML is working – automated accessibility scores are improving, but we won’t know the full picture until we do some manual testing.
Dave: Good news, mate.
Alice: Are we all happy that the patient has stabilised?
Ankit: I am.
Carrie: It looks much better than it did when they wheeled it in here.
Jan: That was scary!
Alice: In that case let’s hand this patient over to the long-term care team. We’ve got a queue of patients needing our help. Well done everyone.
This content originally appeared on Web Performance Calendar and was authored by Stoyan
