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

Problems and solutions when installing MySQL8.0.13 on Win10 system

Operating system: Window10 MySQL version: 8.0.13-...

How to use watch listeners in Vue2 and Vue3

watch : listen for data changes (change events of...

Markup Languages ​​- Lists Again

Click here to return to the 123WORDPRESS.COM HTML ...

Implementation of Docker building Maven+Tomcat basic image

Preface In Java programming, most applications ar...

mysql group by grouping multiple fields

In daily development tasks, we often use MYSQL...

JavaScript to achieve progress bar effect

This article example shares the specific code of ...

Service management of source package installation under Linux

Table of contents 1. Startup management of source...

Detailed explanation of custom instructions for Vue.js source code analysis

Preface In addition to the default built-in direc...

Detailed explanation of Javascript basics loop

Table of contents cycle for for-in for-of while d...

In-depth explanation of MySQL stored procedures (in, out, inout)

1. Introduction It has been supported since versi...

Comprehensive analysis of MySql master-slave replication mechanism

Table of contents Master-slave replication mechan...

Summary of Vue first screen performance optimization component knowledge points

Vue first screen performance optimization compone...

How to dynamically add a volume to a running Docker container

Someone asked me before whether it is possible to...

Detailed tutorial on installing MariaDB on CentOS 8

MariaDB database management system is a branch of...