Web performance optimization is divided into two aspects: server-side and browser-side.
1. Browser-side, regarding browser-side optimization, there are many aspects
1. Compress source code and image
JavaScript file source code can use obfuscation compression, CSS file source code can be compressed normally, JPG images can be compressed according to specific quality as 50% to 70%, PNG can be compressed using some open source compression software, such as 24 colors into 8 colors, removing some PNG format information, etc.
2. Select the appropriate image format.
If number of colors in the image is large, use the JPG format. If the number of colors in the image is small, use the PNG format. If the server can determine that the browser supports WebP, then use the WebP format and SVG format.
3. Combine static resources,
including CSS, JavaScript and small images, to reduce HTTP requests. A large portion of user visits will benefit the most from this one
4. Turn on Gzip compression on the server side
This is very effective for text resources, but not so large for image resources.
5. Use CDN
or some public libraries to use static resource addresses provided by third parties (such as jQuery, normalize.css). On the one hand, it increases the number of concurrent downloads, and on the other hand, it can share the cache with other websites.
6. Extend the cache time of static resources In
this way , visitors who frequently visit the website can visit faster. However, here we need to modify the file name to ensure that when the resource is updated, the user will pull the latest content.
7. Put CSS at the head of the page and JavaScript at the bottom of the page
so that it won't block the page rendering and leave the page blank for a long time.