13th November, 2024
Intro
The Conference
I am really not exaggerating when I say this is the professional highlight of my year. It's the fifth year of the conference (Happy Birthday!) and the fourth year I am attending.
It comes down to three things: the people, the quality of the content and the "vibe" of the event (and off-by-one errors).
As I have done the past couple of years, I will be live blogging the conference. I find it a useful way to take notes, and hopefully others find the notes useful too.
I will also be doing it on my excessively "mobile optimised" setup, my phone and bluetooth keyboard. So, apologies in advance for any typos or poorly formatted HTML. (I don't use any sort of CMS, just write hopefully well formed HTML and upload it.)
My notes from previous years: 2022 conference notes 2023 conference notes
Image Credit: Henri Helvetica (thanks Henri!)
Our speaker roster for the two days:
- Tammy Everts
- Harry Roberts
- Eric Bailey
- Paul Calvano
- Anna Migas
- Jason Grigsby
- Alex Russell
- Tim Kadlec
- Jack Franklin
- Mandy Michael
- Erwin Hofman & Karlijn Löwik
- Jason Williams & Paul Williams
- Daniel Roe
- Annie Sullivan
Day 1
Well, here we go!
This feels like a family reunion, full of friends and familiar faces. But also great to speak to first time attendees, I am really excited for them, they are in for a treat!
Tim Kadlec is our host for today.
-
Tammy Everts - The Web Performance Landscape in 2024
Summary
Tammy is up in the number one spot, who better to give us a State of the Union address?
An overview of the state of the internet in general and web performance in particular. Progress is being made, but at the same time sites are getting bigger, there is also a lot still to fix!
Key Points
- 5.52 Billion people use the internet.
- 71% are on Android
- iPhones = Inequality.
- Stats have improved across the world, but still lot of issues globally
- CWV do correlate with conversion rate, but is very site specific
- Pages continue to grow in size. Growth in JS and video.
- Median JS now 896kb
- 19 out of 29 pges had ineficient cache policies
- 17 out of 20 had unused JS
- 96.3% of pages had WCAG failures. :(
- But we can fix this, that is what we are here for!
-
Harry Roberts - Site Speed That Sticks
Summary
Not a tech talk, but about making lasting organisational change. As ever, Harry does a great job in reframing things you think you know and giving you a fresh perspective. I'm always sitting in Harry' talks thnking "of course! It is obvious now when you say it like that!"
In this case, he lays out a really cogent framework for managing performance optimisation.
Key Points
Metrics
- differnet metrics for different peopple at different occasions
- KPIs, Enablers, predictors
- A good KPI is a definition and a target, of interest to the business.
- Definitions need to be exact, which pages, for example. Everyone should be able t define the KPI the same way.
- An enabker is not a KPI but are metrics which influence KPI's, for example TTFB. Usully mostly of interest to engineering teams. Highly actionable.
- Predictors are signals of things to keep an eye on, for example bundle sizes or page weight. Easy to measure accurately. But they are not targets.
localhost
- localhost is a poor predictor of live. This is a major issue.
- Tweak throttling so you get similar metrics as end users.
- Give localhost a deliberate handicap so it matches live.
- Devs should think about bare metal metrics, for example css parse time using performance marks.
Backstops and Budgets
- Budget is what is the worst possible performance we will tolerate, based on worst score in last release cycle.
- Synthetic is for testing, not monitoring. simple but important point
- predictors can be used as tripwires, but needs to be based on an understanding of the relationship between the predictor and the metric.
Monitoring
- Targets are ambitions.
- RUM is for monitoring.
- Only alert on KPIs
- Only revert on KPI performance
Playbook
- No point mopping if the tap is still running
- You need to set various severity thresholds for regressions
- Set agreed actions based on KPI regression severity and duration
- triage steps, identify: who (owns the problem), what, where, when, why
- Stick to the rules you set.
-
Eric Bailey - Accessible is Performant
Summary
A subject I am a big advocate of, really glad that performance.now() usually incudes an accessibility talk. It is almost without exception a neglected area for every website. I mean, not even the UK national dyslexia website follows its own advice...
Key Points
- The Accessibility Tree is essentially a description of an interface.
- It is a refined version of the DOM. But is also bigger than the DOM, as it contains more than just the current in-browser document.
- It can be brittle and slow.
- WRITE SEMNTIC HTML.
- Semantic HTML much more important than ARIA.
- The performance.now() website has good semantics!
- Firefox accessibility inspector is a go-to tool.
- You do not want a DOM depth greater than 32. Keep DOM's shallow. note to self, have a look at some client sites for EAA
- See benefits of well written components images to be added
- Accessibility overlays are predatory and should be avoided, they create more issues than they fix. They are also well shady.
- Refreshable braille readers are a thing and they don not have much computing capacity, so bad code hits them hard.
- If you create inaccessibe experiences, you are creating discrimination.
- How to test Start voiceover, and navigate!
- Cognitive load reduces our brain power in a wide range of ways.
- Keep cognitive load low, by reducing amount of information the user needs to keep in their head.
- It is actually part of accessibility guidelines to redue the amount/duplication of information required to be entered.
- Accessibility isnt complex, just under-prioritised.
-
Paul Calvano - Performance Mistakes
Summary
Paul is going to conver the big mistakes that he can see out there, based on actual data from HTTP Archive. Looking at the list, you would have hoped that sites would not be making some of these simple mistakes but the data says otherwise!
Key Points
- Paul broke Etsy
- Mistake 1 Lazy Loading, using it on LCP image. 731k websites doing this. 38 in the top 1000 sites.
- Mistake 2 & 3 some sites using lazy loading but also setting fetch priority is high (and in somecases decoding async)
- Mistake 4 Resource hints. Preconnects need to take into account CORS
- Mistake 5 Lots of sites preload ultiple images, should only preload LCP image.
- Mistake 6 and 7 dont preload video and large volumes
- Mistake 8 preloading unused images
- Mistake 9 preloading without AS value
- Mistake 10 preloading in unused font formats
- Mistake 12 compression. Not all sites compressing HTML.
- Mistake 13 Many sites compressing at gzip level 1, should be at least 5 or 6
- Mistake 14 Third parties not compressing resources.
- Mistake 15 Make sure all images are optimised.
- Mistake 16 do not load images from S3, it is just storage not CDN.
- Mistake 17 compressing anything apart from text files.
- Hypothesis, testing, validation, monitoring.
-
Anna Migas - Thinking Beyond Core Web Vitals
Summary
Most websites are built for the privileged. Another area I realy care about. I am frustrated that most websites ignore the needs of those on slower devices and/or slow connections. Anna highlights the issues in Africa, but to be honest every country has segments of users who are affected by this. This kind of digital discrimination really pisses me off. Sorry. Not sorry.
Key Points
- In many places (e.g. Africa) webperformance can be the difference between a site loading or not.
- Latency in Africa (and similar) is very high. Not much CDN presence.
- Almost no 5G coverage
- INP has improved a lot in Africa, but not LCP, due to systemic issues.
- Nigeria is considered a mobile-first market, many have never used a desktop.
- Slow connections, slower processors
- New metric: patience
- Give users information to set expectations on loading time
- Need to take into account digital literacy
- Leverage progressive enhancement. This should not be considered an old technique.
- Get caching, resource hinting, lazy loading right.
- Ship minmum bytes (images and video big culprits)
- Use Network information API and vary content accordingly
- Keep pages as simple as possible, small DOM's and beware of layers
- INP issues get even worse on low end devices, so do things like break long tasks.
- We should be thinking about "low data first" universally, but may not be practical.
-
Jason Grigsby - Third Party Woes
Summary
The bane of most web performance consultants lives. Speaking as an ex head of ecommerce, I think the responsibility for this has to lie with the ecommerce teams and product owners, not the dev teams.
Key Points
- Jason calls out Bolt, they even have an excuses page!
- 45% of requests are 3rd parties
- Block them all in WPT and run a comparison test
- What can you do? Have conversations about how essential it is, essential on every page?
- Can the script provider improve performance? something I have experience with
- Move 3rd parties to partytown? Its not an ideal solution as not all scripts work as intended. But it can help.
- Zaraz. Runs scripts at the edge. But again, has complexities.
- Run server-side GTM. Not simple but has a lot of power.
- Yottaa. Can be of use, but IMO better fixing root causes.
- Jason says you often cant measure third party impact until after contract is signed, not sure I agree with that. But that does need people who own the third party relationships to care about performance.
- We need to bring visibility to good and bad performing third parties.
- Require timing-allow-origin headers, make it your default policy.
- We need more ways to get third parties off the main thread
-
Alex Russell - Reckoning: Frontend's Lost Decade
Summary
The web is unique: open, interoperable, safe, cheap to deliver software (webpages)
But it is losing. And there are some bad actors out there, as well as plenty of complacent ones.
Key Points
- Back in the early web, we had 20% of the capabilities needed for 80% of the use cases. Mostly good enough.
- These days, apps like outlook and teams are an app shell with web in the middle.
- Project Fugu, adding more capabilities to the web.
- We needed to reach ecosystem thresholds to allow dramatic leaps forward.
- Platforms are competitions. You are either winning or loosing. The web is currently losing.
- Users who have to use apps should be thought of as a failure, they dont have all the benefits of the web.
- Facebook in-app browsers should never have been allowed.
- Apple are holding back the web experience of their users.
- Users are habituated to look at app stres first, due to mobile web being held back.
- Time spent on mobile web isn't going, but time on mobile is. The web is losing.
- iPhone processing power continues to aceelerate away from lower end phones, widening the performane gap. especially as most website owners use iphones.
- There are some common ailments (add image and details)
- But some good practice out there, UK Gov a good example.
- There are too many lemons out there, too many frameworks dragging things down.
- So often the justification for frameworks is that they work for IE9, etc. That is nonsense.
- There is no good user-centric reason to use any JS framework. And thats all that counts.
Day 1 Round Up
Wow! What a day. 7 amazing presentations, and so muh great content that I struggled to keep up, I am ging to have to upload the images I took once I get home.
Where to start with a summary? Well, the web isn't getting faster, it is getting fatter. In just 2 years the number of bytes being downloaded has grown massively, mostly images and javasript. On average, devices are not keeping up with that growth, as most growth is coming from low end Android phones in developing markets. In a stark contrast, iPhones are getting more powerful, so what this means is that there is widening gap between what website owners are building (for iPhones) and what users are experiencing (on lower end devices).
This is particularly pertinent in places like Africa, where bandwidth is limited. There has actually been some improvement in INP, but LCP is getting worse as websites are getting bigger faster than infrastructure improvements.
Another key inequality is around accessibility, Eric's talk was fantastic and I am pretty sure he could have talked for hours on the subject. My favourite point of his was aound the ever present benefit of writing semantic and well structured HTML. An all too often ignored point.
Harry's talk on getting performance embedded into organisations was really helpful, I like how he codified a framework. Definitely some points I am going to take forward with clients.
I liked Paul's list of the most common gotchas seen in the data, a useful list to run against the sites I help.
Jason's third party therapy session resonated well, I am afraid it is always going to be a perenial sticking poinnt. The real solution is to get the business owners of whatever piece of functionality a proposed third party provides to hold them to account, and ensure that performance is tested before the ink is dry in the contract and ideally that the contract has performance clauses. IMO, I think website owners usually just sign up to whatever contract is put in front of them, but a contract is a two way document and businesses should feek free to push back and add penalty clauses for performance degradation. IMO.
Last but not least was Alex, perhaps the most powerful talk of the day. The web is losing out to other platforms such as native apps and it is actually to the detriment of the end users. We need to fight back. We also need to fight back even more against all these damn javascript frameworks. Not one of them is written for the benefit of the end users of the website. This has to change. I really do not care how much developers love their favourite framework, users need to come first. They are too often a sledghammer to crack a wallnut. (however after hearing Daniel talk, it seems like Nuxt has a lot of good intentions)
Day 2
Katie getting us started on day 2. She has a cold and I am bit worried her voice isn't going to hold out. But she is going to do a great job.
-
Tim Kadlec - In the Blink of an Eye
Summary
A really positive start to the day from Tim and a call to action!
Key Points
- Jevons Paradox - The more we have a resource the more we use it.
- User expectation is constantly growing. Especially the younger audience who didnt grow up with slow networks.
- CWV has been transformative, but needs to move beyond being a checkbox exercise. CWV are a starting point.
- Speculation Rules have landed and are set to make a huge difference.
- Betting on the browser is our best chance of long-term success.
- Let's get to work!
-
Jack Franklin - DevTools Deep Dive
Summary
Wow! So much covered by Jack here. We are all constant users of dev tools, but there is so much that it an do that I am just not aware of, and it is improving all the time. I will be looking at some of this first thing on Monday, once my brain has recovered.
Key Points
- Performance panel now allows you to link localhost to live urls for CWV CrUX data
- Searching in the performance panel network track now works
- Not everyone knows about network request blocking, really useful tool.
- Create breadcrumbs in performance panel to aid productivity
- You can now annotate traces! Very cool. Double click events to annotate. They also show in a sidebar, which is also navigation. You can save traces with annotations.
- You can now hide children in flame charts. You can also add scripts to an ignore list, for example hide frameworks to better show own code.
- You can add data into your performance marks which will appear as a custom track.
- AI coming to dev tools, you'll be to ask for analysis.
- You can file bug reports and it will be looked at.
- New feature: Insights. Performance Insights pannel is going.
- Insights include better CLS tooling
- Insights also show LCP phases, LCP discovery.
- Insights include Third Parties. Looks like a great timesaver.
- CSS Selector stats can be enabled to show slow selectors.
- Insights shown by navigation, so you can see multiple pages.
-
Mandy Michael - Font Performance Strategies
Summary
We often focus on heavy assets like images, or JS but webfonts are a vital part of the page loading story. This is a fascinating talk, so much detail and so many things to look at. Loved this talk. Might have been my favourite.
Key Points
- System fonts can definitely speed things up, but custom typography is important to many.
- Most sites (70%) use a combination of 3rd party hosting and self hosting
- The simplest but not most performant thing to do is use Google hosted fonts. But self hosting is better.
- Make sure you aren't downloading more fonts than you need. I have seen sites downloading redundant fonts.
- Use variable font files, which combine font files from the same family. Unless you only use one weight, in which case use the non-variable font files.
- Reduce font file size. Unfortunately font file sizes have been increasing. You can reduce byte count by choosing the best file format (WOFF2). Fall back to system fonts for older browsers that dnt support woff2, don't bother with older font formats.
- Use tools to optimise variable fonts.
- Subset your fonts (but check your licence first)
- font-display optional is the most performant option, but doesn' always work for your design. font display swap has slower performance, but preserves your design. A good strategy is to use both, if you have multiple fonts, prioritise some fonts over others.
- font display swap has CLS issues. Use size-adjust CSS to match between system fonts and webfonts. There is also font-size-adjust for some more subtle se cases.
- Font loading. Make sure you cache (caache?).
- Inline your font CSS, with caution
- Preload WOFF2 fonts. Preconnect to third party font providers (use crossorigin). Should be tested.
- One potential pitfall with subsetting just to Latin is that your site will look different if they translate it using tools like Google Translate.
-
Erwin Hofman & Karlijn Löwik - INP Case Studies
Summary
INP has been the hot topic throught this year, it went live on March 12th. FID is gone. I have so much respet for Erwin, and not just because of his sharp sense of style, but this is the first time I have heard Karlijn speak (his boss and wife), they were a double act powerhouse. Erwin is great at sharing optimisation case studies.
Key Points
- More than 25% of INPs happen after 20s on the page.
- 23% performance gap between mobile and desktop, but it has been closing over the past few years
- Strong correlation between mobile device memory and INP score
- INP + LoAF = better third party insights
- Taboola had a 36% improvement in INP by using LoAF data to identify optimisation opportunities.
- Third party (BigSur AI) removed moment.js based on LoAF data
- DeOlineDrogist.nl, CPU vs. GPU animation, also yielding events which caused a 53% improvement. Some big wins!
- On a site, found a single script took 3950ms, client was able to remove it and got a 77% INP improvement. Don't be afraid to remove scripts if you can. Many sites will be running redundant code.
- Hotjar has a big impact, reduce sampling rate, you an also add devicememory condition.
- Specultion rules an improve INP as prerendered pages will already have executed their JS.
- Things are improving. Tooling is helping.
-
Jason Williams & Paul Williams - Bloomberg Becomes Browser
Summary
Bloomberg are massive, they handle so much data. I had zero appreciation of how much contribution they have made to the web. I was a bit overwhelmed by a lot of this presentation, not that I didn&t enjoy it but the level of detail they go to is well beyond 99% of web teams. Impressive what the bleeding edge looks like.
Key Points
- They are more complex than most of us will ever have to deal with, but it is really interesting.
- Given the business critical nature of what they do, performance is not a nice to have, it is essential.
- They have custom instrumentation of the main thread, blows my mind the level of detil they can get to.
- Bloomberg instrumental in CSS Grid and CSS Containment, BigInt.
-
Daniel Roe - Unpacking Bundling
Summary
Daniel is a represents something that often gets a lot of criticism in the web performance community: javascript frameworks. To be honest, a lot of this is a bit beyond me, I haven't been involved in website build processes for a long time and a lot has changed.
Key Points
- Frameworks exist beause of a need.
- The enemy of performance is not javascript frameworks, it is the human mindset that resists change. The inability to move with the times, move with the updates within the browser and best practice.
- Bundlers can be very useful for handling the CSS from collections of components and handle them in a consitent and performant way.
- Nuxt have some useful font optimisation tools.
- There is an option to download third party scripts and include them as part of the build process.
- Very cool feture, rebundling. Useful where a page loads many JS subresources.
- Another useful tool is availlable for unbundling old polyfills which are no longer needed.
- Where next? Nuxt hints & a11y
-
Annie Sullivan - Aiming for the Stars
Summary
Annie is a legend, the influence she alone has had on the web is hard to estimate. She is the force behind Core Web Vitals; in 2024 30,000 years of cumulative page load time has been saved. That is the real world impact of CWV.
Key Points
- Choose a north star. Annie's team's is for everyone to have a good user experience on the web.
- Choose your north star careful. Look at the critical user interactions.
- Element timing, event timing, LoAF and user timing marks should all be considered for your north star measurement of ritical interactions.
- RUM is the gold standard, but CrUX report is a good startinig point.
- All of us should be trying our sites with high throttling, to see what it feels like for the p90 users.
- Choose a percentile. P75 is a good starting point, but consider going higher. Sometimes everyone gets the 99th percentile experience.
- North star 2 - Identify the bottlenecks.
- Dig deeper into tooling: get used to tracks and spans. Learn to navigate.
- Leave yourself some signposts. The best signposts are user timing events.
- North star 3 - get awesome at experimenting
- Try ripping things out!
- Measure, learn, change - iterate!
- But you need to know whether the experiment worked.
- North star 4 - contribute back to the community.
Round Up
Wow! Another amazing year. Just when you think you know where you are, the frontier of webperformance keeps stretching out in front of you. I am exhausted trying to take it all in. But I am also excited.
I am excited because there is still so much untapped potential out there.
I am writing this summary on the short flight back to Edinburgh, and no doubt I will have to change it as I ruminate over what I have heard over the past two days. But what are my big take away points?
- There is no doubt that Core Web Vitals are the dominant over-arching topic. As an industry we have never been so in agreement about a small set of metrics. They continue to drive conversations within businesses.
- However, I would say, just like a claymore, they are a double edged sword. They have become *the* web performance targets for businessess. Get green? Great! Job done. However I would say passing CWV is table-stakes. Sites are capable of being so much faster than the current "good" thresholds and in many cases there would be commercial(revenue) benefits in continuing to be faster.
- Businesses need to establish a perfromance culture, see notes from Harry' talk on that.
- There are still a lot of technical gotchas happening, see Paul&apos's list for those.
- We need to do better at challenging third party slowness. I feel a Linkedin post coming for that one.
- Most JS frameworks are unperformant. Businesses need to focus on CWV (INP in particular) and break our reliance on these frameworks. I think it is coming and I never thought I would say that. But it won't be overnight.
- Perfomance does not need to sacrifce good design, you can still have your web fonts. I learned that there is so muh more that can be done to optimise fonts than I realised.
- The tooling is continuing to evolve at pace. Use them to their full potential and you will smash those performance targets.
- Accessibility needs to start with semantic HTML. ARIA is not the solution, accessibility overlays are predatory and should be avoided.
As ever, I am grateful to consider myself a part of this wonderful webperf community, even as a part-timer. I thank you all for your generous and kind spirit. What unites us all is a genuine desire to make the web a better place. And thanks to the organisers of performance.now(), I am looking forward to next year already.
Just to close off this very long blog, I hope it has been useful for some people, I certainly find it a useful exercise. Some better formatting and more images will come in the following days. Finally, here are some additional photos of just some of the people that make it such a special event for me. It's my blog, so I am in them too. Sorry, not sorry.
