Chris Taylor (@mrwiblog) has been messing around building many and various websites since the late nineties. He's now a consultant working with companies across the North of England on various webby things. He lives in West Yorkshire and plays various musical instruments with various levels of skill. He likes the word 'various', but does not like writing about himself in the third person.
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.