nginx uses pagespeed module to speed up static files

The main functions of the ngx_pagespeed module are roughly:
1) Image optimization: stripping metadata, dynamic resizing, recompressing
2) CSS and JavaScript compression, merging, concatenation, inlining
3) Small resource inlining
4) Postponing image and JavaScript loading
5 ) Rewrite HTML, compress spaces, remove comments, etc.
6) Improve cache cycle

As an Nginx component, ngx_pagespeed will rewrite your web pages to allow users to access faster. The rewrite included compressing images, minifying CSS and JavaScript, extending cache times, and also included some other best practices:
1) Optimizing caches—integrating application data and logic
2) Minimizing round-trips— --- Reduce the number of consecutive request/response cycles
3) Minimize request overhead ---- Reduce upload size
4) Minimize load size ---- Reduce response, download and cache page size
5) Optimize browser rendering--
--Improve the  layout of the browser page

 

Step 1: Download the pagespeed nginx module

yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel
wget http://linuxsoft.cern.ch/cern/slc6X/x86_64/RPM-GPG-KEY-cern
wget -O /etc/yum.repos.d/slc6-devtoolset.repo http://linuxsoft.cern.ch/cern/devtoolset/slc6-devtoolset.repo
yum install devtoolset-2
PS_NGX_EXTRA_FLAGS="--with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc"
wget https://github.com/apache/incubator-pagespeed-ngx/archive/latest-stable.tar.gz
tar -xvf latest-stable.tar.gz
cd incubator-pagespeed-ngx-latest-stable
psol_url=https://dl.google.com/dl/page-speed/psol/latest-stable.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url})

Step 2: Modify the lnmp script to install or update nginx

Add vi include/nginx.sh at the end of lines 23 and 25, and add vi include/upgrade_nginx.sh at the end of lines 50 and 52:

 --add-module=/root/incubator-pagespeed-ngx-latest-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

/root/incubator-pagespeed-ngx-latest-stable This path is the directory downloaded by pagespeed.

 

Step 3: Write the pagespeed configuration file

cd /usr/local/nginx/conf/
vi pagespeed.conf
内容
# 启用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /tmp/pagespeed/;
# 禁用CoreFilters
pagespeed RewriteLevel PassThrough;
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace;
# 启用JavaScript库卸载
pagespeed EnableFilters canonicalize_javascript_libraries;
# 把多个CSS文件合并成一个CSS文件
pagespeed EnableFilters combine_css;
# 把多个JavaScript文件合并成一个JavaScript文件
pagespeed EnableFilters combine_javascript;
# 删除带默认属性的标签
pagespeed EnableFilters elide_attributes;
# 改善资源的可缓存性
pagespeed EnableFilters extend_cache;
# 更换被导入文件的@import，精简CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 延时加载客户端看不见的图片
pagespeed EnableFilters lazyload_images;
# 启用JavaScript缩小机制
pagespeed EnableFilters rewrite_javascript;
# 启用图片优化机制
pagespeed EnableFilters rewrite_images;
# 预解析DNS查询
pagespeed EnableFilters insert_dns_prefetch;
# 重写CSS，首先加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# Example 禁止pagespeed 处理/ipython/目录 可选
#pagespeed Disallow"*/ipython/*";

Step 4: nginx takes effect:

vi nginx.conf
写入
include pagespeed.conf;

nginx -t
nginx -s reload

 

Note: If css and js are updated, please delete the files in the /tmp/pagespeed/ directory to take effect on the server

nginx module download address: https://github.com/apache/incubator-pagespeed-ngx/releases

Environment dependency package address: http://linuxsoft.cern.ch/cern/slc6X/x86_64/

Environment dependency package address: http://linux.web.cern.ch/linux/devtoolset/#install

Google's tool to test page speed: https://developers.google.com/speed/pagespeed/insights/

Google's tool for testing page speed (pwa): https://developers.google.com/web/tools/lighthouse/

Official installation tutorial: https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

This installation reference: http://www.btfw.org/linux/576.html

 

Another version of pagespeed.conf

# on 启用，off 关闭
pagespeed on;
# memcached优化,如果没有memcached优化请删去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By JaxsonWang";

# 开启 https
#pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件（空间大小、时限）
pagespeed FileCachePath "/var/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤WordPress的/wp-admin/目录(可选配置，可参考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 过滤typecho的/admin/目录(可选配置，可参考使用)
pagespeed Disallow "*/admin/*";

# 移除不必要的url前缀，开启可能会导致某些自动加载功能失效
#pagespeed EnableFilters trim_urls;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;
# 压缩CSS
pagespeed EnableFilters rewrite_css;
# 合并CSS
pagespeed EnableFilters combine_css;
# 重写CSS，优化加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# google字体直接写入html 目的是减少浏览器请求和DNS查询
pagespeed EnableFilters inline_google_font_css;
# 压缩js
pagespeed EnableFilters rewrite_javascript;
# 合并js
pagespeed EnableFilters combine_javascript;
# 优化内嵌样式属性
#pagespeed EnableFilters rewrite_style_attributes;
# 压缩图片
#pagespeed EnableFilters rewrite_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 雪碧图片，图标很多的时候很有用
#pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;

# 不能删
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }