Something about page weight
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: 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, having decided to make a YouTube viewing page with a weight below 100 kV. That evening, on a bus traveling from San Bruno, I wrote the prototype code. I decided to limit the functionality to the basic minimum: a video player, five similar videos, a Share button, a markup tool, and ten comments downloaded via AJAX. I called the project “Feather” (English - a feather).
Even with this limited feature set, the page weighed about 250 KB. I delved into studying 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 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. Still, it was not 100 KB. I just recently finished writing the HTML5 video player code, and therefore I decided to turn it on instead of the much more weighty Flash player. Bums! 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 came the numbers ... and they puzzled me greatly. The average wait time under the Feather is in fact GROWN. 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 indicated that the video was loaded longer with Feather. It just could not be! I again climbed into the numbers, but after re-testing the browser I still could not understand anything. I was ready to leave this project, and my worldview was hanging by a thread from the abyss, when it dawned on my colleague: geography!
When we depicted the data on the map and compared them with the totals broken down by region, a disproportionate increase in traffic from places like Southeast Asia, South America, Africa and even remote areas of Siberia was discovered. Further analysis showed that in these places the average page load time under Feather was more than TWO MINUTES! And this means that to load an ordinary video page, a little more than a megabyte needed TWENTY MINUTES! This delay occurred before the first frame of the video stream could be displayed. Accordingly, the entire population simply could not use YouTube, because it took an incredible amount of time to watch something. Under Feather, although you had to wait two minutes to see the first frame of the video, there was still a real opportunity to watch. A week later, the rumor about Feather spread to these regions, and our numbers have completely changed. Many people who have not previously 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 client side code is short and easy, you literally get the opportunity to open new markets for your product.
Even with this limited feature set, the page weighed about 250 KB. I delved into studying 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 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. Still, it was not 100 KB. I just recently finished writing the HTML5 video player code, and therefore I decided to turn it on instead of the much more weighty Flash player. Bums! 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 came the numbers ... and they puzzled me greatly. The average wait time under the Feather is in fact GROWN. 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 indicated that the video was loaded longer with Feather. It just could not be! I again climbed into the numbers, but after re-testing the browser I still could not understand anything. I was ready to leave this project, and my worldview was hanging by a thread from the abyss, when it dawned on my colleague: geography!
When we depicted the data on the map and compared them with the totals broken down by region, a disproportionate increase in traffic from places like Southeast Asia, South America, Africa and even remote areas of Siberia was discovered. Further analysis showed that in these places the average page load time under Feather was more than TWO MINUTES! And this means that to load an ordinary video page, a little more than a megabyte needed TWENTY MINUTES! This delay occurred before the first frame of the video stream could be displayed. Accordingly, the entire population simply could not use YouTube, because it took an incredible amount of time to watch something. Under Feather, although you had to wait two minutes to see the first frame of the video, there was still a real opportunity to watch. A week later, the rumor about Feather spread to these regions, and our numbers have completely changed. Many people who have not previously 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 client side code is short and easy, you literally get the opportunity to open new markets for your product.
Source: https://habr.com/ru/post/163769/
All Articles