Layout Shift: How to prevent it ?
About
A layout shift occurs when the rendering of the web page shifts / move element from their current position.
Causes
Image
For instance:
- without the knowledge of the target ratio (via the height and width attribute of an image, the browser can't reserve space for the image
- it download the image calculate the space needed for the image
- recalculate the layout
- and shifts element around to be able to put the image
That's what's called a layout shift
Solution:
- Set the correct image ratio on the image tag with the height and width attribute
Style
When you change a layout css property after page load (the first rendering), you will also create a layout shift.
Solution: If you want to change two layout property at the same time, you should use the window.requestAnimationFrame function to avoid a layout shift.
Example with a dynamic correction of a fixed top header such as the Bootstrap navbar where:
- we add the fixed-top class that set the position to fixed
- and correct it with a padding on the body.
window.requestAnimationFrame(function() {
let fixedNavbar = document.querySelector(".navbar[data-type=\"fixed-top\"]")
fixedNavbar.classList.add("fixed-top");
let offsetHeight = fixedNavbar.offsetHeight;
document.body.style.setProperty("padding-top",offsetHeight+"px");
});
Devtool
In the devtool, layout shift can be seen
- in the performance tab
- in the rendering tool where you can see the shifted region and and the web core vitals.