上一篇《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。
上图为 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，图片，视频的优化压缩，木桶理论的两块木板“主机提速”和“站内减肥”介绍完了，下集将是最后一集，讲谷歌这个“外患”，还有外链，缓存，调用系统中文字体微软雅黑，。
注：相关网站建设技巧阅读请移步到建站教程频道。
