Tutorial on enabling pagespeed acceleration on Nginx server

Last week, a webmaster asked me a question and asked if there was any conflict between fastcgi_cache and pagespeed acceleration. I thought for a moment that both are native masters and there should be no compatibility issues.
As for how this friend asked the two mechanisms to deal with the issue, I thought about it. Since fastcgi_cache is already cached to a local file, pagespeed must be post-processed. In general, when a user accesses the WEB, Nginx should first call the fastcgi cache, then perform pagespeed optimization, and finally return data to the user.
Of course, after my final test, I also confirmed that my guess was correct.

I. Faster

 

Zhang Ge's blog is very fast, but there is no such thing as plagiarism, imitation, keyword and traffic. In this Internet age, Zhang Ge reminds me of any good ideas or ways to make money. The only thing we can do is to make a fortune, because this is an era of chaos without morality and rules! The case will not be posted. I can see that the title of a blog is similar to that of the blog of Zhang Ge, which has a good ranking, a high index, and a variety of imitation. A degree is also a big deal. What kind of spam recognition, not understanding the original things, is really powerless! I haven't spoke in my article for a long time. It's a waste of time!
Go back to the article and continue sharing...
In the impression, Zhang Ge's blog reposted a pagespeed article from 51CTO, but he never tried it. Search for the tutorials found two years ago:
Use PageSpeed to speed up Nginx website servers
Just this weekend, I decided to re-compile Nginx and test a pagespeed. In the end, the results were satisfactory. If you want to speed up your website, follow this article.

II. Recompile

 

You may also find that compiling nginx is a basic skill. If you still don't know it, read the articles shared by Zhang Ge's blog. Learn this basic skill and try again:
Detailed operation records of smooth upgrades or new modules under Nginx online service status
In general, a new compilation module is added. As long as the download address of this module is provided, compilation should be fine.
Download and compile this module for reference:

# Go to the nginx Source Code Directory of the same level, for example in/usr/local/src # download module wget-O ngx_pagespeed-release-1.9.32.6-beta.tar.gz https://codeload.github.com/pagespeed/ngx_pagespeed/tar.gz/release-1.9.32.6-beta # extract tar zxvf ngx_pagespeed-release-1.9.32.6-beta.tar.gz # Download psol optimized library cd ngx_pagespeed-release-1.9.32.6-betawget # unzip psoltar zxvf 1.9.32.6.tar.gz # view the existing nginx compilation parameter/usr/local/nginx/sbin/nginx-V # recompile nginx, added pagespeed module cd/usr/local/src/nginx-1.60. /configure -- add-module = .. /ngx_pagespeed-release-1.9.32.6-beta followed by the parameters found in the previous step # make and make upgrade later will not be said, before the blog has been shared by Zhang Ge

3. Modify configurations

 

Edit The nginx configuration file of the website, such as zhangge.net. conf. Add the following code to the server module:

# If you do not know where to add it, you can add it to the end of root/home/wwwroot/yourdomain.com; # enable ngx_pagespeed on; pagespeed FileCachePath/tmp/cache/ngx_pagespeed_cache; # Disable CoreFilters pagespeed RewriteLevel PassThrough; # enable the compression blank filter pagespeed EnableFilters collapse_whitespace; # enable the JavaScript library to uninstall pagespeed EnableFilters canonicalize_javascript_libraries, are there any side effects of this setting? # combine multiple CSS files into one CSS file pagespeed EnableFilters combine_css; # combine multiple JavaScript files into one JavaScript file pagespeed EnableFilters combine_javascript; # Delete the label pagespeed EnableFilters elide_attributes with default attributes; # Improve the cache of resources pagespeed EnableFilters extend_cache; # Replace the @ import of the imported file to streamline the CSS file pagespeed EnableFilters flatten_css_imports; pagespeed CssFlattenMaxBytes 5120; # Pre-resolution DNS query pagespeed EnableFilters insert_dns_prefetch; # Rewrite CSS, first load the CSS rule pagespeed EnableFilters prioritize_critical_css of the rendering page; # Example disable pagespeed processing/wp-admin/Directory, see) pagespeed Disallow "*/wp-admin/*". Then, add the cache folder mkdir-p/tmp/cache/ngx_pagespeed_cache.

Finally, restart Nginx to take effect (we found that the modification to this module must be restarted nginx, and reload is invalid ...), I found that many of my friends don't know how to restart nginx. Then I can restart the server if I want to restart it. Although I can, it's too violent?
Install nginx using tools, generally with service control. You can use the following command to restart nginx

Service nginx restart or/etc/init. d/nginx restart does not exist. You can kill it first and then start it: Shell # kill pkill-9 nginx relentlessly # restart/usr/local/nginx/sbin/nginx

Ps: those who use the panel don't say it's not the path. Who wants you to use the panel... This is also a pain point in the panel. The path has different personalities and you can leave it alone. \

IV. Test results \

① Check the source code

After restarting Nginx, refresh the front-end and search for pagespeed. You can find that most of the source code has been replaced:

As shown in the figure, most js and css URLs have changed and are merged into a url.

Images with smaller sizes, such as emotices, are converted into browser encoding, which is an optimization for reducing server requests:

It seems that after optimization, the html code is much more, so I downloaded it and read it:

Sure enough, after opening the same page, it will be more than 20 k larger! Nima, if there is no major improvement elsewhere, it would be a little scary, so let's continue to look at it.

②. View images

Next, I read the thumbnail of the article and found that the image size can be compressed:

For example, the image size before pagespeed is not enabled [image address ]:

After enabling: [image address]

Nima, more than ten times the difference, makes me a little unconvinced. Download it to your computer and check it out:

The difference is indeed a little smaller, more than twice. However, the latter isWebP formatThat is, an image format developed by google to accelerate image loading. After I download it to my local computer, it will be automatically converted to the jpge format. The volume must have changed! In general, the compression effect is really obvious! However, I have verified many times that not all images have this effect, and it is estimated that it is related to the degree of compression of the original image.

③ Tool testing

Relying on the naked eye is a little powerless. Pagespeed is mainly used to accelerate the rendering and loading of browsers, so I decided to use Alibaba Cloud to test and analyze the differences before and after acceleration.

Test Report before optimization:

Report address: Http://www.alibench.com/rp/f9a4c1a8ddd267e0897613501dd2b422

Optimized Test report:

Report address: Http://www.alibench.com/rp/17778d646ca7133609cc348b77096f37

Click here to compare the loading details:

Before optimization:

After optimization:

The effect is quite obvious. If you are interested, click the report address to view more detailed comparisons! Of course, we also recommend that you try to enable pagespeed acceleration on the Nginx server! If it is an Apache server, you can integrate mod_pagespeed. If you are interested, go to the information and try again!

Latest supplement: After a few days of blog experience, Zhang Ge found a problem: after enabling this feature, the CPU usage will be relatively high, and Nginx is often 100%. Although there is a static cache, the website background occasionally gets stuck, this function has been canceled. Therefore, we do not recommend that you use this single-core CPU for ECS instances.

 

From: http://zhangge.net/5063.html