The impact of page load on user access

Slow page access is the site recognized dead point, if the page can not access, and then the wonderful experience is equal to zero. This problem, if professional, is called "load" rendering efficiency. So specifically, in addition to the conventional server processing speed, server-side network bandwidth, client network bandwidth, and other "hard" issues, what is not technically good to deal with the "soft" problem?

For example, a page browsing to a place stuck, at least wait more than 10 seconds before the content. Troubleshooting reasons, browsing other Web pages quickly, indicating that the client network bandwidth is no problem; browsing the other web pages on the same server is fast, indicating that the server's processing speed and network bandwidth are fine. Analysis of the code may have several cases, in the Yui official acceleration site of the best way to mention 13 methods, for ordinary products, individuals think that a few should be enhanced attention, the other (gray) from the cost of the price is a little high.

• Make fewer HTTP Requests more than a few HTTP requests
• Use a Content Delivery network using CDN
• Add an Expires Header specify expiration time
• Gzip Components Compression structure
• Put stylesheets in the top style sheet file
• Put Scripts at the bottom of the Bottom script
• Avoid CSS Expressions do not use expressions in CSS
• Make JavaScript and CSS External separates JavaScript and CSS files into separate files
• Reduce DNS lookups mitigate DNS queries
• minify JavaScript and CSS simplify JavaScript and CSS
• Avoid redirects avoid redirection
• Remove Duplicate Scripts Remove extra script
• Configure ETags Configuration Entity label
• Make Ajax cacheable cacheable Ajax

When all the assumptions are idealized, are all the problems solved? The answer is not necessarily. Because not the faster the load is better, the speed should be pay attention to, respectively, from the loading speed, load priority Two point of view examples.

Load speed

I have encountered a situation, because the page appears too fast but affect the user experience. Page Jump interactive Flash passed, but the first screen content did not change, the result I do not know whether the page really jump. Too fast interaction feeling is not fluent, but confused. This issue is common in the blogging system, and you can observe it carefully. For example, Taobao ued blog , the next figure left the first screen, right for the first screen log page.

Http://ued.taobao.com/blog screenshot on October 28, 2009

Ucdchina Official Blog also has a similar problem, the crux of the page before and after the improper layout. Logically speaking, different levels of the core of the page should be different, so the first screen should also have a significant difference. When I design my own blog home page, list page, Web log pages layout, I pay special attention to the communication between them the key points of difference, so in the faster interaction will have "animation" effect. The first screen, the left is the first screen of the list page, and the right is the first screen of the blog page.

Http://blog.rexsong.com screenshot on October 28, 2009

From the above examples, it can be concluded that the loading speed is not an isolated factor that may affect the user experience, but is a driving role in the overall design scheme system. In fact, the user requirements for loading speed is not particularly high, the key is stable, not less than the user expectations. It's OK to slow down, as long as the user can "say", such as dynamic loading prompts, the user will feel "process" is very useful.

In addition, from the technical principle, 60% to 80% of the optimization is very easy, but then every bit of progress, have to pay the corresponding costs and resources. Therefore, it is not advisable to pursue the ultimate optimization without looking at the overall situation and considering the objective conditions.

Load priority

In the process of opening to the browsing page, in addition to loading speed, I noticed and found that the difference in rendering order can also cause subtle experience effects. From the Web principle, the entire page should be normal from the top down, gradually rendered. But in reality, the web is often vertical layout, because more in line with user browsing habits, easier to achieve page technology.

The vertical layout involves a priority problem, which module should be shown first? The answer is certainly the most important part. After the 2004 site refactoring technology has been taken seriously, this issue has not been a new situation, technical solutions are mature. The most common use of table tags is to layout, resulting in the need to complete the contents of the table after the completion of the full load to show the consequences. Specific performance is likely to be stuck in the page of a director time to stay, and the whole module suddenly appear on the page. The following figure shows that the civil service network in Samsung is wrong to display ads first, while in important modules waiting for a long time.

Http://www.samsung.com/cn screenshot on July 23, 2008

In addition to the importance, I think that the module still has time in relation to the influence rendered. For example, the top of the Web site with a long message module, notify the server maintenance, new experience, such as to enhance the user experience of the means is very common. But has the designer considered the content of the "nature" module should be more appropriate at what time?

I used to have a plan. "The hint of the revision experience must be 2 seconds after the entire page is loaded, slide down from top to drive the entire page, in order to make the user's attention more obvious." "Because in the page loading process, all objects in the mobile display from scratch, if the entire page is relatively static, highlighting more important" revision tips ", the effect will be much smoother. The same conclusion can also be used in Help hints, or some new features labeled "tags." The image below is an invitation to Yahoo's official new edition of the test.

Http://www.yahoo.com screenshot on March 21, 2009

A few years ago, there is a similar case when the window ads are popular, because users are very annoying to play windows, open the window of the page often users subconsciously to turn off. Later, I designed a 10-second window, the January data display Click Effect on average increased by 30%.