越来越多的web设计师提出了移动优先的口号,而随着硬件设施的完善,Web App、轻应用的逐渐普及,移动网站也必将大行其道。但在目前有限的硬件情况下,我们设计移动网站时必须注意优化其性能。本专题收集了一些著名开发者对于移动网站性能优化的技巧,让你在优化移动网站时不再无据可依。

头条推荐

移动网站性能优化备忘录

本文由Johan Johansson的《How To Make Your Websites Faster On Mobile Devices》所译,内容全面,讲解清晰易懂,每个移动网站的开发者都应该对照里面的条目来优化自己的网站。……>>详细

移动网站性能优化:网页加载技术概览

性能一直是网站成功的关键。越来越多的研究已经证明,不管是小型电商,还是像沃尔玛那样的连锁店,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度。

在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验。但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径。低带宽,高延迟,小内存,低处理器性能的移动设备环境,迫使开发者不得不想办法通过优化前端页面的性能来满足用户的性能预期。

在强调如何解决移动端性能问题上,这篇文章总结了一些前端优化的案例,并且概括了一些加速页面的方法和策略。

为什么性能会影响这么多

不论你的页面设计地多么有趣、漂亮、交互性好,不管是在桌面还是移动设备上,如果页面需要花2到3秒时间去渲染展示,那么用户都会很快变得不耐烦的。可以预期的是,在页面还在加载的时候,用户很有可能从浏览购买的行为转变为点击回退键或者是关闭浏览器的行为。

阅读全文

高性能移动web开发技巧

移动终端面临的主要问题:

  • 网络数据传输延迟(即便是3G网络)
  • CPU运算能力(即便是配有1GHz+的设备)

移动终端可以做的优化:

  • 根据设备屏幕来选择加载资源
  • 降低延迟,加快连接速度
  • 提高处理性能

本文介绍了一些针对移动设备优化技术,特别针对智能移动设备(iOS,Android,WP)。

针对屏幕来优化图片

移动设备有不同屏幕尺寸,分辨率,应当有针对性加载不同的图片内容。

阅读全文

如何创建高性能移动web站点

如果你的网站3秒钟没有响应,人们就会失去兴趣了。为了满足响应快这个愿望,需要一个不同的方法在手机上进行分析,设计和测试。

这篇文章将会对Johan Johansson在2013年4月提出" 怎样让你的网站在手机上也很快"的这种理念进行扩展。我们将提出论证方法来确认人们在手机上与网站的交互方式和以前是不一样的,特别是设计也是基于此理念的。我们的目标不仅仅是提高网站性能,而且也要增加客户收入的。

我们将关注手机两个特性,这两个特性短期内也不会有变化:电池容量小,屏幕小。

电量小

手机的通讯要用无线电,但手机的电池很小,所以要非常谨慎的用电以防止把电用光。这样,如果无线电不用的时候就会迅速关掉,这样就增加了网页出现的时间。 2G和3G无线技术需要2秒钟来建立HTTP链接。如果我接受“用户会在3秒后失去兴趣”的观点的话,那我们的网站只有1秒来响应了。想想这“黄金般的一 秒”吧。

阅读全文

移动 Web 应用性能的 5 个秘籍

这些秘籍是基于,不正确的前提和对本地和网络软件栈之间关系的误解,以及曲解数据的散点。 我们认为重要的是,要对这些秘籍进行验证,使用用我们已经收集了多年来关于性能的数据和我们自己的做的移动 Web 应用程序性能的经验。

秘籍1:移动网络性能主要是由运行在CPU上的JavaScript性能决定

现实:大多数网络性能是由渲染管线的优化程度,GPU加速程度,DOM交互速度三者制约。更快的JavaScript总是有用的,但它很少是决定因素。

秘籍2:因为硬件不停的升级,CPU越快,JavaScirpt执行的也会越快(又称摩尔定律)

阅读全文

案例学习:优化移动Web产品的四个要点

本人是响应式Web设计 (Responsive Web Design)理念的拥护者和粉丝。但经常有人这样问我:为什么我们还要为Bagcheck单独构建一个独立的移动版本,而不使用流体网格(fluid grids),弹性图片(flexible images)和媒体查询(media queries)等方法来为我们的移动用户提供一个响应式Web解决方案?

对于我们的 Bagcheck站点来讲,网站性能以及网站开发速度是两个至关重要的问题。我们所做的决定中,很多都是为了使网站性能和开发速度两者都尽可能的快(毕竟 我们是一家新成立的企业)。作为我们关注网站性能的一部分,我们也很注重“什么才是必须的”这样的理念。这意味着我们需要向不同设备或者用户呈现一些他们 需要的东西。我们乐于做一些优化工作。使用双重模板系统(dual template system)我们就可以从以下多个方面进行优化,比如资源顺序(source order),媒体(media),URL结构以及应用程序设计。

最初我们以命令行接口(command-line interface)的形式构建Bagcheck,在此基础之上我们创建了一个移动Web体验版的Bagcheck,接着很快就开发出了一个桌面Web体 验版的Bagcheck。这样的过程很可能也影响到了我们所使用的开发方法。

另外值得一提的是,虽然自己能够胜任编码工作,但我主要是一个设计师。因为我关注的焦点是设计要素,所以在这篇文章里会尽量多的包含一些技术层面的资源链接,如果你有更多的资源和实现想法,赶快发给我吧!

阅读全文

移动web开发技术与理念

关于移动Web性能的5个神话
作者的主要观点是“Why mobile web apps are slow”文中给出的数据虽然基本…
移动Web前端开发
这篇文章就当进入移动web开发的宣誓稿吧,作为移动领域的门外汉,在这段时…
构建移动Web应用程序的技术
编写web应用程序时,有很多的技术决策。笔者最近回来编写现代Web应用程序,…
移动Web开发的十条军规
当今,移动开发的快速发展让移动用户使用移动设备变得更容易。人们通过使用…
被动式媒体:移动应用的设计
本文简单介绍了何为lean-back被动式媒体和lean-forward主动式媒体,指出了…
“多快好省”的移动Web App
 在出租车上忽然想要预订餐厅,却苦于手机上没有相关应用;去机场的路上想…

投    票

专题推荐

越来越多的web设计师提出了移动优先的口号,而随着硬件设施的完善,Web App、轻应用的逐渐普及,移动网站也
移动网站性能优化技巧荟萃
越来越多的web设计师提出了移动优先的口号,而随着硬件设施的完善,Web App、轻...
Web App开发中会面临越来越“重”的问题,如果在开始阶段没有规划好,后续在添加功能时就会变得极其麻烦,
Web App开发最佳实践:模块
Web App开发中会面临越来越“重”的问题,如果在开始阶段没有规划好,后续在添...
BaaS是Backend as a Service的简称,意为后端即服务,即为移动和Web应用提供后端云服务。这个概念起源于移
移动云服务BaaS:移动应用之
BaaS是Backend as a Service的简称,意为后端即服务,即为移动和Web应用提供后...
Web App的概念提出来已经有不短时间了,虽然目前Native App仍是主流,Hybrid App正在过渡,Web App的时代还
Web App开发初探
Web App的概念提出来已经有不短时间了,虽然目前Native App仍是主流,Hybrid Ap...

一周排行

留言评论