Nginx安装Ngx_pagespeed加速

VPS

Nginx安装Ngx_pagespeed加速
ngx_pagespeed 是一个 Nginx 的扩展模块,可以加速网站,减少页面加载时间,它会自动将一些提升 web 性能的实践应用到网页和相关的资源(CSS、JS 和图片)上,无需修改内容和流程,对于前端开发人员来说,能省下许多功夫。需要注意的是,Ngx_pagespeed 这个模块对 Nginx 本身来说并不会带来性能上的优化,反而会加重服务器的负担,所以不建议小内存少内核的 VPS 使用。但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。
功能包括:

  • 图片优化:stripping、meta-data、dynamic resizing、recompression;
  • CSS&JavaScript 压缩、合并等;
  • 小资源的内联;
  • 推迟图片和 JS 的加载;
  • HTML 重写;
  • 延长缓存扩展。

安装

参考网站://modpagespeed.com/doc/build_ngx_pagespeed_from_source
因为服务器是 CentOs 6 的,所以采用以下方法:
Scientific Linux 6 provides gcc-4.8 packages that work on CentOS 6.

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip
sudo rpm --import //linux.web.cern.ch/linux/scientific6/docs/repository/cern/slc6X/i386/RPM-GPG-KEY-cern
sudo wget -O /etc/yum.repos.d/slc6-devtoolset.repo //linux.web.cern.ch/linux/scientific6/docs/repository/cern/devtoolset/slc6-devtoolset.repo
sudo yum install devtoolset-2-gcc-c++ devtoolset-2-binutils

Set the following variable before you build:

PS_NGX_EXTRA_FLAGS="--with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc"

构建

首先查看 Ngx_pagespeed 的最新版本//modpagespeed.com/doc/release_notes
截止目前,最新的版本为:1.12.34.2-stable

#进入 nginx 源码同级目录,比如在/usr/local/src
cd /usr/local/src/
#下载模块
wget //github.com/pagespeed/ngx_pagespeed/archive/v1.12.34.2-stable.zip
#解压
unzip v1.12.34.2-stable.zip
#下载 psol 优化库
cd ngx_pagespeed-1.12.34.2-stable/
#注意此处,psol/后面的为[PageSpeed 版本]-x[系统位数]
wget //dl.google.com/dl/page-speed/psol/1.12.34.2-x64.tar.gz
#解压 psol
tar -xzvf 1.12.34.2-x64.tar.gz

编译

#查看目前 Nginx 的版本
nginx -V
#重新编译 nginx,新增 pagespeed 模块
./configure(Nginx-V 已有的模块)--add-module=../ngx_pagespeed-1.12.34.2-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc(同时增加 PS_NGX_EXTRA_FLAGS)
#编辑成功后 make,注意不要 make install
#重命名 nginx 旧版本二进制文件
mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.old
#拷贝一份新编译的二进制文件
cp objs/nginx /usr/local/nginx/sbin/
#升级
make upgrade
#确认
nginx -V
#重新加载 Nginx
nginx -s reload

配置

需要在 Nginx 的 conf 文件中配置,在 server 代码块中启动 pagespeed,如果不知道加到哪,可以加入到root /var/www/html/;的后面即可。
更多设置参考://modpagespeed.com/doc/configuration
分享一下本站目前正在使用的:

pagespeed on;
        pagespeed EnableCachePurge on;
        pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;

        # 禁用 CoreFilters
        pagespeed RewriteLevel PassThrough;

        # srcset 图像优化
        pagespeed EnableFilters responsive_images;
        # css 格式改成.css 文件并缓存
        pagespeed EnableFilters outline_css;
        # js 格式改成.js 文件并缓存
        pagespeed EnableFilters outline_javascript;
        # 移动 script 标签上方的 CSS 元素
        pagespeed EnableFilters move_css_above_scripts;
        # 将 CSS 元素移动到 head 中
        pagespeed EnableFilters move_css_to_head;
        # 将多个 css 文件合并成一个
        pagespeed EnableFilters combine_css;
        # 重写 CSS 以精简优化
        pagespeed EnableFilters rewrite_css;
        # 重写任何 CSS 文件中引用的资源
        pagespeed EnableFilters fallback_rewrite_css_urls;
        # CSS 的 URL 重置
        pagespeed EnableFilters rewrite_style_attributes_with_url;
        # 更换被导入文件的@import,精简 CSS 文件
        pagespeed EnableFilters flatten_css_imports;
        # 重写 CSS,首先加载渲染页面的 CSS 规则
        pagespeed EnableFilters prioritize_critical_css;
        # 启用 JavaScript 缩小机制
        pagespeed EnableFilters rewrite_javascript;
        # 把多个 JavaScript 文件合并成一个 JavaScript 文件
        pagespeed EnableFilters combine_javascript;
        # 启用图片优化机制
        pagespeed EnableFilters rewrite_images;
        # 将 JPEG 转换为渐进式
        pagespeed EnableFilters convert_jpeg_to_progressive;
        # 内联图像
        pagespeed EnableFilters inline_images;
        # 减少 JPEG 次采样
        pagespeed EnableFilters jpeg_subsampling;
        # 删除 HTML 的注释
        pagespeed EnableFilters remove_comments;
        # 启用压缩空白过滤器
        pagespeed EnableFilters collapse_whitespace;
        # 删除带默认属性的标签
        pagespeed EnableFilters elide_attributes;
        # 改善 CSS 及 JS 及图像的可缓存性
        pagespeed EnableFilters extend_cache;
        # 改善资 PDF 的可缓存性
        pagespeed EnableFilters extend_cache_pdfs;
        # 预解析 DNS 查询
        pagespeed EnableFilters insert_dns_prefetch;
        # 允许更早取得重要资源
        pagespeed EnableFilters hint_preload_subresources;

然后,新增缓存文件夹,注意要与上面的 pagespeed FileCachePath 对应:

mkdir -p /tmp/cache/ngx_pagespeed_cache

完成

配置完成后 reload 是无效的,需要重启,即:

service nginx restart

管理页面及缓存

在 ngx_pagespeed_1.8.x 版本以后谷歌引入了 pagespeed 的管理页面,这样给缓存管理带来了很大的方便,配置也非常简单,在 Nginx 的 conf 配置文件中增加以下内容:

# 配置网页版后台,注意管理路径 pagespeed 的目录尽量修改成自己的
        pagespeed AdminPath /pagespeed;
        pagespeed StatisticsLogging on;
        pagespeed LogDir /tmp/cache/log/pagespeed;
        location ~ ^/pagespeed {
          allow all;
        }

保存以后再重启 nginx 应用配置。这样就可以用//域名/管理路径访问 pagespeed 的管理页面了。
Nginx安装Ngx_pagespeed加速

配置界面

Nginx安装Ngx_pagespeed加速

图表界面

效果

刷新一下前台,随便搜索下 pagespeed,可以发现源码大部分都已经被替换了:
Nginx安装Ngx_pagespeed加速
加载详情中可以看到,速度确实优化了:
Nginx安装Ngx_pagespeed加速
由于开启了 fastcgi_cache,那么 pagespeed 与其加速是没有冲突的,fastcgi_cache 是缓存到本地的文件,pagespeed 再进行后处理。通俗来说,就是当用户访问 WEB 时,Nginx 应该是先调用 fastcgi 缓存,然后再进行 pagespeed 优化处理,最后返回数据给用户。

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:11次,页面生成时间:0.032秒。