12 tips to improve the speed of Web page opening

We know that users like to browse fast Web sites, do not like to spend too much time waiting for the opening of the web, waiting for too long, will let users lose patience, even when irritable will directly close the page, so you will lose some potential customers.

Second, from the SEO point of view, the keyword ranking and the opening speed of the page also has a relationship, Google's web search team on the official blog announced that the site will be the speed of the PR (PageRank) algorithm as a factor, in all factors are equal to the situation, Fast sites will be in front of slow sites. At the same time, it is pointed out that many websites do not use the best page optimization technology, the page loading speed is very big flaw. So how do we fix and improve the loading speed of our web pages?

1. Merging JS files and CSS

The JS code and CSS styles are merged into a shared file, so that not only simplifies the code, and in the execution of JS file, if the JS file is more, you need to make a number of "Get" requests, to extend the loading speed, the JS file merged together, Naturally, it reduces the number of GET requests and increases the load speed (see the Ma Haixiang Blog For more information about the 6 ways to improve website speed in front of your site).

Users open a CSS design of the Web page, CSS is generally downloaded to the user's local computer, not like HTML element performance tag, every time the Web site to call once, using CSS, only need one time! In addition, CSS in some places can replace the picture, this is why now advocate div+css reason!

2. Sprites Picture Technology

Spriting is a Web page image application processing method, it is a page involved in all the scattered images are included in a large map, and then use CSS technology to show. In this way, when the page is accessed, the loaded picture will not appear as before, a picture of the image, can reduce the entire page picture size, and the use of csssprites can be a good way to reduce the Web page HTTP requests, which greatly improve the performance of the page.

Csssprites in the domestic many people called the CSS Wizard, very early on, in many large sites are useful to, especially some of the icons of all the existing pages are used more, very good speed to increase loading.

3. Compress text and pictures

Compression techniques such as gzip can effectively reduce the time of page loading. including Html,xml,json (JavaScript object symbols),JavaScript and CSS, etc., the compression rate can be in the size of about 70%.

General text compression used more, usually directly in the space to open the line, and the image compression is more arbitrary, many are directly uploaded, in fact, there is a lot of compression space.

4. Delay the display of content outside the visible area

In order to avoid page distortion, you can use placeholder tags to make the correct height and width to ensure that users can see pages in the visible area more quickly to delay loading or to show content outside the visible area.

For example: WP jqueryimage LAZYLOAD plug-in can be in the user stay in the first screen, do not load any of the first screen below the picture information, only when the user to scroll down the mouse, these pictures just start loading. This obviously increases the loading speed of the visible area and improves the user experience.

5. Ensure that the function image is loaded first

Web site mainly consider the importance of usability, a function button to be loaded out, the user into the download page, a only need to 8s time download spent 5s waiting, looking for download button pictures, who can endure (for its solution, we can realize the Web page picture preloaded effect of 3 technical methods Ma Haixiang blog) Related to the introduction to learn more)?

There is one more thing to note: Some people often forget to write the length and width of the picture, these tags are to tell the browser to open the image before the size, if you can set the height and width of the image in advance, the browser load the page will retain an area, to speed up the entire page display speed.

6. Re-layout Call-to-action button

In fact, this is similar to the above one, all from the user experience speed to start, skipping the overall load speed of the page. The speed has not changed, just let some behavior button in advance, Call-to-action button general custom design at the bottom of the page, such habits for the user is not always good, buy users need to wait until the bottom load out to click Next action.

You can adjust the location of the CTA button or use the sliding picture button, which is the type of shopping cart that many large shopping sites add to.

7. Image format Optimization

Inappropriate image formats are a very common culprit in slowing down the loading speed. The correct picture format can reduce the number of images, if saved in the best format, can save a lot of bandwidth, reduce processing time, greatly accelerate page loading speed, this is a very common practice.

8. Use progressive JPEGs

Progressive JPEGs image is a special variant of the JPEG format called "Advanced JPEG". When you create an advanced JPEG file, the data is arranged like this: when you load an image, you begin to display only a blurred image, and as the data is loaded, the image becomes clearer, which is equivalent to a picture of the interlaced GIF format.

Advanced JPEG is primarily designed for use with a slow network of modems, and users of fast networks often do not experience the difference between it and normal JPEG format images. For users with slow speed, this is undoubtedly a good experience.

9. Streamline the Code

This can be said to be the most direct method, but also used more, the page code to thin, delete unnecessary sink redundant code, such as unnecessary space, line breaks, comments, etc., including the JS code in the useless code also need to clear.

In the same network environment, the smaller the natural download time of the page, so within a reasonable range to reduce the size of the page can be optimized download speed. and the page size is mainly determined by the amount of HTML code (of course, may include some CSS or JS code, but the main or HTML code), to reduce the size of the page, you have to according to the standards of the Web to optimize the HTML code structure, to remove some garbage meaningless code.

One of the comments on the code to clear some people may have misunderstandings, and even some in the inside stuffing keywords.

10. Delay loading and execution of non-essential scripts

There are many scripts in the Web page that do not need to be executed until the page is fully loaded, and you can defer loading and executing nonessential scripts. These scripts can be executed after the OnLoad event to avoid affecting the rendering of important content on the Web page. These scripts may be your own pages of toluene, often more are some third-party scripts, so there are many, such as: comments, ads, smart recommendations, Baidu Cloud, share and click Statistics and so on (specifically to see the Ma Haixiang blog, "How to solve the problem of clicks affect page loading speed," the solution provided by the method), This can be done after the main content has been loaded.

11. Using Ajax

For the opening of the Web page is actually a very complex process. From the Web application opened, to the Web server response, compile and other actions, and then sent back to the browser, before displaying the text and pictures before us, multimedia files and so on. So I want to try to reduce the number of responses, and now Ajax is doing well in this area. Of course, a static page is the exception, static pages more attention to image size and page design on the line.

Ajax, "Asynchronous Javascript +xml", refers to a web development technique that creates interactive Web applications. Ajax enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server.

This means that you can update a part of a webpage without reloading the entire page. Traditional Web pages (without Ajax) if you need to update your content, you must reload the entire page surface.

12. Automated Page Performance optimization

Automated page performance optimization is the use of tools, website speed up tools have a lot of, I believe that we have seen a lot on the Internet, the specific effect is difficult to determine, so there is not much to say.

12 tips to improve the speed of Web page opening