Nginx-宝塔面板部署Ngx_Pagespeed模块

2021年12月15日 4点热度 0人点赞 0条评论

Ngx_Pagespeed是Google 推出的一个 Nginx 的扩展模块，可以加速网站，减少页面加载时间，自动将一些提升web性能的实践应用到网页和相关的资源（CSS、JS和图片）上，无需修改内容和流程。它可以自动将Web性能最佳做法应用于页面和关联资源，而无需修改现有内容或工作流。您可以使用Ngx-pagepeed模块轻松优化各种文件，如CSS，HTML，png和jpg。

一.下载PageSpeed编译源码

根目录下ssh直接输入：

cd /root/
bash <(curl -f -L -sS https://ngxpagespeed.com/install)\
     --nginx-version latest

先下载出源码，出现第一个需要你按回车的时候按CTRL + C停止，然后回来根目录即可看到下载完成的编译源码

二.编译安装

卸载掉原先安装的Nginx，重新编译安装Nginx

模块参数填入：

 --add-module=/root/incubator-pagespeed-ngx-latest-stable

注意--add前面一定要有一个空格！！！

等待安装完成

三.验证安装

ssh输入命令：查看是否有Ngx_Pagespeed模块

/www/server/nginx/sbin/nginx -V

带有--add-module=/root/incubator-pagespeed-ngx-latest-stable模块即可~

四.修改网站配置文件以启用Ngx_Pagespeed

在网站配置文件添加内容：（不是一定要全部添加，按需启用）

    pagespeed on;

    # 重置 http Vary 头
    pagespeed RespectVary on;

    # html字符转小写
    pagespeed LowercaseHtmlNames on;

    # 压缩带 Cache-Control: no-transform 标记的资源
    pagespeed DisableRewriteOnNoTransform off;

    # 相对URL
    pagespeed PreserveUrlRelativity on;

    pagespeed XHeaderValue "Powered By Rosmontis.com";

    # 开启 https
    pagespeed FetchHttps enable;

    # 配置服务器缓存位置和自动清除触发条件，缓存文件夹如果不存在则需要自行创建，建议放在内存中
    pagespeed FileCachePath "/tmp/cache/ngx_pagespeed/";
    pagespeed FileCacheSizeKb 2048000;
    pagespeed FileCacheCleanIntervalMs 43200000;
    pagespeed FileCacheInodeLimit 500000;

    # 过滤规则
    pagespeed RewriteLevel PassThrough;
    pagespeed RewriteLevel OptimizeForBandwidth;
    # 过滤WordPress的/wp-admin/目录(可选配置，可参考使用)
    pagespeed Disallow "*/admin/*";
    pagespeed Disallow "*/wp-login.php*";

    # 移除不必要的url前缀，开启可能会导致某些自动加载功能失效
    #pagespeed EnableFilters trim_urls;

    # 移除 html 空白
    pagespeed EnableFilters collapse_whitespace;

    # 移除 html 注释
    pagespeed EnableFilters remove_comments;

    # DNS 预加载
    pagespeed EnableFilters insert_dns_prefetch;

    # 压缩CSS
    pagespeed EnableFilters rewrite_css;

    # 合并CSS
    pagespeed EnableFilters combine_css;

    # 重写CSS，优化加载渲染页面的CSS规则
    pagespeed EnableFilters prioritize_critical_css;
    # google字体直接写入html 目的是减少浏览器请求和DNS查询
    pagespeed EnableFilters inline_google_font_css;

    # 压缩js
    pagespeed EnableFilters rewrite_javascript;

    # 合并js
    pagespeed EnableFilters combine_javascript;

    # 优化内嵌样式属性
    pagespeed EnableFilters rewrite_style_attributes;

    # 压缩图片
    pagespeed EnableFilters rewrite_images;
    # 更换被导入文件的@import，精简CSS文件
 pagespeed EnableFilters flatten_css_imports;
 pagespeed CssFlattenMaxBytes 5120;
 # 启用JavaScript缩小机制
 pagespeed EnableFilters rewrite_javascript;
    # 不加载显示区域以外的图片
    pagespeed LazyloadImagesAfterOnload off;

    # 图片预加载
    pagespeed EnableFilters inline_preview_images;

    # 移动端图片自适应重置
    pagespeed EnableFilters resize_mobile_images;

    # 图片延迟加载
    pagespeed EnableFilters lazyload_images;

    # 扩展缓存 改善页面资源的可缓存性
    pagespeed EnableFilters extend_cache;
    # 雪碧图片，图标很多的时候很有用
    pagespeed EnableFilters sprite_images;

#Memcached缓存设置
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "127.0.0.1:11211";

# 延时加载图片
pagespeed EnableFilters lazyload_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;


# 图片预加载
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;	
    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
    location ~ "^/ngx_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; }
    
    # 控制台 可通过 http://domain.com/ngx_pagespeed_admin 来查看控制台
pagespeed Statistics on;
pagespeed StatisticsLogging on;

pagespeed LogDir /var/log/pagespeed;

location /pagespeed_console {
    allow 127.0.0.1;
    deny all;
}

pagespeed AdminPath /ngx_pagespeed_admin;

location ~ ^/pagespeed_admin {
    allow 127.0.0.1;
    deny all;
}

打开控制台， XHeader的值为 pagespeed XHeaderValue "Powered By Rosmontis.com";中的 Powered By Rosmontis.com 即可，即启用生效，可自由修改

该插件对图片较多的网站优化效果明显，像我的网站用这个TTF反而下降的，可以启用需要的功能，按需使用即可

不建议低配云服务器使用！！！

Nginx-宝塔面板部署Ngx_Pagespeed模块

文章评论