What is Performance

• Is it all green in Lighthouse?
  • How do you achieve all green?
• Is it time on site?
• Is it website conversions?
• ...
• Performance can be measured

What is Performance

Performance can be measured

• Set up performance budgets
• Run lighthouse audits
• Optimise, code split, lazy load, compress and minify
• Monitor using Sentry, Google Search Console, Data Dog (I'm sure)
• We know when our websites are performant
• Performant, but slow?

Performant, but slow?

• Statically built
• Great for Lighthouse audits
• ... for cold visits
• Not as relevant once app is loaded and being interacted with
• What if ..
  • .. a slow connection
  • .. server doing alot
• App will feel slow, despite Lighthouse
• Control what we can control

What is
Perceived Performance

• It's a feeling, subjective
• Feel like the site is instant
• If it feels fast, it is fast

Cumulative Layout Shift (CLS)

• Layout jank
• First painted one place, next painted another
  • Not an animation ^{Demo 0}
• Skeleton Loaders
• Push footer to base of viewport ^{Demo 1}

Cumulative Layout Shift (CLS)

• Layout jank
• First painted one place, next painted another
  • Not an animation ^{Demo 0}
• Skeleton Loaders
• Push footer to base of viewport ^{Demo 1}
• Push footer below the fold ^{Demo 2}

Cumulative Layout Shift (CLS)

• Layout jank
• First painted one place, next painted another
  • Not an animation ^{Demo 0}
• Skeleton Loaders
• Push footer to base of viewport ^{Demo 1}
• Push footer below the fold ^{Demo 2}
• Downsides?
  • Short content

NCP

Let's imagine...

• User opens a slider that contains a form
• User moves mouse over control, and clicks
• Content dynamically loads into DOM above control
• Control moves just before user actually clicks
• 😡
• Solution: skeleton loader

Loading Indicators

Client Story

• We used loading indicators
• Competitor waited for request to resolve
• Our requests weren't slower
• Client felt their site was slower
  • Could see when they were being made to wait

Easy, replica....

• What if the network request is slow?
• Click, click, CLICK! 🤬

Loading Indicators

• Not using loading indicators
• Well using them sparingly ^{Demo 2}
• Show's exactly when a user is being made to wait
• Best of both worlds? ^{Demo 3}

NCP

There are loading indicators

Local Data Cache

• Use cached data while getting an update from server ^{Demo 4}

Local Data Cache

• Use cached data while getting an update from server ^{Demo 4}
• stale-while-revalidate
• React Query - queryKey
• Vanilla JS, in memory

Local Data Cache

• Implementation
• Save to cache

  cache.addToCache({ 
    key: `product-${productId}`,
    value: JSON.stringify(res.product)
  })

• Read from cache

  const [product, setProduct] = useState(() => {
    const cachedProduct = cache.getItem(`product-${productId}`);
    if (cachedProduct) return cachedProduct;
    return undefined;
  });

Local Data Cache

• In memory only or with persistence
• How to persist
  • localStorage
  • sessionStorage
  • IndexedDB
  • Cache API
• Update cache object to also read/write to storage location

NCP

Clicked around looking for loading indicators

• Bills
• Payments
• Recipients
• Accounts
• Not Cards 💪

Pre-fetching

What to pre-fetch

• Any resource can be pre-fetched, but
• Best to stick to just data/text
  • Data requests
  • JS/CSS
• Skip images/media, unless absolutely sure
• When to pre-fetch?

Prefetching

When to pre-fetch

Options:

• Immediately
• Network is idle
• Based on Viewport ^{Demo 5}

Pre-fetching

Downsides?

• Increased bandwidth
  • Track what is cached
• Storage limitations
• Extra strain on server
• Slow connections

Pre-fetching

Slow Network

• Network Information API
• effectiveType - slow-2g, 2g, 3g, 4g
• type - wifi, cellular, ethernet, others
• saveData

NCP

What actions are users most likely to take?

• Viewing Bills
• Checking Approvals
• Browsing Payments

Can we pre-fetch this data so its ready to go?

Leveraging Browser Cache

• Image is coming in late
• Can we make it feel instant without pre-fetching?
• Re-use already seen image
• Simply re-use the same request ^{Demo 6}
• Downsides?
  • Resolution mis-match
  • Different main image on product page

NCP

...?

Optimistically Update UI

• Assume everything will work
• Immediately update local state ^{Demo 7}
• Downsides?
  • Action fails

NCP

What responses can we preempt?

• Updating user details
• Approving Bills, Payments, Expenses, Forwards
• Deleting Bills, Payments, Expenses, Forwards etc.