iPad网站优化

Question

我们公司开发大型企业解决方案(网站)。在批准支持苹果iPad后，我们发现我们的网站运行速度非常慢。所以，我的任务是通过优化GUI (Html, JS…)来优化iPad的性能，因为应用程序的服务器部分非常快。我找到了一些解决方案，并得到了客户的认可:
*减少网格列数，只留下最有用的。
*关闭所有动画。
*尽量减少调整大小。
当然，我缩小了所有的脚本和样式表。
你能给我一些额外的建议如何提高业绩吗?

Answer 1

有几件事，其中许多适用于桌面web，它们只是良好实践的一部分。

排序不分先后:

• 删除多余的空格和HTML/CSS/JS注释
• GZip所有基于文本的内容(HTML,CSS,JS)
• 优化您的所有图像(例如使用http://Smush.it等服务)
• 将您的图像/静态内容移动到单独的服务器(增加HTTP管道)，并且不在该服务器上提供cookie
• 不要为"移动"提供任何他们不需要的东西(在可能的情况下)
• 不要在客户端上缩小图像，从服务器上提供缩小版本
• 由于大多数移动浏览器处理CSS很好，转换"列表"的数据呈现在表格中，使用无序列表等
• 从CDN(如Google
)提供常用脚本，如jQuery
• 大多数移动浏览器支持某种离线缓存或本地轻量级数据库-如果有任何可以缓存以减少未来负载的东西，请考虑这样做
• 如果你想变得更花哨，你可以做一些事情，比如不直接加载图像…然后在页面上检查哪些图像当前在视图中(或稍微延迟)，并根据需要加载它们…这将在很大程度上取决于内容
• 考虑延迟搜索结果的加载，如果适用的话(例如，像Twitter流可能只加载前20个项目，然后只加载其他项目的需求。

Answer 2

我想说的一些实际的事情是;

避免在页面上使用iframe。它们在iPad上不能很好地工作。
1. 使用Sencha touch这样的库，它为iPad进行了高度优化。
2. 使链接或按钮具有较大的触摸区域，因为用户可能会对错误的链接点击感到沮丧。
3. 避免使用CSS绝对定位元素。

还可以添加更多的点;

最好使用meta viewport设置为width=device-width…这确保了你的视口是基于你的设备设置的，而不是硬编码的。
1. 避免在iPad CSS中使用CSS:hover属性…它们会导致不必要的问题(false hover's)