performance-optimziation

Performance optimization :

1. network -

   • gzip compression,
   • brottle, (not supported by legacy browsers)
   • minfication of files and images,
   • caching,
   • code splitting using webpack (component level, route level)
   • tree shaking
   • CDN , database query index

2. rendering -

   • load js async, load css async
   • dom, cssom, render tree
   • preloading, prefetching, preconnect(fallback is dns-prefetch), prerender e.g https://tinyurl.com/ms6numxy
   • critical css,
   • Avoid Complex CSS selectors
   • lazy loading images (<img loading="lazy">; <img loading="eager">; <img fetchPriority="low">),
   • Lazy load components (using react.suspense, fallback in react;)
     • lazy loading on interaction (when user requests then its fetched)
     • lazy load immediate with useEffect (its fetched when the component mounts, and so its readily available)
     • lazy load On Visibility (when component comes in viewport when scrolled, then it fetches the bundle.js and shown; it makes use of Intersection Observer API)
   • segregate critical.css separately which can include header, asiede bar, footer etc. and load on priority
   • optimizaing images, (for different devices; webp and fallback as png)
   • img tag and srcset
   • critical renddering path,
   • FCP, LCP, TTFB
   • ATF (above the fold images) and BTF images(below the fold images; lazy loaded); Hero image

3. javascript -

   • web workers
   • DOMContentLoaded
   • async (third party libs, page anaytics script, parallel loading, )
   • defer (large js files, script order matters, script with defer when run has an available DOM to manipulate unliek async)

4. perf monitoring tools like

   • Google PageSpeed Insights, Lighthouse, or WebPageTest

5. Image optimization service :

   • sending imgUrl and viewport size from client and this service gives the proper sized image