14 Notes to improve Web page efficiency 1th/3 Page _ Experience Exchange

Source: Internet
Author: User
What is the most basic thing about a website?
--Content? SEO (Search engine optimization)? UE (user experience)? It's not right! It's speed!
Content again rich Web site, if slow to inaccessible is meaningless; SEO do a good site, if the search spider can not catch is also in vain, the UE design of the humanized site, if users can not even see is empty talk.
So the efficiency of Web pages is definitely the most noteworthy aspect. How can you improve the efficiency of a Web page? Steve Souders (Steve Souders's information http://www.oreillynet.com/pub/au/2951) proposes 14 guidelines to improve the efficiency of web pages, These guidelines will also be the theoretical basis for the YSlow tools that we are introducing in the next chapter:


Make fewer HTTP Requests
Use a Content Delivery network
Add an Expires Header
Gzip components
Put CSS in the top
Move Scripts to the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript
Avoid redirects
Remove Duplicate Scripts
Configure ETags
Make Ajax cacheable
Here we will explain each of these guidelines, and the guidelines that are closely related to developers will be explained in detail. Little brother Personal technology is really limited, mistakes and ignorance is unavoidable, but also please expert advice.

First: Make fewer HTTP Requests as much as possible to reduce the number of request requests for HTTP.

80% of user response time is wasted on the front end. These times are mainly caused by downloading pictures, style sheets, JavaScript scripts, flash files, and so on. Reducing the number of requests requested for these resource files will be a key to improving the efficiency of Web page display.
There seems to be a contradiction, is that if I reduced a lot of pictures, styles, scripts or flash, then the page is not bare, how ugly? In fact, this is a misunderstanding. We're just saying as much as possible, and not saying that it's completely out of use. The number of request requests for these files is reduced, and there are some tips and suggestions:

1: Replace multiple small pictures with a large picture.

This is a bit of a reversal of traditional thinking. We used to think that the download speed of multiple small pictures would be less than the download speed of a large picture. But now the results of the analysis of multiple pages using the HttpWatch tool indicate that this is not the case.
The first picture is an analysis of a large picture of the size of a 40528bytes 337*191px.
The second picture is an analysis of a small picture of the size of a 13883bytes 280*90px.

Analysis results of a large picture of a size 40528bytes 337*191px (click on the picture to see the full picture)


An analysis of a small picture of the size of a 13883bytes 280*90px (click on the picture to see the full large picture)
The first large picture takes time for:
blocked:13.034s
send:0.001s
wait:0.163s
receive:4.596s
ttfb:0.164s
network:4.760s
Power consumption: 17.795s
The actual time spent transferring large files is reveive time, or 4.596s, most of the time is used to retrieve the cache and determine the validity of the link blocked time, for 13.034s, accounting for 73.2% of the total time.
Current 1/3 page 123 Next read the full text

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.