workshop
Web enthusiast
Web performance advocate
Nature lover
Oversharer
Case studies
Measurement
Hands on examples
Lots of questions
The jargon starts...
Story of Youtube Feather
https://blog.chriszacharias.com/page-weight-matters
My favorite topic
is something happening?
is it useful?
can i interact with it?
is it delightful to interact?
Let's look at timing
// Add this to line 11
<script type='text/javascript'>
window.performance.mark('TTI:start')
</script>
// Add this after main script is run
<script type="text/javascript">
window.performance.mark('TTI:end')
window.performance.measure('TTI', 'TTI:start', 'TTI:end')
</script>
Let's look at timing
HTML and CSS
Use <link rel/> tag
HTTP archive says 50% of all bytes are images
They need to look good.
Optimization is art and science. I use ezygif and imagemin
Don't use gifs anywhere
Check out gif vs video
Would be better with size, srcset etc. But advanced techniques.
Stable layout is smoother interactivity
Indicated by cumulative layout shift
Common culprit is ads