Feb 24
Loading video player...
Learn essential techniques to optimize the performance of your React web app using Core Web Vitals. In this comprehensive tutorial, I'll walk you through optimizing a real Video Player component from scratch, covering everything from bundle optimization to advanced React performance patterns while actually measuring the performance improvements. *VIDEO REFERENCES* Source code: https://github.com/shrutikapoor08/videoplayer-demo 16 useEffect mistakes - https://youtu.be/yGOPO2V6MHI?si=VL1Uo5BkiqNYLXEH TanStack Start Crash Course - https://youtu.be/X2Rcp87yl4s?si=LLFHyn0zj95KBPuh Optimize LCP: https://web.dev/articles/optimize-lcp *TOOLS & COMMANDS USED:* - npx depcheck - React Profiler - React Compiler - React 19 Performance Tracks - Vite Bundle Analyzer - Chrome DevTools Performance Tab *RECOMMENDED RESOURCES* 1. React Course for beginners: https://www.oreilly.com/library/view/react-fundamentals-building/0636920981428/ 2. Practice React Interviews: https://www.greatfrontend.com/questions/js?fpr=shruti79 3. AI-Ready FullStack Developer Course: https://scrimba.com/fullstack-path-c0fullstack?via=shrutikapoor *FREE RESOURCES* 1. FREE React Interview Questions Book: https://bit.ly/free-react-guide 2. Top 5 in React and AI Every Week: https://bit.ly/shruti-newsletter *GET IN TOUCH* 1. Book a 1:1 - https://topmate.io/shrutikapoor08 2. Join our Discord: http://bit.ly/shruti-discord *SOCIALS* X / Twitter: https://twitter.com/shrutikapoor08 INSTAGRAM: https://www.instagram.com/techcreatorshrutikapoor/ TIKTOK: https://www.tiktok.com/@techcreatorshrutikapoor Web: https://shrutikapoor.dev/ *CHAPTERS* 0:00 Intro 0:44 Current state of the app 6:21 Step 1: Bundle optimizations 9:05 Step 2: React optimizations 21:48 Step 3: Server Side Rendering 24:52 Step 4: Asset Optimizations 30:18 Final demo #react #nextjs #performance #webdevelopment Sub: 37382