本文共 3976 字，大约阅读时间需要 13 分钟。

记录：项目中遇到将图片支持webp格式，找到可通过 pagespeed 实现。

一、下载安装pagespeed：

cd /usr/local/src方式1：下载压缩包并解压wget -O- https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz | tar -xz #方式2：下载压缩包#wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz #tar -zxvf  v1.13.35.2-stable.tar.gzcd incubator-pagespeed-ngx-1.13.35.2-stable/wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gztar -zxvf 1.13.35.2-x64.tar.gz

二、编译nginx：

--------br压缩、http2、openssl-1.1.1g 、trim、pagespeed、--------------./configure   --add-module=/usr/local/src/ngx_brotli  --with-http_v2_module --with-openssl=/usr/local/src/openssl-1.1.1g  --add-module=/usr/local/src/ngx_http_trim_filter_module --add-module=/usr/local/src/incubator-pagespeed-ngx-1.13.35.2-stable

三、将编译好的nginx配置文件替换项目中的nginx配置文件：

1，关闭nginx：./nginx -s stop (进到/usr/local/openresty/nginx/sbin目录执行)

四、配置pagespeed：

在https块里面，配置将图片支持webp格式，且只处理图片：

#开启    pagespeed on;    pagespeed FileCachePath /usr/local/openresty/ngx_pagespeed_cache;    #重置过滤器    pagespeed RewriteLevel PassThrough;    #https协议需要添加此行    pagespeed FetchHttps enable,allow_self_signed,allow_unknown_certificate_authority,allow_certificate_not_yet_valid;    #开启图片过滤器    pagespeed EnableFilters rewrite_images;    #支持webp    pagespeed EnableFilters convert_gif_to_png,convert_png_to_jpeg,convert_jpeg_to_webp;    #关闭修改header缓存控制：cache-control。pagespeed默认会修改header的cache-control，将与设置的浏览器缓存功能冲出，需要关闭。    pagespeed ModifyCachingHeaders off;

图示效果：

五、其他配置：

# Rewrite 级别 出于安全考虑 这里尽量不要修改pagespeed RewriteLevel PassThrough;#pagespeed RewriteLevel CoreFilters;# 移除X-Page-Speed 头#pagespeed DisableFilters add_head;pagespeed RespectVary off;#pagespeed ModifyCachingHeaders off;#pagespeed XHeaderValue "Powered By Pagespeed";#Header unset X-Mod-Pagespeed;add_header X-Powered-By "EasyEngine 2.2.3"; # 自动去除缩进和页面中的注释  if 注释除外pagespeed EnableFilters collapse_whitespace,remove_comments; # 去除多余的空格和注释,自动合并多个css,js文件pagespeed EnableFilters rewrite_css;pagespeed EnableFilters rewrite_javascript;pagespeed EnableFilters combine_css;pagespeed EnableFilters combine_javascript; #pagespeed EnableFilters inline_css;pagespeed CssInlineMaxBytes 4096;pagespeed EnableFilters inline_javascript;pagespeed JsInlineMaxBytes 4096; # 删除带默认属性的标签,改善资源的可缓存性pagespeed EnableFilters elide_attributes;pagespeed EnableFilters extend_cache; # 更换被导入文件的@import，精简CSS文件   pagespeed EnableFilters flatten_css_imports;pagespeed CssFlattenMaxBytes 5120; #启用图片优化机制 ,延时加载客户端看不见的图片,自动缩放图片到合适大小,自动压缩图片pagespeed EnableFilters rewrite_images;pagespeed EnableFilters inline_images;pagespeed EnableFilters lazyload_images;pagespeed EnableFilters resize_images;pagespeed EnableFilters recompress_images; # 重写CSS，首先加载渲染页面的CSS规则pagespeed EnableFilters convert_meta_tags;pagespeed EnableFilters prioritize_critical_css; # 支持webppagespeed EnableFilters convert_gif_to_png;pagespeed EnableFilters convert_png_to_jpeg;pagespeed EnableFilters convert_jpeg_to_webp; # 预解析DNS查询   pagespeed EnableFilters insert_dns_prefetch; location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
    add_header "" ""; }#location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { }location ~ "^/pagespeed_static/" {
    }location ~ "^/ngx_pagespeed_beacon$" {
    }location /ngx_pagespeed_statistics {
    allow 127.0.0.1; deny all; }location /ngx_pagespeed_message {
    allow 127.0.0.1; deny all; }

六、优势：

• 图像优化：剥离元数据、动态调整，重新压缩
• CSS和JavaScript压缩、合并、级联、内联
• 小资源内联
• 推迟图像和JavaScript加载
• 对HTML重写、压缩空格、去除注释等
• 提升缓存周期

作为Nginx组件，ngx_pagespeed将重写你的网页，让用户以更快的速度进行访问。重写的工作包括压缩图片、缩减CSS和JavaScript、扩展缓存时间，同样还包括其它一些最佳实践：

• 优化缓存----整合应用程序的数据和逻辑
• 最小化round-trip次数----削减连续的请求/响应周期数
• 最小化请求开销----削减上传大小
• 最小化负载大小----削减响应、下载及缓存页面大小
• 优化浏览器渲染----改善浏览器页面布局
• 移动方面的优化----优化站点移动网络和设备方面的相关特性

转载地址：https://blog.csdn.net/weixin_43652106/article/details/107940413 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！