- Reduce the number of HTTP requests (Speed Optimization)
How Speed Optimization actually works ? When a web page opens, it doesn’t take long for the background program to respond. Waiting time is importantly spent on downloading web page elements, such as HTML, CSS, JavaScript, photos, etc. According to statistics, whenever an element is added, the page load time will increase by 25-40 milliseconds (depending on the user’s bandwidth).
So, if you want to speed up the opening of web pages, you can reduce the number of HTTP requests. Here are the following 3 methods:
(1) For example, use CSS code to replace some pictures (such as rounded corner pictures), and reduce the use of pictures as much as possible.
(2) Merge files. For the text files, you can merge the contents directly. Merge multiple CSS files into one, then merge multiple JavaScript files into one.
(3) Optimize the cache. For webpage elements that have not to change (such as page header, page footer, etc.), there is no need to download them again when the user visits them again, and they can access them directly from the browser cache.
- The style sheet is place in the Header section of the website page
After the actual test, moving the style sheet (CSS file) to the header of the webpage can improve the effective page loading speed and display the page elements in order.
- Use CDN (Content Delivery Network)
The CDN compose of a series of Web servers scatter in different geographical locations. It assigns a server to respond to the user’s request according to the degree of proximity to the user on the network. You need to use CDN when you have a lot of images on your website. For example, most of the current e-commerce websites use CDN. Many CSS-style frameworks like JS frameworks provide CDN services, such as Bootstrap.
- Compress web page elements (for Speed Optimization)
Obviously, the smaller the elements of a web page, the less time it will take to download. Nowadays, the most powerful and systematic way to compress web pages is Gzip compression, which can typically reduce the text content of web pages by more than 60%.
- Insert the JS file at the Footer of the page
When the web page is opened, all elements are displayed in sequence. However, due to the JS feature, it will be slower to load than other elements. Before the JS file is downloaded, the order of the other elements will be blocked. Therefore, putting the JS file at the bottom as much as possible means that the content can be a Quick display.
- Insert style sheets and JS scripts in external files.
Although we can write style sheets and JS scripts directly to the webpage HTML, which can reduce the number of external file calls, doing so will increase the file size of the page. Put stylesheets and JS scripts in external files, the first time the user visits may be a bit slow, but subsequent visits to the website, the user can use it directly through the browser cache, so as to achieve the purpose of reducing the number of HTTP requests, which is the optimal way of doing.
The optimization method of online search collection
1) Distribute the picture to the CDN
2) Use a different domain name for the Picture
3) Use several other secondary domain names for the image, increase browser compatibility.
4) Use lazyload for non-first screens
5) Combine scattered images into a larger image, once loaded, use CSS positioning to display.
6) Use jpeg for pictures with True colors, generally use png Format
7) Compress pictures to web format
8) Unchangeable images, add expiration field in HTTP header, set reasonable expiration time, allow the client to have a maximum cache.
