当前位置:论坛首页 > Linux面板 > 讨论

宝塔面板下nginx前端优化模块pagespeed编译使用教程

发表在 Linux面板2018-4-28 12:44 [复制链接] 31 13876

本帖最后由 老虎会游泳 于 2018-5-29 10:17 编辑

PageSpeed是nginx的的一个功能模块,由谷歌开发维护。主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化CSS,JS以及图片的过程.ngx_pagespeed对nginx的自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的.ngx_pagespeed模块的主要功能如下:


图像优化:剥离元数据,动态调整,重新压缩

CSS和JavaScript的压缩,合并,级联,内联

小资源内联

推迟图像和JavaScript的加载

对HTML重写,压缩空格,去除注释等

提升缓存周期


教程开始:

服务器环境为:centos7.4 +宝塔5.8.7 + nginx1.14版本,网站为织梦的一个临时测试站点


1:

备份nginx


#cd /www/server/nginx/sbin/nginx


#cp nginx nginx.bak


下载PageSpeed编译源码


#cd /root/


#bash <(curl -f -L -sS https://ngxpagespeed.com/install)\

     --nginx-version latest


(偷懒,直接用谷歌给出的这条一键安装编译的PageSpeed命令下载编译所需的文件并部署所需环境,出现第一个需要你按回车的时候按CTRL + C停止,然后回来根目录即可看到下载完成的编译源码)


2:

查看当前nginx的加载所的模块,在编译加载的PageSpeed模块的时候仍需加载这些模块(下面的路径是宝塔默认的nginx的路径,其他面板请自行更改路径)


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

11.jpg


3:宝塔安装nginx的之后,源码路径在www/server/nginx/src目录内,直接进入编译即可,没有nginx的源码请自行下载对应自己的版本


# cd /www/server/nginx/src


#./configure(这里有一个空格) +上图红圈中-V命令查到的nginx当前加载的模块 --add-module=/root/incubator-pagespeed-ngx-latest-stable(add-module前面是两个 - 号,后面是刚才下载的pagespeed模块路径)

#make4:编译完成
#rm -rf /usr/local/nginx/sbin/nginx
#cp objs /nginx/usr/local/nginx/sbin/
#service nginx restart
重启nginx的后至此编译替换nginx的步骤完成
下面是配置的PageSpeed的规则。
宝塔面板配置在单网站配置内
22.jpg

下面是我用的pagespeed配置,缓存路径为/var/cache/ngx_pagespeed,手动刷新缓存可以删掉这个目录然后重启nginx:
pagespeed on;
pagespeed FileCachePath /var/cache/ngx_pagespeed;
# setting
# X-Header 值,用于判断是否生效
pagespeed XHeaderValue "Powered By www.xxx.com";
# 压缩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;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 开启 https
pagespeed FetchHttps enable,allow_self_signed,allow_unknown_certificate_authority,allow_certificate_not_yet_valid;(2018.5.5更新,之前的配置在https的站点不是完全生效)
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;
# 优化内嵌样式属性
pagespeed EnableFilters rewrite_style_attributes;
# 压缩图片
pagespeed EnableFilters rewrite_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 雪碧图片,图标很多的时候很有用
pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters combine_javascript;
pagespeed XHeaderValue "Powered By ngx_pagespeed";
pagespeed SupportNoScriptEnabled false;
# filters
pagespeed RewriteLevel CoreFilters;
pagespeed EnableFilters remove_comments,collapse_whitespace;
# admin直接访问 <域名>/pagespeed_admin 就可以打开管理员界面了。
pagespeed Statistics on;
pagespeed StatisticsLogging off;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;
# Configuring the File Cache
pagespeed FileCacheSizeKb            1024000; # 1GB
pagespeed FileCacheCleanIntervalMs   3600000; # 1h
pagespeed FileCacheInodeLimit        500000;
# Configuring the in-memory LRU Cache
pagespeed LRUCacheKbPerProcess     1024;
pagespeed LRUCacheByteLimit        16384;
pagespeed HttpCacheCompressionLevel 3;
pagespeed EnableCachePurge on;


使用道具 举报 只看该作者 回复
发表于 2018-7-23 14:30:04 | 显示全部楼层
教程后面马虎了,最后删除替换nginx的路径写错,
是这个路径
rm -rf /www/server/nginx/sbin/ nginx
cp objs/nginx /www/server/nginx/sbin/
service nginx restart

编译那步也是./configure --prefix=/www/server/nginx+红圈内参数
使用道具 举报 回复 支持 反对
发表于 2019-9-5 10:54:47 | 显示全部楼层
卑鄙的我 发表于 2019-9-5 09:30
-bash: ./configure: No such file or directory
不知道咋整

最新的nginx1.17 已经加上此模块 ngixn.png
使用道具 举报 回复 支持 1 反对 0
发表于 2018-4-28 14:02:36 | 显示全部楼层
非常好的一篇教程,感谢楼主分享,也期待宝塔可以集成此插件,方便大家使用!

----------------------------------------------------------------------------------------------------
菜鸟团队技术博客点击联系
使用道具 举报 回复 支持 反对
发表于 2018-5-24 13:20:01 | 显示全部楼层
不知道什么时候能出,这都一个月了,还是没有此插件
使用道具 举报 回复 支持 反对
发表于 2018-5-24 14:10:54 | 显示全部楼层
Enjoy 发表于 2018-5-24 13:20
不知道什么时候能出,这都一个月了,还是没有此插件

宝塔暂时没有集成这个插件,需要自己编译到nginx中
使用道具 举报 回复 支持 反对
发表于 2018-5-24 18:01:20 | 显示全部楼层
非常需要 希望宝塔尽快支持
使用道具 举报 回复 支持 反对
发表于 2018-5-27 12:20:25 | 显示全部楼层
如图  这个怎么解决  试了nginx  和  tengine 都会出现这种情况! QQ截图20180527121740.png
使用道具 举报 回复 支持 反对
发表于 2018-5-29 10:12:12 | 显示全部楼层
1501940559ktgs 发表于 2018-5-27 12:20
如图  这个怎么解决  试了nginx  和  tengine 都会出现这种情况!

./configure   中间不要有空格
使用道具 举报 回复 支持 反对
发表于 2018-6-2 20:27:04 | 显示全部楼层
试了一下,但是不知道是不是有效,在网页html代码里没有看到pagespeed的字样,在线验证的方式只有GOOGLE的,又翻不了。。。
使用道具 举报 回复 支持 反对
发表于 2018-6-4 10:42:54 | 显示全部楼层
小新 发表于 2018-6-2 20:27
试了一下,但是不知道是不是有效,在网页html代码里没有看到pagespeed的字样,在线验证的方式只有GOOGLE的 ...

强制刷新两次,第一次安装会处理一下 之后就好了
使用道具 举报 回复 支持 反对
发表于 2018-6-5 09:41:35 | 显示全部楼层
本帖最后由 小新 于 2018-6-5 10:45 编辑

Stoping nginx... nginx: [emerg] unknown directive "pagespeed" in /www/server/panel/vhost/nginx/z.mxlog.com.conf:9
failed. Use force-quit
Starting nginx... nginx (pid 28517 12380 12379) already running.


有遇到过吗?按照流程做了,为什么会没有安装上模块呢?
使用道具 举报 回复 支持 反对
发表于 2018-6-5 11:59:22 | 显示全部楼层
小新 发表于 2018-6-5 09:41
Stoping nginx... nginx: [emerg] unknown directive "pagespeed" in /www/server/panel/vhost/nginx/z.mxl ...

/www/server/nginx/sbin/nginx -V 查看一下编译上没有  
使用道具 举报 回复 支持 反对
发表于 2018-6-5 13:38:20 | 显示全部楼层
老虎会游泳 发表于 2018-6-5 11:59
/www/server/nginx/sbin/nginx -V 查看一下编译上没有

把编译的文件放错地方了。
放在了/usr/local/nginx/sbin/nginx

使用道具 举报 回复 支持 反对
发表于 2018-7-3 22:02:52 | 显示全部楼层
安装成功了,js、css合并了这个比较好!但是图片被压缩成webp了 马赛克似的怎么关闭这个图片压缩?我把参数中图片压缩的参数去掉也不行啊哦  
使用道具 举报 回复 支持 反对
发表于 2018-7-4 11:03:21 | 显示全部楼层
赞一个!!!!

  
使用道具 举报 回复 支持 反对
发表于 2018-7-5 11:47:25 | 显示全部楼层
本帖最后由 老虎会游泳 于 2018-7-5 11:49 编辑
1501940559ktgs 发表于 2018-7-3 22:02
安装成功了,js、css合并了这个比较好!但是图片被压缩成webp了 马赛克似的怎么关闭这个图片压缩?我把参数 ...

webp正常来讲是最优的图片格式  体积小质量好,但是目前只有谷歌内核的浏览器支持,模块会自动转换检测到支持webp就输出webp,否则输出png或jpg
使用道具 举报 回复 支持 反对
123下一页
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表