Overview of front-end page optimization (1)

According to the survey, the webpage size increased by an average of 2013 in 32%, an average of 1.7 MB, and 96 individual HTTP requests. This is an astonishing number, and it is only an average value. Half of websites will be larger than this value. Websites are also prone to obesity, and our developers are the culprit.

An overweight website may have the following impact on you:

1. The more website code the user downloads, the slower the loading speed. On this Earth, not everyone can enjoy 20 m of Broadband. Every developer knows that users are unwilling to wait.

2. As we all know, mobile Internet is developing rapidly. For 2G networks, loading a m page may take even one minute.

3. The speed of crawling by the search engine will greatly affect the website ranking.

4. for developers, the larger the code volume, the more difficult it is to update and maintain.

I guess the average page code size will decrease this year. I hope the facts will be as expected. Nowadays, many people have begun to pay attention to this issue and many optimization tools have emerged. These technologies are very easy to use and do not require too much time or re-development.

In this article, I will give you some suggestions. The first three suggestions do not actually allow the webpage to lose weight, but they can still effectively speed up webpage loading.

1. Compressed in GZIP format

Gzip is short for gnuzip. It is a File compression program of GNU free software. It was developed by Jean-loupgailly and markadler. The first public version was released in 0.1 and 1.0 in.

We often use files suffixed with .gz in linux, which are in GZIP format. Nowadays, it has become a widely used data compression format on the Internet, or a file format.

Gzip encoding on HTTP is a technology used to improve the performance of Web applications. Large-Traffic web sites often use gzip compression technology to make users feel faster. This generally refers to a function installed on the WWW server. When someone visits the website on this server, this function in the server compresses the webpage content and then transmits it to the visiting Computer Browser for display. generally, the plain text content can be compressed to 40% of the original size. in this way, the transmission is faster, and the result is that you click the URL and it will be displayed soon. of course, this will also increase the server load. this function module is installed on servers.

According to the W3C survey, most websites do not enable the compression function.

2. Support for browser caching

If the browser supports caching, we do not need to download web resources repeatedly. The simplest way to set the cache is to add the corresponding content in the Response Header, including Expires header and last-modified.

You can automatically add these attributes by configuring the server. For example, you can configure to cache all photos for one month on the Apache server:

    <IfModule mod_expires.c>    ExpiresActive On    <FilesMatch "\.(jpg|jpeg|png|gif|svg)$">    ExpiresDefault "access plus 1 month"    </FilesMatch>    </IfModule>

3. Use Content Delivery Network (CDN)

CDN stands for content delivery network (CDN. The purpose is to add a new network architecture to the existing Internet to publish website content to the "edge" closest to the user's network, so that users can obtain the desired content nearby, improves the response speed for users to access the website. CDN is different from an image because it is more intelligent than an image, or it can be used as a metaphor: CDN = more intelligent image + cache + traffic diversion. Therefore, CDN can significantly improve the efficiency of information flow in the Internet. It comprehensively solves problems such as low network bandwidth, large user traffic, and unevenly distributed outlets, and improves the response speed for users to visit websites.

To better understand CDN, let's take a look at the CDN workflow. When a user accesses a website that has already joined the CDN service, he/she first uses the DNS redirection technology to determine the optimal CDN node closest to the user and directs the user's request to the node. When a user's request arrives at a specified node, the CDN server (the High-speed cache on the node) is responsible for providing the user's request content to the user. The specific process is as follows: Enter the Domain Name of the website to be accessed in your browser, the browser requests the resolution of the domain name to the local DNS, and the local DNS sends the request to the primary DNS of the website, the primary DNS determines the most appropriate CDN node at that time based on a series of policies, and sends the resolution result (IP address) to the user. The user requests the content of the website to the specified CDN node.

The above three methods can effectively speed up page access. Now we will diagnose your code to help us lose weight on the page.

4. Delete unnecessary resources

When you no longer need a component, you should delete its CSS and JavaScript code. If the code is put in a single file, it is not difficult to delete them, however, if you already have useless code and other code in a file, you must spend a lot of effort to delete them. At this time you need to use third-party tools to help you solve with one click, such as jslint, dust-Me selectors, CSS usage, unused-css.com or build tools like grunt-uncss.

5. General purpose and minimal CSS

Ideally, a separate CSS file is required for each page to call this layout. Of course, if you want to support older versions of IE, you need to create a CSS file. Before you build them on the server, you should delete all unnecessary formats between codes.

Many pre-processing tools can help you solve this problem, such as sass, less and stylus.

There are some ways to help you directly Merge multiple CSS files on Windows:

copy file1.css+file2.css file.css

On Mac or Linux:

cat file1.css file2.css > file.css

You can delete and format the obtained CSS files by using the online CSS compression tool. cssminifier.com, CSS compressor & minifier, and CSS compressor are both good tools.

Finally, load all the CSS in the head label so that the browser will know that your page style does not need to be re-painted multiple times.

6. Common and minimal Javascript

　　On average, each page is loaded with 18 JavaScript files. Although it is very useful to separate library files such as jquery, your own JavaScript code should be generic and minimized. Many third-party tools can help you solve such problems, such as Yui compressor, closure compiler, And the Javascript compressorrater that I like most. Simplified JavaScript code accelerates webpage access and reduces the number of HTTP requests.

Finally, it is best to place JavaScript reference code behind the html body tag to ensure that JavaScript code does not affect loading of other content.

7. Use the correct image path

Loading an incorrect image format will have a great impact on your webpage. Generally, the following principles apply to selecting images:

1. The photo is in JPG format.

2. All other images are in PNG format.

8. Adjust the size of the big image.

At present, the photos taken by smart phones are getting bigger and bigger, and you cannot directly display the original photos on the page. Normal editors directly upload the source image, which slows down the page loading to another level. In normal photo processing, there is generally no need to present high-quality images to users. So you need a tool to automatically resize the image.

Note that the size of the image cannot exceed the size of the capacity, so that the page is loaded with a full graph, but it cannot be displayed. At present, the photo size basically exceeds the computer display size.

The image size accounts for a large proportion of the total size of the webpage. Reducing the image size by 50% will reduce the overall page size by 75%. Therefore, you should seriously solve the problem of loading one piece.

9. Further compress the image

It is not enough to optimize the image size. You should analyze the image using a third-party tool to further compress the image. Good tools include optipng, pngout, mongotran, and mongooptim. These tools can be installed as independent tools or integrated into the development process. In addition, tools such as smush can be directly processed on the cloud.

10. Delete unnecessary Fonts

Web Fonts has completely changed the font design, which reduces unnecessary text. However, the current font will still bring extra bytes to Your webpage. If you use more than two fonts, this has begun to affect performance.

Conclusion

I believe that most websites can reduce the weight by about 30%-50% through the above optimization, but being a perfectionist developer is far from enough, we will continue to conduct in-depth research on website slimming in the next series of articles. If you are interested, please pay attention to the Weibo and, we will push the following articles on various social platforms.

Overview of front-end page optimization (1)