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