14 techniques for high-performance websites

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 :
    There is potential for improvement and enhancement here. If you can reduce the size by half, you can reduce the response time by 40%. Improving the front end requires less time and resources than improving the back end. (Improving the back end requires redesigning application planning, code, finding ways to optimize code, adding or changing hardware configurations, distributed databases, etc.) Front-end improvements have been proven in our work. We have fifty teams at Yahoo that have improved their user-side response time by 25% or more under our best performance rules.

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

>>:  Detailed explanation of the idea of ​​implementing dynamic columns in angularjs loop object properties

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 ...

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...

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 ...