PageSpeed Insights给网站测速时,经常提示压缩代码,优化图片,可以通过给Nginx增加PageSpeed模块,自动优化站点资源,包括合并压缩css,js,优化图片等。
PageSpeed模块是Google开源服务器模块,可自动优化您的站点。包括合并压缩CSS,js,异步加载js,优化图像,自动转化图片为WEBP格式。使用Google PageSpeed能够显著提高网站加载速度。
你可能还需要的其他网站测速工具:
1.https://developers.google.com/speed/pagespeed/insights/
2.https://gtmetrix.com/
3.http://www.webpagetest.org/
4.https://tools.pingdom.com/
You should note that the title will be automatically capitalized.
准备
- 具有SSH操作能力
- 熟悉基本linux命令
下载ngx_pagespeed
本文使用1.13.35.2-stable版本,如需其他版本请自行修改配置,方法类似。
PageSpeed安装需要root权限,在终端内运行:
1.1 安装依赖项
apt-get update && apt-get upgrade && apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev
1.2 安装说明
下载ngx_pagespeed, 终端内运行
NPS_VERSION=1.13.35.2-stable
NPS_RELEASE_NUMBER=${NPS_VERSION/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"
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})
此时,root目录下会增加一个名为incubator-pagespeed-ngx-1.13.35.2-stable
的文件夹。
安装LNMP
本文使用lnmp1.5版本
请参照lnmp官网安装最新版本
cd
wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz && cd lnmp1.5
修改lnmp1.5目录下lnmp.conf
在Nginx_Modules_Options
中加入pagespeed module
的绝对路径。注意修改版本号为你选择的。本例中下载在root目录下,添加后如下:
Nginx_Modules_Options=\'--add-module=/root/incubator-pagespeed-ngx-1.13.35.2-stable\'
保存后执行./install.sh lnmp
按照LNMP官网教程继续安装。
运行nginx -V
查看nginx版本可看到已成功加载pagespeed模块。
如果你已安装LNMP环境,只需修改lnmp1.5目录下的lnmp.conf在Nginx_Modules_Options
中加入PageSpeed module的绝对路径,
执行./upgrade.sh nginx
选择输入ng版本,编译即可。
模块配置
1.配置conf
在/usr/local/nginx/conf/vhost
目录下找到网站对应的conf
,在server
标签内增加如下代码
pagespeed on;
# Needs to exist and be writable by nginx. Use tmpfs for best performance.
pagespeed FileCachePath /var/ngx_pagespeed_cache;
# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
保存后,执行lnmp nginx reload
使配置生效。
下面是我用过的Server配置,仅供参考。
server
{
listen 80;
#listen [::]:80;
server_name www.sufob.com sufob.com;
rewrite ^(.*)$ http://blog.sufob.com/$1 permanent;
}
server
{
listen 443 ssl http2;
#listen [::]:443 ssl http2;
server_name sufob.com ;
if ($host != 'sufob.com' ) {
rewrite ^/(.*)$ http://blog.sufob.com/$1 permanent;
}
index index.html index.htm index.php default.html default.htm default.php;
root /home/wwwroot/sufob.com;
ssl on;
ssl_certificate /usr/local/nginx/conf/ssl/sufob.com/fullchain.cer;
ssl_certificate_key /usr/local/nginx/conf/ssl/sufob.com/sufob.com.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers "EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5";
ssl_session_cache builtin:1000 shared:SSL:10m;
# openssl dhparam -out /usr/local/nginx/conf/ssl/dhparam.pem 2048
ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;
include rewrite/wordpress.conf;
#error_page 404 /404.html;
# Deny access to PHP files in specific directory
#location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }
include enable-php-pathinfo.conf;
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 7d;
}
location ~ /.well-known {
allow all;
}
location ~ /\.
{
deny all;
}
access_log /home/wwwlogs/sufob.com.log;
}
2.效果验证
添加PageSpeed模块前后网站js,css对比。
添加PageSpeed模块前后网站js,css对比-前
添加PageSpeed模块前后网站js,css对比-后
css均为压缩后,带pagespeed标识。
pagespee自动将jpg图片转换成webp格式
结论
启用Google PageSpeed能够显著提高谷歌测试的评分,页面打开速度提升明显,可以根据自己网站需求,量身定制PageSpeed的优化项。