How to optimize a website to increase access speed update

Recently, the company has begun to evaluate all sites under the corporate website, starting with itpub. To this end, start learning about how to optimize a website to increase its access speed. I learned that page speed is a good tool, so I downloaded it. Let me introduce this tool. Page Speed ​​is an open source Firefox/Firebug plug-in. Webmasters and web developers can use Page Speed ​​to evaluate the performance of their web pages and get suggestions on how to improve performance. Perform several tests on the website's web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed ​​on their pages receive a set of scores for each page, along with helpful suggestions on how to improve the performance of the page. It will make your website faster and reduce bandwidth costs.

The following is a brief description of our itpub site:

1 First you have to install this plug-in. I will skip the specific instructions.

2 After installation, press F12 to display the following picture

3 Click on the wreath in the picture above and the following picture will appear:

This 82/100 is the score your site gets according to the page speed assessment.

It’s good to decide for yourself.

Yellow indicates warnings that can be further optimized

Green means good work

The red ones indicate that the work is not going well and needs to be optimized.

(Itpub does a good job of not having red)

4 See "Enable keep-alive" I will write more about keep-alive in another blog post. to be continued

This means that the it168.com host needs to enable keep-alive, but this is the host of another project team and I do not have the authority to modify it. So, let me say this, from now on, if the host is not under your jurisdiction, just pass it and ignore it.

5 Let's talk about the following compressed javascript

Pagespeed recommends you to compress the following 2 js. You click the op behind...it will generate a compressed js for you. Then you can replace the original js. This place just explains how to do it. Of course, jquery also has a min version of compressed js.

6. CDN

In fact, there is a more important aspect to doing all this. If your company has no money, you can do as mentioned above. If the company has money, it can add dynamic CDN

We will start to use dynamic CDN for ITPUB from tomorrow and the day after tomorrow, and separate the image attachments using a separate domain name. The current homepage first screen time is 3.156s

I hope that the Internet speed will be greatly improved after using CDN! ! !

===============================================================================================

Here are some insights into performance optimization techniques, which are also the "military rules" that are widely circulated online:

1 Enable gzip.

Gzip compression is a developed compression algorithm, which is well supported by current mainstream browsers (Firefox, Safari, Chrome, IE4 and above) and mainstream servers (Apache, Lighttpd, Nginx). Gzip compression is marked by Content-Encoding: gzip in the HTTP 1.1 protocol, which can significantly reduce the size of text files, thereby saving bandwidth and loading time. An experiment I did found that with gzip enabled, the size of the minified version of jQuery 1.2.6 was reduced from 54.4k to 16k, a 70% reduction. Gzip is suitable for:

For HTML\CSS\JavaScript files, the gzip algorithm is more efficient for text files, but binary files such as jpg/gif/png/pdf have already been compressed once, and the effect of using gzip is not obvious. Moreover, gzip compression consumes server resources, while decompression consumes browser resources, which has a very high performance consumption for relatively large binary files.
Try to use a single case scheme, either all uppercase or all lowercase. Students who have studied data structures and algorithms must know that compression itself is to compress redundant information entropy. If there are too many types of data elements, the information redundancy will be reduced, thereby reducing the compression rate.
Small files (usually less than 150 bytes) should not be compressed with gzip, because gzip will add relevant information to the file header, which will increase the file length for small files.

(The above text is taken from http://www.yakecan.com/archives/3 I agree)

So how do you check if your server is turned on?

Let me take a server here as an example. My web server is nginx, so let's take nginx as an example:

Open the nginx configuration file, you will see the relevant gzip settings. If not, please ask your company's operation and maintenance colleagues to enable them .

types is what types of files to use gzip for.

You can use the webmaster tools to check whether your site uses gzip, such as http://tool.chinaz.com/Gzips/

Take one of my sites as an example.

You can see the result and understand.

2. Minimize JS and images

You can compress it using a compression tool. There is a lot of room for optimization in JavaScript files themselves. The so-called JavaScript compression is to use some tools to optimize function and variable names (in fact, to shorten the length of variable names as much as possible), eliminate redundant characters (such as spaces, line breaks, comments, etc.), and the final code can achieve performance improvements in analysis and execution. The compressed code is readable by machines, but not by humans because the file contents are completely distorted. Therefore, compression is generally used in production code and cannot be used in the development phase.

3. JavaScript Minification

For example, jquery.form.js is reduced to 11.9kb after minimization, reducing 54.8% of the space. Click on the minified version, and you will see the version optimized by Page Speed ​​for you in a new window. You can directly update it to the server.

4 Enable browser caching

This is a frequently used method. When the requested resources are cached locally in the browser, the second request for these contents can be taken from the direct cache, reducing the number of HTTP requests for the connection.

5. JavaScript Lazy Loading

Usually when a browser encounters a JS file while parsing HTML, it will download it first, and then download the subsequent content after parsing and executing it, which will naturally cause a certain delay. To improve performance, move the location of JS files as far back as possible and load them asynchronously through partial code if possible. In addition, if JS and CSS must be placed together, JS needs to be placed after CSS so that the CSS and JS files can be downloaded synchronously.

6 File splicing, that is, files that can be merged are merged into one file

7. Reduce HTTP requests. This one is used together with the above ones.

8 Only load part of the js in the head. The rest can be loaded at the bottom.