构建移动优化网站的方法比较

WebFX总裁。Bill在互联网营销行业拥有超过25年的经验，专注于搜索引擎优化、用户体验、信息架构、营销自动化等领域。威廉在希彭斯堡和麻省理工学院的科学计算和教育背景为WebFX市场上的CyrdFX和其他关键研究和开发项目提供了基础。

构建移动优化网站的方法比较

在创建移动网站的技术中，哪一种是最好的，这是一个争论。

谷歌提倡创造响应性的网页设计，而著名的可用性顾问雅各布·尼尔森，赞同设立专门的移动网站（但他后来被解雇了被一些网页设计师猛烈抨击).

第三种选择也越来越流行，web服务器根据请求站点上的网页的设备(被称为响应性设计+服务器端组件).

本文将讨论每种方法。

每个部分都提供了使用特定方法的网站的真实示例。

用于测试和收集所有示例数据的移动设备是一个iPhone4使用iOS5.0。

响应式网页设计(RWD)

响应式网页设计(RWD)通常使用CSS3媒体查询来根据用户浏览区域的大小调整网页的布局。您使用相同的HTML来显示不同的网页布局适用于台式机、平板电脑、移动设备、电视等。

响应式网页设计的优点

  • 内容奇偶性：无论使用何种设备，您的网站都包含相同的内容和HTML标记，为您的用户提供了类似的体验。随着越来越多的人将智能手机作为访问Web的主要手段，这一点将变得越来越重要。
  • 网页的单个URL：这使得共享和链接到您的内容更加容易。无需重定向即可将设备转到其优化视图（与专用移动站点相比）。

响应式网页设计的缺点

  • 内容不会针对移动设备进行充分优化：除非你使用尝试的方法，你的网页将包含与桌面页面相同的信息。相比之下，如果是单独的手机网站，你可以为手机用户定制网页内容。
  • 慢的性能:据统计，目前的平均网页容量约为1.3MB2013年1月的数据从HTTP存档。使用RWD时，可以防止不必要的下载，但实际上，大多数响应性web设计网站的大小都相同或更大。据一份报告显示，移动性能研究人员Guy Podjarny测试的86%的网站大小相同或更大关于移动网站性能的演示．
  • 浏览网站会更加困难:移动用户通常希望执行与桌面用户不同的任务。他们也可能更习惯于特定于手机的UI设计模式. 除非为每个设备自定义导航结构，否则可能存在可用性问题。

响应式网页设计示例

星巴克

星巴克网站就是一个很好的例子，它展示了响应式网页设计的利弊。它们的所有内容都可以在移动设备上访问，每个页面使用相同的URL，而且没有重定向。

不幸的是，他们的网站需要大量的下载(在3G智能手机上大约需要15秒)，为了阅读整个网页，需要大量的滚动。

业绩结果：

  • 平均加载时间：14.99秒
  • 平均页面大小：1193 .88点KB
  • HTTP请求数:142

世界野生动物基金会

世界野生动物基金会

世界野生动物基金会网站是一个很好的响应式网页设计的实现。导航是为移动任务而优化的。

然而，3G智能手机的加载时间有点慢（大约需要7秒）。此外，一些内部页面（例如，它们的领养表格)没有针对移动设备进行优化，在我的移动设备上使用很痛苦。

业绩结果：

  • 平均加载时间：6.91秒
  • 平均页面大小：885.97 KB
  • HTTP请求数:72

《波士顿环球报》

《波士顿环球报》

波士顿环球报网站可以说是大型网站中最好的RWD实现之一。该网站使用了响应式图像，并优化了JavaScript，所以它不会影响移动设备的性能。

业绩结果：

  • 平均加载时间：5.55秒
  • 平均页面大小：605.27 KB
  • HTTP请求数:87

响应式网页设计的资源

专用移动站点

一些网站通过创建一个独立的移动网站来优化移动设备用户的体验。

最常见的实现是桌面网站重定向到子域（例如。，mobile.examplesite.com为examplesite.com.)

专用移动站点的优势

  • 更容易对移动和桌面站点进行单独更改:更改可以仅限于移动版本或桌面版本。
  • 更快的加载时间：由于您只针对移动站点进行开发，因此您可以专门针对移动用户体验优化您的移动站点。
  • 更易于导航：导航结构和内容是为移动用户执行的任务定制的。

专用移动站点的缺点

  • 每个页面有多个URL：在社交媒体上分享网页成为了一个问题，因为移动用户会分享移动URL，但桌面用户可能会点击链接，获得移动版本。为了防止重复内容搜索引擎优化问题，您将需要使用rel = "替代"和rel = "规范"meta标记。此外，当移动用户在谷歌上搜索并点击搜索引擎结果中的桌面URL时，他们要么会看到桌面版本的页面，要么会被重定向到移动版本的页面。如果这个页面的移动版本不存在，他们会得到一个错误。
  • 不同的内容和功能:创建专用移动网站的目的是专门为移动用户定制网站。这可能意味着删减内容和功能，带来不同的体验。
  • 内容分叉：您有两组不同的内容，可以创建内容策略噩梦
  • 需要重定向:移动用户需要重定向到优化视图，反之亦然。重定向会增加页面的加载时间。它也可能对你的网站的搜索引擎优化产生影响。

专用手机网站的例子

沃尔玛（mobile.Walmart.com）

沃尔玛

沃尔玛专门的移动网站以1.35秒的速度加载。

业绩结果：

  • 平均加载时间：1.35秒
  • 平均页面大小：272.29 KB
  • HTTP请求数:45

亚马逊（www.amazon.com/gp/aw/h.html）

亚马逊

就像沃尔玛一样，亚马逊的独立移动页面比我测试的响应式网页设计更快(它的加载时间为2.25秒)。

然而，奇怪的是，并不是他们网站上的所有页面都有手机优化版本。例如，如果你用智能手机搜索谷歌，很多谷歌的搜索结果指向的桌面页面并没有重定向到移动优化版本。此外，如果您直接从桌面访问移动页面，则不会重定向到桌面版本。

业绩结果：

  • 平均加载时间：2.25秒
  • 平均页面大小：103.66 KB
  • HTTP请求数:16

英国广播公司(www.bbc.co.uk /手机)

英国广播公司

与我测试的响应式网页(3.40秒)相比，BBC的独立移动页面速度更快，但其中近一半的时间是将移动用户重定向到移动页面(1.65秒)。

与亚马逊单独的移动页面不同，如果你从桌面访问移动页面，你会自动重定向回桌面版本。

业绩结果：

  • 平均加载时间：3.40秒
  • 平均页面大小：56.04 KB
  • HTTP请求数:22

专用移动站点上的资源

同一个URL的不同HTML和CSS

这种创建移动网站的方法使用服务器端编程来为不同的设备呈现定制的CSS和HTML。手机用户将得到一组代码，而桌面用户将得到一组不同的代码。

这个实现的主要目的是提高网站性能。

此方法与响应性web设计结合使用时效果最佳。

此实现被称为响应式网页设计+服务器端组件（靓).

在使用这种方法时，重要的是要包含Vary HTTP头（请阅读谷歌的《构建智能手机优化网站指南》），这样机器人就可以抓取桌面和移动版本。

RESS的优势

  • 更易于导航：导航结构可以针对移动和桌面用户执行的不同任务进行定制。
  • 低膨胀页:而不是依靠显示：无；或可见性：隐藏；要为移动设备隐藏页面元素，则可以将它们从HTML或CSS中删除。这将减少下载的数据量并加快加载时间。
  • 更快的加载时间：可以从HTML中删除不必要的JavaScript，从而释放移动设备上的CPU、内存和缓存。

RESS的缺点

  • 更多的服务器资源:动态构建HTML将增加服务器上的负载。
  • 需要设备检测：移动用户需要被检测到。设备检测不可靠。

平安归来的例子

有线电视新闻网

有线电视新闻网

移动版本使用了针对移动性能进行优化的HTML和CSS，而桌面版本使用了更多的HTTP请求和JavaScript。

导航也为手机特定的任务量身定制。

业绩结果：

  • 平均加载时间：3.46秒
  • 平均页面大小：163.12 KB
  • HTTP请求数:28

埃霍

埃霍

与CNN一样，eHow手机版的HTML和CSS也进行了性能调整。两个网站的顶级导航都是一样的，重点是搜索和七个内容频道。

业绩结果：

  • 平均加载时间：6.15秒
  • 平均页面大小：188.95 KB
  • HTTP请求数:31

SlideShare

SlideShare

SlideShare的移动版和桌面版完全不同。移动版使用响应性网页设计，而桌面版则没有。每个站点使用完全不同的HTML和CSS。移动版本中的JavaScript要少得多。每个站点也使用不同的导航结构。

业绩结果：

  • 平均加载时间：6.15秒
  • 平均页面大小：188.95 KB
  • HTTP请求数:31

WordPress.com

WordPress.com

WordPress.com的移动版和桌面版几乎相同，但有一些不同:

  • 移动版本有一个http-equiv属性，而桌面版本没有(< meta http-equiv =“x-ua-compatible”内容=“IE = 10”>）
  • 它们各自使用不同的样式表
  • 移动版本将诺瓦利达属性中
    标签，而桌面版本则将其放在表单中<输入>
  • 移动版在页脚有一个新闻链接，而桌面版在页面的任何地方都没有新闻链接
  • 一些JavaScript已从移动版本中删除

业绩结果：

  • 平均加载时间：2.77秒
  • 平均页面大小：118.40 KB
  • HTTP请求数:19

资源靓

  • Drupal用户:的移动侦测PHP类可用于处理用户代理检测，而Drupal主题开关将切换到为移动设备优化的主题。要将Vary HTTP头提示添加到HTTP头中，请使用drupal\u add\u HTTP\u头函数。
  • WordPress用户：最简单的办法就是跟着去WPTouch，但是这个插件没有添加Vary-HTTP头。或者，你也可以和我一起去任何移动主题切换器切换到移动优化主题。了解如何修改WordPress站点的HTTP头．

总结

理论上，响应式网页设计是最好的解决方案。但在实践中，大多数RWD站点没有得到优化实现，导致加载时间变慢。

根据我的测试，拥有一个专用的移动站点会导致最快的加载时间，但是这种实现有很大的缺点。只有在性能是最优先考虑的情况下，我才会这样做。

我个人的偏好是结合响应式网页设计和来自同一URL (RESS)的不同HTML。这提供了RWD的所有优点，同时克服了它的两个最大缺点(需要下载更多的文件和加载时间更慢)。

如果你正在寻找设计响应式网站的帮助，可以去宾夕法尼亚州哈里斯堡的WebFX。以下是他们所做的一些工作船商！

你用什么方法建立移动优化网站？请在评论中分享你对这个问题的看法。

相关内容