Experience in reducing server pressure through Page Structure

When a website achieves high traffic in a short period of time, the biggest problem I want to bring to the technology is server instability. At the same time, thousands of IP addresses are online, and the CPU on the server will bring about 100%, resulting in a decline in Website access speed, especially for some users who are slow in the network. At this time, it is easy to open the website. Both user experience and websites are harmful. As a page designer, how can we reduce the number of server connections from the perspective of the page structure:

I. Website image Optimization

Pictures I think are essential for every website, or they will not be able to pass through the aesthetics; small icons, background images, logon boxes, and so on. When you access a page, each image has the same number of links. If your homepage has 20 small images, you need to use 20 connections for a user to access the page, when thousands of people are online at the same time, it's terrible.

To solve the image problem, you can integrate all the small images into a large image, such:

　　

 

This can be 20 to 1 A number of connections, in addition to reducing the number of connections, can speed up the page to load pictures, here I suggest you save as a png-8 format, because it is gif, jpg, png-32 to be smaller, it means that you load the page faster, users can see your site content faster, one stone two birds.

Learn how to call these images:

For example, to call the member login icon

On the page:

<A class = "login" heft = "#"> member logon </a>

CSS:

. Login {background: url ("image .png") 0-100px no-repeat; height: 30px; width: 50px ;}<! -0-100px indicates the position of the image. The Height and width values depend on the icon length and width. -->

. Login {background: url ("image .png") 0-100px no-repeat; height: 30px; width: 50px ;}

In this way, the call to the icon is completed. Isn't it easy? Learn it now.

Ii. Website CSS Optimization

After CSS optimization, in addition to reducing the css size, such as marin, padding, font, and other common abbreviations. As mentioned above, backgroud can also be abbreviated. As follows;

On the page:

<P> <a class = "login" heft = "#"> member logon </a> <a class = "reg" heft = "#"> Member registration </> <a class = "inherit" heft = "#"> I want to sell cars </a> <a class = "buy" heft = "#"> I want to buy a car </a> </p>

 

CSS:

. Login {background: url (".. /images/image .png ") 0-100px no-repeat; height: 30px; width: 50px ;}. reg {background: url (".. /images/image .png ") 0-100px no-repeat; height: 30px; width: 50px ;}. background {background: url (".. /images/image .png ") 0-100px no-repeat; height: 30px; width: 50px ;}. buy {background: url (".. /images/image .png ") 0-100px no-repeat; height: 30px; width: 50px ;}

After improvement