一般网页加载速度和性能最佳实践

Question

有哪些通用的策略和最佳实践可用于提高页面加载速度（不特定于LAMP、.NET、Ruby、mySql等）？

我正在寻找关于缓存、HTTP头、外部文件最小化（CSS、JS）等方面的技巧。

还有像Google PageSpeed 和Yahoo YSlow 这样的好工具。

最终目标是一个“终极资源”维基风格的“不容忘记的事项”清单（由SO上所有巫师进行审核和更新），这样人们就不必在主题上无休止地搜索过时的博客文章了。 ;)

_{我希望“主观”的管理员能对我宽容一些，我知道这有点开放式的。而且类似的 问题 已经被提问过了。同时，这个材料与ServerFault和Webmasters 的领域也有一些重叠。但是没有真正涵盖这个问题的中央“维基”问题，所以我希望开始一个。有像这样的好问题在SO上我经常会参考！谢谢}

- thaddeusmt

Answer 1

• 页面内容缓存
• 将javascript加载到页面底部
• 压缩css（和javascript）
• Css和javascript应该在它们自己的[外部]文件中
• 如果可能，将所有js或css文件合并成一种类型（节省服务器请求）
• 使用Google的jQuery和jQuery UI加载器（因为它很可能已经在某些计算机上被缓存）
• Gzip压缩
• 图像应与标记中的宽度和高度相同（避免调整大小）
• 在适当的时候使用图像精灵（但不要过度使用）
• 正确使用HTML元素，即使用<H#>标题标签
• 避免div-itis或现在更流行的ul-itis
• 尽可能集中关注javascript选择器，即$('h1.title')比$('.title')快得多

- RDL

---

使用适当的<H#>标签如何提高加载速度？“div-itis”只是为了减少DOM树的大小以实现更快的加载和渲染吗？ - thaddeusmt

正确使用页面元素标签和聚焦jQuery选择器可以提高性能。（我添加了一个新点）如果所有东西都是div并且使用$('div.title')，那么实际上没有任何好处。 - RDL

他的意思是在使用jQuery时，CSS选择器应该尽可能具体。然而，在CSS中并不总是这样。深层次的CSS选择器会减慢样式的渲染速度。例如，“html body .my-div ul li h1”如果写成“.my-div h1”，则渲染速度会更快。 - Scott Greenfield

Answer 2

使您的动态内容更加静态化。

如果您能将公共页面呈现为静态内容，您将有助于代理、缓存、反向代理、诸如web应用程序加速器和DDOS防护基础设施等组件。

这可以通过多种方式实现。当然，可以通过处理缓存标头来实现，但您甚至可以考虑使用ajax查询来提供动态内容的真正静态页面，以及在这两种解决方案之间使用混合解决方案，使用缓存标头使大多数浏览器和反向代理的主页面静态化几个小时。

ajax静态解决方案的一个主要缺点是SEO，机器人将无法看到您的动态内容。您需要一种方法向机器人提供此动态数据（以及处理用户从搜索引擎URL访问此数据的方法，非常麻烦）。因此，反模式是在静态页面中具有真正重要的SEO数据，而不是在ajax动态内容中，并将ajax花哨的用户交互限制为用户体验。但是，复合页面上的用户体验可能比搜索引擎机器人的体验更加动态。我的意思是，每小时替换最新的新闻对于机器人来说是可以的，每分钟对于用户来说是可以的。

您还需要避免过早使用会话cookie。大多数代理缓存将避免缓存包含cookie的任何HTTP请求（这是HTTP的官方规范）。问题在于通常在所有页面上具有登录表单并且需要现有会话才能进行登录表单的POST的应用程序。这可以通过单独的登录页面或登录POST上的高级重定向来修复。反向代理缓存中的cookie处理也可以在现代代理缓存（如Varnish）中通过一些配置设置进行处理。

编辑：反向代理页面的一个高级用法可能非常有用：ESI，例如使用varnish-esi。您可以在html呈现中放置ESI反向代理将识别的标记。每个已识别的区域都可以具有不同的TTL-生存时间-（假设整个页面为1天，最新新闻块为10分钟，聊天块为0）。反向代理将在自己的缓存或后端进行请求以填充这些块。

自从Web存在以来，处理代理和缓存一直是愚弄用户以认为Web很快的主要技术。

- regilero

---

一些有趣的点。事实是，提供一个平面页面比 hitting DB 来生成所有内容更快。 - thaddeusmt

特别是如果您不提供它，那么在您和最终浏览器之间的反向代理缓存链会长时间为您提供服务。 - regilero