Join Maximiliano Firtman for an in-depth discussion in this video Speed index, part of Learning Enterprise Web Application Performance.
- [Presenter] It's time to talk about a very important metric in terms of perception and web performance: speed index. When we are talking about perception and the milestone that we have already covered in this course, sometimes two apps might have same metrics on milestones. But one of the apps feels faster than the other one. For example, two apps might load the ATF content in exactly 1.5 seconds, so both are loading the content in one dot five seconds.
But the question is how and when that content was rendered on the screen. So we can feel it faster or slower. So a speed index defines how much blank content the user has seen on the screen during the loading process. And of course, we don't want the user to see too much blank content. So that leads to speed index, also known as perception speed index. It's a metric that was created by WebPagetest in 2012, so from the tool but now it's available also on other tools.
It indicates how quickly visible parts of the content of a page, above the fold, are populated. So how quickly the website is being rendered. It calculates basically the visual progress of your canvas on a timeline based on filmstrip screenshots. The value is just a numeric value, so it can be 1,000, 5,000, 10,000, 20,000. Usually it's around thousands. It's viewport dependent, so that means that you will not get the same speed index on a mobile device, on a tablet, on the same mobile device, on landscape, or on a desktop.
So we can calculate more than one speed index. The idea is to get the minimum possible value here because it measures the blank content. How much blank the user is seeing on the screen. Usually a 1,500 speed index is the goal. So if you are around 1,500 that means your website feels fast enough. Just to give you an idea, a non-optimized website or web app usually is around 15,000 so in an optimized one it's around 1,500.
So how to calculate speed index. We take screenshots over the timeline, for example, using the filmstrip view that we have on some tools. Then we define the last screenshot as 100%, so that's the final result. Then we go back on each screenshot and calculate the percentage of completeness and we do a graph with that. For example, here we can see the visual progress graph over amazon.com.
So you can see on the x-axis, we're talking about time in seconds. And on the y-axis, we're talking about visual progress in percentage. So it will always go from zero to 100. And of course at the end, the graphed line will always end at 100, and it always is start at zero. And the idea is that here we will see at different seconds in the timeline, the percentage of completeness.
So we can see that here, at two seconds, 25% of the website was rendered. We're just talking about the ATF content here. Then 63% of the content was rendered at 2.7 seconds, and finally 99% of the final content was rendered at eight seconds. So this is the graph. Speed index measures the area above the curve, so basically here it's that area.
So that's basically how much blank the user has seen on the screen during the loading process. Here we have two examples that both loads in five seconds. So they have the same base load time. Five seconds. But one feels faster. So because if you look at the graph, the second one starts render at two seconds, and the first one is rendering something but just 2% at three seconds.
So again, both look the same if you just take milestone timings, but when we are looking at the speed index, one is better than the other. For example, this is the first one. You can see that the first one has this graph, and remember we are measuring the area above the line. And on the next one, we can see that that area is smaller because we have more content in less time.
Even if we are still talking about the same five seconds. So typically there are two kinds of lines here when you're doing this graph. And optimized websites and web apps look like this. They start rendering nothing and the curve goes like this. So if you have something like this, it means you are not optimized. So we don't want this We want something like this. We want to render as much as possible as soon as possible.
So we want these kind of graphs. So sometimes it's about rearranging on the HTML or changing priorities. And of course, later in this course, we will talk more about that. How to improve this, how to get the better speed index. But now we need to understand what the speed index is, and why is it so important when we are talking about perception and performance. So then our goal is to have a speed index of 1,500. That's an acceptable amount of blank the user sees when loading the page.
If we have a higher value, then there is room for improvement.
- Web performance optimization (WPO)
- Charts and metrics for measuring performance
- Measuring performance on different platforms and networks
- Measuring tools
- Optimizing networks, parsing, rendering, and images
- Improving recurrent user performance and interactions