Layout shift Articles

Page 1 of 1 (4 articles)

2/5/2024 • EN

How to Override width and height HTML attributes with CSS

Learn how to use CSS's height: auto to override HTML image dimensions for responsive design without distortion.

css html image optimization layout shift responsive design

David Walsh

10/2/2021 • EN

Building an awesome image loading experience

A technical guide on implementing a blur-to-load image experience to prevent layout shift and improve loading performance.

image optimization layout shift responsive images tailwind css web vitals

Kent C. Dodds

1/19/2021 • EN

How to avoid layout shifts caused by web fonts

Explains how web fonts cause layout shifts (CLS) and provides techniques to prevent them, including font optimization and using font-display: optional.

core web vitals Font Optimization layout shift performance Web Fonts

Simon Hearne

11/2/2020 • EN

TLDR How to prevent layout shifts from image loading in 2021

A technical guide explaining a modern, non-hacky method to prevent layout shifts when loading responsive images in web development.

Frontend image optimization JavaScript layout shift responsive design

Carsten Behrens

Layout shift Articles

How to Override width and height HTML attributes with CSS

Building an awesome image loading experience

How to avoid layout shifts caused by web fonts

TLDR How to prevent layout shifts from image loading in 2021

Select Language