网站加载量优化:网页加载性能优化详解(3)
第3章 其他方式
3.1 文件压缩
3.1.1 代码
老生常谈的方法。我们可以将代码里多余的空格，回车，无用标签删除，替换名字较长的变量名等等方式减少脚本文件大小。
图4-1 脚本压缩对比
3.1.2 多媒体
对于图片，不同格式，不同压缩率都会造成图片大小的千差万别。选择一个合适并且图片质量可以接受的压缩方式，可以节省很大一笔加载量。
图4-2 图片压缩对比
对于视频、音频、Flash来说，也都一样，码率、格式等等方面都会对大小造成影响。
图4-3 视频压缩对比
3.2 CSS 3
CSS 3是一个不算太新，但由于我朝浏览器限制而得不到大范围应用的技术。其实我们可以在一些效果表现不是很重要的页面使用CSS 3来针对浏览器做一些差异化效果，已达到减少加载量的目的。
3.2.1 替换图片
对于移动端，或者一些PC页面，我们可以用CSS 3来替换一些图片效果，比如渐变、阴影、圆角等等。
图4-4 绿色按钮
例如图4-4中的绿色按钮，使用CSS 3渐变和图片所造成的加载量差距很大，在能使用CSS 3的时候，尽量不要使用图片。
图4-5 CSS 3和图片的大小对比
3.2.2 替换JS动画
一些对象移动、宽高变换等效果，其实可以使用CSS 3动画来实现。例如使用CSS 3和JS，来实现一个对象左右切换的效果，需要的代码量如图4-6所示。我们可以看到，CSS 3的代码量极少，而且执行过程中没有JS那些复杂的运算。
图4-6 CSS 3和JS的代码量对比
3.3 服务器
3.3.1 GZIP
雅虎13条里的内容。其压缩比例很大，大部分网站都使用了。
图4-7 gzip效果
3.3.2 缓存
设置Expires、Cache-Control以减少页面加载量，使浏览器从本地读取缓存。
Expires和Cache-Control max-age均用于检测文件是否过期，如果没有，浏览器读取本地缓存。Expires是HTTP1.0的内容，需要返回一个304 Not Modified，并且过期时间是GMT时间，一旦客户端日期不准确，可能导致失效。Cache-Control是HTTP1.1的内容，使用文件自身的age值来做和请求时间对比，相对稳定。
图4-8 304 Not Modified
3.3.3 优图
优图是公司开发的，用于图片无损压缩的系统。目前互娱已经接入，在图片上传到服务器时，自动进行无损压缩，加载量减少的效果非常明显。
图4-9 优图
第4章 三个话题
4.1 对比
在以前一次分享文档中，有同学提问为啥要抛开浏览器与服务器的缓存机制，自己实现一套本地存储机制，有没有什么特别的优势。其实相对与传统缓存来说，本地存储的好处有4点。
一是，对于存储需要处理的数据来说，本地存储可以在第一次加载的时候就将处理的数据存在本地，而传统缓存策略需要每次加载的时候都处理一次数据。
二是，本地存储相对稳定，有独立的存储空间，一般不会向服务器发送请求，而传统缓存时常会丢失。
三是，相对于传统缓存策略，本地存储的读取速度要更快些。当然，也有例外，Chrome的本地存储读取速度要慢于缓存文件的加载。
四是，对于iOS设备，Safari在重启后（包含本身的重启，或者设备的重启），缓存会被清空，而本地存储和离线存储不会。
4.2 SEO
4.2.1 Landing Page
对于互娱这边的游戏，客户端会有一个Landing Page，上面包含了最新的新闻，活动等等信息，玩家每次启动客户端都会看到这个页面。
根据监控，Landing Page平均每天给官网带来250w左右的PV，而官网平均每日PV大约1000多万。这个量应该完全填补了SEO的损失。而且游戏官网的用处一般仅限于给玩家提供游戏的功能服务、新闻、活动信息等等，玩家查询游戏攻略、资料一般会去媒体站，而不是游戏官网。
图5-1 《英雄联盟》的Landing Page
4.2.2 内页链接
在某些内容需要动态加载的时候，我们可以写一个到内页的链接，让搜索引擎爬虫顺着这个链接到内页去记录信息。
图5-2 到内页的链接
例如页卡中的新闻列表需要动态填充，如果不做处理，爬虫可能无法获取这些列表中的新闻链接。我们可以像图5-2的那两种方式，写一个到列表页的链接，这样爬虫就可以顺着这个链接到列表页去抓取信息。
4.3 效果
4.3.1 健康度
健康度是我们以前接的加载时间检测系统，最近我们换用了OZ系统。使用了以上方法的网站，在3秒健康度上，有了很大的提升。
图5-3 3秒健康度
4.3.2 请求减少
采用以上方式减少加载量，虽然会造成整个网页的全部请求量有少许增加，但因为是按需加载，所以可以大大减少首屏请求量。
图5-4 首屏请求量
图5-5 整页请求量
4.3.3 带宽消耗
在我们接入优图后，图片服务器的带宽消耗大大减少。在图片压缩一半后，我们的带宽消耗减少了4G。
图5-6 图片压缩一半后服务器带宽消耗趋势图
由于公司系统只能针对服务器做带宽消耗监控，所以我们看不到做文件存储和按需加载后的带宽减少情况，但我们可以大概算算。如果一个游戏官网全部页面平均每天有PV1500w，用户平均每次加载页面节省10KB，假设第1天正常加载，后29天全部读缓存，每月可以节省带宽488MB。对于有几十款游戏产品的我们来说，这是一个很可观的量。
结束语
正如开篇所说的那样，介绍的这些方法，有部分会伤害SEO，增加脚本开销。所以大家在使用的时候需要进行一个合理的选择。
例如对于一个新产品，SEO相对更加重要些，这个时候可以适当选用一些减少加载量的方法；当产品成熟，有大量用户的时候，可以考虑进行更加深入的加载量优化。
希望此文档能帮助到今后做网站加载量优化的同学。