I optimized the story of the YouTube video playback page

Three years ago, when I was a web programmer at YouTube, a senior engineer complained that the page for video playback was too large. The page size has expanded to 1.2 MB, containing dozens of requests. The engineer publicly claims that if they could just... "> <LINKhref =" http://www.php100.com//statics/sty

 

Three years ago, when I was a web programmer at YouTube, a senior engineer complained that the page for video playback was too large.The page size has expanded to 1.2 MB, containing dozens of requests.The engineer said publicly, "if they can clone our page in kB, we have no reason not to reach this physical product !" Because I agree with him and I am looking for a new task, I decided to accept this challenge,Reduce the size of the video playback page on YouTube to less than KB. On the train home from San Francisco that night, I wrote a basic prototype. I decided to limit the number of features on the page, keeping only one title, one video player, five related videos, and one share button, A flag tool and ten comments-loaded through AJAX. I named this task "feather ".

Even with such a limited function, the page size still reaches KB. I went deep into the code and found that our optimization tool (such as the closure compilation tool) could not clean up the code that was not actually used on this page (maybe it should not blame these tools, in this case, no tool can be used ). The only way to further reduce code is to manually optimize CSS, JavaScript, and images. After three days of hard work, I have made the page quite thin, but still not less than KB. Because I have just finished writing an HTML5 video player, I decided to use it to replace the bulky Flash player.Bang! 98KB, only 14 requests.After some basic monitoring settings are set for this page, we open this page to a small number of people.

After a week of data collection, the data was available, but they left me confused. The average latency of pages under the feather edition is actually increased. I reduced the total page size and the number of page requests, but it took longer to display the data when loading the feather video playback page. This is impossible. In-depth data mining, repeated experiments on the browser, no results. I basically want to give up this version, and my faith is almost completely defeated. at this time, a colleague discovered the mysteries:Geographical factors.

When we mark the geographical information of the data and compare all the information by region, we can see regions, such as Southeast Asia, South America, and Africa, even the increase in traffic asymmetry in regions such as Siberia. Further investigation reveals that in these regions,The average loading time of the feather edition page exceeds 2 minutes!This means that a normal video, about 1 MB, will take 20 minutes to load! It is so painful for people to wait for this page, not to mention the video. Throughout these regions, they were unable to watch YouTube before, because they waited for a long time and could not see anything. In the feather version, although it takes two minutes to see the first frame of the video, you can see it anyway. In the past week, the feather version was very popular in this region, so our data was completely out of average. A large number of people who used to be unable to watch YouTube can now.

By developing feathers, I learned a valuable understanding of the network conditions in other parts of the world. Many of us are lucky enough to live in a place with high-speed broadband, but in fact there are still a lot of areas. By reducing the client code, you can start a new market.

[Link to the original English article: Page Weight Matters]