Internet bandwidth increasingly wide, so it seems that the page loading speed has been a qualitative leap. Actually not, because with the increased bandwidth, on the page object more and more, the accelerating speed of the page or open an important issue. Speed up the pace to open the page, there are three paths, first, improve network bandwidth, the user is done in the local optimization, and the third is on the web site designer to do some optimization. This article from the perspective of a website designer, share some of the optimization of the page loading speed tips.

First, optimize the picture

Almost no page is not the picture. If you have experienced the age of 56 K the cat, you will not be like a large number of pictures of the site. Because as a page to load will spend a lot of time.

Even now, many of the network bandwidth has increased, 56 K the cat gradually fade out, and optimize the picture to speed up the pace or the page is necessary.

Optimal picture including the reduction of a few pictures, lower image quality, use the appropriate format.

1, reduce the picture: the removal of unnecessary picture.

2, to reduce image quality: If it is not very necessary, try to lower the quality of the image, especially jpg format, a 5% decrease in the quality of it is not great, but the file size of the change is relatively large.

3, the use of appropriate format: Please refer to the point.

Therefore, prior to upload pictures, you need to edit the picture, if you think photoshop too much trouble, you can try some online photo editing tools. Too lazy to edit pictures and would like to have a special effect » Calling javascript can be used to try to achieve picture special effects.

Second, the choice of image format

General on the page using the image format of three, jpg, png, gif. Three formats of specific technical indicators are not on the content of this article, we need to know what time in what format should be used to reduce the page-load times.

1, JPG: general for the display of landscapes, figures, as the photographic works of art. Sometimes also used in computer Screenshots on.

2, GIF: the colors less available in some of the local color Yaoqiubugao, such as site logo, buttons, facial expression and so on. Of course, gif an important application is animated images. Just as with the production of Lunapic Daoying picture.

3, PNG: PNG format to provide transparent background, is a display page for the invention of the image format. The general background of the need for a transparent display or require a higher quality of the image of the page.

Third, optimize the CSS

CSS style sheets laminated page to load up more efficient browsing experience has been enhanced. With CSS, table layout of the way to retirement.

But sometimes we write the CSS will use the time some of the more Luosuo the phrase, such as this:

Margin-top: 10px;

Margin-right: 20px;

Margin-bottom: 10px;

Margin-left: 20px;

You can simplify it as follows:

Margin: 10px 20px 10px 20px;

Or this:

<p class=”decorated”> A paragraph of decorated text </ p>

<p Class=”decorated”> Second paragraph </ p>

<p Class=”decorated”> Third paragraph </ p>

<p Class=”decorated”> Forth paragraph </ p>

Div can be used to contain:

<div Class=”decorated”>

<p> A paragraph of decorated text </ p>

<p> Second paragraph </ p>

<p> Third paragraph </ p>

<p> Forth paragraph </ p>

</ Div>

CSS to simplify the removal of redundant properties and improve operating efficiency. If you write too lazy to do it after the CSS to simplify, you can use the simplified CSS some online tools, such as CleanCSS.

4, added slash at

Some Web site, such as “www.kenengba.com/220″, when the server received such a request when the address, it takes time to determine the address of the file types. If 220 is a directory, it may pay more in the URL after a slash to allow a www.kenengba.com/220/, this server will know at a glance to visit the directory of the index or default file, thereby saving the increase Set time.

5, indicating height and width

This is very important, but a lot of people because of laziness or other reasons, always be ignored. When you add a picture on the page or form, you should specify their height and width, height and width parameters is. If the browser did not find these two parameters, it needs to download the picture side of the side calculated size, if the picture many, the browser need to constantly adjust the pages. This will not only affect the speed, but also browsing experience.

Below is a more friendly image code:

<img id = “moon” height = “200″ width = “450″ src = “http://www.kenengba.com/moon.png” <p class=”pictext”> alt = “moon image” />

</ p>
When a browser know that the height and width parameters, even if the picture is temporarily unavailable, on the page picture of the space will be vacated, and continue loading the content behind. Thus faster loading time, the browsing experience is better.

6, reducing http request

When visitors open a page, the browser will issue a request for a lot of objects (images, scripts, etc.), depending on the network delay, the load of each object will be delayed. If many objects on the page, which can take a lot of time.

Therefore, in order to reduce burdens for the http request. How to reduce burdens »

1, removal of unnecessary objects.

2, will be approaching a synthesis of the two pictures.

3, the merger CSS

Look at the following piece of code, to load three CSS:

<link rel=”stylesheet” type=”text/css” href=”/body.css” />

<link rel=”stylesheet” type=”text/css” href=”/side.css” />

<link rel=”stylesheet” type=”text/css” href=”/footer.css” />

We can be a synthesis:

<link rel=”stylesheet” type=”text/css” href=”/style.css” />

Thereby reducing the http request.

7, other tips

1, removing unnecessary add-ons.

2, on the page embedded in other sites of the widget, if a choice must choose fast.

3, as far as possible with pictures instead of flash, this is also good for SEO.

4, some of the static content will be static, so as to reduce the burden on the server.

5, Statistics code on the footer.