Nginx启用PageSpeed加速网站静态资源

简介

PageSpeed是谷歌研发的一个基于Web服务器的插件。用于优化网站静态资源,提升网站响应速度的一个实用工具。Apache和Nginx都可以支持。本站已启用PageSpeed用于优化CSS和JS文件,并与Memcached内存缓存配合使用。本文仅交流如何在搭载Nginx的网站上启用PageSpeed工具,以Oneinstack一键包搭建的LNMP环境作为示例。(本教程不支持AMH,宝塔等面板,仅支持LNMP、Oneinstack一键安装包)。

下载

首先安装相关的依赖

Ubuntu/Debian:

apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

CentOS/RHRL:

yum install gcc-c++ pcre-devel zlib-devel make unzip

下载PageSpeed的稳定版,以及PSOL支持库。

cd /usr/local/src
wget https://github.com/pagespeed/ngx_pagespeed/archive/latest-stable.tar.gz
tar -xvzf latest-stable.tar.gz
mv ngx_pagespeed-latest-stable ngx_pagespeed
cd ngx_pagespeed
wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz
tar -xzvf 1.11.33.4.tar.gz && rm -rf 1.11.33.4.tar.gz
./scripts/pagespeed_libraries_generator.sh > /usr/local/nginx/conf/pagespeed_libraries.conf

安装

因为需要将PageSpeed编译进入Nginx,所以需要先把原本编译Nginx的configure arguments复制下来。使用此命令:

nginx -V

然后你会得到类似于下面的东西:

--prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2j --with-pcre=../pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc

这个时候,我们进入nginx的源码包,oneinstack可以参考我这里的:

cd /root/oneinstack/src
tar -xf nginx-1.10.2.tar.gz
cd nginx-1.10.2

这个时候请注意,我们要重新编译Nginx,需要之前复制下来的那一堆东西(叫做configure arguments):

./configure 加上你之前复制的内容 再加上 --add-module=/usr/local/src/ngx_pagespeed

举个例子,拼接好了之后,你会看到这样的东西:

./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2j --with-pcre=../pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed

然后直接回车,等完成后再执行

make && make install && service nginx restart

就安装完成了。

配置和启用

首先打开你的虚拟主机配置文件,例如我这里的Oneinstack就在 /usr/local/nginx/conf/vhost/zhujiboke.com.conf

vim /usr/local/nginx/conf/vhost/zhujiboke.com.conf

server{}的大括号内,粘贴以下部分:

# 启用ngx_pagespeed    
pagespeed on;    
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;    
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;
# 把多个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; 

# 禁止pagespeed 处理WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
# 禁止pagespeed 处理typecho的/admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/admin/*";

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; }

如果你有在装Oneinstack的时候选择安装了Memcached,也可以使用Memcached来进行缓存。只需要再添加:

pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";

最后保存下文件,创建和授权下缓存文件夹就好了~

mkdir -p /tmp/cache/ngx_pagespeed_cache
chown -R www:www /tmp/cache/ngx_pagespeed_cache
service nginx restart

原创文章,作者:雨落无声,如若转载,请注明出处:https://www.zhujiboke.com/2017/01/125.html

Aimer进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

评论列表(2条)

  • Aimer
    Aimer 2017年5月8日 下午4:29

    如果是OpenResty应该去哪里编译呢?
    我一直编译不成功
    Nginx -V返回的参数不能用于编译

    • 雨落无声
      雨落无声 回复 Aimer 2017年5月9日 下午4:52

      OpenResty 你可以去安装它的脚本里找到真正的编译参数。
      如果是 Oneinstack,你可以查看include/nginx.sh 里面的openresty编译参数

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息