A Guide to Optimizing High-Performance Websites

A Guide to Optimizing High-Performance Websites

Golden Rules of Performance:

Only 10% to 20% of end-user response time is spent downloading HTML documents. The remaining 80% to 90% of the time is spent downloading all the components on the page.

Rule 1: Reduce HTTP requests

This can be done by using image maps, CSS Sprites (both pros and cons), inline images (data: URL mode, which is not supported by IE and cannot be cached), and merging scripts and style sheets.

Rule 2: Use a Content Distribution Network

If the application web server is closer to the user, the response time of an HTTP request will be reduced;
If the component web servers are closer to the users, the response time for multiple HTTP requests will be reduced.
A content delivery network (CDN) is a group of web servers distributed across multiple geographical locations that is used to deliver content to users more efficiently.

Rule 3: Add Expires header

The Expires header is used by a web server to tell a web client that it can use the current copy of a component until a specified time. Requires that the server and client clocks be strictly synchronized and that a new date be provided in the server configuration after the time expires.
Max-Age and mod_expires can make up for the shortcomings of Expires.

Rule 4: Compress components

Starting from HTTP 1.1,

Rule 5: Put your stylesheet at the top

Progressive presentation to avoid white screen

Rule 6: Put scripts at the bottom

The HTTP 1.1 specification recommends that browsers download two components in parallel from each host name, and parallel downloading is actually disabled when downloading scripts.
One reason is that the script may use document.write to modify the page content, so the browser will wait to ensure that the page can be laid out properly;
The second reason is to ensure that the scripts are executed in the correct order. If multiple scripts are downloaded in parallel, there is no guarantee that the responses will arrive at the browser in a specific order.
Placing the script at the top will block rendering of the content following it, and will block downloading of components following it.

Rule 7: Avoid CSS expressions

The expression method is ignored by other browsers, but is a useful tool for IE. Ability to set properties in IE, creating a consistent experience across browsers. For example, IE [IE6, IE7 (Quirk), IE8 (Quirk]] does not support the min-width property. This problem can be solved by using the expression method:

Copy code
The code is as follows:

width: expression(document.body.clientwidth<600?"600px": "auto");
min-width: 600px;

The problem with expressions is that they are evaluated more often than one would like. They are evaluated not only when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. We can add a counter to our CSS expression to keep track.
Example of expression counter:
http://stevesouders.com/hpws/expression-counter.php


Copy code
The code is as follows:

P {
width: expression(setCntr(),document.body.clientwidth<600?"600px": "auto");
min-width: 600px;
}

An alternative to expressions: Event Handlers
Fix the min-width issue by setting the width property of the style in the onresize event.
Event handler example:
http://stevesouders.com/hpws/event-handler.php
This example uses the setMinWidth() function to modify the size of all paragraph elements when the browser size changes:

Copy code
The code is as follows:

function setMinWidth(){
setCntr(); //Used to display the number of evaluations
var aElements = document.getElementsByTagName("p");
for(var i=0;i&lt;aElements.length;i++){
aElements[i].runtimeStyle.width=(document.body.clientwidth<600?"600px": "auto");
}
}
if(1!=navigator.userAgent.indexOf("MSIE")){
window.onresize=setMinWidth;
}

This will dynamically set the width as the browser resizes, but it will not properly size the paragraph when first rendered, so the page will also need to use a "one-time expression" to set the initial width.

Rule 8: Use external JavaScript and CSS

Rule 9: Reduce DNS Lookups

Rule 10: Keep your JavaScript small

Streamlining vs. Obfuscation vs. Compression

Rule 11: Avoid redirects

When a web server sends a redirect to a browser, the response will have a status code in the 3xx range. This indicates that the user agent must perform further action to complete the request.

Redirects affect the download of HTML documents.

Rule 12: Remove Duplicate Scripts

Rule 13: Configure ETag

Rule 14: Make Ajax Cacheable

Finally, here is an outline of the contents of this book for your review!

<<:  Detailed explanation of Vue router routing guard

>>:  Introduction to HTML basic controls_PowerNode Java Academy

Recommend

mysql data insert, update and delete details

Table of contents 1. Insert 2. Update 3. Delete 1...

Tools to convert static websites into RSS

<br /> This article is translated from allwe...

How to implement DIV's blur function

Use anti-shake to make DIV disappear when the mou...

Detailed explanation of Angular component life cycle (I)

Table of contents Overview 1. Hook calling order ...

Introduction to HTML method of opening link files using hyperlinks

a and href attributes HTML uses <a> to repr...

Summary of the Differences between SQL and NoSQL

Main differences: 1. Type SQL databases are prima...

Introduction to fork in multithreading under Linux

Table of contents Question: Case (1) fork before ...

Record the whole process of MySQL master-slave configuration based on Linux

mysql master-slave configuration 1. Preparation H...

Analysis of basic usage of ul and li

Navigation, small amount of data table, centered &...

JS array deduplication details

Table of contents 1 Test Cases 2 JS array dedupli...

Detailed example of MySQL subquery

Subquery Classification Classification by returne...

HTML page native VIDEO tag hides the download button function

When writing a web project, I encountered an intr...

js canvas realizes random particle effects

This article example shares the specific code of ...

How to install iso file in Linux system

How to install iso files under Linux system? Inst...