宝塔Nginx环境安装pagespeed模块加速网站以及配置WebP格式图片加速(笔记)

这篇具有很好参考价值的文章主要介绍了宝塔Nginx环境安装pagespeed模块加速网站以及配置WebP格式图片加速(笔记)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

起因:

由于站点内很多本地图片每次打开要等很久于是就开始搜索相关内容

卡到了一个pagespeed这么一个模块而且折腾起来也比较简单所以就开始干活正式折腾。

正文:

首先我的环境是centos8+宝塔 【web环境lnmp(linux-ngingx-mysql-php)】

环境不一样的不要直接复制!!!

以下教程内容一部分来源于知乎:

引用地址:宝塔Nginx环境安装pagespeed模块加速网站以及配置WebP格式图片加速方法 - 知乎 (zhihu.com)

教程总共分为以下几个步骤:

一.下载ngx_pagespeed

二.编译模块到ngingx中

三.编辑站点配置文件开启模块


一.首先下载模块

wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz 
 
tar -xvzf v1.13.35.2-stable.tar.gz #解压文件

然后下载 优化库

下载PageSpeed优化库

cd incubator-pagespeed-ngx-1.13.35.2-stable #进入刚刚解压的文件夹
 
wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz #下载最新版的优化库
 
tar -xvzf 1.13.35.2-x64.tar.gz #解压优化库

PS:给小白   这里你可以在宝塔终端里面执行,也可以登录ssh执行效果是一样的。

默认下载到  /root  目录下 解压目录是 

因为后面配置的时候会用到这个目录

二.编译模块到ngingx中

进入宝塔面板,按照图片的顺序编译安装nginx,如图所示(这一章节全部照搬)

宝塔安装 pagespeed,教程,笔记

点击添加自定义模块,自定义模块的名称和描述可以随便写

模块参数填写格式如下:

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

 其中,/root/incubator-pagespeed-ngx-1.13.35.2-stable是下载的ngx_pagespeed模块的位置

如图所示

宝塔安装 pagespeed,教程,笔记

 提交之后,记得勾选添加的自定义模块,然后提交编译,如图所示

宝塔安装 pagespeed,教程,笔记

 编译安装成功后,可以在命令行中输入

nginx -V

查看是否编译成功,如图红线位置,可以看到ngx_pagespeed已经安装成功宝塔安装 pagespeed,教程,笔记

三.编辑站点配置文件开启模块 

这时需要开启模块,进入“网站”,然后选择要开启模块的域名,点击域名旁边的设置,如图所示,将配置内容输入到红线下方的位置

宝塔安装 pagespeed,教程,笔记

配置内容如下,可以自行调整 



####基本设置######
pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;    
# 启用JavaScript库卸载    
pagespeed EnableFilters canonicalize_javascript_libraries;  
# 把多个CSS文件合并成一个CSS文件    
pagespeed EnableFilters combine_css;    
# 把多个JavaScript文件合并成一个JavaScript文件    
pagespeed EnableFilters combine_javascript;    
# 删除带默认属性的标签    
pagespeed EnableFilters elide_attributes;    
# 改善资源的可缓存性    
pagespeed EnableFilters extend_cache;    
# 更换被导入文件的@import,精简CSS文件    
pagespeed EnableFilters flatten_css_imports;    
pagespeed CssFlattenMaxBytes 5120;    
# 延时加载客户端看不见的图片    
pagespeed EnableFilters lazyload_images;    
# 启用JavaScript缩小机制    
pagespeed EnableFilters rewrite_javascript;    
# 预解析DNS查询    
pagespeed EnableFilters insert_dns_prefetch;    
# 重写CSS,首先加载渲染页面的CSS规则    
pagespeed EnableFilters prioritize_critical_css; 
# Example 禁止pagespeed 处理/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
#######图片处理配置########
# 延时加载图片
pagespeed EnableFilters lazyload_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
pagespeed LazyloadImagesBlankUrl "https://www.cmzeno.com/xxx.png";
# 启用图片优化机制(主要是 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;    
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon" { }

 更多配置请参考:PageSpeed Configuration

保存,重启nginx,在命令行输入

curl -I -p http://www.cmzeno.com

请将 http://www.cmzeno.com 替换成你的域名,如图红线,我们可以看到,模块已经开启成功了 

宝塔安装 pagespeed,教程,笔记

PS:模块很好用加速效果可以。

软文:

最近正在看这个综艺很好看超搞笑!《绷不住了啦》爱城影视-优果视频提供热门电影电视剧综艺动漫在线免费观看『极速蓝光』-优果视频,爱城影视官网 (www.90hd.top)https://90hd.top/voddetail/191121.html文章来源地址https://www.toymoban.com/news/detail-842053.html

到了这里,关于宝塔Nginx环境安装pagespeed模块加速网站以及配置WebP格式图片加速(笔记)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 建站教程:阿里云服务器安装宝塔面板搭建网站全流程

    使用阿里云服务器安装宝塔面板教程,阿里云服务器网以CentOS操作系统为例,安装宝塔Linux面板,先远程连接到云服务器,然后执行宝塔面板安装命令,系统会自动安装宝塔面板,安装完成后会返回面板地址、账号和密码。阿里云服务器网来详细说下阿里云服务器安装宝塔面

    2024年02月08日
    浏览(48)
  • 宝塔安装ssl证书步骤及踩坑,此网站无法提供安全连接,无法打开宝塔面板,rm -f ssl.pl

    在访问宝塔面板时出现不安全链接,所有决定安装ssl证书,但在网上执行以下命令( 终端执行命令rm -f /www/server/panel/data/ssl.pl /etc/init.d/bt restart )后无法访问宝塔面板,显示此网站无法提供安全连接。 解决方案: /www/server/panel/data/ 目录下创建文件ssl.pl文件,文件内容为True

    2024年02月09日
    浏览(46)
  • mac安装宝塔,部署php使用环境

    搞这个不是为了别的就是因为找不到个php在mac上好事的集成环境 1,安装docker docker下载地址选择mac版下载 2,按照这位大佬的操作安装宝塔相对的宝塔面板定制docker镜像发布-集成LN/AMP支持ARM-7.9.4版本 3,下载完成之后打开你刚下载的docker.app在images里可以看到刚下载的镜像 4,

    2024年02月07日
    浏览(50)
  • 【Nginx34】Nginx学习:安全链接、范围分片以及请求分流模块

    又迎来新的模块了,今天的内容不多,但我们都进行了详细的测试,所以可能看起来会多一点哦。这三个模块之前也从来都没用过,但是通过学习之后发现,貌似还都挺有用。当然,还是要根据具体业务情况来看,如果你的业务中有用到,那么就可以尝试一下哦。 安全链接是

    2024年02月07日
    浏览(30)
  • 阿里云国际站版服务器怎么安装宝塔面板以及安装失败原因

    阿里云国际云服务器安装宝塔面板, 阿里云国际站注册好账号,无需实名认证和备案 大陆以外的云服务器,Windows和Linux系统不能互换,只能在Linux系统中进行更换; 在安全组放行端口后,开始安装宝塔面板;连续多次失败。经过一晚上的反复验证发现问题如下: 1、多个li

    2024年01月17日
    浏览(70)
  • Docker 安装以及加速器配置

    通常我们因为安装docker出现许多错误,使用解压版安装方便快捷,并且增加加速器的配置,以及可视化界面的配置,让我们的成长更近了一步 虚拟机使用nat模式,配置ens33如下: 参考资料: 全网最新最全最详细 linux安装docker方式 - 知乎 docker国内镜像库地址 docker镜像仓库地址

    2024年01月21日
    浏览(53)
  • Nginx环境搭建以及Docker环境部署

    目录 Nginx环境搭建 1.首先创建Nginx的目录并进入 2.下载Nginx的安装包         可以通过FTP工具上传离线环境包,也可通过wget命令在线获取安装包         没有wget命令的可通过yum命令安装  3.解压Nginx的压缩包 4.下载并安装Nginx所需的依赖库和包         安装方式一    

    2024年02月13日
    浏览(45)
  • Docker概念、安装以及配置镜像加速器

    (给自己文章打个call)如果对于linux比较陌生的可以看一看这些文章 Linux安装MySQL、JDK(含环境变量配置)、Tomcat Linux介绍以及常用操作命令 Linux中vi编辑器使用及ps系统管理命令 (1)从VM与Docker框架中,直观上VM多了一层Guest OS,同时Hypervisor会对硬件资源进行虚拟化,docker直接

    2024年02月02日
    浏览(94)
  • Docker(1)——安装Docker以及配置阿里云镜像加速

    目录 一、简介 二、安装Docker 1. 访问Docker官网 2. 卸载旧版本Dokcer 3. 下载yum-utils(yum工具包集合) 4. 设置国内镜像仓库 5. 更新yum软件包索引 6. 安装Docker 7. 启动Docker 8. 卸载Docker 三、阿里云镜像加速 1. 访问阿里云官网 2. 免费使用 3. 复制加速器地址 4. 配置使用 从本篇文章开始

    2024年02月06日
    浏览(55)
  • Mac M1芯片安装PyTorch、GPU加速环境

    安装PyTorch前先看一下(最好也安装一下)安装Tensorflow这篇文章 通过App store安装或者使用命令 $ xcode-select --install 安装 Pytorch官网指导页面 通过上述方式安装的PyTorch可能自带的Numpy太低,所以重新安装Numpy: 或者 使用“conda list”可以查看此conda环境内的包和各个包的版本。使用

    2023年04月26日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包