WordPress基础教程

Nginx增加Google PageSpeed模块

苏工 avatarBy 苏工
14
image of 基础篇:Nginx增加Google PageSpeed模块

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官网安装最新版本

官网教程:https://lnmp.org/install.html

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的优化项。

作者:

苏工

SEO专家兼数据分析师,具备深厚的编程知识。擅长利用Python和前端技术(JavaScript、HTML、CSS)开发优化策略,提升网站排名和用户体验。精通GA4和谷歌标签管理器,熟练进行数据分析和解读,以数据驱动决策,优化SEO成效。结合技术能力和市场洞察,为电子商务和在线品牌打造全方位的增长解决方案。

更多文章
Charlie Sue profile picture.