Browser and frontend
How the browser paints a page
From HTML to pixels: DOM, CSSOM, render tree, layout and paint.
Understand the concept
The browser reads HTML top to bottom and builds the DOM tree. CSS files produce the CSSOM. Combined they form the render tree; the browser computes each element’s position and size (layout) and paints the pixels. Finally the layers are composited.
CSS blocks rendering: without styles the browser does not paint, because showing the wrong look and then fixing it is a poor experience. A normal script tag pauses HTML parsing; scripts marked defer or async let parsing continue while they download. Next.js loads its own scripts this way.
The speed users feel depends on these steps. When the main content appears (LCP), how quickly the page responds to interaction (INP) and whether elements shift while loading (CLS) are the Core Web Vitals. An image of unknown size that loads late pushes the text below it; providing width and height prevents that.
Even with a fast server, a badly loaded page feels slow.
Loading a large JavaScript bundle synchronously in the head and delaying the first paint.
One topic. Three levels of depth.
<img src="/kapak.jpg" alt="Kapak" width="1600" height="900">Space is reserved for an image with width and height, so the page does not shift.
This page connects to no real server or database. Code samples are illustrative for .NET 8, Next.js and SQL Server; timings are example values in the simulation, not measurements. Try samples only in your own development environment; never share real connection strings, tokens or passwords.
Try it yourself first.
On a blog page the heading jumps down because the cover image above it arrives late. Suggest two different fixes.
Show the solution and explanation
1) <img> için width/height veya CSS aspect-ratio vermek
2) Kapak için yer tutan bir kapsayıcı (aspect-ratio: 16/9) ve next/image ile boyut bildirmekThe problem is that the browser does not know the image size. Known dimensions reserve space and reduce CLS.