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:

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