池州网站公司欢迎您
技术教程首页 > 技术教程

池州WordPress 网站访问加速技巧

作者
池州网站公司
发布时间
2016-09-27

用WordPress做网站的同学有个共同话题,那就是加载慢,如何优化提升速度。这个问题一直伴随着 WordPress 网站存在,因为多种原因导致 WordPress 网站加载慢,另外我们希望网站交互

用WordPress做网站的同学有个共同话题,那就是加载慢,如何优化提升速度。这个问题一直伴随着 WordPress 网站存在,因为多种原因导致 WordPress 网站加载慢,另外我们希望网站交互特效丰富,加载速度还要快,这显然是矛盾的,优化的思想是取平衡点,我尽可能全面的分析原因以及给出建议。

早在2014年12月,我写过一篇关于 WordPress和Avada主题加速的文章,标题是《提升WordPress 打开速度全面解决方案 Avada主题》,现在看来,那些经验有点老了,通过这两年实践,我又有了很多新的实用的经验,特此分享给大家。

这是一篇全新全面的经验,两年前的那篇加速文章可以忽略。另外这篇全新的加速教程,不仅适合 Avada 主题,还适用其他的主题。这些经验有的是工作中所悟,有的是 WordPress 某些主题官方给出关于速度优化解决方案。

从以下六个方面找原因,消除木桶理论的短板,提升WordPress 网站速度。

1 网站所在主机

举个例子:阿里云的虚拟主机默认1M带宽,访客每秒从主机下载文件速度是120KB/秒。网站首页总大小是3MB(访客打开首页需要加载网站的HTML,图片,JS,视频等),完整加载需要25秒。(首页总大小 除以 带宽速度)如果此时有两个人同时访问了首页,这两个人都需要50秒才能加载完成。(两人平分1M 带宽,速度都降低50%)

解决方案1:升级虚机带宽
如果虚拟主机的带宽从1M升级到4M,单一访客访问速度提高4倍,加载时间大幅度减少,从25秒降低到6秒。但是升级带宽是需要花钱的,详细费用咨询主机商,不便宜。

解决方案2:使用各种云加速 CDN服务
我用过百度云加速,360云加速,安全宝云加速,都是免费的,后来都放弃了。原因很简单,网站修改预览很麻烦,而且速度不稳定,也许是免费的才这样。很多 CDN 都是按照流量收费,那些大型网站淘宝京东都在用 CDN。

举个例子解释 CDN:访客来自全国各地,分别在用电信、联通、教育、移动等网络接入商去访问网站域名,解析到一个主机上(一个点),显然有的地方访客快,有的地方访客慢。CDN 作用就是让域名指向CDN,而不是你的主机,这个 CDN是多台主机,分别放在电信网络、联通网络、教育网络中。CDN会把网站常用文件复制到 CDN 各种网络节点上。

访客访问的不是你的主机,而是 CDN分布在各个网络节点的主机,其中包括访客所在的网络,他们之间的通讯速度是很快的。但网站如有修改,需要一段时间同步到各种 CDN 节点,不是实时的。一看这种模式就是收费服务,免费的不建议大家使用。

CDN 通常按流量计费:访问人数越多,网站文件越大,流量越大,支出费用越高。

主机问题无论是升级带宽还是 CDN 都需要花钱,如果不想花钱,请看下集,给网站减肥,身轻如燕的速度。

上一篇《WordPress 网站全方位速度优化:主机篇》讲的是关于WordPress 网站所在主机的设置,这次我们来讲网站内部臃肿导致加载变慢。

还是上一篇那个例子,一个网站首页总大小,如果从3MB下降到1MB。即便是1M 带宽的主机,加载时间也会从25秒下降到8秒,也是很可观的。但是要给网站减肥可不是一件容易的事儿,我尽可能的详细介绍:

一个工具解析页面加载全过程

访客的浏览器从远程主机上抓取网页,先抓取首页的HTML 文件,然后再从 HTML 文件里提取出 CSS、JS、图片、视频等文件分别加载,有的 JS 和 CSS 里还会加载更多的 CSS、图片、视频。

有一个工具可以看到网页加载过程,比如:文件数量、加载顺序、每个元素的响应时间、明细等信息。谷歌Chrome浏览器自带的“检查”工具,火狐 Firefox 的FireBug 工具都可以完成以上的工作。此外360浏览器,Safari 浏览器,IE 新版本都集成了这个功能。(如图:minify是个 css 文件,大小426KB)

如果是咱们自己写的 HTML、CSS、JS 文件,可以轻易瘦身,自己熟悉代码哪里能优化,但 WordPress 主题的 HTML、CSS、JS 我们是无能为力,只能通过Gzip压缩解决。(如下图,经过 Gzip 压缩,minify 文件 从426KB变成了57KB)

给首页HTML、JS、CSS文件瘦身

Gzip是服务器或者虚机提供的一种组件服务,简单地说:Gzip开启后,从主机到访客之间传送的文件会被压缩处理,这样就会减小通过网络传输的数据量,提高浏览的速度。比如一个首页150KB,但是经过压缩真实传输大小是25KB。(如下图)

Gzip具体使用方法:主机不同调用方法也不同,有的是写.htaccess,有的是安装个插件,不管是那种,可以到 Chinaz 站长工具里面检测(网址:http://tool.chinaz.com/Gzips/)。比如小红公司的网站:www.jianzhan1.cn的 html 文件是150KB,Gzip 压缩之后变成26KB,然后在火狐里用 FireBug 检查首页果然是25.9KB。双重验证说明 Gzip 生效了。此外Gzip 对 CSS 这类文本类的文件也会压缩,比如有个CSS 文件是426KB,压缩之后是57KB。

2-1

上图为 ChinaZ 网站检查结果,我们也可以从其他网站看出Gzip 是否生效,另外也可以用浏览器检查工具检查 header 是否有 Gzip。

通常Gzip只会压缩 HTML 和 TXT 之类的文本文件,不建议用它来压缩图片,因为这样会增加服务器 CPU 的负担,还会增加图片的体积,具体原因大家百度一下。后面会说给图片瘦身。

图片优化:先了解图片种类和用途

网站上用的图片大概这么几种:
1 头部Slider的背景图和前景图。2 产品和案例的图片。3 其他装饰图片。

不论什么图片,第一步先看宽高尺寸,大小够用就好,切忌贪大,尺寸越大,容量越大,下载越慢,特别是产品图,有的同学直接上传2000px宽的2MB 图片。(很多同学不了解常识)

此外图片还分透明图片和不透明图片:透明图比如说去掉背景的产品图,还有特殊字体的文字也需要做成透明图片,可以把他们放到背景图上。不透明的图片比如说背景图片和产品展示图等。

给PNG 透明图片瘦身的绝技

先说透明图片,常用PNG格式,当然 PNG 图片也有透明和不透明之分,还有8位和24位的区别。总而言之,透明图片我们用 PNG,但是 PNG 图片很大,解决办法是,到 TingPNG 网站优化压缩,网址:https://tinypng.com/,通常可以得到比较好的压缩比,图片质量几乎没变化。因为这种压缩是在线压缩,需要上传和下载,有点麻烦,但是一次麻烦终身受益。

给 JPG 图片瘦身秘籍

再说经常用到的JPG 图片,通常我们直接在PhotoShop 里修改,裁切大小,另存为 web 格式压缩,jpg 质量60左右。这个大家都会,我再分享个秘籍:“WP Smush”,这是一个 WordPress 插件,每次上传图片时会自动在线压缩,压缩比很高,质量损失很小,速度稍慢,绝对值得,一般人我不告诉他。

PNG 透明图和 JPG 图的究极压缩方法都是在线工具,小而精 小而美,这是他们的独门秘籍,不会轻易外传,在线提供服务也是一种保护。

给视频减肥

网站上用的视频通常有两种方式,一种是托管在视频网站,比如优酷,我们在自己网站上引用优酷视频的地址,通常会有优酷的标志或者广告。另外一种方式是把视频存放在本地主机上,我们主要说这种。这种视频往往容量很大,用户下载慢,使用时一定要注意。下面说说如何优化:

以小红建站公司网站首页为例,第一屏有个背景视频,1000kb码率的MP4格式,36秒,5.4MB,严重影响打开速度。压缩成384kb码率的webm格式视频后,变成1.4MB,但画质很粗糙,显得很low。最后把视频剪辑成22秒,压缩成512kb码率的webm是1.4MB,质量好些,在视频上覆盖一层灰色,遮住粗糙的视频,整体显得高档。

这样做还有个问题,IE11浏览器 和 微软Edge浏览器 不支持webm 格式的视频,这需要额外增加mp4格式的视频给微软的浏览器。访客浏览器如果是支持webm视频的谷歌等浏览器,网站直接给他看webm视频;访客如果是 IE 浏览器,网站会给他看 MP4视频。

同样22秒 512k的码率MP4也是1.4MB,但是质量差很多,不得不提升768k码率,视频质量和webm的512k码率类似。吐槽Edge浏览器,播放MP4的质量好差,同样一段视频比IE11差不少,马赛克严重。

以上是对站内HTML,CSS,JS,图片,视频的优化压缩,木桶理论的两块木板“主机提速”和“站内减肥”介绍完了,下集将是最后一集,讲谷歌这个“外患”,还有外链,缓存,调用系统中文字体微软雅黑


栏目最新

全站导航

资料检索


服务支持

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

售后保障

网站制作不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。

拉丁传说

好的网站制作公司会给客户提出建设性的意见,善于对客户进行良性引导,避免客户走入误区,甚至帮助客户整理文案做好内容规划,会帮助客户构造互联网的升级计划...

联系我们

池州网页设计联系方式:
技术联系人:方先生
在线QQ:75054921
微信:13665664868
手机:13665664868

支付宝

支付宝付款码

Copyright © 2012-2018 池州拉丁传说网页设计工坊 版权所有