pagespeed(GitHub)是 Goolge 为 Apache 和 nginx 开发的前端优化扩展模块,其中适用 Apache 环境的叫 mod_pagespeed,适用于 nginx 环境的叫 ngx_pagespeed。
pagespeed 功能简介
pagespeed 的功能包括但不限于以下方面:
优化传输带宽(过滤)(压缩图片、CSS、JS文件,去除html空白、注释...)、降低请求(CSS、JS文件合并、图片雪碧、识别并重定向常用JS库、缓存控制)、域名映射(支持CDN)、提升客户端体验(图片预加载、延迟加载,移动端图像优化),同时还提供对 https 的支持。
nginx 下 pagespeed 的编译安装
安装方法 Google pagespeed 网站上有详细介绍,复制过来方便不能翻墙的朋友查看。
安装依赖
RedHat, CentOS, or Fedora
sudo yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel
Ubuntu or Debian
sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev
下载 ngx_pagespeed
目前 ngx_pagespeed 最新的版本是 1.13.35.2-stable(需要 gcc ≥ 4.8 或者 clang ≥ 3.3,如果不符合要求请升级 gcc 或 clang,或者继续使用旧版:1.9.32.11),想使用其它版本直接用新版本号替换掉下面的 1.13.35.2-stable
即可。
#[check the release notes for the latest version] NPS_VERSION=1.13.35.2-stable cd wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip unzip v${NPS_VERSION}.zip nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d) cd "$nps_dir" NPS_RELEASE_NUMBER=${NPS_VERSION/beta/} NPS_RELEASE_NUMBER=${NPS_VERSION/stable/} psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.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}) # extracts to psol/
下载 nginx 并编译 ngx_pagespeed 模块
编译 ngx_pagespeed 模块分两种情况:1、全新安装;2、当前版本添加。
1、全新安装 nginx 并加入 ngx_pagespeed 模块
下面是全新安装 nginx 1.16.1,改成需要的版本即可。
cd NGINX_VERSION=1.16.1 cd wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz tar -xvzf nginx-${NGINX_VERSION}.tar.gz cd nginx-${NGINX_VERSION}/ ./configure --add-module=$HOME/ngx_pagespeed-${NPS_VERSION} ${PS_NGX_EXTRA_FLAGS} make sudo make install
2、当前版本添加 ngx_pagespeed 模块
如果当前服务器已经安装了 nginx 则需要先查看当前的 nginx 版本号:
nginx -V
确定了当前服务器的 nginx 版本号,即可使用下面的代码编译安装了,./configure 中的 module 请根据需要进行配置:
NGINX_VERSION=1.16.0 wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz tar -xvzf nginx-${NGINX_VERSION}.tar.gz cd nginx-${NGINX_VERSION}/ ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module --add-module=/root/incubator-pagespeed-ngx-1.13.35.2-stable make sudo make install
配置 ngx_pagespeed
配置用的过滤参数这里有详细说明:http://ngxpagespeed.com/
创建配置文件
在 /usr/local/nginx/conf/ 添加 pagespeed 配置文件:
vi /usr/local/nginx/conf/pagespeed.conf
根据实际需求加入类似下面的配置参数:
# on 启用,off 关闭 pagespeed on; # 重置 http Vary 头 pagespeed RespectVary on; # html字符转小写 pagespeed LowercaseHtmlNames on; # 压缩带 Cache-Control: no-transform 标记的资源 #pagespeed DisableRewriteOnNoTransform off; # 相对URL #pagespeed PreserveUrlRelativity on; pagespeed XHeaderValue "Powered By ngx_pagespeed"; # 开启 https #pagespeed FetchHttps enable; # 配置服务器缓存位置和自动清除触发条件(空间大小、时限) pagespeed FileCachePath "/var/ngx_pagespeed/"; pagespeed FileCacheSizeKb 2048000; pagespeed FileCacheCleanIntervalMs 43200000; pagespeed FileCacheInodeLimit 500000; # 过滤规则 pagespeed RewriteLevel PassThrough; # 不需过滤的目录或文件 pagespeed Disallow "*/wp-admin/*"; pagespeed Disallow "*/wp-login.php*"; # 移除不必要的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; # 不将规则应用在 wp-admin目录 和 wplogin.php页面 pagespeed Disallow "*/wp-admin/*"; pagespeed Disallow "*/wp-login.php*"; # 风险指数高,不建议开启 #pagespeed EnableFilters local_storage_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_global_statistics { allow 127.0.0.1; deny all; } location /ngx_pagespeed_message { allow 127.0.0.1; deny all; } location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; } pagespeed StatisticsPath /ngx_pagespeed_statistics; pagespeed MessagesPath /ngx_pagespeed_message; pagespeed ConsolePath /pagespeed_console; pagespeed AdminPath /pagespeed_admin; # 控制台 可通过 http://domain.com/ngx_pagespeed_admin 来查看控制台 pagespeed Statistics on; pagespeed StatisticsLogging on; pagespeed LogDir /var/log/pagespeed; location /pagespeed_console { allow 127.0.0.1; deny all; } pagespeed AdminPath /ngx_pagespeed_admin; location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; } # 日志限制 pagespeed StatisticsLoggingIntervalMs 60000; pagespeed StatisticsLoggingMaxFileSizeKb 1024;
按ESC
键,输入:wq
保存并退出。
引入 pagespeed 到网站配置文件
打开网站的配置文件,如:
vi /usr/local/nginx/conf/vhost/nanshanxia.com.conf
按i
加入
include pagespeed.conf;
,最后再ESC
:wq
保存退出。
检查 nginx 配置
/usr/local/nginx/sbin/nginx -t
返回
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
说明没有问题。
重启 nginx 使 pagespeed 生效
接着重启 nginx 让 pagespeed 生效
service nginx restart
验证 pagespeed 是否生效
使用 curl 验证 pagespeed 是否生效:
curl -I 'http://muguayuan.com' | grep X-Page-Speed
然后再访问网站,速度就有提升了。
启用 pagespeed 后 WP Super Cache 这个插件基本就没什么作用了,所以,又可以减掉一个插件了。
据说多用一个插件就是在服务器多开一个后门,还增加服务器压力
一般情况下都是能不用插件就不用插件吧。
@Betty 嗯 目前还有四个插件