65.9K
CodeProject 正在变化。 阅读更多。
Home

如何获得 Yslow 的 A 级评分并优化您的网站

taha bahraminezhad Jooneghani
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.25/5 (3投票s)

2012年9月12日

CPOL

5分钟阅读

viewsIcon

20592

关于如何从您的网站获得高性能并获得 Yslow 的好评

引言

this picture is result of working around performance and tuning my website

在这篇文章中，我想讨论网站性能以及如何通过关注客户端和服务端的某些小细节来优化和加速您的网站。

问题

我的新网站 AriaQuotes 存在一些非常大的问题。
以下是我的问题：

  • 我的目标受众在亚洲，具有波斯/伊朗文化（我猜是伊朗、阿富汗和塔吉克斯坦），我的问题是：我的服务器在加拿大，响应客户端的延迟大约是 400 毫秒！ （现在猜猜 20 个 HTTP 请求会有多糟糕！Hmmm | :|）
  • 我使用了一些社交链接，这极大地减慢了我的网站加载速度！
  • 我有太多的图片、CSS 和 JS 文件，所有这些都会产生过多的 HTTP 请求！

我是如何解决这些问题的

在 Firefox 中安装 Firebug，然后安装 Yslow，然后运行它！
您可以轻松地看到您的性能问题，我通过几个步骤解决了这些问题

  • 减少 HTTP 请求：我将多个 CSS 文件合并到一个文件中，并使用 CSS Minifier 减小其大小。您还可以将图标合并到雪碧图中，并使用 `background-image` 属性将它们设置为图像，在这种情况下，例如，如果您有 10 个图标，这意味着 10 个 HTTP 请求，它会减少到只有一个 HTTP 请求。
  • 使用 CDN：我注册了 CloudFlare CDN，并将我的域名的名称服务器更改为他们的名称服务器，并且有一个免费账户！
    CloudFlare 会缓存我的图片和 CSS 文件。它还将我的 JS 文件合并成一个文件，该文件会异步加载 JS 文件（我喜欢这些人，他们用他们漂亮的应用和内置的安全管道做得非常出色！）。
  • 减小图片大小：我使用 Smush.it 来实现这一点！
  • Expires Headers：我进入 IIS 管理器，远程连接到我的网站，并为我的 HTTP 请求添加 Expires Headers。现在，如果您访问我的网站，我的资源将只下载一次，然后对于其他请求，它们将从您的本地存储中读取。
    在Apache中：使用这篇文章
    警告！！：如果您想更改文件，只需重命名它，让浏览器明白文件已更改！（如果您删除了ETags！）
  • ETags：Etag 或 Entity tag 用于向浏览器显示已缓存的资源版本，并对其进行检查，如果与缓存版本不同，则下载新版本！
    现在的问题是：ETags 使 HTTP 标头的大小变得非常沉重！这是您在IIS中的解决方案：通过设置空白的 ETag 标头来从 HTTP 响应中删除 ETags。在 IIS 管理器中，右键单击网站（或任何文件夹），单击属性，选择 HttpHeaders 选项卡，添加一个名为 ETag 的自定义 Http Header，但将值留空（一个空格就足够了）！
    Apache：使用这篇文章来自 Yahoo！
  • 社交链接问题：我通过从主页面删除它们来解决它！ 但如果您想使用它，这篇文章对您有所帮助！ 为网站添加 Facebook 点赞按钮！
    在这种情况下，如果您使用它，就不会在页面加载社交链接时浪费时间！
这些技巧适用于所有 Web 开发人员，以及所有使用不同语言进行 Web 开发的人员，可能会有所帮助，但我还有一些其他技巧是为ASP.NET Web 开发人员准备的！
  • ASP.NET 为您实现了太多管道，如果您不需要它们，则必须删除它们！使用web.config文件来实现此目的。
    <httpModules>
 <remove name="WindowsAuthentication" /> 
 <remove name="PassportAuthentication" /> 
<remove name="AnonymousIdentification" />
<remove name="UrlAuthorization" />
<remove name="FileAuthorization" /> 
</httpModules>
  • 在您的数据源上使用缓存，即使它们依赖于参数，因为缓存总比没有好。
  • 如果您的页面生命周期中，在回发时，您不需要控件值，则禁用该控件的视图状态，这可以减小 HTML 的大小！
  • 如果您使用图像标签或图像控件，永远永远永远不要给它设置高度和宽度！
  • 您的web.config文件会在您的服务器内存中缓存，所以不要在里面放太多信息！
  • 如果您使用 URL 路由，请不要使用太多的路由表，因为它也会占用服务器内存！
  • 享受您的生活和编码，甚至不要考虑我的文章！

可以帮助您的网站和工具

  • CSS Minifier：使用这个很棒的工具来压缩您的 CSS
  • Minify JS：在线 JavaScript 压缩工具
  • Sprite Cow：为雪碧图生成 CSS
  • ASP.NET 的 Sprite 和图像优化：ASP.NET Sprite 和图像优化框架旨在通过对页面图像执行各种优化来减少从 Web 服务器请求和显示页面所需的时间。这是该功能的第四个预览版，适用于 ASP.NET Web Forms 4、ASP.NET MVC 3 和 ASP.NET Web Pages (Razor) 项目。
  • NEAT：Neat 是一个开源的流式网格框架，构建在 Sass 和 Bourbon 之上，使用 em 单位和黄金比例。
    使用这类框架，特别是如果您不是一个好的设计师（就像我一样Smile | :)），这类框架非常轻量级，并且在移动和平板电脑视图上具有响应式设计！
  • CloudFlare：Web 性能和安全公司，免费注册并将其用作 CDN！
  • Yahoo! Smush.it：Smush.it 使用针对图像格式的优化技术来删除图像文件中的不必要字节。
  • Glimpse：“Glimpse 对服务器所做的事情正如 Firebug 对客户端所做的事情……换句话说，Glimpse 提供了一个客户端视角来了解服务器内部发生的情况。” Glimpse 可以帮助您了解幕后发生了什么！

关注点

当我开始构建 Aria Quotes 网站时，我以为要获得 Yslow 的 100 分是一个传说，但随着我开始修复性能问题，我发现要做得更好非常容易！
希望这篇文章对您有所帮助！

© . All rights reserved.