Web performance
workshop
Pavithra Kodmad
PK
Web enthusiast
Web performance advocate
Nature lover
Oversharer
What to expect?
Case studies
Measurement
Hands on examples
Lots of questions
Jargon comes and goes. Internalise performance principles.
Get familiar with tools!
This stuff is not easy, but it comes with practice.
Agenda
- Whats performance and why its hard?
- Measurement
- Render blocking resources
- Largest contentful paint
- Time to interactive
- Beyond first page load
- Summary
What do we mean by web performance?
Client side only
JS/HTML/CSS
How does your web app behave?
- Which browser?
- Network bandwidth
- CPU capacity
Not just the first page load.
Why bother with web performance?
User experience
Google links
Core Web vitals + SEO
The jargon starts...
All the evidence
Story of Youtube Feather
https://blog.chriszacharias.com/page-weight-matters
Personal experience with Jira
Why is it so hard?
Measurement is subjective
Unreliable tooling
Existing code!
Unpredictable results
Easy to regress
Web is only getting complex
Measurement!
My favorite topic
I made a slow website!
Navigation api
Steps to look at timings
- Open devtools
- Go to console
- Type `window.performance`
- Let's look at timing
User centric metrics
is something happening?
is it useful?
can i interact with it?
is it delightful to interact?
User centric metrics
Core Web Vitals
- LCP Largest Contentful Paint
- FID First Input Delay
- CLS Cumulative Layout Shift
Custom metrics
- Remix glitch link
- Go to index.html
-
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>
Custom metrics(contd..)
- Open in new window
- Open console
-
Let's look at timing
- performance.getEntries()
- performance.getEntriesByType('measure')
Real user measurement
Break!
Render blocking resources
HTML and CSS
- Open `pic.html`
- Open devtools
- Network tab. Clear everything
- Reload the page
- Show the priority column
- See whats the priority of different scripts
Loading priorities
Loading priorities
- preload
- preconnect
- prefetch
Use <link rel/> tag
Remove render blockers
- Open `pic.html`
- Open devtools
- Open Lighthouse
- Clear and Reload the page
- See complaint on render blockers
Remove render blockers
- Remove all the unnecessary css
- Open `pic.html`
- Open devtools
- Open Lighthouse
- Clear and Reload the page
- See complaint on render blockers
Remove render blockers
- Shift all the js to outside of head. Preferably to above `main.js`
- Open `pic.html`
- Open devtools
- Open Lighthouse
- Clear and Reload the page
- Render blockers get red to yellow
Unused Javascript
- Open `pic.html`
- Open devtools
- Open Sources
- Click on "Coverage: n/a"
- Capture coverage
Bundle size
Use CDNs
Break!
Largest contentful paint
Images
HTTP archive says 50% of all bytes are images
They need to look good.
Optimization is art and science. I use ezygif and imagemin
- svg for icons and diagrams
- pngs for lossless and transparent
- jpg for photos
- webp to replace png and jpg but not well supported.
Videos
Don't use gifs anywhere
Check out gif vs video
Let's fix our image
- Open `pic.html`
- Open devtools
- Open Lighthouse
- Clear and Reload the page
- See complaint on image and LCP
Let's fix our image
- Go to assets in glitch (not assets folder)
- Double click on image
- Copy the cdn link
- Go to pic.html source
- Replace image pic4.jpg with the cdn link
- Rerun lighthouse
- All fixed!
Let's fix our image
Would be better with size, srcset etc. But advanced techniques.
Check next.js Image component
Time to interactive
Layout shifts
Stable layout is smoother interactivity
Indicated by cumulative layout shift
Common culprit is ads
Lazy loading
Break!
Beyond first page load
Animation performance
- Open animations jank
- Add 10 till jank appears
- Open devtools
- Open performance tab
- Record for 1 sec
- Go to main thread
- Zoom into 1 long task
- Zoom into 1 recalculate task
- See the culprit?
Animation performance
- Go to sources tab
- Go to app.update function?
- What difference do you see between
optimised and unoptimised code paths?
CSS triggers reflows
Component performance
Summarise tooling
Use lighthouse
Use chrome devtools
Use webpagetest
Closing thoughts
Maintaining performance
Real user monitoring
SSR vs static websites
Scale and performance
Metric fixation
People to follow on twitter/blogs
Video Playlist
Stuff to read
- web.dev
- https://v8.dev/blog/cost-of-javascript-2019
- perf.email
- wpo.stats
Web performance
By Pavithra Kodmad
Web performance
- 589