如何针对慢速数据连接优化我的网站？答案

【问题标题】：How do I optimize my website for slow data connections?如何针对慢速数据连接优化我的网站？
【发布时间】：2011-08-05 18:25:29
【问题描述】：

这里的解决方案运行良好，但是它们非常耗费人力。对于希望在旧的 asp.net 解决方案上执行类似增强功能的任何人，我强烈建议将项目切换到 MVC，以利用脚本和样式捆绑。 .aspx 文件在 MVC 项目中按预期工作。

我即将开始为我们的一款产品执行一些性能增强。我们的用户使用非常慢的无线电连接到网络。应用程序的主要瓶颈是网络和数据库。我将专注于减少应用程序的网络占用。

我将从几个“速战速决”开始，然后再深入了解拆解 UpdatePanel、删除不必要的内容以及我能想到的任何其他内容。现在我有一些我认为我已经准备好实施的事情
其中包括

缩小合并css Using This
缩小合并js same as above
从发送给客户端的 html 中删除多余的空格。 Using this

编辑：资产缩小和空白清理工具可以很好地协同工作。

但是我有一些事情我不知道该如何解决。

某些 Microsoft 资源（WebResource.axd?d=blahblah 和 ScriptResource.axd?d=blahblah）未缩小。 This 和 This 以及其他一些取决于页面。 Microsoft.Ajax 很好。如果这些文件没有被自动缩小，我该如何手动缩小它们？我在某处缺少设置吗？
是否可以将 microsoft 资源与我的 javascript 合并到一个 js 文件中？
401 错误，在提琴手中，我可以看到我对网站的第一次点击总是给出 401 错误，紧随其后的是正常的 200。此外，其他资源在第一次调用时也会随机出现 401。这是某种 IIS 设置需要配置以删除这个不需要的调用吗？
aspx 文件中的Javascript。不幸的是，我们的 aspx 文件中有很多 js，还有很多 javascript 在我们的代码背后使用ScriptManager.RegisterStartupScript 渲染。我将如何在 aspx 标记中缩小 <script> 标记中的 javascript？
Favicon，这个可以禁用吗？如果不是，那么下一个最好的事情是什么？

更新

Mads Kristensen 的合路器效果很好。但是，我发现某些包含 14+ axd 引用的页面存在问题，会产生 404.15 错误（查询字符串太长，即只有错误）我对此的解决方案是 gzip 和 base64 编码查询字符串。
我发现将我的 js 包含与 .axd 文件结合起来是一项徒劳的任务，因为每个页面的 .axd 文件都不同。将我的静态 js 文件分开会产生一个额外的服务请求，但它将保持缓存在客户端上，而不是让客户端重新下载这些脚本作为组合 js axd 文件的一部分。
我启用了匿名身份验证。没有更多问题了。
没有进展。
我发现将 favicon.ico 放在根目录是必要的。我认为这可能只是因为我的应用程序的设计方式。

【问题讨论】：

您可能应该将您的 JS 函数分解为一个单独的文件，然后将其缩小。在您的 aspx 中，您应该只调用那些缩小文件中的函数。直接在页面中嵌入脚本并动态地写出脚本不会很容易地缩小...
对于 1) 如果您的 Web.config 文件包含 <compilation debug="false">，您的 axd JS 文件将被缩小。 stackoverflow.com/a/1679992/1145177

标签： javascript asp.net optimization minify

【解决方案1】：

合并 Microsoft 脚本资源：查看我的 ContentGator 项目，该项目用于拦截对 WebResource（以及其他脚本和 css）文件的请求并将它们合并在一起。我已经有几年没有更新它了，所以我不能说它开箱即用的效果如何，你至少应该能够重用一些代码。我想我不记得添加了缩小，但你应该可以很容易地添加它。我认为它还具有 RegisterStartupScript 的挂钩，或者它的替代方案，您应该能够再次连接缩小。

Favicon，据我所知，无法禁用，因为它是浏览器默认请求的。如果您真的不想要它，您可能只是放置一个 1x1 像素 ico，这样您就不会提供 404，后续请求将导致 304。为此使用 CDN 并没有什么坏处你的其他静态资源也是如此。

此外，请查看http://developer.yahoo.com/yslow/ 了解其他更一般的网络优化技巧。

我脑子里想的其他事情：

尽可能使用sprites 获取图片
Output Caching

【讨论】：

【解决方案2】：

1和2）优化.axd：http://madskristensen.net/post/Optimize-WebResourceaxd-and-ScriptResourceaxd.aspx 编辑死链接 Compress Script Resource .zip Google Cache of the article

3) HTTP 401 Unauthorized：您配置的身份验证机制正在执行此操作。如果您启用了 Windows 身份验证但没有使用它...

4) 嵌入式 JS：MS AJAX Minifier

http://www.codeproject.com/Articles/81317/Automatically-compress-embedded-JavaScript-resourc

http://stephenwalther.com/blog/archive/2009/10/16/using-the-new-microsoft-ajax-minifier.aspx

对于与标记混合的 JS，您无能为力。您可以制作自己的实用程序，使用 RegEx 将其从 ASPX 中解析出来，并创建一个包含每页所有内容的文件，然后缩小该文件并插入 1 个脚本引用。捕获 SCRIPT 标记中所有内容的正则表达式最终会变得相当复杂，因为诸如...

<script type="text/javascript">
document.write("<script>Dynamica, RegEx don't stop here -></script>");
</script>

5) Favicon：您的网页上有一个 LINK 标签，使用 REL="shortcut icon" 引用它，或者您的网站根目录下有一个“favicon.ico”文件。如果您没有 LINK 标签，则浏览器将自动检查您网站根目录下的 favicon.ico。

【讨论】：

解决方案1和2，链接坏了

【解决方案3】：

您还应该考虑在 IIS 中启用压缩。

IIS6 Compression

IIS7 Compression

【讨论】：

好点，我们的系统已经在我们的生产环境中启用了这个。但是其他人可能忽略了这一点。

【解决方案4】：

来自gtmetrix.com：

避免错误请求
避免使用 CSS @import
避免使用 CSS 表达式（已弃用）
避免 document.write
结合外部 CSS
结合外部 JavaScript
使用 CSS 精灵组合图像
延迟加载 JavaScript
延迟解析 JavaScript
启用 gzip 压缩
启用保持活动
内嵌小 CSS
内联小 JavaScript
利用浏览器缓存
利用代理缓存（已弃用）
使着陆页重定向可缓存
缩小 CSS
缩小 HTML
缩小 JavaScript
最小化 cookie 大小（已弃用）
尽量减少 DNS 查找
尽量减少重定向
最小化请求大小
优化图片
优化样式和脚本的顺序
跨主机名并行下载
首选异步资源
将 CSS 放在文档头部
从静态资源中删除查询字符串
删除未使用的 CSS
从一致的 URL 提供资源
提供缩放图像
提供来自无 cookie 域的静态内容
指定缓存验证器
尽早指定字符集
指定 Vary: Accept-Encoding 标头
指定图片尺寸
使用高效的 CSS 选择器

您可以使用 gtmetrix 工具、ySlow 或 google 的 Page Speed 来查看所有这些对它的影响，但是这个 gtmetrix 工具通常很棒，它结合了您的功能，以及进行一些自动生成，为您提供CSS文件的改进版本等。

【讨论】：

“使用高效的 CSS 选择器”不属于该列表。它与连接速度无关，更多与渲染速度有关。
@Eli Gray 没错，但我觉得它属于这里。一般来说，使用高效的 css 选择器会导致文件更小，并为用户带来更快的体验。有趣的是，大多数用户不了解数据传输和页面渲染之间的区别，他们也不关心；用户关心“它完成了”。但是，您是正确的，高效的选择器并不一定会使页面下载更快。您也可以为列表中的更多项目提出论据。

【解决方案5】：

http://wiki.asp.net/page.aspx/80/aspnet-optimization/

拥有大量关于各种元素的资源，您可以/应该使用这些资源在 asp.net 上制作 speedster web 应用程序！开心:)

【讨论】：

【解决方案6】：

我认为无论用户连接速度如何，都应该优化网站以获得最佳性能。

网站性能/速度会影响用户体验，另一方面会影响整体网站目标/转换，因此创建快速响应的网站并加速现有网站应该是每个网络开发人员/前端工程师等的主要目标之一。

无论如何，这是两个很好的资源，来自两个巨头： http://developer.yahoo.com/performance/rules.html http://code.google.com/speed/

最好的

【讨论】：

【解决方案7】：

您是否为站点图像和样式等静态资源启用了客户端缓存？它们对第一页浏览没有帮助，但会大大加快后续浏览的速度。

Favicon 不能被禁用，但在现代浏览器中可以通过使用 data:url 来消除请求本身。例如，这会导致页面在不发送任何请求的情况下具有 slashdot 的 favicon：

<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAB4eE0AX18OAP///wBeXisAYWETANPTxACrq4cAgYEaAEhJEgBKSiYAkJF3AL29pgBiYjAAVFQQADQ0CgBCQg4AWe7u7u7u7pWe7u7u7u7u6e7u7u7u7u7u7/ZVr/+rz/7v+iIp8CJf/v//UibwIl////8CIj+mz//4iIUiuIiIj/iIjCIgiIiPjd3dsiXd3diN3d1CIq3d2I3d3dYiLd3Y0RERFGZsERHUERERERERRDd3d3d3d3dzXERERERERMUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" type="image/x-icon" />

请记住，为网站图标启用客户端缓存应该可以节省更多字节，然后将其嵌入到您发送的每个页面中。

【讨论】：