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

Solution to Element-ui upload file upload restriction

14 techniques for high-performance websites

Solution to Element-ui upload file upload restriction

mysql5.7 installation and configuration tutorial under Centos7.3

How to connect to virtual machine MySQL using VScode in window environment

Getting the creation time of a file under Linux and a practical tutorial

Share 20 excellent web form design cases

Do you know how many connections a Linux server can handle?

Analysis of common basic operations of MySQL database [create, view, modify and delete database]

Web Design Tutorial (1): Steps and Overall Layout

Detailed explanation of the usage of grep command in Linux

The MySQL server is running with the --read-only option so it cannot execute this statement

Recommend

How to implement Svelte's Defer Transition in Vue

Tic-Tac-toe game implemented in pure CSS3

MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10

A brief discussion on the magical uses of CSS pseudo-elements and pseudo-classes

A brief discussion on the semantics of HTML and some simple optimizations

Solve the problem of shrinking Mysql transaction log and log files being too large to shrink

js implements a simple countdown

mysql 8.0.16 winx64.zip installation and configuration method graphic tutorial

How to configure the OpenWRT development environment on Ubuntu 18.04 (physical machine)

Detailed steps to deploy lnmp under Docker

Mysql sorting to get ranking example code

Detailed process of upgrading gcc (version 10.2.0) under CentOS7 environment

Docker deploys Mysql, .Net6, Sqlserver and other containers

Installation and uninstallation of MySQL 5.7 decompressed version and summary of common problems

Mysql master-slave synchronization configuration scheme under Centos7 system