优化静态资源 – WordPress 国外主题全方位加速

WordPress 教程 6个月前 (03-14) 0

 

我们来讲网站内部臃肿导致加载变慢。还是之前那个例子,一个网站首页总大小如果从 3MB 下降到 1MB——即便是 1M 带宽的主机,加载时间也会从 25 秒下降到 8 秒,也是很可观的。但是要给网站减肥可不是一件容易的事儿,我尽可能的详细介绍。

 

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

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

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

2-5

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

2-4

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

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

2-3

Gzip具体使用方法:主机不同调用方法也不同,有的是写.htaccess,有的是安装个插件,不管是那种,可以到 Chinaz 站长工具里面检测。此外 Gzip 对 CSS 这类文本类的文件也会压缩,例如有个 CSS 文件是426KB,压缩之后是57KB。

2-1

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

2-2

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

 

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

网站上用的图片大概这么几种:

  • 头部Slider的背景图和前景图。
  • 产品和案例的图片。
  • 其他装饰图片。

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

2-7

给PNG 透明图片瘦身的绝技

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

2-6

给 JPG 图片瘦身秘籍

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

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

 

给视频减肥 – Webm 格式视频

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

第一屏有个背景视频,1000kb 码率的 MP4 格式,36秒,5.4MB,严重影响打开速度。压缩成 384kb 码率的 Webm 格式视频后,变成 1.4MB,但画质却显得粗糙。最后把视频剪辑成22秒,压缩成 512kb 码率的 Webm 是1.4MB,质量好些,在视频上覆盖一层灰色,遮住粗糙的视频,整体完美。

这样做还要考虑到浏览器兼容问题,微软系浏览器均不支持 Webm 格式,这需要额外增加 MP4 格式作为备选:访客浏览器如果是支持 Webm 视频的谷歌浏览器,则直接显示 Webm 视频;反之显示 MP4视频。

给视频减肥需要权衡多个方面,并没有一站式的通法可供使用。

 

@Via:achair 的宝箱