本站重新定位为
分享技术和经验的个人博客

宝塔7.1.1面板开启ngx_pagespeed教程 支持.webp格式图片

ngx_pagespeed是一个开源的Nginx模块,由Google创建,通过重写网页来减少延迟和带宽,从而帮助提高Web速度。宝塔面板默认已经支持了ngx_pagespeed,但是这个支持是半支持,没有完全启用。

因为WebP图片已经是一种趋势了,现在已经有很知名的网站支持了这种格式的图片,而Google出品的PageSpeed模块有一个功能,会自动将图像转换成WebP格式或者是浏览器所支持的其它格式。

所以我们只需要编译这个PageSpeed模块然后在nginx中开启这个功能,就可以让nginx来判断是否需要输出webp格式的图片,无疑这也是一种比较高效的方法。所以这篇文章就来水一水,学习本文之前,我们可以了解下如何编译安装ngx_pagespeed

如果你使用WordPress,可以看这篇文章:WordPress开启WebP图片的方法 支持 WebP格式图片上传

nginx.sh

安装之前请把自己的宝塔面板升级为最新版,然后在面板中卸载nginx

1》下载

宝塔面板找到路径:/www/server/panel/install

将原来的nginx.sh改成nginx.sh.bak,然后执行下面的命令下载官方的安装shell(因为需要修改东西)。

wget http://download.bt.cn/install/0/nginx.sh

2》设置nginx.sh

下载完毕后,我们要修改一个地方。

搜索./configure,找到下图所示位置,添加如箭头所示内容,内容如下。

--add-module=${Setup_Path}/src/ngx-pagespeed

3》编译安装

上面的做好之后,我们还需要编译nginx,选择好自己的nginx版本,执行下面的命令,如下:

sh /www/server/panel/install/nginx.sh install 1.17

配置总nginx设置

现在我们需要在nginx中开启ngx_pagespeed的相关设置,根据情况选择简单版或高级版设置。

简单版设置

在nginx的http端,放入如下命令:

pagespeed on;

pagespeed RespectVary off;#不合并js文件

pagespeed FileCachePath /var/cache/ngx_pagespeed;#缓存路径

高级版设置

在nginx的http端,放入如下命令:

# 启用ngx_pagespeed 开始

pagespeed on;

#列出优化过程中所有失败的请求,debug 时很有用,失败的信息会打印到 error log 里

#pagespeed ListOutstandingUrlsOnError 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 daniao.org”;

# HTML页面链接转小写(SEO 优化,推荐)

pagespeed LowercaseHtmlNames on;

# 重置 HTTP Vary 头 除非有特殊需求,建议不开启,默认配置往往是最佳配置

# pagespeed RespectVary on;

#PageSpeed能够根据响应头中指定的任何内容安全策略调整其优化

pagespeed HonorCsp on;

#PageSpeed 默认遵守 Cache-Control: no-transform 协议, 表示不可被中间代理软件改写,如果想让优化效果最大化,可以关闭

#pagespeed DisableRewriteOnNoTransform off;

# 启用 样式属性/CSS/JavaScript/Images 重写,其它功能的先决开关

pagespeed EnableFilters rewrite_style_attributes,rewrite_css,rewrite_javascript,rewrite_images;

#重写CSS文件,以便首先加载渲染页面的CSS规则。

pagespeed EnableFilters prioritize_critical_css;

###########缓存 ##########

#相当于同时使用了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########

# 启用JavaScript库卸载 #谷歌被QQ,并不确定这个设置有没有副作用

# pagespeed EnableFilters canonicalize_javascript_libraries;

# 把多个CSS文件合并成一个CSS文件(比较容易引起主题版面混乱,所以我禁用了

#pagespeed EnableFilters combine_css;

# 重写CSS,首先加载渲染页面的CSS规则

pagespeed EnableFilters prioritize_critical_css;

# 把多个JavaScript文件合并成一个JavaScript文件,禁用原因同上,大家可以酌情开启

#pagespeed EnableFilters combine_javascript;

# 删除带默认属性的标签

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://cdn.daniao.org/1.gif”;

# 启用图片优化机制(主要是 inline_images, recompress_images, convert_to_webp_lossless(这个命令会把PNG和静态Gif图片转化为webp), and resize_images.)

pagespeed EnableFilters rewrite_images;

#组合 convert_gif_to_png, convert_jpeg_to_progressive, convert_jpeg_to_webp, convert_png_to_jpeg, jpeg_subsampling, recompress_jpeg, recompress_png, recompress_webp, #strip_image_color_profile, and strip_image_meta_data.

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 结束

配置网站nginx设置

配置完总设置之后,继续配置网站nginx设置。

# 启用ngx_pagespeed 开始

pagespeed EnableFilters rewrite_domains;

pagespeed Domain https://www.daniao.org;

pagespeed MapRewriteDomain https://cdn.tiandynasty.cn https://www.tiandynasty.cn;

# 不能删 。确保对pagespeed优化资源的请求进入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 结束

大功告成

完成上述步骤后,你的站点已经可以显示WebP图片了。

赞(0)
这篇文章为天际博客(天朝世纪)原创,转载请注明。天际部落 » 宝塔7.1.1面板开启ngx_pagespeed教程 支持.webp格式图片