One trick: open http compression Currently mainstream web servers already support gzip compression, which can compress text content such as html, css, javascript. Under normal circumstances, gzip compression can save more than 60% of the traffic, the specific compression rate, we can identify by the tools provided by the webmaster home.
Second trick: generating pages on the browser side
Because of the HTML standard itself, a web page contains a lot of invisible tags, and the transfer of these tags takes up a lot of bandwidth. By using JavaScript/AJAX technology, the user-visible content is transmitted, and the page is generated in real time on the client's browser, which not only speeds up the page downloading speed, but also effectively reduces the pressure on the server. The average page can save more than 1/3 of the traffic, and the traffic savings can be as high as 80% or more for re-formatted pages such as forms. Third trick: Optimize JavaScript
and CSS
Code
The current webpages contain a lot of JS files and CSS files. Whether it's handwritten or tool-generated JS and CSS files, the content contains a lot of blank lines, spaces, comment information, long variable names, etc., which can be optimized by tools. JS file can be optimized using tools such as JSmin. The original JS file size is 2463 bytes. After compression, it becomes 1115 bytes. After gzip compression of http, it finally becomes 640 bytes. The entire JS file becomes The original 26%. Using the CSS online compression tool, the original CSS file size is 2289 bytes, after compression, it becomes 1753 bytes, and after gzip compression of http, it finally becomes 612 bytes, and the entire CSS file size becomes 27%. Although our goal is to try to squeeze out every extra byte, JS files and CSS may need to modify it, so we need to control the compression ratio, and do not increase the cost of modification for traffic. Fourth trick: Image optimization
The image should be the number one wanted for the website. The website uses more and more pictures, and it is getting bigger and bigger. We can take a look at the homepage of Omelette. There are a total of 41 pictures, totaling 1311KB, accounting for 90% of the entire page size. Image optimization is good, not only can improve the page loading speed, improve the user experience of the website, but also save the bandwidth of the website. Through the following figure we can see that without affecting the picture quality, different file formats have different compression ratios. The difference between the picture files is still very large, and the maximum and minimum pictures are different by 6 times, as shown in the figure: We can use the drawing tool to Save the image in the format you need, and then use the tools like Smush.it to make more in-depth optimization of the image. At the same time, try to use thumbnails wherever thumbnails can be used instead of borrowing the browser's zoom function. Lazy loading of images, only when the image scrolls to the visible area, dynamically get images from the background. Since it is not necessary to take all the pictures in one place at a time, not only the page loading speed is greatly improved, but also greatly improves the user experience. A lot of JS libraries are currently supported, and common ones are JQuery. The fifth measure: clever use of external free resources
The current cloud computing technology is booming, many websites offer a certain amount of free traffic, and using these free credits can reduce the cost of your website. At present, Alibaba Cloud's OSS provides 10G of free traffic, which can be viewed 35,000 times when converted into 300KB images. If you borrow multiple free services at the same time, you can save a lot of money. Sixth trick: Optimizing mobile devices
At present, smartphones are becoming more and more popular, and the share of mobile Internet access is constantly expanding. Most of the current mobile terminal displays cannot be compared with PC terminals. Therefore, if the visible area provided by the webpage is larger than the display area of the mobile terminal, it is either invisible or zoomed. Most of the current mobile devices still use 2G and 3G networks, and the download speed is very limited, so our optimization of the mobile terminal can not only reduce the network bandwidth of the website, but also effectively enhance the user experience. Although the function of the browser of the current mobile terminal is already very powerful, it is limited by the computing power of the device and the screen size, so the webpage should try not to use a large picture, and do not use a huge JS library. The seventh trick: catch up with HTML5
Trends
HTML5 is coming! At present, major browser vendors have already supported HTML5, and the market share of IE6 is less than 8%. Even in the domestic market, it is less than 20%. You may not notice a hidden data stream: cookie, this amount of data is not large, but every time you access a web page, you need to send it back and forth. In order to facilitate user input, many websites enhance the user experience and automatically save the user's input. Each time you save, you need to submit and refresh the page. Some data of the web application can be statically cached, so there is no need to let the user re-download it every time it is refreshed. Using HTML5's local storage function, these locally stored data can be cached on the browser side, reducing the amount of data per interaction and greatly affecting the bandwidth usage of the website. Technology can drive down costs, but the transformation of technology can't be done overnight. The current most effective way to reduce network bandwidth charges is to use dynamic bandwidth to pay for actual network traffic on a daily or even hourly basis based on your business needs. At present, many cloud computing companies such as Alibaba Cloud provide such dynamic bandwidth changes, which makes the bandwidth cost of the webmaster more reasonable.