Speed Matters:
Client Side Performance Improvements Tips & Tricks

Hello,

I'm Ashay

Lead Consultant

@ashu1425

ash1425

I'm Srinivasan

Lead Consultant

@srinivasanskr

srinivasanTarget

https://srini.codes

Index

Why Performance Matters?

Performance Metrics

Tips & Trics

Demo

Q&A

Performance

Matters

Largest Contentful Paint

Total Blocking Time

Cumulative Layout Shifts

Time To Interactive

source: https://gtmetrix.com/

LIVE DEMO

TIPS & TRICKS

 

  • Progressive Images

  • Modern Extensions

  • Preloading Images

  • Lazy Loading​

  • Asynchronous Loading

  • Fetch Priority

IMAGE

OPTIMISATIONS

 

  • Pre-Connect

  • Pre-Load

  • Self Hosting vs Google Fonts

FONT

OPTIMISATIONS

RENDER

BLOCKING

RESOURCES

 

  • Stylesheets

  • Javascript

  • Long Tasks

  • External Libraries

ELIMINATE

RENDER

BLOCKING RESOURCES

  • Inline Stylesheets

  • Reduce Stylesheets

    • Defer Non-Critical CSS

    • Remove unused CSS

    • Modify/Compress CSS

  • Javascript

  • Long Tasks

  • External Libraries

  • Image dimensions

  • Reserve Ad spots

  • Prefer Transform Animations [1, 2]

 

LAYOUT

SHIFTS

  • Different cache needs

  • CDN

  • Cache headers & ETag

Caching

Cache Headers and ETag

Cache-Control
  • no-store: Disable Cache
  • public/private: is CDN involved ?
  • max-age=n: until when to cache
  • must-revalidate: force discard cache after max-age
ETag

  • Beneficial in case of large files
  • Allows browser to validate the local cache with minuscule n/w call

References

https://web.dev/

https://gtmetrix.com/

https://sia.codes/posts/

Q&A

Made with Slides.com