Web Performance

Complete Workshop by Vilva Athiban

Expectations

  • There is no pre-defined route to Performance
     
  • Understand the big picture
     
  • Cherish the lesser famous concepts
     
  • Regret for paying because Performance will be a simple topic at the end

AGENDA

  • Browser Under the hood
  • Rendering Cycle
  • Preload/Prefetch
  • Latency & Bandwidth
  • CDN & Caching
  • Chrome Devtools
  • Web Vitals
  • Performance Audit
  • Fast Load times
  • Play Time
  • Animations
  • Babel & Performance
  • React Component Profiling
  • Performance Case Studies
  • Q/A and Fun time

Browser Under the hood

Application Architecture

Browser Architecture

Chrome Architecture

Processes

  • Browser process: Address bar, UI elements, Network & file access
     
  • Renderer process: Everything inside a tab
     
  • GPU process: All the GPU tasks
     
  • Plugin process: Manages plugins required by website. eg) flash

Other points

  • When Chrome reaches the Memory limit, multiple tabs run in the same process
     
  • Iframes run on separate process (ie) Site isolation
     
  • Site isolation === security
     
  • All the running Process can be found in Task manager

Browser Navigation

Browser Navigation with Service Worker

Page Life Cycle

Rendering Process

Render Cycle

Async/ Defer

Compositing

  • The process of turning paint information into pixels is Rasterizing
     
  • Composite thread rasterize different parts into layers and composite into a page
     
  • It forms a layer tree from layout tree based on CSS properties
     
  • will-change CSS property force Browser to move an element into separate Layer
     
  • Composite thread uses GPU and not the main thread. Hence suitable for Animations.

Compositing

Preload/Prefetch

Preload

  • Force Browser to download a resource without blocking it
     
  • Scripts/images/fonts that are required on the current page
     
  • Preloaded information is lost after navigation if not cached

Preload

Prefetch

  • Tells browser the resource is needed in future but browser decides when to download (mostly browser idle time)
     
  • Scripts/images/fonts that are required in the future pages
     
  • Prefetched resources are held even after navigation

Latency & Bandwidth

Latency & Bandwidth

  • Latency: How far the data have to travel
     
  • Bandwidth: How much data can be sent
     
  • Bandwidth depends on the network (2G, 3G) and other external factors
     
  • Latency depends on the distance between the user and server

TCP Connection

Cloudping.info

CDN & Caching

CDN

  • Content Delivery Network
     
  • A network of Server nodes that serves the files to the user from the nearest server
     
  • Reduces Latency

CDN

Caching

Caching in Browser using cache-control header

 

  • no-cache: caches the response but MUST always go through validation with the origin server first before using it
     
  • no-store: Doesn't cache any response
     
  • max-age: Number of seconds the cache is valid
     
  • s-maxage: Same as max-age but not for browsers. Only for CDNs

Caching

  • Caching is tricky. Use it wisely.
     
  • Caching works only for GET. Not for POST/PUT

Chrome Devtools

DevTools

  • Disable extensions or Use Incognito mode
  • Performance
  • Network
  • Lighthouse
  • Code Coverage
  • Cool tricks

Web Vitals

Web Vitals

  • Google's new Algorithm
     
  • Largest Contentful Paint (LCP)
     
  • First Input Delay (FID)
     
  • Cummuliative Layout Shift (CLS)

Performance Audit

Fast Load times 

Performance Budget & CI

Optimize and Lazy load images

PRPL Pattern

Code splitting and Removing Unused code

Compress the bundles

Optimize JS

Use CDNS

Third Party JS

Adaptive Serving

Measure and Monitor

Play Time

Time to optimize a Demo app using techniques like Lazy loading, caching etc

Animations

https://codepen.io/vilvaathibanpb/pen/LJJmqN

Babel & Performance

@babel/plugintransform-react-inline-elements

@babel/plugintransform-react-constantelements

React Component Profiling

Performance Case Studies

https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/

Q&A

Fun time

Web Performance Workshop 1

By Vilva Athiban

Web Performance Workshop 1

  • 222