网站优化之宝塔面板Nginx编译pagespeed实现webp化,目的为通过重写网页来减少延迟和带宽,从而帮助提高Web速度。Ngx_pagespeed是一个开源的Nginx模块,由Google创建,主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化css、js以及图片的过程。

单核处理器不推荐使用此模块,推荐Nginx fastcgi_cache

Nginx fastcgi_cache:https://blog.leshans.eu.org/p/159/

Ngx_pagespeed功能简介

  1. 图像优化:剥离元数据、动态调整,重新压缩
  2. CSS和JavaScript压缩、合并、级联、内联
  3. 推迟图像和JavaScript加载
  4. 对HTML重写、压缩空格、去除注释等
  5. 提升缓存周期

缺点:可能因为服务器端的优化而使系统增加负载,但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的

pagespeed官网文档:https://www.modpagespeed.com/doc/configuration

项目:https://github.com/apache/incubator-pagespeed-ngx/

1.宝塔面板编译Ngx_pagespeed

1)首先卸载原有Nginx,然后点击“编译安装”,点击添加自定义模块

Pasted image 20240213002542

2)添加自定义模块具体填写,具体看图:

Pasted image 20240213002557

1
2
3
4
5
6

模块名称:pagespeed

模块描述:pagespeed

模块参数: --add-module=/www/server/ngx_pagespeed

前置脚本:#具体ngx_pagespeed前置脚本代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
cd /www/server
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.zip
unzip v1.13.35.2-stable.zip
rm v1.13.35.2-stable.zip
NPS_DIR=$(find . -name "*pagespeed-ngx-1.13.35.2-stable" -type d)
mv $NPS_DIR ngx_pagespeed
cd ngx_pagespeed
NPS_RELEASE_NUMBER=${1.13.35.2-stable/stable/}
PSPL_URL=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}x64.tar.gz
[ -e scripts/format_binary_url.sh ]
PSPL_URL=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${PSPL_URL}
tar -xzvf $(basename ${PSPL_URL})
rm $(basename ${PSPL_URL})

3)全部放置好后,勾选,提交

Pasted image 20240213002749

4)安装好的效果如图:

编译安装速度有点慢,需要等待,安装好可以在ssh执行命令:nginx -V

Pasted image 20240213002802

看到红框的位置有pagespeed,说明已经顺利编译安装好了~

2.网站Nginx_pagespeed优化配置

1)Nginx配置

安装好之后,打开Nginx配置,加入以下代码(注意位置)

Pasted image 20240213002843

下方中缓存文件位置请提前创建好:/tmp/ngx_pagespeed_cache(这里也可以放到内存里面,如果你的磁盘IO很慢的话建议采用此方式,毕竟内存的读写速度非常快)

代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# 启用ngx_pagespeed 开始
pagespeed on;
#路径请提前创建好,可以放在内存也可以放在临时文件夹中
pagespeed CreateSharedMemoryMetadataCache /tmp/ngx_pagespeed_cache 51200;
pagespeed DefaultSharedMemoryCacheKB 51200;
pagespeed FileCachePath /tmp/ngx_pagespeed_cache;
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤器级别(自定义模式)
pagespeed RewriteLevel PassThrough;
# 一个标识而已(若在浏览器开发者响应标头看到此标识,则说明 PageSpeed 生效)
pagespeed XHeaderValue "Powered By xcbtmw.com";
# HTML页面链接转小写(SEO 优化,推荐)
pagespeed LowercaseHtmlNames on;
#PageSpeed能够根据响应头中指定的任何内容安全策略调整其优化
pagespeed HonorCsp on;
###########缓存 ##########
#相当于同时使用了extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;
#开启使用Redis(和memcached只能先其一)
#pagespeed RedisServer "127.0.0.1:6379";
# memcached优化,如果没有memcached优化请删去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "127.0.0.1:11211";
######## 过滤规则 ########
# 过滤不需要启用的目录或文件
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
pagespeed Disallow "*/vps-pingfen/";
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace; 
# 预解析DNS查询
 pagespeed EnableFilters insert_dns_prefetch;
 
########JS和CSS########
# 删除带默认属性的标签
 pagespeed EnableFilters elide_attributes;
# 更换被导入文件的@import,精简CSS文件
 pagespeed EnableFilters flatten_css_imports;
 pagespeed CssFlattenMaxBytes 5120;
# 启用JavaScript缩小机制
 pagespeed EnableFilters rewrite_javascript;
 
####### 图片########
# 延时加载图片
 pagespeed EnableFilters lazyload_images;
# 不加载显示区域以外的图片,下方这个是延迟加载图片,如果没有就注释掉
pagespeed LazyloadImagesAfterOnload off;
pagespeed LazyloadImagesBlankUrl "https://www.xcbtmw.com/1.gif";
# 启用图片优化机制
pagespeed EnableFilters recompress_images;
# 将JPEG图片转化为webp格式
 pagespeed EnableFilters convert_jpeg_to_webp;
# 将动画Gif图片转化为动画webp格式
 pagespeed EnableFilters convert_to_webp_animated;
 
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters responsive_images,resize_images;
pagespeed EnableFilters insert_image_dimensions;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters convert_jpeg_to_webp,convert_to_webp_lossless,convert_to_webp_animated;
pagespeed EnableFilters sprite_images;
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;
#让JS里引用的图片也加入优化
pagespeed InPlaceResourceOptimization on;     
pagespeed EnableFilters in_place_optimize_for_browser;           
  
# 启用ngx_pagespeed 结束

2)网站配置

打开对应网站的配置文件,在如图位置输入以下代码:

Pasted image 20240213003504

网站配置代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# 启用ngx_pagespeed 开始 
location ~ ".pagespeed.([a-z].)?[a-z]{2}.[^.]{10}.[^.]+" { add_header "" ""; }
location ~ "^/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_console { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }
# 启用ngx_pagespeed 结束

3)注意事项

  • memcached和redis没有的就注释掉
  • 仔细阅读注释

4.Ngx_pagespeed加速效果

开启后就可以看到图片被转成了webp格式,另外CSS和JS文件地址也会被重写

Pasted image 20240213003620

然后在咱们设置的缓存文件位置处也可以看到文件

Pasted image 20240213003713

5.清除Ngx_pagespeed缓存

手动删除或者命令行

1
2
3
4
#手动删除,该目录为你在nginx设置的缓存目录
rm -fr /tmp/ngx_pagespeed_cache/*
#或者由pagespeed清空缓存 5秒后开始
sudo touch /tmp/ngx_pagespeed_cache/cache.flush