34 lines to improve website access speed (1-3)

Original: Best practices for speeding up Your Web Site 1 To reduce the number of HTTP requests (Minimize HTTP Requests)

80% of the user response time is spent on the front end, and most of the time is used to download the images, stylesheets, scripts, and flash components in the page. Reducing the number of these components reduces the number of requests required to display the page, which is key to improving the response speed of the Web page .

Plain page design is of course a way to reduce components, but there is no way to take into account the rich content of the page and fast response speed. Here are some good tips to reduce the number of HTTP requests while providing a rich page presentation:

merge files to reduce the number of HTTP requests by putting all scripts in a script file or by putting all the style sheets in a stylesheet file. Merging these files can be a big challenge when different pages need to apply different scripts or styles, but when you publish a Web site, this consolidation is an important step in improving your site's responsiveness.

CSS Sprites is the preferred solution for reducing picture requests. Combine all the background images into a single image, using CSS background-image and background-position attributes to control the appropriate picture area.

image maps The combination of multiple pictures into a single picture. The total size of the picture is constant, but reducing the number of HTTP requests increases the response speed of the page. Image maps can only be used for pictures that are adjacent to a page, such as a navigation bar. Developing image coordinates in image maps is a cumbersome process and error prone. Using image maps for navigation is also not easy to read, so it is not recommended.

Inline Pictures use Data:url scheme to embed picture data into a page, but this increases the size of the HTML document. Merging inline images into your cached style sheet is a way to reduce the number of HTTP requests without increasing the size of the page. But not all mainstream browsers support inline images at the moment.

Reducing the number of HTTP requests to the page is the first step and the most important step for improving the user's initial access experience. As described in the browser cache usage-exposed! in Tenni Theurer's blog, every day, 40%-60% of visitors do not have cached files for your site. Increasing the access speed of these initial visitors is the key to improving the user experience.

2 Using Content distributed networks (use a Delivery network)

Tag:server

The speed at which users connect to your Web server affects how quickly they respond. Assigning your site to multiple servers located in different geographies will make your page load faster. So where should we start?

Don't start by redesigning your site so that it can adapt to the distributed architecture as the first step to achieving the site's geographic distribution. Depending on the complexity of your site, the process of updating the site structure may include complex steps such as synchronizing session state, replicating databases between servers, and so on. This way you increase the speed of user access to the site will be updated to the structure of the work delay.

Remember, the user 80-90% access time is spent on the download pages of pictures, style sheets, scripts, flash these components. This is the Golden Rule of website display . so instead of redesigning the structure of the site, it's better to implement the distribution of these static components first. This is not only a significant reduction in response time, but also a simple task because of the presence of content distributed networks (delivery networks).

Content Distributed Network (CDN) is a collection of servers distributed in different regions, which can send information to users more effectively. It selects the server that sends data to a user based on a method that measures the distance of the domain . For example, a server that reaches the user with the fewest hops or the fastest response time is selected.

Some large Internet companies have their own CDN, but it is more cost-effective to use a common CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. The cost of CDN services may be high for start-ups and individual websites. But when your target audience is more and more internationalized, it is necessary to use CDN to reduce response time. In Yahoo!, moving static content from its own Web server to CDN increased the user's access speed by 20% or more. Turning CDN will be a job that requires relatively simple code updates, and that will dramatically improve your site's access speed.

3 Add a failure period or Cache-control to the head (add an Expires or a Cache-control header)

Tag:server

The rule consists of two things: for static components: set the cache period of the head to a distant future, so that it can "never expire." for dynamic components: Use the appropriate Cache-control headers to help the browser execute a specific request.

Web pages are more and more rich, and pages contain more and more scripts, stylesheets, pictures, and Flash. the initial visitors to the page may send multiple HTTP requests, but by adding a expiration period to the header, you can make those components cached. This avoids unnecessary HTTP requests the next time you browse the page. It is more commonly used to set the header of a picture file, but the head of all components, including script files, style sheets, and flash, should be set to fail time.

Browsers (and proxy servers) use caching to reduce the number and size of HTTP requests and to increase the speed at which Web pages are loaded. The server informs the client how long a component can be cached in the HTTP corresponding through the expiration of the header. The following is a far future expiration header that tells the browser that the response will not expire until April 15, 2010:
Expires:thu, APR 20:00:00 GMT

If you are using the Apache server, using the EXPIRESDEFAULT directive sets an expiration time relative to the current time. Here is an example of 10 years after the expiration time is set to the request time via the expiresdefault instruction:
ExpiresDefault "Access plus years"

Remember, if you use the far future expiration header, you must replace its name [or path] when the component is updated. in Yahoo! We usually do this in the process of building a website: The name of the component contains its version, such as: Yahoo_2.0.6.js.

Using a far future expiration header will only work after the user has visited your site. It does not affect the number of HTTP requests for a first-time visitor without caching. So the effect of all this depends on how many users visit the page with a pre-cache (a "cache" that already contains all the components of the page). We are on this in Yahoo. Tests have been done to discover that the cached user is in 75-85%. Adding a far future expiration period to the head can increase the number of components cached by the browser and repeat for subsequent page browsing without having to send even one byte over the user's network.