独立站刚开始的时候,可能你上传的产品图片它并不是特别多,但是对于一些大客户,如果你的产品的数量非常的多,你就需要去上传很多的图片,这个时候对你的服务器的压力就非常的大。而如果你对这些图片的尺寸或者是质量没有做压缩,那么你的网站的加载速度就可想而知了,就会更慢。
独立站加载速度影响因素;
正常情况下,我们的独立站的速度是和三个因素有关的。
1、服务器和网络环境;
你买一个虚拟的云主机和一个VPS是完全不一样的,不管是它的运行速度还是它的存储数量都不一样,所以一般情况下VPS的速度是比云主机快一些。
2、程序代码层;
例如我们使用到的wordpress程序、主题插件等,你使用到的主题越快,比如说我们用Astra这个主题它就是最快的一个主题,你用这个主题和使用Avada这两个主题,它本身你的独立站的打开速度就是不一样的。
3、独立站素材;
后期独立在运营的时候,我们的图片是不是标准化,例如我们上传的shop的图片,正常我们都是800×800,如果你想高清一点,那就是1080×1080,但是你不能使用一个几M的图片,这样的话你的页面加载速度就会很慢,那么对于这样的图片的处理,只要你会简单的一些photoshop,你就可以对这些图片进行压缩,或者是去调整它的尺寸。
对于我们之前的站点已经运行了一段时间了,之前我们的图片并没有压缩,这个时候应该怎么处理?
我们有两种办法,第一种办法就是你把之前独立站上传的图片重新下载下来,处理完以后然后再重新上传,工作量对于一些新开的站点是没有问题的。
WP Smush Pro插件安装;
如果对一些大站就很麻烦,他的工作量很大,所以这个时候我们就需要去借助一些插件,对于我们已经上传的图片进行批量压缩,也就是我们今天给大家分享的这样的一个插件WP Smush,它是一个PRO版本,当然也提供了一个汉化包,现在我们直接进入我们的后台,找到plugins 并 add new,然后上传我们准备好的文件,把 WP Smush Pro安装一下。
安装成功以后,然后我们激活这个插件好。
WP Smush Pro插件设置使用;
现在插件激活以后,我们在左侧边的功能按钮里面就可以看到 WP Smush Pro插件的一些设置,设置它主要是针对我们后台的,其实前台的影响主要是我们的加载速度,所以它不会添加一些额外的功能。
WP Smush Pro向导;
当你第一次进入这个插件的时候,它会有一些说明,告诉你这个插件应该怎么样去使用。它的主要功能第一个就是自动压缩Automatic compression,然后第二个有一个极限压缩Ultra,就是以速度为主,然后把我们的图片的分辨率尽量压得更低,还有一些其他的说明,包括我们图片的最大图片的大小,还有一个懒加载,就这些功能非常的简单,然后我们直接进入这个插件界面,我们看到它的功能按钮里面,它所能够完成的一些效果。
WP Smush Pro一键压缩图片;
进入仪表盘,目前我们看到我们压缩了哪些图片,节省了多少空间,目前还没有,它只是一个数据统计,所以我们一个的去看,首先第一个就是它的批量压缩,批量压缩首先它会自动检测你这个站点里面有哪些图片需要去压缩,我们看到这里它提示有两张,因为我们这个站点里面目前是没有图片的,只有几个背景图片,我们导入的时候这个我们的产品图片都是使用的占位符,我们看到这里都是不是正常显示的,所以两张图片我们就直接进行压缩一下就行了。
但压缩的过程当中你可以做一些设置,比如说下面我们可以看到我们压缩的规格,第一个基本压缩,第二个尽量减少,第三个就是极限压缩,它可以压缩到5倍以上,正常我们选用基础的就可以了,因为你压的太狠,就会导致你的图片的分辨率很差,所以我们直接点击开始压缩,因为图片比较少,所以很快就压缩完了以后它会告诉你我们节约了70.7,KB的空间容量压缩了10.3,因为我们的图片比较少,所以就显示不出来数据。
WP Smush Pro压缩设置;
我们看一下其他的设置,第一个我们刚才说过了,就是它的压缩的模式压缩成什么程度。第二个就是针对我们图片的尺寸,你可以单独设置一个Image Sizes图片的大小,我们可以在设置里面找到我们的media,我们的媒体文件,那么它会限制一个最大的尺寸的大小是1024×1024,如果你超过尺寸的图片就显示不全,或者是它会把你的图片强制的裁切为1024,所以在这里我们可以单独去设置一个尺寸,比如说我们的最大尺寸可以设置为2048等等,根据你自己的需要来。
另外一个就是自动压缩我们新上传的一些图片,下面一个是删除我们图片里面的一些Metadata信息,什么是Metadata信息?
我们现在在桌面上去找到一些图片,比如说我们右击查看它的属性,在属性里面有一些详细的信息,详细的信息会告诉你这个图片它是用什么样的设备拍摄的,然后它的发布日期、修改日期大小等等都会有。
当然我们的图片没有显示出来,因为这个图是我截出来的,正常如果你用相机或者用手机拍摄的,在详细信息里面都可以看到,这里所说的去除图片的密谈信息,就是把刚才我们看到这些信息给它删掉,这样的话可以从另外一个方面减少我们图片的质量,一般我们默认把它开启。
另外一个就是调整我们的原始图片,我们可以把它调整为2560×2560最大的宽度和最大的高度,正常我们是不会这样去调的,因为我们自己去做独立站的时候,你作为一个运营这些最基本的要素你都是要了解的,图片是不能上传太大的,除非你啥也不懂。然后下面一个就是不限制图片的尺寸,我们也默认就行了,不用管它。
然后下面一个是把我们的png图片转成JPG的图片,偏激这种图片格式我们都知道,它可以设置一些透明图,当然它这里也说明了,如果你的偏激的图片是一个透明图的话,它就不压缩它就不转,因为转成jpg,要么就是白底的,要么就是灰底的。
那么如果你是一个透明图,它就肯定显示的不正常了,所以它这里的说明如果是透明的PNG,那么它就不压缩。
另外一个就是邮件的通知,如果你的站点新上传了一些图片,或者是你的图片尺寸超标了,那么他会给你发一封邮件,下面一个是批量恢复,这个是什么意思?其实就是和上面的一个进行对应了。
上面有一个是备份的,就是你在压缩图片的时候它会出现两张图片,一个是你的原始的图片,第二个是已经被压缩的图片,正常的它会自动把压缩的图片替换成你原始的图片进行展现,那么对于原始的图片你是不是要备份?
如果你这里选择了备份你的原始图片,那么这里才能够恢复,如果你这里没有血,那么你就是恢复不了了,正常情况下我们压缩的时候都是要根据自己的需要来,这些设置一定不能设置错,如果你觉得你可能会设置错,你最好是备份一下,备份完以后然后再去删除之前的原始图片,这个就没有问题了。
WP Smush Pro目录图片压缩;
除了可以去压缩我们的商品图片或者是我们站点上面的图片,它还可以压缩另外一个位置的图片,就是我们的upload,比如说我们做独立站的时候放的一些logo,或者是自己上传到upload的一个文件。
这里面的文件我们也可以进行压缩,包括我们主题里面的图片,他都可以去压缩,所以在这里我们就可以选择我们的wordpress的结构里面要搭配wp-content,就是内容里面,比如说我们可以压缩某一个插件里面的图片,或者是某一个主题里面的插件,你选择目录然后进行压缩就可以了。
WP Smush Pro懒加载;
所谓的懒加载之前我们已经给大家讲过了,当一个客户进入我们的独立站,一般正常情况下,他不可能看到我们整个站的界面,它会分成几屏,比如说我们现在在视线之内的这一叫第一屏,那么当用户进入第一屏以后,它会往下滚动,这就会进入第二屏,第三屏一直到底。
那么所谓的懒加载就是当用户看第一屏的时候,他没有看到第二屏第二屏的图片就可以延迟加载,这样的话我们整个页面的加载速度就会加快,懒加载这个作用,这里的只有一个设置激活,你把它激活一下就行了。
其实在我们很多的性能优化插件,比如说小火箭WP Rocket,还有我们其他讲解的一些技能插件里面都自带了这个功能,这个插件对我们而言最主要的作用就是压缩图片,另外就是它的懒加载的类型,比如说JPG、png,或者是一些其他的,你可以单独去设置。
然后下面一个就是它延迟的时间400毫秒,我们的一秒是等于1000毫秒,所以400毫秒是等于0.4秒,下面还有一些延迟的内容,比如说我们的blog页面配件页面哪些页面可以被延迟,另外就是我们头部的JS,我们可以把它放在photo里面,它这个也是延迟加载,这里面的功能主要针对的就是我们的性能,另外有一些通知,他也可以进行懒加载,下面一个是把它关闭掉。
WP Smush Pro CDN接口;
这个插件自带的cdn但是 cdn目前我们用不了,大家要记着所谓的cdn,就是把你的图片放在别人的服务器上面进行加载,你把东西放在别人那里,那就叫租赁的时候,你肯定是需要出费用的,就像我们自己租服务器,云主机都是需要费用的,所以暂时我们用不了,除非你去购买他的cdn,对于我们图片的一些静态的内容,我们后期给大家去讲到性能加速的时候会给大家分享一些cloud flare,像这样的一些cdn它其实都是免费的,那么你一个小的独立站是完全可以去使用的,使用这种免费的cdn,我们就可以实现动静态分离,所谓的动静态分离,比如说我们的独立站上面有一些内容它是静态化的,比如说我们的banner、 logo,还有一些背景图片,它基本上都不怎么变化,也不会去调用我们的数据库,这一种就属于静态的。
我们的shop页面里面的产品它会持续的更新,所以它需要写入到数据库,它就是动态的,动静态分离就是动态的我们一般都是用缓存去加快它的速度,而静态的比如说我们的logo,我们就可以把它分发到一些其他的服务器上面进行调用,这样的话我们就可以实现动静态分离了。
WP Smush Pro WEBP图片转换;
WEBP图片格式我们前面给大家去讲过,除了我们经常见到的JPG格式或者是PNG这样的图片后缀之外,也有一种专门针对网页版的就是webp我们把图片压缩成转成webp这种格式就会让我们的图片的质量减少,这样的话我们的图片加载速度就会变快。
另外一个就是我们的分辨率,它的影响是比较小的,因为webp是谷歌开发的一个系统,所以你的图片转成这种格式对搜索引擎优化seo是比较有利的,那么webp就是相当于在这里它可以帮我们进行压缩,但是我们如果想压缩成把我们的图片压缩成webp,就必须取得我们服务器的一些权限。
如果你是使用的云主机基本上都没戏了,只能是用VPS你才能够去设置你的服务器权限,比如说我们现在打开看一下,我们看到这里它就检测出来我们的服务器所用到的系统,前面一个是apache,后面一个就是我们目前使用到的,然后检测出来的基本上是没错的,除非你知道你的服务器用的是什么样的架构,一般我们的wordpress中的lamp架构,LAMP里面的L就是Linux,A就是阿帕奇,M就是我们的Mysql,就是我们的数据库,P就是PHP语言。
我们点击下一步,他就要求你要把这段代码放在你的服务器的某一个文件里面,而这些文件一般在我们的云服务器里面是看不到的,所以你需要去联系你的服务商,让他帮你去加一下也是可以的。
WEBP图片在线转换工具;
当然正常情况下我们说过了这个插件我们一般不会使用这个功能,包括它的cdn我们会用其他的一些性能插件去代替它。当然除了这种自动转成VIP之外,还有一种方式就是你后期上传的图片,这里给大家分享一个网站(pixelied.com),这个网址就可以把我们的图片转成webp格式的,然后你再去上传。
其实最好的方式就是我们后期的编辑也好,你给它形成一套规则,比如说上传的商品的图片的主图,那就是1080×1080,然后它的详情图里面的图片的尺寸你都有一个规定,这样的话就不会出现大的问题,因为只有我们自己处理好的图片再去上传,这个肯定就是最安全的。
那么这里我用了两个图片做了一下压缩,我们可以简单的去看一下它的质量对比,这个就是我们的原始的图片,偏激的我们去查看它的属性,我们看到它的大小是600多KB,然后我用了这样的一个软件去压缩成webp的,然后我们再去看它的属性,它只有85.7KB了,所以压缩了近7倍。然后我们打开这个图片去看一下它的分辨率。
好,这就是原始的图片。然后我们再打开第二个,好直接我们去查看,这就是原始的图片,我们可以直接翻译原始的图片,我们可以看到它的尺寸是600多KB,然后它显示的效果是这样。
然后我们翻到第二个图片,这个只有85.79KB,但是我们发现它的分辨率其实并没有变化很大,所以转成这种VIP可以明显的压缩我们图片的质量,而不影响我们图片的观看效果,所以你可以使用这个软件,把你的图片后期上传的图片都压缩一下,压缩完以后然后再去上传就可以了。
WP Smush Pro插件集成功能;
下面一个是这个插件里面的集成,所有的插件,基本上现在都是有一个集成的功能,第一个就是集成古腾堡,它可以在古腾堡里面显示出来你的图片的大小,然后你可以针对古腾堡里面上传的图片进行压缩,这里我们是不需要的,因为我们使用的是elementor,所以暂时不需要。
下面一个是WP Smush Pro设置,设置里面的功能非常的简单,第一个就是检测我们现有的站点里面的图片,我们所有的图片它都是放在一个容器里面的,比如说放在一个div里面,或者是放在一个p标签里面的,那么它这个检测就是你这个图片有没有超出你外面的容器的大小,这个功能就是这样的一个目的,我们把它开启一下,然后点击保存。
现在回到首页,或者是回到某一个页面里面,在它的侧边就多出来一个警告,比如说这个图片目前假如说这个图片我们点看一下,例如说这个图片它可能只需要115×19像素,它显示的是这样的一个大小,但是实际上这个图片是300×50就是偏大了,所以他的建议就是你可以把这个图片调成115×19像素。
但是实际上在我们的实际运用当中是不太现实的,比如说我们调用的产品图片,除了需要在我们的消费页面里面展现出来相对小一点的图片之外,那么这个图片同时也在我们的single页面里面展示,我们希望它展示的更加的清晰,所以这个里面显示的图片的大小和在shop里面显示的图片大小肯定是不一样的,所以对于这样的图片我们是没办法进行压缩的,也没办法去修改它的尺寸,所以这个功能基本上是一个积累,我们了解一下就行了。
然后第二个是针对我们的配置,你可以把它导入导出或者是导到另外一个站里面,所有的插件都有这个功能。
最后一个就是我们的数据,这个数据基本上正常情况下,我们也是不需要去管它的,它主要指的是如果我们插件后期删除了,那么这个插件里面所设置的内容是不是保留或者是把它删除。最后一个就是增加一个对比度的颜色,我们暂时也是用不到的。
WP Smush Pro 媒体库图片显示;
除了在这里我们可以看到这个插件之外,我们在我们的媒体库里面,我们也可以看到它的身影,比如说我们这里显示为列表里面,我们可以看到就是Smush。
这个Smush里面他就会告诉我们这个图片他已经帮我们压缩过了,它的原始图片是100KB压缩到70KB了,压缩了10.9%,那么其他图片也是一样的,那么有一些图片他没有帮我们去压缩,是因为他觉得这些图片本身是比较合理的,所以是不需要压缩的,当然我们这个站点的图片本身就比较少,所以看不出来效果,如果你是一个大站的话,这样一压缩你的空间容量就会节约出来很多,你的速度也会有一个明显的提升。
好,这就是关于WP Smush Pro这样的一个图片压缩插件的使用方法。
暂无评论内容