英文原文:Five Steps for Travel Sites, Mobile and Web Performance
近日知名旅游网站 gogobot.com 的联合创始人兼 CTO 分享了他们的网站和移动应用打造经验，并总结了 5 个打造高性能、高扩展性网站的技巧。以下为译文：
网络在平板和智能手机上的使用率在飞速的增长着，甚至有超过笔记本和台式机的架势。在我们自己的网站 Gogobot 上，我们看到了智能手机上 133% 的提升，而网络在平板上的使用率更飙升了 300%。当下新出的智能手机有着巨大的屏幕，而平板则具备高分辨率的优势（特别是苹果的视网膜屏）。自然而然的，用户更想在旅游网站上看到一些漂亮的图片。这是网络设计模式中非常大的一个转变，用户开始使用多图少文字来分享自己的故事和情感。
社交网络的兴起引起了一波又一波的个性化，而类似 Gogobot 这样的新型旅游服务生成了一个带有个人推荐的动态页面；个人推荐基于用户个人喜好的信息收集，可以是一个网站的历史行为、相似的旅行人士或者是从社交图中用户。因此，两个同在拉斯维加斯并向 Gogobot 索取导游的用户可能会得到两个完全不同的结果——不同的餐饮、宾馆、活动推荐、图片等等。
同时存在的改变还有：从有线到无线，从小的图像到丰富的经历，从静态页面到动态定制化。这些变化给旅游网站带来了极大的压力，他们必须尽力去维护性能并且让他们的应用程序加载尽可能的快。移动和无线网络拥有着太多的不可预测性，并极易造成拥堵。
在 Gogobot，我们推倒了所有障碍。大多数的网页都包含非常大的（网络标准）高分辨率图片，为游客带来去惊人的视觉效果。事实上，在设计与丰富的网络体验上，我们还获得了有名的 Crunchies 奖项。提供定制化的用户页面，不仅反应了个人兴趣，还根据社交图展示了独一无二的推荐信息；不到两年，我们实现了上万到上千万的用户数量激增。
当用户从我们网站跳转到其它网站并预定时，我们会获得一笔介绍费，这也是我们的收入所在。所以对比其它的电子商务网站，性能将更直接的影响盈利。为了达到这个目的，我们在网站和应用程序的性能上煞费苦心。这里是我们经常使用的 5 个技巧，用来优化计算机及移动设备上的用户体验：
监视网站、关键事务进程以及基础设施
在过去 10 年，随着云计算的发展，市场上出现一些更新及更精细的监视工具，这些工具对于初创公司来说是非常有价值的，并且很容易进行纵向扩展，我们使用 New Relic（最具人气的 SaaS 性能管理工具）监视整个应用程序基础设施。其中包括度量服务器性能来监视网站的负载时间、API 延时、移动性能以及页面的可用性，这有助于我们发现是哪条代码影响了 Gogobot 的性能。我们使用这个服务进行实时的监视，并将它作为帮助我们优化 RoR 应用代码的 test-dev 工具。因为使用了 SaaS 服务，我们并不需要去管理任何软件，我们所有需要做的事情就是向希望监视的服务器中添加一个小的传感器。因为它可以给我们提供应用程序和基础设施堆栈上的全局视图，它能够在错误发生时进行处理并帮助我们寻找故障，这对于我们简直是无价的。
尽可能的优化缓存
基本上所有的网站都会保存加载的相同内容。比如你每次访问亚马逊主页，logo 总是在页面的最上方。这部分内容就可以被储存，或者是进行缓存，这样数据就会存储在靠近用户的地方，或者是设备的浏览器中。这就意味着静态的图像或者是内容不需要再每次用户回到你网站时都进行加载，缓存静态组件可以起到降低带宽和削减成本的效果。我们在云中为缓存配置了超过 200GB 的内存，这可以保证我们有足够的容量进行缓存，从而以最快的速度给终端用户推送信息。
为了更好的执行这一步，我们建立了 1 个多层缓存（memcached、Redis 等）系统，通过第三方服务的形式将这些信息缓存到全球各个互联网连接点最近的地方。通过这个系统，我们可以在整个基础设施上几秒内完成缓存类别的转换（图片或者 HTML 组件）。有些组件为所有用户缓存，有些组件只对某些特定的用户缓存——这就需要下一个技巧解决。为了实现这个目的，我们还需要映射我们网站和应用程序所有需要缓存的部件，用于缓存的建立和更改。
后端定制引擎
我们使用 NoSQL 数据库（MongoDB）来缓存，迅速的在内存中检索图片和文字信息。这就意味着当你在纽约时，社交图中的某个人上传一张 Chelsea 宾馆的图片，我们可以在你还未离开查询页面时将它给你推送。这是非常重要的，因为我们很多用户都是在到达目的地后才访问我们的应用做调查或者求指导。了解哪些消息需要被个性话，将这些消息放到基础设施中恰当的位置，使用多层缓存，就是我们的秘密武器。建立一个与基础设施无缝连接的定制缓存并不是件容易的事情，但是在这上面投入时间是非常有价值的，这些映射和细节将给我们绘制一个具体的蓝图，不仅可以了解在何时需要移除哪个特殊的选项（主页图片），同样会让我们明白及定制化网站深层次的一些选项。并且我们可以让我们在低延时和新鲜内容上保持竞争优势。
使用网络应用流替换 CSDN 和遗留缓存
随着更加丰富、高分辨率网络体验需求的增加，互联网与 10 年前对比已经发生了翻天覆地的变化。不幸的是，当下的 CDN 并不能匹配网络发展的步伐。他们通常是为静态对象而设计，同样在 CDN 设计的年代，交付时间是互联网的弱势所在。我开始使用的是 Amazon CloudFront，之后又使用了 Cotendo（被 Akamai 收购），但是仍然不能让我们感到满意，我们的页面加载仍然不是很快。幸运的是，另一个供应商 Instart Logic 解决了这个问题。取代在允许用户请求之前加载整个页面，他们的 Web Application Streaming Network 会将图片、HTML 以及其它的网页组件分解成小片。他们会去理解用户最想首先交互的部分，并率先给用户发送这个部分。这在其它项目还在后台加载的同时，让用户更早的与网站交互。在 Gogobot 我们看到使用这个技术后页面加载速度快 45%。
使用 AJAX 实现异步加载
默认情况下，网页都是同步加载，当然在同一时间只加载一个组件。我们使用 AJAX 实现网页的组件的并行加载，所以就不会存在某些组件拖后腿的情况。AJAX 可以让网络应用程序更加的丰富、快速以及更加独立于浏览器。多数开发者为最新的 HTML5 兼容浏览器建立网站及网络应用程序时都会使用 AJAX。这样的话我们就可以稍微控制页面加载的次序，比如从上到下，而鉴于人们的浏览习惯，将会获得一个更好的用户体验。
优化所有的图片
我们的系统中加载了上千万张图片，但是我们限制了图片的体积。然而一个忙碌中的服务器去做图片体积的削减和修整肯定会拉低服务器性能。基于这个原因，我们会在加入缓存之前就会对图片的体积进行处理。通过这个方法，我们转移负载让它远离用户访问网站，将其放到了图片上传到网站的时候。这样做不仅节省时间，同样还让我们可以更轻松的扩展终端基础设施，以匹配用户增长的需求。
在 Gogobot，我们使用以上这 5 个步骤轻松应对用户从万到千万的激增，打造完美的用户体验。
相关文章
