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 performance

By Pavithra Kodmad

Web performance

  • 218