Webpage front-end Optimization

Multiple front-end optimization criteria:
1. Use browser cache
Cache Optimization:
Most Web pages, including CSS files, image files, and JavaScript files, need to be downloaded over the Internet for a while, increasing the loading time of a Web page.
The HTTP cache allows you to save these resources, or cache these resources through a browser or proxy. Once the resource is cached, the browser can download the local cache instead of having to download the web server each time.
Therefore, the cache can eliminate the resources consumed by many HTTP requests, reduce the loading time, and significantly reduce the total payload. This reduces the page access time and significantly reduces the server bandwidth usage.
For example:
Use browser cache:
1. Set the expiration time of an HTTP request header for a static resource to indicate loading the previously downloaded resource from a local disk instead of using a Web browser.
2. Configure the cache header of the Web server and apply it to all cached static resources, including images, JS and CSS files, image files, and other binary target files (media files, PDF files, Flash files, etc ).
3. HTTP/1.1 provides the following cache Response Headers:
Expires and Cache-Control: max-age.
Last-Modified.

========================================================== ========================================================== ========================================================== ==================================
Ii. Image Optimization
Correct format and image compression can save bytes and data and ensure faster image loading.
Basic image optimization, including cropping an image to a proper size, reducing the color depth of the image to an acceptable level, and saving the image in a standard format such as png in an appropriate format. Execute some image editing programs such as photoshop for editing.
Optimization suggestions:
1. select an appropriate image file format.
2. The image type has a great impact on the file size.
3. PNG is generally the best choice for Internet images. All versions of IE, Mac, Safari, and Firefox fully support PNG, including the transparency of png images.
4. Do not use BMP or TIFF format.
5. Use image compression.
6. There are several tools for further lossless compression. JPEG and PNG image files have no impact on image quality.
7. For JPEG, it is recommended that you use either Tran or jpegoptim.
8. For PNG, OptiPNG or PNGOUT is recommended.
9. Specify the image size: Specify the image size in css, such as the commodity thumbnail. specifying the image size can effectively reduce unnecessary requests.
10. Combine prices with CSS textures to reduce the number of images.
========================================================== ========================================================== ========================================================== ==================================
3. resources provided by the same website
Overview:
The webpage content removes repeated download bytes from uniform URL resources.
Sometimes you need to reference the same resource from multiple places on a page, such as: Image
Sometimes you need to share the same resources on multiple pages, such as CSS and js files.
If the webpage needs to reference the same resource, the resource should be transmitted from the same URL as much as possible.
Ensuring that resources are called from a single URL has many advantages. It can reduce the overall payload, because the browser does not need to download the same extra bytes and can save extra round-trip time.
Note: Use the absolute URL host name.
For example, if www.example.com references the Home Page resource/image/example.gif and www.example.com/image/example.gif, the URL is consistent.
However, the reference/image/example.gif and mysite.example.com/image/example.gif on the webpage are inconsistent.
For example, the content of the following resources is identical, but they are from different URLs. If you use the same website to provide these resources, you can reduce one request and the data volume by B.
Http://price1.xxxx.cn/webapp/wcs/stores/prdprice/285232_9173_10052_1.png
Http://price1.xxxx.cn/webapp/wcs/stores/prdprice/410116_9173_10052_1.png
========================================================== ========================================================== ========================================================== ==================================
4. Enable the compression function
By compressing web resources through gziP, you can reduce the number of bytes sent over the network.
Currently, most browsers support data compression for HTML, CSS, and JavaScript files. This can make the webpage content more compact and greatly reduce the download time during network transmission.
Many Web servers can use gzip to compress files before downloading and sending files. Therefore, the compressed files are only applicable to large resources. Because of the computation and delay of compression and decompression, we recommend that you consider more than 150 of files.
Compressed gzip files smaller than 150 bytes will increase the size.
To ensure content compression, do the following:
1. ensure the consistency between HTML and CSS code. To achieve consistency:
2. Specify CSS values-Sort them alphabetically.
3. Specify HTML attributes in the same order, that is, arrange them alphabetically.
4. For example, on Google's search results page, HTML attributes are listed alphabetically, reducing the size of gzip compressed output by 1.5%.
5. Use consistent nested labels in lower case.
6. Keep the HTML tag attributes consistent, that is, they are always single quotes and double quotes.
7. Reduce JavaScript and CSS to reduce unnecessary file content.
8. Do not use gzip compressed images, PDF files, or other binary files.
========================================================== ========================================================== ========================================================== ======================================
5. Minimize the amount of data requested
Ideally, an HTTP request should not exceed 1 packet. Generally, the limit is about 1500 bytes. Therefore, if each request can be limited to less than 1500 bytes, the request can be effectively reduced.
Suggestion:
1. Cookie: for resources that must be sent with a cookie, the minimum Cookie is saved. The specified cookie must be within 1000 bytes.
2. minimize or reduce the length and number of nodes of the requested resource URL.
3. delete unused or repeated cookie fields.
========================================================== ========================================================== ========================================================== ======================================
6. Compress JavaScript
Compress JavaScript code to save data and speed up download, parsing, and execution.
1. Compress and exclude unnecessary bytes, such as extra spaces, line breaks, and indentation.
2. Keeping JavaScript code compact has many advantages.
A. Further improve the compression of external JS files and HTML files embedded in JS Code.
B. Smaller files can load and run Web browsers more quickly.
C. There are several tools available for JavaScript compression JSMin or YUI for free. We recommend that you reduce the size by 4096 bytes or a large JS file.
========================================================== ========================================================== ========================================================== ======================================
VII. Specify the image size
By eliminating unnecessary information backflow, you can specify the width and height of all images to help the page render faster.
1. You can use HTML labels or the width and height of all images specified in CSS.
2. specify the size of the image to match.
3. If the image file is actually 60x60 pixels, do not set the size to 30x30 in css or html. If the image needs to be smaller, set its size to match in the image editor.
========================================================== ========================================================== ========================================================== ======================================
8. HTML Compression
1. Compressed HTML code, including the JavaScript and CSS it loads, can save data and speed up download, parsing and execution time.
2. Minifying HTML can reduce network latency, increase compression ratio, and load and execute browser requests more quickly.
3. HTML contains embedded Javascript code (<script> tag) and inline CSS (<STYLE> tag ).
========================================================== ========================================================== ========================================================== ========================================
9. Compress CSS
1. compressing CSS code can save byte data and speed up download, parsing, and execution.
2. Benefits of compressing CSSg: reduces network latency and increases the speed of loading and executing browsers with compression and speed.
3. Several tools are provided with compressed JavaScript For free, including YUI compressors and cssmin. js.
Tip: When you reference the page speed of a CSS file, it will automatically run the file cssmin. js and save the output to a configurable directory.
========================================================== ========================================================== ========================================================== ========================================
10. Specify a "Vary: Accept-Encoding" Header
1. The public cache enables the HTTP header of static resources, allowing the browser to download resources from a nearby proxy server, rather than from the remote source server.
2. Users who access the website for the first time can also benefit from the cache, and the proxy cache can significantly reduce network latency.
3. You can call the cache on the server closest to the user based on the user's location.
========================================================== ========================================================== ========================================================== ======================================
11. Optimize the order of style sheets and scripts
Correct external style table loading sequence and external embedded script sequence can better parallel download and speed up the rendering time of the browser.
Loading Caused by two webpage content and layout methods:








========================================================== ========================================================== ========================================================== ==================================
12. Place CSS in the Document Header
Moving Elements in the CSS and <link> documents to the file header improves rendering performance.
In an html file, specifying an external style sheet and CSS may negatively affect the browser, including browser rendering until all CSS style sheets are downloaded from the webpage, let the browser gradually present the page,
As the specification of HTML4.0, this also ensures that the script of the style sheet you refer to is loaded in the correct form and order.
Specifying an external CSS style sheet in an html external style sheet will affect the loading performance of the browser. The browser usually loads the page after the external css style sheet is completely downloaded,
Therefore, we usually need to place the CSS style sheet in the header of the page to ensure that the browser can load the external style sheet first to ensure that the page can be opened as soon as possible.
========================================================== ========================================================== ========================================================== ==================================
13. Minimize redirection
Minimizing HTTP redirection from one URL to another can reduce additional RTT, thus saving user waiting time.
Sometimes it is inevitable to redirect a URL to another URL, such:
1. Update the website domain name.
2. You need to track the page clicks and log recommendation pages.
In any case, redirection will inevitably lead to an additional http request, and the delay in the response cycle and round-trip time is inevitable, it is important to minimize the time consumed by redirection and redirection.
1. Some rarely used pages.
2. direct to the target page. For example, if the target page is A page C, A, B, A, and B, the target page should be directly redirected to C without the need for secondary transfer, this may cause more time loss.
3. Many WEB servers support "Rewrite". When the client initiates an invalid URL request, the server automatically remaps it to the correct service resource instead of sending a redirect request.
========================================================== ========================================================== ========================================================== ======================================
12. Provide Compressed Images
Correct image compression can effectively save space and increase the loading speed.
Sometimes the browser needs to display the same image in different sizes. Therefore, files such as css are usually used to specify the image size, for example, if you want an image of 250*250 to be displayed in 10*10,
You can use the image compression method to prevent users from downloading large images, thus saving bandwidth and improving speed.
By specifying the page image size, we can avoid too many RTT requests, thus improving page loading speed and reducing bandwidth usage.
In addition, to increase the concurrency, we can provide additional image servers to speed up image loading and reduce the number of browser threads.
========================================================== ========================================================== ========================================================== ======================================
XIII. Delay JavaScript Parsing
Generally, to load a webpage, the browser must parse all the <SCRIPT> labels on the page, which increases the loading time,
Therefore, minimizing the JavaScript loading time or delay can effectively reduce the initial loading time of the page.
Some simple methods can delay JavaScript parsing. The simplest method is to delay loading of JavaScript until it needs to load JavaScript.
========================================================== ========================================================== ========================================================== ======================================
14. Specify the cache time
Setting the specified date of browser cache allows the browser to load previously downloaded resources from a local disk rather than through a web browser.
HTTP/S supports caching static resources in local browsers. Some of the latest browsers (such as IE 7) Use a heuristic cache resource without clear cache headers. Other older browsers may need to set cache headers to retrieve resources from the cache.
If you need to set the browser cache in the cache, You can effectively configure the Web server's cache header and apply it to all cached static resources, instead of a small part (like ).
========================================================== ========================================================== ========================================================== ======================================
15. Avoid wrong requests
With the development of the website, some original resources of the website will be changed and moved. If the website is not updated in time, the server will send a 404 error page feedback.
Unnecessary requests lead to poor user experience and make the website look unprofessional.
In terms of speed and loading, if you do not organize subsequent processing of browsers, such as JS and CSS files, they will waste and occupy part of the website's resources. Therefore, we need to regularly check and scan the entire website,
For example, you can use google's website administrator tool to regularly scan website errors and 404 pages, and then delete and handle these pages as appropriate.
Avoid using excessive HTTP redirection, reduce the resources that send requests to users, or avoid a "suggested" Boot page. As mentioned above, redirection may slow down the website speed, so we should avoid it as much as possible in actual situations.
========================================================== ========================================================== ========================================================== ======================================
16. Avoid using @ import in CSS
Loading a webpage using @ import of an external style sheet CSS may increase extra latency.
@ Import of the CSS style sheet allows you to import other style sheets. When @ import from the external style sheet CSS, the browser cannot download the style sheet in parallel, which increases the round-trip time, thus affecting the overall page loading.
For example, if first.css contains the following content (when the browser is downloading, before executing the command, download second.css first.css ):



Suggestion:
Use the <link> label instead of the CSS @ import
This allows the browser to download parallel style sheets to load pages more quickly.