Home » Tutorials » HTML & CSS » Reduce Rendering Time for Page Speed Optimization

Reduce Rendering Time for Page Speed Optimization

Reduce Rendering Time for Page Speed Optimization

Did you know that without specifying the width and height of images in your website will increase numerous rendering time of your web page? Let’s start with a little background information.

Reflow, is a browser process to re-calculate the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. When the browser wants to render the web page, it needs to know where everything is positioned on the page. Rendering process often started before images are downloaded, if no dimension being provided for each images in your web page, the browser will require a Reflow process again and repaint once the images are downloaded, which means HTML elements below the image will need to be moved when the image is downloaded. So, as a web designer / web developer, our responsibilities is to prevent the browser Reflow by telling the browser how much spaces needed to preserve for the downloading images.

However, we should make sure the image size is the actual dimension. If the image need a smaller or bigger size, please do it in your image editor, to avoid the scaling process on the fly.

Specify Image’s Dimension

We can either specify the width and height of all images in the IMG tag, or in CSS styles.

<img src="images/photo.jpg" width="880" height="560" />
img {
   height: 560px;
   width: 880px;
}

Experiment

Let’s conduct a mini experiment for the makeover of specfying the width and height of the images in a web page. In the image below, Part A (left side) is before and Part B (right side) is after we added image dimension to the page.

Page Rendering Test

Page Rendering Test

The result shows that we have successfully reduce 0.369ms Rendering time and 1.626ms Painting time.

Conclusion

As web developer / web designer we can always make a small effort by adding the dimension to the images to make a big difference to the page speed. Specifying the image dimension will definitely increase the browser rendering & painting performance, BUT please bear in mind that it does not have any improvement over the network optimization.

Want to learn more Page Speed Optimization techniques?


Android, iOS Development Tutorials