| 1. 尽可能的减少 HTTP 的请求数 |
[content] |
| 2. 使用 CDN（Content Delivery Network） |
[server] |
| 3. 添加 Expires 头(或者 Cache-control ) |
[server] |
| 4. Gzip 组件 |
[server] |
| 5. 将 CSS 样式放在页面的上方 |
[css] |
| 6. 将脚本移动到底部（包括内联的） |
[javascript] |
| 7. 避免使用 CSS 中的 Expressions |
[css] |
| 8. 将 JavaScript 和 CSS 独立成外部文件 |
[javascript] [css] |
| 9. 减少 DNS 查询 |
[content] |
| 10. 压缩 JavaScript 和 CSS (包括内联的) |
[javascript] [css] |
| 11. 避免重定向 |
[server] |
| 12. 移除重复的脚本 |
[javascript] |
| 13. 配置实体标签（ETags） |
[css] |
| 14. 使 AJAX 缓存 |
[content] |
详细请看：Best Practices for Speeding Up Your Web Site
如果具体想看下你网站在这14条规则下的表现，可以用 Yahoo 开发的 YSlow 工具（Firefox 下 FireBug 的插件）。
－－－－－－－－－－－－－－－－－
最近 Yahoo! Exceptional Performance 在 《优化网站性能的 14 条规则》的基础上又增加了 20 条新的规则。
| 1. 尽早清除缓冲区 |
[server] |
| 2. AJAX 请求使用“GET”方法 |
[server] |
| 3. 延迟加载组件 |
[content] |
| 4. 预加载组件 |
[content] |
| 5. 减少 DOM 元素的数量 |
[content] |
| 6. 跨域分离组件 |
[content] |
| 7. 减少 iframes 的数量 |
[content] |
| 8. 不出现 404 |
[content] |
| 9. 减小 cookie 的体积 |
[cookie] |
| 10. 为组件使用 cookie-free 的域名 |
[cookie] |
| 11.减少访问 DOM 的次数 |
[javascript] |
| 12. 开发巧妙的事件处理程序 |
[javascript] |
| 13. 优先选择使用 <link> 而非 @import |
[css] |
| 14. 避免使用 filters |
[css] |
| 15. 优化图片 |
[images] |
| 16. 优化 CSS sprites |
[images] |
| 17. 不要在 HTML 中缩放图片 |
[images] |
| 18. 减小 favicon.ico 的体积并缓存 |
[images] |
| 19. 保持组件在 25K 以下 |
[mobile] |
| 20. 将组件分拆到多个文档中 |
[mobile] |
更详细具体的介绍内容可看 Stoyan Stefanov 的 PPT：《High Performance Web Pages》
原文：http://developer.yahoo.com/performance/rules.html
2007.3.20 Steve Souders
Translated by mask
从2004年开始，我开始进入雅虎的异常表现小组。我们是一个很小的队伍，专门针对雅虎的产品进行质量检测和改进，我作为一个后端工程师，现在却开始捣鼓前端代码优化方面的工程，所以我认为这是一个极好的进步的机会。我的目标是改进用户端体验，我度量了在各个带宽下浏览器的响应时间，得出如下的一个图表，它展示了来自http://yahoo.com的http的流量。
高性能表现的网站
以上图标的第一个标签就是html，是一个html文档最开始加载的东东，在这个例子中，读取html代码只占了整个响应时间中的5%，这个结果适用于绝大多数网站，在采样美国的前十位网站中，只有一家超过5%但少于20%，其余80%的时间是用来读取网页其他内容的，也就是说，前端（原文是front-end，意思就是不包括html代码的其余内容，可以是图片，脚本，flash，视频，各种东西）。这就是为什么我们要把目光集中在这些东西来提高显示速度的关键原因。
阅读全文
围绕文字、符号、链接三个方面，主要是中文，草拟的个人行文经验：
文字避免写错。应付挑剔的读者是一个方面，某些关键词的错误，有可能就避过了搜索引擎抓取。
文字密度节奏的控制。段落在四行左右比较合适，宜少不宜多，同时避免文字量大的段落连续堆积，段落之间最好的节奏不是一一二二三三，而是类似一三二三一二的无序结构，纵横道理类似。
词语避免在同行断开。比如行末一个“搜”，下行头一个“狐”，用户读起来比较费劲。注意英文的默认段落内，一个单词不会断开，原因也是如此。
HTML结构代码 符合语义标准。比较混乱的大概是有序、无序、定义三个列表，写12345和使用ol的效果区别不大，但搜索引擎会认为他们的意义不一样。
阅读全文
来自：UCDChina.com
有时会被问到“看看XXX网站如何？”之类的问题。
谈到评估，通常都是指产品级的网站，如果模式很新，了解需要花一定时间。于是，很多人又问“那么你仅从UI/UE的角度看看呢？”首先我们得达成共识，一切花里胡哨都在为功能服务，如果功能满足都成问题，其他就没必要谈了。
阅读全文
“输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》
Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。
表单布局
考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等)，垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。
在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。
阅读全文
所谓产品其实最终展现在用户面前的只是界面而已，所谓界面绝大多数时候只包括两个部分：图片、文字。
重视界面上的每一个像素和每一个文字是UED的基本素质，关于如何设计好界面上的文字（一般在UED里面我们把这个职位叫做“内容优化”）我以前写过 创业团队的界面文字优化 和 用户在每个情景中的角色感 ，这一期的话题中其他伙伴也说到了很多。
这个话题讨论到这里，已经让很多人意识到了界面上文字的重要性：界面的文字就好像一个人的谈吐，文字给用户的感觉不单单只是一个“信息”的传达，他还关乎用户对于产品的情感印象和“产品气质”的理解。
那么，我应该说点什么呢？在今天写这个话题之前我就一直在思考：能否系统化的把“内容优化”像“体验”一样分层次的理解？
阅读全文
科学设计你的网站网页:来自 Eye-Tracking研究的23节必修课 ——Christina Laun
在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：
阅读全文
设计师在抱怨开发人员不尊重Web标准，后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率？相信很多网站或软件开发公司都越到类似的问题。
从UED的角度而言，我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过，用户体验不只是UED的事情，而是整个开发团队乃至整个公司需要参与的事情。
我们不能只是抱怨，我们去理解开发人员。同样，我们做出努力，让开发人员去理解我们。
阅读全文