Suggest an editImprove this articleRefine the answer for “What does "rendering optimization" mean?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Rendering optimization** is the process of speeding up and simplifying how the browser displays a page on the screen. **Key point:** the goal of optimization is to make the page render fast, smoothly, without jank or "white screens".Shown above the full answer for quick recall.Answer (EN)Image**Rendering optimization** is the process of speeding up and simplifying how the browser displays a page on the screen. ## What happens after the HTML loads To understand what this means, you need to know what happens after the HTML loads: 1. **HTML is parsed** → the DOM is built 2. **CSS is parsed** → the CSSOM is created 3. **DOM + CSSOM are combined** → render tree 4. **Layout (reflow)** - positions and sizes are calculated 5. **Paint** - elements are drawn 6. **Composite** - everything is assembled into the final frame on screen --- ## What rendering optimization means - reduce the number and complexity of these steps - avoid unnecessary recalculations (layout thrashing) - avoid forcing the browser to repaint everything without reason - reduce the load on the main thread --- ## Examples of what slows down rendering - frequent DOM operations or inline styles via JavaScript - animations that do not run through `transform` or `opacity` - large images without dimensions set in CSS - complex CSS selectors and deeply nested layout - synchronous JS scripts in `<head>` --- ## Goal of optimization Make the page render **fast**, **smoothly**, without jank or "white screens", especially on low-power devices.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.