Cameron Analyzes NBC News’ Layout – Website Performance Optimization

Cameron Analyzes NBC News’ Layout – Website Performance Optimization


So, when I decided to take a look at what websites had a slow layout. I came to nbcnews.com. This website has different stories laid out in sort of a grid on the screen. Let’s see what happens if we change the size of the grid. And, we can see that the stories, instead of being stacked next to each other are now stacked on top of each other. Let’s make this full screen again. And, we can see that the stories moved out to their original horizontal orientation. Let’s take a look at what this looks like in Dev Tools. I’ll Cmd+Option+i to open up dev tools. Alright, where I have the HTML, let’s go over to the timeline. And, I’m going to hit the record button, and start changing the size of the screen and watching what happens with layout. We’ll make it small. Okay, it looks like the stories have moved. Let me go ahead and make it full screen again. Cool. And, I can go ahead and stop the recording. Alright. So, we have quite a bit of data here in the timeline. I’m not sure what we exactly we need to look at, so let’s go ahead, well instead of searching through, just filter out what we don’t want. Layout happens in Rendering, so let’s get rid of Painting, Scripting and Loading. We only see these purple events here. Let’s go ahead and take a look at this section, we can see a few Layout events. Clicking on this one we can see that it took 113 milliseconds, which is definitely a noticeable amount of time.

Leave a Reply

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