What I learned from attending the #PerfMatters conference

Notes from a front-end web performance conference

Stacey Tay
Apr 5 · 5 min read

Thoughts on the conference experience

Everyone is so friendly and approachable

I went alone and it was a fairly intimidating experience, since I’m generally a shy person and can take awhile to warm up. But, I made a rule to not sit alone during lunch and to try to talk to at least 2 people each day. I’m glad I did because everyone I met was nice and fun to talk to.

The talks were absolutely amazing

All the speakers had something related to web performance in one form or another to talk about, and it was obvious that they put in a lot of effort into their presentations. Jenna Zeigen’s talk covered a long list of performance tricks and each of her points had a song lyric to go along with them, which was so entertainingly informative. She told me that it took her about 15 minutes for each song and there’s like over 30 in there 🤯

The talks cover the many facets of working on web performance

Improving a web page’s performance isn’t just a one-off audit, fixing the problems that makes that page slow, and then moving on. It takes a concerted effort from all stakeholders—business, design, engineering, marketing, product—in an organisation to get and stay fast.

❤️ Thoughtful swag from the conference ♻️

A non-exhaustive list of performance tips and tricks learnt

Some, if not all, of these might be common knowledge, but many were new to me.

Performance Culture

Performance on the Web

Some Neat Tools

  • Chrome’s code coverage tool is useful for determining where and when to code-split stuff out. Interact with the page a little to see how the numbers change, and according to Tim Kaldec, about 45% unused code is normal and it’ll be diminishing marginal gains to optimise over that.
  • Chrome’s override network resource feature allows developers to return a locally saved file, which is useful for debugging something on the fly.
  • Google Docs Spreadsheet to do bulk WebPagetest audits.
  • Online JavaScript AST explorer (alright, this one isn’t exactly related to web performance, but I found out about it during the conference and can’t stop playing with it).
  • Request Map creates a network graph from a web page and is useful for visualising third party requests.

Parting Thoughts

If there’s one overarching theme I got from the conference, it’s that to be good at web performance, it’s crucial to understand how the browser works (things like how rendering happens and the critical rendering path). But, performance doesn’t just stop at technical gains.

Getting buy-in from all stakeholders, not just engineering, is crucial to improving and maintaining performance because web performance goes beyond loading a page as fast as possible.

There’s also perceived performance to consider, and then determining whether further improvements in performance creates additional significant business or user improvements. It’s important to keep in mind that performance is just one part of the user experience.

✨ Slide from Addy Osmani’s talk on The Cost Of JavaScript 😂

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Thanks to Jingwen Chen, Hui Yi, and Yao-Hui Chua.

Stacey Tay

Written by

Web Tech Lead at Carousell

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead