May 21
Loading video player...
Website Optimisation - problems and fixes Sponsored by ImageKit. Sign up here: https://tinyurl.com/27jwt3ep Most slow websites are slow for the same handful of reasons - oversized images, render-blocking CSS, JavaScript bundles that ship way more than they need to, fonts that delay first paint. In this video, we'll cover how a page actually loads - the Critical Rendering Path from HTML to CSSOM to Render Tree to Layout to Paint, and then walk through each common performance problem, why it stalls one of those steps, and the specific fixes that unblocks it. What's covered: - Core Web Vitals: LCP, INP, CLS - The Critical Rendering Path - CSS: render-blocking behaviour - Images: image optimisation (sponsored segment with ImageKit) - JavaScript optimisation - Fonts - Network Timestamps: 0:00 Intro 0:28 Core Web Vitals 1:26 How a Page Actually Loads 2:26 Running the Lighthouse Audit 2:58 CSS — Critical CSS, PurgeCSS, content-visibility 5:00 Image Optimisation - ImageKit (Sponsor) 7:36 JavaScript — Code Splitting, defer, Bundle Analysis 9:55 Fonts — font-display, Self-Hosting, Variable Fonts, Subsetting 11:52 Network — CDN, HTTP/2/3, Caching, Brotli, Preconnect 13:45 Outro Software Engineering Basics - https://www.youtube.com/playlist?list=PLWP-VtjCVpWyLNBm3zz_sGyC5mVwiAOvj Software Design - https://www.youtube.com/playlist?list=PLWP-VtjCVpWx7kPq30XRN6O6LjVQ4VL95 #webperformance #webdev #lighthouse