4 methods for minimizing browser reflow

4 methods for minimizing browser reflow

by Jason Simon

With the speed of growth and availability of new web-development technologies, the temptation is to immediately jump in and use everything at our fingertips.

Jumping on the newest technology often seems de rigueur for most web developers. We feel the need to learn the newest fastest ways of generating content and new functionality that excites clients. If a new technology comes along that does something new, it seems that every web-development shop demands that you learn this new tool as fast as possible so as to be always on the cutting edge.

This is to be understood; to remain competitive requires living on the bleeding edge of new ideas. Don’t get me wrong. Many of these new tools are fantastic, however occasionally we may need to take a step back and examine whether we are creating a monster.

Many of these great new tools, if used sloppily and inexpertly, may actually end up irritating end users. The likelihood of these types of mistakes increase with the emphasis on Agile project development and the advent of DevOps; products and tools get pushed into production without the time to really do any sort of realistic usability testing. The public itself becomes the test market. What in the development community may be seen as “iterative,” can often take a “reactive” approach. This can make the process work if all bugs or problems get reported accurately. However, in reality, most users don’t bother to complain; they just go away.

So with this in mind, here are a few tips to improving one of the most irritating parts of using the internet today. One factor that consistently bothers users (and can hurt your bottom line as a result) is inconsistent page loading.

Content-shifting/reflow

One of the most irritating things that perhaps all of us have experienced is when a page suddenly jumps around while we are reading it. We start reading a page, and are interested in the article, and suddenly we completely lose our location in the article, as the browser shifts to handle the new content. This can happen on slow computers, slow internet connections, and most frequently on phones.

This is called content-shifting, or browser reflow. It most often occurs when a page loads with the main content first before loading secondary data. Typically this is intentional. We need to bring the content to the user quickly. This is fine, however suddenly various media begins to load, such as images, advertisements, or any other multimedia. If it is inexpertly coded, the page can jump around as if it is purposely taunting us. In the worst cases, this can happen multiple times on one page. As a user, we are often tempted to leave and never come back to this site.

So why does this happen, and how can we prevent it from occurring on our own sites? Let’s address a few options.

One of the main reasons this occurs is that it’s a side effect of making responsive images, or those that are designed to appear at a different size, depending on the browser size. While typically it’s good if a site is responsive, but not if the trade-off is that user experiences a jarring jumpy effect.

Methods to avoid reflow

1. Fixed Height and Width

One of the easiest methods is to set our images to have a fixed height and width in our CSS files. This, unfortunately, can have a serious drawback on the responsiveness of the site. If we are (as we should) using an approach that will deliver the same content no matter what device a person chooses to use to visit your site, then while this will prevent your site from jumping around, but it will suddenly result in a situation where on many handheld devices, users have to scroll horizontally to seem them, or the site itself appears ridiculously tiny.

One of the mistakes that a lot of developers make is that they choose not to assign the height, and set a max-width for images. By doing this, this by default the height will become height:auto; This will definitely make the image responsive, however, because the height is not specified, this will cause the page to jump when the image is loaded.

So, this is pretty much not a good option and one of the primary cause of the problem itself. Let’s look at a few more realistic solutions.

2. Image Containers

One of the best ways of handling this problem is to reserve a spot on our web pages for the image, using a container. We specify that there is a spot to exist prior to the page loading, so that when it does load, there’s no jarring shift making the user lose their place as the page reflows.

The key for handling this is to first understand the aspect ratio of our image, and by using a little hack with the bottom padding of your page element, we can simply set the ratio to be the opposite of the image dimensions

Here’s the trick. A simple formula placed in your CSS will perform a bit of magic to determine the bottom border of our images, using the HTML5 element <figure>. Here’s the formula:

calc((image_height/image_width)*100%)

All we need to do is to calculate the bottom padding of our figure element based on the actual dimensions of the image. Here’s an example image:

<img src="sample.jpg" width="300" height="200"/>

We know this image has a specific height and width, but instead of setting the container to be the absolute, or to resize to match the image, we calculate the container based on the image itself, so that it remains defined as well as fixed on the page, preventing the browser reflow on image load

<div id=”image-container”>
  <figure>
    <img src="sample.jpg" width="300" height="200"/>
  </figure>
</div>

With the CSS, we just add the padding to the bottom of the figure element set it to be relative, and set the image to be absolute

#image-container {
  max-width:300;
}

figure {
  padding-bottom: calc((200/300)*100%); 
  position: relative;
}

img {
  position:absolute;
}

One mild drawback is that the images may load a little slower, but the payoff is that the user is still able to read the content at a normal pace.

3. Transitions

Using containers works great if we already know the sizes of our content. If we are supplying the images, we have control over what the dimensions are, so we can set our CSS accordingly without much trouble. However, if we are using third-party content, such as advertising, we often do not have the option of knowing exactly what size the content will take.

While not as predictable as using image-containers, one option for preventing page-jumping is to use the CSS transition property. By creating an animated transition between defined sizes, it should create a smoother motion between the two. By setting these for external content, we can at least reduce some of the negative UX associated with page-jumping. While it will not prevent content from moving around the page, it may happen a little slower, making the experience a little less jarring for the user.

Here is a simple demonstration on how this will work as the image is loaded. You can experiment with the transition speed for different browsers or devices.

.ad-widget {
  height: 0;
  overflow: hidden;
  transition: height 2s ease-out;
}
.ad-widget.loaded {
  height: 100px;
}

4. Avoid Full Page Flexbox Rendering

Given the increasing lack of patience of users, there’s a strong push among developers to deliver content directly to the page before everything has loaded. With Flexbox-style rendering, the nature of the content defines how it is to be displayed on the page. In other words, when the content loads, it compares itself directly against all other loaded content, and adjusts itself accordingly. It’s considered a great option for responsive design.

Here’s a simple example:

.flex-container {
  display: flex;
  order: 1
  flex-direction: column;
}

.flex-container > div {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 25px;
  font-size: 20px;
}

This method can be very effective if the overall page content is minimal. It also can work well for individual elements within a page. However, the problem can exist when it is used for the full page, particularly if there are several columns.

If some content segments take longer to load than others, this can result in some very jarring horizontal shifting, particularly on slower connections, or machines with less processing power. For instance, in the method above, if we imagine that there might be a considerable amount of content (possibly third-party or media content), this will cause the entire page to lose it’s focus when it loads.

This is a common mistake by developers who are used to either working locally or on a very fast network. However, for the rest of us, the advantage in getting the content quickly can be immediately negated by having to start over when the page finishes loading.

Conclusion

We need to be careful that in our attempts to improve the user experience in one way, that we do not inadvertently kill it in another way. We must remember that speed is not necessarily a good thing if it causes other problems. We don’t want to arrive so quickly your destination, that we lose all of our passengers along the way. Please note that these are only a few methods for avoiding some of the pitfalls with using some of the excellent new methods in our website design. There are others that we can address in future articles.

Jason Simon is a professional back-end web developer, database consultant, and systems librarian, with over 20 years of experience helping businesses, non-profit organizations, and educational institutions organize and convert complex data into clear and easy-to-understand information.

Leave a Reply

Your email address will not be published. Required fields are marked *