如何优化我的网站以适应慢速数据连接?

10

这里提供的解决方案虽然可行,但是需要付出很大的劳动力。对于任何想要在旧的asp.net解决方案上执行类似增强操作的人,我强烈建议将项目切换到MVC,以便利用脚本和样式绑定功能。.aspx文件在MVC项目中可以按预期工作。


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

在深入处理UpdatePanels、删除不必要的内容以及其他我能想到的内容之前,我将从一些“快速实现”的方面入手。 目前我有一些我认为我已经准备好实施的事情
这包括

编辑:资产压缩和空格清理工具在一起效果非常好。

但是我还有一些问题不确定如何解决。

  1. 一些Microsoft资源(WebResource.axd?d=blahblahScriptResource.axd?d=blahblah)没有被压缩。具体包括某些页面上的这个这个。不过Microsoft.Ajax正常。如果这些文件未被自动压缩,我该如何手动压缩它们?我是否漏掉了某些设置?

  2. 能否将Microsoft资源与我的JavaScript合并为单个JS文件?

  3. 401错误,在Fiddler中,我发现我对网站的第一个访问总是返回401错误,紧接着就是正常的200。其他资源也会随机地在第一次调用时出现401。这是某种需要配置以删除此不必要调用的IIS设置吗?

  4. aspx文件中的JavaScript。很遗憾,我们的aspx文件中有很多js代码,以及很多使用ScriptManager.RegisterStartupScript在代码后台渲染的JavaScript。我如何压缩aspx标记中<script>标签内的JavaScript?

  5. 网站图标(Favicon),是否可以禁用?如果不能,下一个最好的选择是什么?
  • Mads Kristensen的组合器效果很好。但是我发现一些包括14个以上axd引用的页面将产生404.15错误(查询字符串过长,只有IE中的bug)。我解决这个问题的方法是对查询字符串进行gzip和base64编码。

  • 我发现将我的js包含文件与.axd文件组合在一起是徒劳的,因为每个页面的.axd文件都不同。将我的静态js文件分开产生了额外的服务请求,但它将保留在客户端上缓存,而不是将其作为组合的js axd文件的一部分重新下载这些脚本。

  • 我启用了匿名身份验证。没有更多问题了。

  • 没有进展。

  • 我发现将favicon.ico放在根目录是必要的。不过,我认为这可能只是因为我的应用程序设计方式不同。


  • 你可能应该将JS函数拆分到单独的文件中,然后进行缩小。在你的aspx中,你应该只调用这些缩小文件中的函数。直接嵌入脚本到页面中和动态编写脚本并不容易进行缩小... - Stephen Chung
    еҰӮжһңдҪ зҡ„Web.configж–Ү件дёӯеҢ…еҗ«<compilation debug="false">пјҢдҪ зҡ„axd JSж–Ү件е°Ҷиў«иҝӣиЎҢеҺӢзј©гҖӮ - Doug S
    7个回答

    5
    合并Microsoft脚本资源: 请查看我的ContentGator项目,我用它来拦截WebResource(和其他脚本和CSS)文件的请求并将它们合并在一起。我已经好几年没有更新它了,所以我不能确定它能否直接使用,但你至少应该能够重用其中的一些代码。我不记得是否添加了缩小功能,但你应该很容易就能添加它。我认为它还有一个钩子进入RegisterStartupScript,或者是一个替代方法,你也应该能够连接缩小。 Favicon,据我所知,无法禁用,因为浏览器默认会请求它。如果你真的不想要它,你可以只放一个1x1像素ico,这样你就不会返回404,后续的请求将会返回304。使用CDN对于此和所有其他静态资源都是有好处的。
    此外,查看http://developer.yahoo.com/yslow/获取其他更一般的网页优化提示。

    以下是我能想到的其他事项:


    3

    1和2)优化.axd:http://madskristensen.net/post/Optimize-WebResourceaxd-and-ScriptResourceaxd.aspx编辑死链接压缩脚本资源.zip文章的Google缓存

    3)HTTP 401未经授权:您所配置的身份验证机制正在执行此操作。如果启用了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,你没什么办法。你可以自己编写一个实用程序,通过正则表达式将其解析出来,针对每个页面创建包含所有内容的文件,然后压缩该文件并插入1个脚本引用。在SCRIPT标签内捕获所有内容的正则表达式最终会变得相当复杂,因为存在一些边角情况,如...

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

    5) 网站图标:您要么在页面上有一个引用它的LINK标签,REL="shortcut icon",要么在您的网站根目录中有一个名为"favicon.ico"的文件。如果没有LINK标签,则浏览器会自动检查位于您网站根目录下的favicon.ico。


    1和2的解决方案,链接已损坏。 - Cem

    3

    好的,我们的系统已经在生产环境中启用了这个功能。然而,其他人可能会忽视这一点。 - Biff MaGriff

    1

    来自gtmetrix.com

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

    你可以使用gtmetrix工具、ySlow或谷歌的Page Speed来查看它们对网站性能的影响,但是这个gtmetrix工具通常非常棒,为您结合了多种功能,并自动生成CSS文件的改进版本等。


    “使用高效的CSS选择器”不应该出现在那个列表中。它与连接速度无关,更多地与渲染速度有关。 - Eli Grey
    @Eli Grey,你说得对,但我觉得它应该放在这里。一般来说,使用高效的CSS选择器可以使文件更小,用户体验更快。我想大多数用户不理解数据传输和页面渲染之间的区别,也不关心;用户关心的是“完成了”。然而,你是正确的,高效的选择器并不一定能使页面下载更快。你也可以为列表中的更多项目进行辩论。 - Incognito

    0

    你是否已经启用了客户端缓存来缓存静态资源,例如网站图片和样式?它们对于第一次页面加载没有帮助,但会在后续的浏览中大大加快速度。

    网站图标无法被禁用,但在现代浏览器中可以通过使用 data:url 来消除请求本身。例如,这将使页面具有 Slashdot 的网站图标而不发送任何请求:

    <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" />
    

    请记住,启用网站图标的客户端缓存比在每个页面中嵌入它可以节省更多的字节。

    0

    0

    我认为网站应该针对最佳性能进行优化,而不考虑用户连接速度。

    网站性能/速度会影响用户体验,反过来也会影响整个网站目标/转化率,因此创建快速响应的网站和加速现有网站应该是每个网络开发人员/前端工程师等的主要目标之一。

    无论如何,以下是两个很棒的资源,来自两个巨头: http://developer.yahoo.com/performance/rules.html http://code.google.com/speed/

    最好的祝福


    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接