December 24, 2012 at 19:49Something about page weight
- Transfer
Three years ago, when I was working as a web developer on YouTube, one of the senior engineers began to rant about too much weight on the video page. The page was inflated to 1.2MB and contained dozens of requests. This engineer said so: if whole Quake clones are written with a volume of up to 100KB, we simply have no excuses! I agreed with him and was delighted with the new project, deciding to make a YouTube watch page with a weight below 100 kV. That evening, on a bus from San Bruno, I wrote a prototype code. I decided to limit the functionality to a basic minimum: a video player, five similar videos, a Share button, a markup tool, and ten comments downloaded using AJAX. I called the project “Feather” (eng. - feather).
Even with such a limited set of features, the page weighed about 250 KB. I went deeper into the study of the code and realized that our optimization tool (i.e., Closure compilation) is not able to exclude code that is never really used on the page itself (which was to be expected from any tool in the current circumstances). The only way to further reduce the code was to manually optimize CSS, Javascript and image sprites. Three days of effort - and I got a much better solution. And still it was not 100 KB. I recently finished writing the HTML5 video player code, and so I decided to include it instead of the much more weighty Flash player. Bams! 98KB, and a total of 14 requests. I provided the code with some basic monitoring capabilities and launched its execution in part of our traffic.
After a week of data collection, the numbers came ... and they puzzled me a lot. The average wait time under Feather actually INCREASED. I reduced the total weight of the page and the number of requests to ten, as it was before, but for some inexplicable reason, the numbers said that with Feather the video was LOADED FOR LONGER. It just couldn't be! I climbed into the numbers again, but after testing the browser again, I still couldn’t understand anything. I was already ready to give up this project, and my worldview hung in the balance from the abyss, when it struck my colleague: geography!
When we plotted the data on a map and compared them with the totals broken down by region, we found a disproportionate rise in traffic from places like Southeast Asia, South America, Africa, and even remote areas of Siberia. Further analysis showed that in these places the average page load time under Feather was TWO MINUTES! And this means that to load a regular video page, a little more than a megabyte needed TWENTY MINUTES! This delay occurred before the first frame of the video stream could be shown. Accordingly, the entire population simply could not use YouTube, because it took an incredible amount of time to watch something. Under Feather, although it was necessary to wait two minutes to see the first frame of the video, still there was a real possibility of viewing. A week later, rumors of Feather spread to these regions, and our numbers have completely changed. Many people who have not had the opportunity to use YouTube, suddenly got this opportunity.
Thanks to Feather, I learned a valuable lesson about the state of the Internet in the rest of the world. Many of us are fortunate enough to live in broadband regions, but much of the world still does not have this convenience. If your code on the client side remains short and easy, you literally get the opportunity to open new markets for your product.
Even with such a limited set of features, the page weighed about 250 KB. I went deeper into the study of the code and realized that our optimization tool (i.e., Closure compilation) is not able to exclude code that is never really used on the page itself (which was to be expected from any tool in the current circumstances). The only way to further reduce the code was to manually optimize CSS, Javascript and image sprites. Three days of effort - and I got a much better solution. And still it was not 100 KB. I recently finished writing the HTML5 video player code, and so I decided to include it instead of the much more weighty Flash player. Bams! 98KB, and a total of 14 requests. I provided the code with some basic monitoring capabilities and launched its execution in part of our traffic.
After a week of data collection, the numbers came ... and they puzzled me a lot. The average wait time under Feather actually INCREASED. I reduced the total weight of the page and the number of requests to ten, as it was before, but for some inexplicable reason, the numbers said that with Feather the video was LOADED FOR LONGER. It just couldn't be! I climbed into the numbers again, but after testing the browser again, I still couldn’t understand anything. I was already ready to give up this project, and my worldview hung in the balance from the abyss, when it struck my colleague: geography!
When we plotted the data on a map and compared them with the totals broken down by region, we found a disproportionate rise in traffic from places like Southeast Asia, South America, Africa, and even remote areas of Siberia. Further analysis showed that in these places the average page load time under Feather was TWO MINUTES! And this means that to load a regular video page, a little more than a megabyte needed TWENTY MINUTES! This delay occurred before the first frame of the video stream could be shown. Accordingly, the entire population simply could not use YouTube, because it took an incredible amount of time to watch something. Under Feather, although it was necessary to wait two minutes to see the first frame of the video, still there was a real possibility of viewing. A week later, rumors of Feather spread to these regions, and our numbers have completely changed. Many people who have not had the opportunity to use YouTube, suddenly got this opportunity.
Thanks to Feather, I learned a valuable lesson about the state of the Internet in the rest of the world. Many of us are fortunate enough to live in broadband regions, but much of the world still does not have this convenience. If your code on the client side remains short and easy, you literally get the opportunity to open new markets for your product.