How does Google Code accelerate page loading by 30%-70%?

 

I believe many people who have access to web development know the article "Best Practices for speeding up your web site" of Yahoo developer network. I think this article is called the bible of web development, I have to review their 34 rules almost every few days and try to practice their work. Anyone who hasn't seen this article can take a quick look at best practices for speeding up your web site

In the high performance Web sites book (I have never read it), the author writes that only 10%-20% of the page loading time is to download HTML, in addition, the period from 80% to 90% is based on other elements on the download page. I think it should refer to image, JavaScript, CSS, and so on. Because these elements are loaded with separate HTTP requests. The first rule in the article "Best Practices for speeding up your web site" is to minimize HTTP requests.

Google Code focuses on reducing the number and size of "other elements", that is, reducing the number of HTTP requests. The following are some improvements they have made:

1. Merge and reduce JavaScript and CSS files on the website

Downloading JavaScript and CSS files will impede the generation of other pages. The Google Code team combines common JavaScript and CSS files into one file, in this way, the original 20 files are merged into two files, and the number of HTTP requests is reduced from 20 to two, they also removed unnecessary spaces in JavaScript and CSS files and changed the names of functions and variables very short. I believe that you can right-click on the Google homepage and check the source code of Google's webpage to find out how easy Google is to achieve performance.

2. Merge frequently used images into one

On the Google Code website, there were originally seven full-site image files, including Google Code logo, Googley bils In the footer, and other small images.

Although the browser downloads these images concurrently, Google Code merges these images into one, so there is only one HTTP request. Then, only a part of the large image is displayed. For example, the original code is as follows:

They changed it to <Div style = "background-image: URL (/images/sprites.gif); background-position:-28px-246px; width: 9px; height: 9px "> & amp; </div> </span>

I think they are really racking their brains, and I don't know if this is an effect. I feel it takes time to locate which part of CSS is to be displayed.

3. Implement lazy loading for the Google Ajax API loading module (Google. Load)

For more information about Google Ajax APIs, refer to another blog using Google's javascript API loader to accelerate your website.

Google Code must have used their own stuff, but they also picked out some bugs. Before these Google Ajax APIs (such as jquery and prototype) were initialized and used, add the Google loader module (Google. load), usually, Google. load:

<SCRIPT type = "text/JavaScript" src = "http://www.google.com/jsapi"> </SCRIPT>

This code normally works normally, but when they optimize the performance of static content display, this code will impede the generation of other pages on the page, only after the script is loaded, other pages can be displayed, So Google Code implements the lazy loading of this Code, that is, the script is loaded only when necessary. Their implementation methods:

1) In the

If (needtoloadgoogleajaxapisloadermodule ){
// Load Google Ajax APIs loader module (Google. Load)
VaR script = Document. createelement ('script ');
Script. src = 'HTTP: // www.google.com/jsapi? Callback = googleloadcallback ';
Script. type = 'text/JavaScript ';
Document. getelementsbytagname ('head') [0]. appendchild (SCRIPT );
}

Through Google Code testing, their page loading speed has greatly increased by 30%-70%! It seems that the methods they provide are not to pick bones in the eggs, but to implement them in our project.