I optimize the YouTube video playback page story

Three years ago, when I was a web programmer on YouTube, a veteran engineer complained that the pages playing video were too bulky. the volume of this page has ballooned to up to 1.2MB, containing dozens of requests. The engineer declared openly, "if they can clone our pages under the size of 100KB, we have no reason to quake this volume!" "Because I agree with him and I'm looking for a new job, I decided to take the challenge and get the YouTube video playback page to be less than 100KB ." On the train coming home from San Francisco that night, I wrote a basic prototype. I decided to limit the number of features on the page, leaving only one title, one video player, five related videos, one sharing button, one flag tool and 10 comments--loaded with Ajax. I named this task "feather".

Even with such a limited function, the volume of the page still reaches 250KB. I drill down into the code and find that our optimization tools (such as the closure compiler tool) cannot clean up the actual code on the page (perhaps not to blame the tools, which are not available). The only way to further reduce the code is by manually optimizing Css,javascript and pictures. After a hard three days of hard work, I have made the page quite lean, but still no less than 100KB. Because I just finished writing a HTML5 video player, I decided to replace the bulky flash player with it. Bang! 98KB, only 14 requests. after setting some basic monitoring on this page, we opened the page to a small group of people.

After a week of data collection, the data, but they let me confused. The overall average latency time of the pages under the feather plate is actually increased. I reduced the total page volume and reduced the number of page requests, but the data showed it took longer to load the feather video playback page. It is impossible to do something. Digging into the data, after repeated experimentation in the browser, has no result. I'm basically abandoning this version, and my faith is almost completely defeated, and at this point a colleague discovers the mystery: geography .

When we mark the geographic information of the data and compare all the information by region, we see an asymmetry increase in the flow of the region, such as Southeast Asia, South America, Africa, and even Siberia. Further investigations revealed that, in these areas, the average loading time for the feathered pages was more than 2 minutes! This means that an ordinary video, about 1 trillion or so, will take 20 minutes to load! People are so miserable to wait for this page, let alone video. Throughout these areas, they have been unable to watch YouTube before, because they have waited a long time to see nothing. In the feather version, though, it will take 2 minutes to see the first frame of the video, but in any case, it can actually be seen. In the past week, the feather edition has been very popular in this area, so our data are completely out of their average. A large number of people who previously could not watch YouTube are now suddenly ready to go.

By developing feathers, I learned a valuable understanding of the state of the Internet in other parts of the world. Many of us are fortunate enough to live in a place with high speed broadband, but there are still large areas that are not. By making the client's code less light, you can completely open up a new market.

[Original English text link: Page Weight matters]