Solving the Frustrating Problem of Reflowing Pages
Have you ever experienced the frustration of reading an article online, only to have the text suddenly jump off-screen as images load? This annoying issue has plagued users for years, but thankfully, new solutions are emerging to tackle this performance problem.
The Evolution of Web Design
In the early days of the web, Sir Tim Berners-Lee’s fluid layouts allowed content to adapt to the browser viewport. However, as designers and developers moved towards fixed-width layouts, image width and height attributes became crucial in determining layout dimensions. The rise of smartphones and responsive web design (RWD) changed everything, but introduced new challenges.
The Problem with RWD
One of the unintended consequences of RWD was that page space could only be allocated once images started downloading, causing content to reflow and jump around on the screen. This issue also affects videos, iframes, and advertising. Currently, there’s no easy way to solve this problem within web code.
Aspect Ratio Resolution
An aspect ratio defines the relationship between an element’s width and height. By knowing one dimension, we can calculate the other. For example, a 16:9 screen can be calculated as 800px wide and 450px high. If we provide an aspect ratio, the height and corresponding area can be calculated and reserved, ensuring a jank-free loading experience.
Firefox 71 and Aspect Ratio Determination
Firefox 71 and above calculate aspect ratios when width and height attributes are defined in an img tag. This allows CSS to size the image to the width of its containing element, ensuring a smooth loading experience.
Responsive Images and Art Direction
Responsive images use srcset and sizes attributes to define bandwidth-efficient alternatives. The HTML picture element requests one of its child elements according to browser support and conditions, allowing for different images to be used depending on device dimensions and orientation.
Aspect Ratio Options
Several alternative aspect ratio options exist, including stretching and cropping using the CSS object-fit property, and the padding trick, which defines the aspect ratio of any element using CSS padding-top or padding-bottom properties. Custom properties (CSS variables) provide another option, allowing aspect ratios to be defined in a style attribute.
The Future of Aspect Ratios
As browsers evolve, the CSS aspect-ratio property may become an essential way to reserve page space, eliminating the era of janky page loading. For now, adding width and height attributes to img tags and using the padding trick on video and iframe containers can help minimize reflowing pages.
Optimizing Frontend Performance
If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all your users in production, try LogRocket. LogRocket provides a comprehensive solution for optimizing frontend performance, allowing you to modernize how you debug web and mobile apps.