Front End Web Optimization: Reflow and Image Rendering

Happy to share the second post from our Front End guru, Dekus Lam. Dekus is the go-to problem solver for Resolute’s ambitious Front End Web Developer team. In this series, he aims to describe what makes optimizing Front End so crucial in today’s increasingly innovative web design world. Here are his thoughts below:

There are tons of articles and tutorials on the web that provide recommendations about how to make your website faster. In addition, there are also many awesome tools such as YSlow, Google PageSpeed Insights (esp. Critical Path Explorer), webpagetest.org, Yottaa. These tools check whether you are serving a compressed (gzip) minified version of your CSS and JavaScript files, or using CDN to host common libraries that your website happens to use. However, these nuances are not what this Front-End series will address.

The key parts of optimizing Front-End performance rely on understanding how the browser actually works as a whole. I will briefly go over some very important elements, which most people forget to consider.

Reflow

Just think of reflow as an inevitable process that every browser must perform as the DOM elements encounter a change in their content or view position and geometries (e.g. height and width). Reflow is blocking. What this means is that you cannot query a DOM element for its style during reflow.

Remember reflow is unavoidable, stick with it, live with it, but minimize it. No matter if you are changing the style property of the element or modifying the class name or class list, you will see reflow. All you can do is to shorten the time each reflow requires by grouping all the style assignments (instead of performing a series of write-then-reflow). That way you can decrease the number of unnecessary reflow and improve performance (less blocking time).

Image Rendering

Ask yourself under what circumstances you will likely be using PNG instead of JPG, or vice versa, or maybe a GIF? Should the JPG be progressive or not? Maybe you can use PNG-8 rather than PNG-24 for some images that are less colorful and without a crazy background alpha shadow? Or just hope WebP will be broadly adapted? Choosing the right image format will save you bandwidth and increase rendering time.

We have so many devices with different DPI displays, and we will want to target them and display images with the best resolution. Let’s say you have a retina iPad and you want to display a w by h image. In order to take advantage of the display, you decide to have a media query that will swap that lower resolution image with the higher resolution one (4x the area). Do you realize that the browser will not only spend more time fetching and downloading the image, but also will need to decode and resize the image (in this case, downscaling)? All of these extra overheads are added towards the overall rasterizing and rendering time. But as mobile operating systems are getting better and more efficient, the decompression and rendering time for different image formats is shorter.

Author
Adam Chalemian
Director, Technology
Posted
05.22.13
Adam Chalemian
Director, Technology

Adam joined Resolute Digital in August 2010 as the Director of Technology. A former US Army Cavalry Officer, Adam enjoys leading, mentoring and teaching the talented team of Resolute developers. Adam graduated from Valley Forge Military Academy and Villanova University with a degree in Cognitive Science.

Contact Adam