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

WebFX总统。Bill在互联网营销行业拥有超过25年的经验，专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

移动优化网站构建方法的比较关于创建移动网站的最佳技术存在争议。谷歌提倡创建响应式网页设计，而著名的可用性顾问Jakob Nielsen，支持创建专门的移动网站(但他随后就这样做了被一些网页设计师猛烈抨击)．第三种选择也越来越流行，在这种情况下，web服务器根据网站上网页被请求的设备的不同，从相同的URL渲染适当的HTML和CSS响应式设计+服务器端组件)．

本文将讨论每一种方法。每个部分都提供了使用特定方法的网站的真实例子。用于测试和收集所有示例数据的移动设备是一个使用iOS 5.0的iPhone 4。

响应式网页设计(RWD)

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

响应式网页设计的优点

  • 内容校验:无论使用何种设备，您的站点都包含相同的内容和HTML标记，为用户提供类似的体验。随着越来越多的人将智能手机作为他们访问网络的主要方式，这一点将变得越来越重要。
  • 网页的单一URL:这使得分享和链接到你的内容变得更容易。不需要重定向来获得设备的优化视图(与专用的移动站点相比)。

响应式网页设计的缺点

  • 内容不会完全针对移动设备进行优化:除非你使用尝试的方法，你的网页将包含与桌面相同的信息。与单独的手机网站相比，你可以为手机用户量身定制网页内容。
  • 慢的性能:据统计，现在的网页平均大小约为1.3 MB2013年1月的数据从HTTP存档。在使用RWD时，可以避免不必要的下载，但在实践中，大多数响应式网页设计网站的大小都相同或更大。据移动性能研究人员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，而桌面用户可能会点击链接获得移动版本。为了防止重复的内容SEO问题，您需要使用rel = "替代"而且rel = "规范"meta标记。此外，当移动用户在谷歌上搜索并点击搜索引擎结果中的桌面URL时，他们要么会看到桌面版本的页面，要么会被重定向到移动版本的页面。

    如果该页面的移动版本不存在，他们将得到一个错误。

  • 不同的内容和功能:创建专门的手机网站的目的是为手机用户量身定制网站。这可能意味着删除内容和功能，从而产生不同的体验。
  • 内容分支:您有两组不同的内容，它们可以创建内容策略噩梦。
  • 需要重定向:移动用户将需要重定向到优化的视图，反之亦然。重定向增加页面的加载时间。它也会对你网站的SEO产生影响。

专用移动网站的例子

沃尔玛(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秒)。与Amazon单独的移动页面不同，如果你从桌面访问移动页面，你会自动重定向回桌面版本。性能结果:

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

专用移动网站上的资源

RESS:不同的HTML和CSS来自同一个URL

这种创建移动网站的方法使用服务器端编程来为不同的设备呈现定制的CSS和HTML。移动用户将得到一组代码，而桌面用户将得到一组不同的代码。这个实现的主要目的是提高网站性能。

这种方法与响应式网页设计相结合时效果最好。这个实现被称为响应式网页设计+服务器端组件（靓)．当使用此方法时，重要的是要包括Vary HTTP头(请参阅谷歌构建智能手机优化网站的指南)，以便机器人能够抓取桌面和移动版本。

平安归来的优点

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

缺点的靓

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

平安归来的例子

美国有线电视新闻网 美国有线电视新闻网移动版使用了针对移动性能优化的HTML和CSS，而桌面版使用了更多的HTTP请求和JavaScript。导航系统也为特定于移动设备的任务量身定制。性能结果:

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

eHow网站 eHow网站和CNN一样，eHow手机版的HTML和CSS也根据性能进行了调整。两个网站的顶层导航是一样的，都强调搜索和七个内容频道。性能结果:

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

SlideShare SlideShareSlideShare的移动版和桌面版完全不同。手机版采用响应式网页设计，而桌面版则不然。每个站点都使用完全不同的HTML和CSS。

手机版本的JavaScript明显更少。每个站点也使用不同的导航结构。性能结果:

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

WordPress.com WordPress.comWordPress.com的移动版和桌面版几乎一模一样，只是有一些不同:

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

性能结果:

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

资源靓

  • Drupal用户:的移动侦测PHP类可用于处理用户代理检测，而Drupal Theme Switch将切换到为移动设备优化的主题。要将Vary HTTP头提示添加到HTTP头中，请使用drupal_add_http_header函数。
  • WordPress用户:最简单的解决办法就是随大流WPTouch，但是这个插件没有添加Vary HTTP头。或者，你也可以一起去任何移动主题切换器切换到移动优化的主题。学习如何修改你的WordPress网站的HTTP头．

总结

理论上，响应式网页设计是最好的解决方案。但在实践中，大多数RWD站点没有得到最佳实现，导致加载时间变慢。根据我的测试，拥有一个专门的手机网站可以获得最快的加载时间，但这种实现也有明显的缺点。

如果性能是最重要的，我才会这么做。我个人的偏好是与响应式网页设计和不同的HTML从同一个URL (RESS)的组合。这提供了RWD的所有优点，同时克服了它的两个最大缺点(下载的文件更多，加载时间更慢)。

如果你正在寻找设计响应性网站的帮助，可以去宾夕法尼亚州哈里斯堡的WebFX看看。这是他们做的一些工作船的经销商！你们使用什么方法来构建移动优化网站?

请在评论中分享你对这个问题的看法。

相关内容

你网站的SEO怎么样?

使用我们的免费工具得到你的分数计算在60秒内。

你网站的SEO怎么样?

使用我们的免费工具得到你的分数计算在60秒内。

WebFX职业

加入我们的使命，为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!