QQ.com速度优化解决方案介绍

QQ.com速度优化解决方案介绍
摘要

    QQ.com门户经过5年时间的发展，已经成为国内流量最大的门户网站，在“大回想、大影响”的战略下，QQ.com影响力得到用户的积极认可。
   2008年9月，网站部和O线成立了QQ.com优化联合项目组，对QQ.com的速度进行优化。项目组针对QQ.com特点，系统化地从多个层面推动优化工作：产品、内容、技术、合作、工具和流程等等，并建立了持续优化机制。在优化技术方面做了一些探索和创新。至09年6月，QQ.com速度在四大门户排列第一，用户体验得到明显改善。用户口碑得到提升。

1.     优化方案简介
(1)    建设定制化、实时、易于接入的测速平台。测速是优化成功的必要条件

(2)    应用业界和其他兄弟部门的最佳实践，进行全面和深入优化

(3)    根据网站部的业务特点，有针对性的优化、创新优化

(4)    优化是系统性工程，不仅仅是优化技术，还有产品面的优化、内容面的优化、部门间合作、工具建设等等

(5)    关注持续优化，保持劳动成果。通过常态优化团队、工具化、流程化达到持续性优化

2.     开始优化
万事开头难，如何开始工作是一个难题。08年9月，首先网站部和O线成立了QQ.com优化联合项目组。目标是将QQ.com的速度优化到业界前列的位置。优化团队的成员刚开始的时候没有网站优化方面的经验，或者只有后台优化的经验。这段时间，我们做的主要工作为：

（1）       了解网站优化技术。找公司的其它已经有优化经验的部门取经，了解他们的优化方法和过程。从Qzone学习到了测速工具的重要性，还有就是yahoo的优化规则的成功运用。对yahoo的优化规则的理解也让我们的关注重点从传统的后台优化转到以前台优化为重点。

（2）       对网页进行测速。测速是进行速度优化的最基本的条件。所以第一步做的工作就是加入测速功能。架构部已经建立了一个测速平台：http://Coss.oa.com/pagespeed.html 。项目组将QQ.com首页接入了测速平台。开始监控首页的速度情况。由于门户网站有很强的可对比性。因此测速的另一个工作就是接入基调公司的测速数据，同时监控了QQ.com、新浪、搜狐、网易的首页的速度。这样可以随时了解与竞争对手的对比状况。项目组开始每周发一个QQ.com用户体验周报给各位相关人员以及相关领导。方便大家时刻了解QQ.com状态以及项目组的进展情况。

（3）       开始页面分析工作。分析工具有YSLow，HttpWatch，Firebug等等。分析中发现，QQ.com首页请求很多，总共有141个，而速度比较好的sohu的首页只有78个请求。经过初步的分析，我们将首期的优化方式定在减少请求数上。并且做了一个请求分析工具，用于统计网页请求数，将请求数分类。结果分析，发现16个广告位却产生了51次请求，有比较大的优化空间。因此广告成为了首期优化的重点。

（4）       开始首期优化工作。这段时间的优化工作主要有：

优化点
优化手段
效果

广告改造
改造广告系统，合并请求
减少34次请求

页卡内容延迟加载
初始页面不加载页卡内容，当用户浏览页卡的时候再加载
减少17次请求，同时减少了30%的页面内容

素材图片合并
利用CSS Image Sprites功能合并小图片
减少9次请求

Ping.js改造
精简代码，更换位置
缩减文件大小

2个天气js改造
移入主页面
减少一次请求

股票指数
延迟加载
减少拖页面的可能性

拍拍js改造以及素材合并
Js代码精简，素材使用网站部统一的服务器
减少请求数，减少页面大小

搜索js改造以及素材合并
Js代码精简
减少1次请求，减少页面大小


经过这些优化，请求数降低到100以下，速度有了几秒的提升。

3.     优化技术
3.1. Yahoo 34条优化规则的运用
Yahoo的网站优化规则从最开始的14条已经扩展到34条。从应用实践来看，这些规则具有很强的指导性和很高的优化价值。QQ.com大部分的优化技术都是这些规则的运用。

如：

l         首页各个tab中的图片新闻，控制了大小，内容图片 8k限制，原来没有规范，一个115×70的图片有时候达到20-30KB。

l         除去了js参与页面初始化的代码。修改为当侦听到鼠标动作时再触发js

l         搜索js，天气js等的改造，去除冗余代码，延迟到首屏后加载

l         首屏中，去掉一个iframe，此iframe中还包含2个请求，直接使首屏时间下降将近1秒

l         Js往往可以得到很大的压缩量。评论系统，原来js超大-6个文件，100k左右的js内容，还占用一个iframe，改造后去除iframe，缩小到1个js，大小10k左右

l         页面布局：div和table布局对页面渲染有很大的区别。尽量采用div布局。

l         减少页面404错误。由于网站部的网页变化很快，这里我们制作了一个扫描工具定期扫描404错误

l         缓存设置：

n             服务端缓存和本地缓存；

n             图片、素材、js/css、flash等静态文件都应该设置长时间（周、月、年）的缓存，降低页面请求数。

l         gzip设置：文本文件（包括html、js、css等）都应该设置gzip压缩，基本可以减少70%的网络数据传输大小。

l         Etags设置：当服务由多台服务器提供时，去除web服务器的Etags设置。

l         根据测速结果对IDC分布进行优化调整，加强CDN应用；

…

3.2.      首屏优化的创新
QQ.com优化有一个创新就是首屏优化，比较好地解决了大页面的速度体验问题。

网站部的网页特点是许多页面有十几屏长，无论如何优化，全部加载时间也不会太短。实际上QQ.com在2个Q的时间里花6个阶段优化，页面全部加载完也会在8-15秒左右，这个总体加载速度对于用户来说，还是很慢的。因此将首屏快速呈现给尤其重要，最快速度显示页面的首屏内容，可以给用户非常好的体验。实践中，首屏可以优化到0.5-2秒，几乎立刻可见和可点击，大大提升了用户体验。

首屏优化的方法：

（1）       定义首屏：一屏大小，最长900像素

（2）       首屏测速：在首屏位置插入首屏测速代码

（3）       有针对性的优化首屏：布局块的大小不要超过首屏；将拖延时间的内容放到首屏后执行或加载，如ping.js代码、搜索js, 天气js等等。这样可以有效地缩短首屏的时间

经过首屏专门优化，QQ.com首屏优化结果。现在基本在1.5s左右，显示迅速。各频道底层页的首屏也在0.5-2秒之间。用户体验效果改善明显。

全国用户访问QQ.com首屏延时图

4.     Cookie隔离
由于历史原因，QQ.com上存在的Cookie比较多，大小有500B-2K。以前qq.com所有的网页元素都使用qq.com域名，每个请求都带了cookie。对网站性能有不少影响。以下的表格为Cookie大小对网络延迟的影响：

Cookie大小对网络延迟的影响

对于图片和素材来说，Cookie是多余的，因此采用非qq.com域名的图片和素材服务器（gtimg.com），可以有效地隔离cookie。

Cookie隔离后,图片服务器延时由原来0.63秒降到0.43秒，速度提升32%。素材服务器延时由原来的0.46秒降到0.35秒，速度提升24%.  同时上行流量减少20%

5.     页卡的按需加载
QQ.com首页上使用了不少页卡，如下图所示。每个页卡里隐藏了一些内容。当用户鼠标Mouse Over的时候，该页卡的内容会被显示出来。平时，页卡的内容是隐藏的。

针对于这种情况，我们对页卡的内容做了按需加载。平时，页卡的内容没有下载，只有用户Mouse Over的时候，页卡的内容才被下载，并呈现给用户。如果该内容已经被下载，则内容被直接呈现给用户。

由于单个Tab内容很小，加载快速。用户访问Tab内容没有感觉到和以前有什么差别。

QQ.com首页上有17个隐藏Tab页改为按需加载，减少了30%的内容量以及16张图片请求。

6.     度量工具--测速平台
度量工具是速度优化成功的必要条件，是“优化之眼”。没有眼睛，优化工作就无从做起。

测速方法：在页面最顶部加入测速js脚本，记录下页面开始时间，然后在页面中首屏和其他自定义监测点也记录相应时间，页面加载完全之后，脚本会将记录的多个时间点发送给服务器进行统计分析。

项目前期采用架构部的测速平台，以及第三方测速系统（基调），这样可以快速开展工作。

项目后期针对网站部的业务，开发了定制化的测速平台。主要有以下特点：

（1）       定制化报表和数据，可以在一个页面里看到网站部所有业务的速度情况，并用颜色表示是否达标，直观易用

（2）       快速接入能力，几个小时就可以接入新业务

（3）       实时测速数据，5分钟采集一次实时数据

（4）       更方便易用

测速平台在整个优化过程中发挥了巨大的作用，在度量、沟通方面是一个有力的工具。同时也是一个很好的运维工具。当系统有故障时，可以迅速定位出故障区域。

全国速度实时视图

各业务用户速度访问一览表，一目了然

7.     优化是系统化工程
QQ.com的优化是一个复杂的系统，而且涉及到多个部门的合作。QQ.com的优化不仅仅是Web优化技术问题，而是一个复杂的系统工程。只有系统化地处理好各个方面的工作，才能够进行深度优化，并保持持续优化，保持工作成果。

（1）       技术上涉及到多个系统的协作优化：页面、QQ.com后台服务系统、CDN、发布系统等等

（2）       QQ.com上集成了多个部门的应用，优化过程中需要进行跨部门合作，对其他部门的应用也需要优化

（3）       部门内涉及到内容线的工作。需要编辑的配合才能进行更好地优化

（4）       工具平台建设

（5）       流程规范建设：流程规范建设可以将优化工作常态化、固化到日常工作中，保证工作成果得到延续

合作:

（1）源于Q首优化的广平部磐石计划，对首屏速度及整页速度贡献较大；

（2）与SOSO、拍拍、财付通合作页面的优化改进；

（3）推动第三方合作公司页面优化，包括易车、Stats、欧洲体育等合作公司页面的优化；

（4）与网站部20多个频道、8个技术开发小组配合对频道页面及基础产品进行深入优化；

工具平台建设：

（1）打造定制化、实时、易用的质量监测平台，指导优化高效推进；

（2）发布系统配合完成图片压缩、页面检查、Cookie隔离等优化措施；

（3）ITIL平台从设备监控、业务监控、容量管理等多个系统，从各个方面为优化项目提供数据支撑和优化辅助作用；

（4）结合PGV2的热点分析等功能，为页面内容优化调整提供数据依据；

规范流程建设：

（1）频道改版流程加入优化审核步骤；

（2）新产品上线流程加入优化审核步骤；

（3）第三方合作流程加入优化审核步骤；

（4）制定《频道页面维护优化规范》，细致指导编辑日常页面维护；

（5）频道优化接口人制度，保证优化工作规范流程的执行；

（6）针对频道编辑、开发的多场大型优化培训；

8.     持续优化
QQ.com的页面时刻处于高度变化过程中，每天新闻页面就会更新10000多个。一年会推出1000多个活动。各个页面的版面也处于不断地调整中。广告、搜搜等合作部门的系统也经常变化。这里的任何变化都有可能影响到页面速度的变化。因此如何保持优化成果，进行持续优化是必须要关心的问题。

我们从四个方面保证持续优化：

（1）       专业的优化小组：优化专业高手、前台高手

（2）       流程化：将优化工作固化到流程中：已建立多项流程并实施

（3）       工具化：便捷、易于接入的测速平台。随时了解业务的速度状况；各种辅助工具：图片自动压缩、页面分析工具、ITIL、PGV等等

（4）       培训：对开发组、内容线进行培训，提高用户体验意识，传递优化方法

9.     快速优化
网站部产品线比较长，现有总共70多个产品，大的产品也有十几个。页面的种类加起来就有成千上万个。因此打造快速优化能力对于网站部优化团队来说也是非常重要。快速优化能力主要来自这几点：

（1）专业的优化小组

（2）便捷、易于接入的测速平台

（3）已经积累的优化经验

新业务快速优化过程：

第一步：加入测速代码，几个小时到1天内完成

第二步：优化小组分析新业务的页面，1天内出分析结果

第三步：一般几天内可以有优化成果

以后：关注测速结果，持续优化

10. 优化成果
   QQ.com首页速度在四大门户中排行第一；

    Gomez中国门户用户体验排行从第14位上升至第3位；

    QQ.com频道首页及底层页首屏速度全部<2S，首屏速度较优化前提升50%-70%,整页速度较优化前提升20%-40%。

迷你首页优化节省1.5G带宽，节省费用180万/年

压缩图片，节省20%带宽，省费用2G,节省费用200万/年

    建立了一系列的流程规范来保证优化成果长久保持和持续进步；

    建立了质量监测平台等一系列工具平台保证优化的高效推进和监控；

  

各门户首页整体打开速度

各门户首页首屏打开速度

评论

1 楼 56553655 2012-07-17  

很好的优化经验，值得借鉴