#CSS
-
Web Performance Optimization Overview
18 min read • Published on • Last Updated OnAdvanced techniques for optimizing web application performance across infrastructure, frontend, and modern browser capabilities. Covers Islands Architecture, HTTP/3, edge computing, JavaScript optimization, CSS rendering, image formats, font loading, caching strategies, and performance monitoring.
-
Web Performance Patterns
15 min read • Published on • Last Updated OnMaster advanced web performance patterns including Islands Architecture, caching strategies, performance monitoring, and CI/CD automation for building high-performance web applications.
-
Critical Rendering Path
12 min read • Published on • Last Updated OnLearn how browsers convert HTML, CSS, and JavaScript into pixels, understanding DOM construction, CSSOM building, layout calculations, and paint operations for optimal web performance.TLDRCritical Rendering Path (CRP) is the browser’s six-stage process of converting HTML, CSS, and JavaScript into visual pixels, with each stage potentially creating performance bottlenecks that impact user experience metrics.Six-Stage Rendering PipelineDOM Construction: HTML parsing into tree structure with incremental parsing for early resource discoveryCSSOM Construction: CSS parsing into style tree with cascading and render-blocking behaviorRender Tree: Combination of DOM and CSSOM with only visible elements includedLayout (Reflow): Calculating exact size and position of each element (expensive operation)Paint (Rasterization): Drawing pixels for each element onto layers in memoryCompositing: Assembling layers into final image using separate compositor threadBlocking BehaviorsCSS Render Blocking: CSS blocks rendering to prevent FOUC and ensure correct cascadingJavaScript Parser Blocking: Scripts block HTML parsing when accessing DOM or stylesJavaScript CSS Blocking: Scripts accessing computed styles must wait for CSS to loadLayout Thrashing: Repeated layout calculations caused by JavaScript reading/writing layout propertiesJavaScript Loading StrategiesDefault (Parser-blocking): Blocks HTML parsing until script downloads and executesAsync: Non-blocking, executes immediately when downloaded (order not preserved)Defer: Non-blocking, executes after DOM parsing (order preserved)Module: Deferred by default, supports imports/exports and top-level awaitPerformance OptimizationPreload Scanner: Parallel resource discovery for declarative resources in HTMLCompositor Thread: GPU-accelerated animations using transform/opacity propertiesLayer Management: Separate layers for transform, opacity, will-change, 3D transformsNetwork Protocols: HTTP/2 multiplexing and HTTP/3 QUIC for faster resource deliveryCommon Performance IssuesLayout Thrashing: JavaScript forcing repeated layout calculations in loopsStyle Recalculation: Large CSS selectors and high-level style changesRender-blocking Resources: CSS and JavaScript delaying First Contentful PaintMain Thread Blocking: Long JavaScript tasks preventing layout and paint operationsBrowser Threading ModelMain Thread: Handles parsing, styling, layout, painting, and JavaScript executionCompositor Thread: Handles layer assembly, scrolling, and GPU-accelerated animationsThread Separation: Enables smooth scrolling and animations even with main thread workDiagnostic ToolsChrome DevTools Performance Panel: Visualizes main thread work and bottlenecksNetwork Panel Waterfall: Shows resource dependencies and blockingLighthouse: Identifies render-blocking resources and critical request chainsLayers Panel: Diagnoses compositor layer issues and explosionsBest PracticesDeclarative Resources: Use <img> tags and SSR/SSG for critical contentCSS Optimization: Minimize render-blocking CSS with media attributesJavaScript Loading: Use defer/async appropriately for script dependenciesLayout Optimization: Avoid layout thrashing with batched DOM operationsAnimation Performance: Use transform/opacity for GPU-accelerated animations