Do you really need all that code?

A presentation at WeAreDeveloper Front End Performance LIVE Day in June 2024 in Vienna, Austria by Chris Heilmann

Slide 1

Slide 1

LGBTQ.css (codepen.io)

Slide 2

Slide 2

Do you really need all that code? WeAreDevelopers LIVE “Front End Performance” Day Chris Heilmann – June 2024

Slide 3

Slide 3

Web Performance is a vast subject…

Slide 4

Slide 4

Dev Digest Performance links… https://devrel.wearedevelopers.com/performance.html

Slide 5

Slide 5

All the resources in this “talk”… https://gist.github.com/codepo8/649f8246de747a1dd2cb2758a5eced3f

Slide 6

Slide 6

Numbers && Humans… https://www.speedcurve.com/blog/psychology-site-speed/

Slide 7

Slide 7

Courses and resources…

Slide 8

Slide 8

Getting started… https://www.htmhell.dev/adventcalendar/2023/14/

Slide 9

Slide 9

MDN Guide… https://developer.mozilla.org/en-US/docs/Learn/Performance

Slide 10

Slide 10

Google… https://web.dev/learn/performance/welcome

Slide 11

Slide 11

Ubiquitous advice…

Slide 12

Slide 12

Core web vitals… https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html

Slide 13

Slide 13

Devtools to the rescue https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/

Slide 14

Slide 14

Pick a fast host https://ismyhostfastyet.com/

Slide 15

Slide 15

Detailed advice…

Slide 16

Slide 16

It starts from the <head> https://speakerdeck.com/csswizardry/get-your-head-straight https://www.youtube.com/watch?v=vgZ2B0rY4fs

Slide 17

Slide 17

Tools for head inspection… https://rviscomi.github.io/capo.js/

Slide 18

Slide 18

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/

Slide 19

Slide 19

Optimising images • Smaller formats (WebP/AVIF) • Lazy load images • Set dimensions https://blog.sentry.io/low-effort-image-optimization-tips/

Slide 20

Slide 20

Insights and surprises…

Slide 21

Slide 21

How web bloat impacts users with slow devices https://danluu.com/slow-device/

Slide 22

Slide 22

Speed is not all! https://blog.jim-nielsen.com/2024/faster-bandwidth-and-websites/

Slide 23

Slide 23

Client or server? https://github.com/theninthsky/client-side-rendering

Slide 24

Slide 24

Close to the metal…

Slide 25

Slide 25

How browsers work… https://web.dev/articles/rendering-performance

Slide 26

Slide 26

Digging deep… https://www.udacity.com/course/browser-rendering-optimization—ud860

Slide 27

Slide 27

Do we need more control? https://github.com/w3c/compute-pressure/

Slide 28

Slide 28

Things to consider…

Slide 29

Slide 29

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/

Slide 30

Slide 30

Do you need JavaScript for everything? https://css-irl.info/kicking-the-excessive-javascript-habit/ https://www.youtube.com/watch?v=f5felHJiACE

Slide 31

Slide 31

• 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…

Slide 32

Slide 32

Thanks, let’s rock and roll… Chris Heilmann VP Developer Relations chris@wearedevelopers.com https://christianheilmann.com