A presentation at WeAreDeveloper Front End Performance LIVE Day in in Vienna, Austria by Chris Heilmann
LGBTQ.css (codepen.io)
Do you really need all that code? WeAreDevelopers LIVE “Front End Performance” Day Chris Heilmann – June 2024
Web Performance is a vast subject…
Dev Digest Performance links… https://devrel.wearedevelopers.com/performance.html
All the resources in this “talk”… https://gist.github.com/codepo8/649f8246de747a1dd2cb2758a5eced3f
Numbers && Humans… https://www.speedcurve.com/blog/psychology-site-speed/
Courses and resources…
Getting started… https://www.htmhell.dev/adventcalendar/2023/14/
MDN Guide… https://developer.mozilla.org/en-US/docs/Learn/Performance
Google… https://web.dev/learn/performance/welcome
Ubiquitous advice…
Core web vitals… https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html
Devtools to the rescue https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/
Pick a fast host https://ismyhostfastyet.com/
Detailed advice…
It starts from the <head> https://speakerdeck.com/csswizardry/get-your-head-straight https://www.youtube.com/watch?v=vgZ2B0rY4fs
Tools for head inspection… https://rviscomi.github.io/capo.js/
Some solid advice • Serve static HTML • Optimise images • Use system fonts • Remove render blocking resources • Use less JavaScript https://blog.sentry.io/5-easy-tips-to-improve-yourpersonal-website-performance/
Optimising images • Smaller formats (WebP/AVIF) • Lazy load images • Set dimensions https://blog.sentry.io/low-effort-image-optimization-tips/
Insights and surprises…
How web bloat impacts users with slow devices https://danluu.com/slow-device/
Speed is not all! https://blog.jim-nielsen.com/2024/faster-bandwidth-and-websites/
Client or server? https://github.com/theninthsky/client-side-rendering
Close to the metal…
How browsers work… https://web.dev/articles/rendering-performance
Digging deep… https://www.udacity.com/course/browser-rendering-optimization—ud860
Do we need more control? https://github.com/w3c/compute-pressure/
Things to consider…
Always bet on the platform! Microsoft Edge migrating its UI from React to web components. “The UI is now 42% faster for Edge users and a whopping 76% faster for those on a device without an SSD or with less than 8GB RAM! https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/
Do you need JavaScript for everything? https://css-irl.info/kicking-the-excessive-javascript-habit/ https://www.youtube.com/watch?v=f5felHJiACE
• Check what HTML can do before reinventing it Things to ponder • • • • • • links ping images loading details/summary dialog popover datalist • Let the browser handle things… • Do your users need that feature or do you want them to? • The best performing code is the one you never have to write…
Thanks, let’s rock and roll… Chris Heilmann VP Developer Relations chris@wearedevelopers.com https://christianheilmann.com
for free. You
can too.