DevTools: Visually Re-engineering CSS For Faster Paint Times

Feb 08, 13 DevTools: Visually Re-engineering CSS For Faster Paint Times

This article below by Addy Osmani was interesting to read and learn more about faster painting and determining if CSS is a bottleneck to any slowness in how the page is performing. Below are my notes from this article

Frames per second < 60

For a smooth experience when the page scrolls and reflows, the frames per second should fall under 60 FPS. Any FPS that are over this amount will cause jerky motions while the page is being repainted.

What is paint is

Each time the page has any changes, whether it is scrolling or changes to the way that the page has behavioral changes, the document is repainted. What is happening when this is happening is that the repaint happens each time that the page needs to look different than what it did look like before there are any changes to the page. So for example, when the document is scrolled vertically, the page has to be repainted to show what is now viewable in the browser. The time that the painting takes place should be at a reasonable frame rate so that there is no jerky look to the page flow. This is something that we saw many of times before when creating flash and setup the flash with how many frames per second the flash would run at. Now that flash is not favored by many, we do have an idea of how to look at reflow and painting in a web page.

How the Browser Works

One of the most in detail articles about how the browser works was done by Tali Garsiel in How Browsers Work. This article will give you graphical layouts of how the browser goes from parsing of the document to the painting the rendering tree.

How to test with Chrome DevTools

Addy gives a step by step approach to finding out if there are any bottlenecks in the page for painting the page and test where these bottlenecks are and if they are coming from CSS. The take away I get from this is the use of the Timeline to find out what is causing the issues and find out how to make the fixes to get the FPS below the desired amount to prevent any jerky issues with the page because of the painting.

Pro-Tips for working in DevTools

There are shortcuts and special ways to find out if CSS is the cause of the repaint of the page. Addy shows the ways to use these pro-tips to work best in DevTools to find out.

Summary

The article below is very useful in understanding painting and reflow of the page that will make a difference in the experience of how a person works with your page. These tips are helpful and should be considered to be put into each and every developers workflow.

Read the Article

Increasingly, whether it’s on desktop or mobile, users want their web experience to be snappy and delightful. This means that even if the browser is busy rendering the page or loading in content, the user should still be able to scroll around and interact with it.

DevTools: Visually Re-engineering CSS For Faster Paint Times:

Source -> AddyOsmani.com | jQuery & JavaScript Articles For The Community

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment moderation is enabled. Your comment may take some time to appear.