14 techniques for high-performance websites
|
Original : http://developer.yahoo.com/performance/rules.html 2007.3.20 Steve Souders Translated by mask Starting in 2004, I started working on the outlier performance group at Yahoo. We are a very small team that specializes in quality inspection and improvement of Yahoo's products. As a back-end engineer, I am now tinkering with front-end code optimization projects, so I think this is an excellent opportunity for improvement. My goal was to improve the user experience, so I measured the browser response time at various bandwidths and came up with the following graph, which shows the http traffic from http://yahoo.com.  The first label in the above icon is html, which is the first thing loaded in an html document. In this example, reading the html code only accounts for 5% of the entire response time. This result applies to the vast majority of websites. Among the top ten websites sampled in the United States, only one website exceeds 5% but is less than 20%. The remaining 80% of the time is used to read other content on the web page, that is, the front-end (the original text is front-end, which means the rest of the content excluding the html code, which can be pictures, scripts, flash, videos, and various things). This is the key reason why we need to focus on these things to improve display speed. There are three main reasons why you should start from the front end :
Our golden rule is to optimize the front-end performance first, as these things consume 80% of the user-side response time. 1. Reduce the number of http requests <br />Images, css, script, flash, etc. will increase the number of http requests. Reducing the number of these elements can reduce the response time. CSS Sprites technology can reduce the number of image requests, put scattered small images together, and use background-position to change the position of the background image. The premise is that the width and height of the HTML element are defined in advance. In fact, it is like a mask. You will see different scenes when you move the background. Embedded images use the data: URL scheme to embed the image content code directly into the HTML code, which will increase the size of the HTML code. The improved way is to embed the embedded images into CSS (CSS is cached), which will better reduce the number of http requests without increasing the size of the HTML. Many users access your site with an empty cache, so first-time speed is important. The first rule is the most important one. Previous Page 1 2 3 Next Page Read More |
<<: Uncommon but useful tags in Xhtml
Recommend
Example of CSS3 to achieve div sliding in and out from bottom to top
1. First, you need to use the target selector of ...
Detailed explanation of the solution to the problem that FTP cannot connect to the Baota Linux panel
If you are using Alibaba Cloud Server, you need t...
Nginx tp3.2.3 404 problem solution
Recently I changed Apache to nginx. When I moved ...
Mysql join table and id auto-increment example analysis
How to write join If you use left join, is the ta...
HTML+CSS to achieve cyberpunk style button
First look at the effect: Preface: I came up with...
Make your website run fast
Does performance really matter? Performance is im...
JavaScript two pictures to understand the prototype chain
Table of contents 1. Prototype Relationship 2. Pr...
Detailed explanation of the rounding accuracy problem of the toFixed() method in JS
Table of contents The pitfalls Filling method Wha...
uniapp implements date and time picker
This article example shares the specific code of ...
Setting up a proxy server using nginx
Nginx can use its reverse proxy function to imple...
B2C website user experience detail design reference
Recently, when using Apple.com/Ebay.com/Amazon.co...
How to implement paging query in MySQL
SQL paging query:background In the company's ...
CentOS 7 builds hadoop 2.10 high availability (HA)
This article introduces how to build a high-avail...
Rsync+crontab regular synchronization backup under centos7
Recently, I want to regularly back up important i...
The w3c organization gives style recommendations for html4
This is the style recommendation given by the W3C ...