Performance Matters: Optimizing Page Load

4.1 About Perceived Performance

Here is the thing. It doesn't really matter how fast your website loads if it doesn't feel fast. And to that you might say, well hold on if my website or my web page loads very fast, then it's going to feel very fast. Well you would be right but not 100%. Remember the lesson about perceived performance? There we talked about how fast a webpage becomes usable, not necessarily how fast it loads or it completes loading. Let me give you an example. Let's say you have pages A and B, in this view page A is on the top and page B is on the bottom. They both look the same, and the both have the same weight. So they load in the same amount of time, and as you can see the initial content on page A is visible after the whole page is loaded. Now we'll do some optimization on page B that will actually render the initial content sooner than page A, just like you see here. So basically in the case of page B, the content becomes usable much faster. So which one of these pages would feel faster for you if you were browsing them? And I bet the answer would be page B, right? Well, that's because, page B becomes usable much sooner than page A. And that's the perceived performance. Now, that content that the user sees for the first time is called the initial view and also it's called the content above the fold. So, it's the stuff you see without having to scroll down. Now, the amount of content you see depends on the device. The bigger the screen, the more content you're going to see above the fold. The smaller the screen, the less amount of content you're going to see. But, this whole thing makes sense, right? I mean, if you think about it, why wait to load an entire page just to display a small portion of it? Instead of displaying that portion as soon as you can and worry about the stuff below the fold later on. Now to achieve what page B is doing, you need to understand how a webpage is loaded and rendered. And for that, you must understand something called critical rendering path. That's coming up next.