Analyzing Layout in DevTools – Website Performance Optimization

Analyzing Layout in DevTools – Website Performance Optimization


Layout dependent on the size of my browser, right? What happens if I rotate my phone?>>If the dimensions of the layout viewpoint change, the browser has to rerun the layout step. That’s what happens every time you rotate your phone or, for that matter, resize your browser.>>Hm, I see. So our examples are pretty simple but could this possibly a performance bottle neck?>>Yep, let’s take a look at their tools. I’ve captured a trace of gizmodo.com which is a popular new site. If you’re curious you can grab this trace from the instructor notes and follow along. Let’s take a look. First of all, there’s a turn of events here. Since we’re only interested in layout, let’s filter out the loading, scripting, and painting events. Okay, here’s the first layout event. Check it out. It took 145 milliseconds.>>Wow! That’s a long time.>>Yeah, as you can see there are over 1400 nodes. In the tree.>>Huh. but there are other layout events in here. What’s going on?>>That’s a great question. Recall that any time we update the render tree, either by modifying styles or the content, there’s a good chance we have to rerun layout. And in this case, it looks like that’s exactly what’s happening. The page is adding new content and modifying styles, and hence, we need to run layout a few more times.>>Hm. I see. So how do you go about optimizing for that?>>It really depends on the site, but a good rule of thumb is to batch updates to avoid having multiple layout events.


Leave a Reply

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