Thứ Sáu, 18 tháng 6, 2010

Tối ưu hóa website theo chuẩn Yslow part 1

Tối ưu hóa website theo chuẩn Yslow


Yslow là một công cụ được implement theo chuẩn của các dev Yahoo cho việc tối ưu hóa website nhìn từ  client site . Trong quá trình tối ưu website http://vccorp.vn mình có tích lũy được một số kinh nghiệm chia sẻ cho mọi người .

Trước tiên bạn cần có firefox , cài addons firebug . Firebug là một công cụ cực mạnh khi cần debug client site script , css , html , kiểm tra header ...

Sau đó cài tiếp addons Yslow ( chú ý là phải cài firebug trước . )  .

Dưới thanh status của firebug lúc này  hiển thị ra cả 2 công cụ yslow và firebug  .



Bạn click vào biểu tương yslow để kích hoạt nó trên trang web đang duyệt . Chúng ta sẽ test trực tiếp trên http://vccorp.vn  bằng cách click tiếp vào nút Grade



Như  chúng ta thấy tổng điểm performed là 76 với Grade hiện tại là C .

Những điểm chưa tối ưu được Yslow chỉ ra phía bên dưới .

1. Make fewer http request .

Giảm thiểu số lượng request tới server . Hiện tại chúng ta tốn tới 39 request :



Để giảm thiểu số lượng request này có một số các giải pháp

a.Minify, Merge, remove white space, và compress các file css , javascript, doc .

Giải pháp này khá đơn giản ,ví dụ ta đang có 3 file css thì trình duyệt phải request cả thảy 3 lần để có đủ css tham gia render trang . Nếu bây giờ nhập vào làm một request thì chỉ tốn 1 request thôi . Tất nhiên các trình duyệt hiện tại có thể làm việc đa luồng giúp load song song một số thành phần cho web , nhưng số lượng luồng đối với 1 tab lại giới hạn . Chính vì vậy tự mình xử  lý bằng cách gộp các file css , js, doc lại là rất cần thiết .

Việc này có thể làm bằng một cách đơn giản là bạn đi copy , paste các file css và js gộp vào một file . Nhưng cách này khá khó bảo trì . Chúng ta có thể lập trình tự  gộp các file này .

Cách xử  lý : ( Chú ý : để đảm bảo tính bảo mật , các code  share ở bài viết này không hoàn toàn là code sử  dụng trong dự  án vccorp.vn hay dự án tối ưu vccorp.vn )

-Đối với file css :  StyleHandler.ashx.cs

-Đối với file js :  ScriptsHandler.ashx.cs.

Note : các bạn nhớ phải thêm đoạn code sau vào web.config nhét :D
<configuration>
<configSections>
<section name="ScriptSettings" type="System.Configuration.SingleTagSectionHandler, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>
<section name="CSSSettings" type="System.Configuration.SingleTagSectionHandler, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>
</configSections>
<!--minify, remove space, merge file and compress-->
<ScriptSettings versionNo="1.0" compress="true" cacheDurationInDays="3" files="~/Scripts/jquery-1.3.2.min.js;~/Scripts/common.js"/>
<CSSSettings versionNo="1.0" compress="true" cacheDurationInDays="3" files="~/Styles/style.css"/>

</configuration>


Các bạn cũng nhớ config để nó hiểu được các đuôi file mà bạn gộp, nén nhé

<system.web>

<httpHandlers>

<add verb="*" path="*.ashx" type="bogay.UrlRewrite.CssHandler"/>
<add verb="*" path="*.htm" type="bogay.UrlRewrite.RewriteModule"/>
<add verb="*" path="*.aspx" type="bogay.UrlRewrite.RewriteModule"/>
</httpHandlers>

</system.web>

<system.webServer>
<handlers>
<add name="*.htm_*" path="*.htm" verb="*" type="bogay.UrlRewrite.RewriteModule" preCondition="integratedMode,runtimeVersionv2.0"/>
<add name="*.aspx_*" path="*.aspx" verb="*" type="bogay.UrlRewrite.RewriteModule" preCondition="integratedMode,runtimeVersionv2.0"/>
<add name="*.ashx_*" path="*.ashx" verb="*" type="bogay.UrlRewrite.CssHandler" preCondition="integratedMode,runtimeVersionv2.0"/>
</handlers>
</system.webServer>

- Đối với doc, cách xử lý tốt nhất là trên file Global.asax và Main.Master.cs

+Trước tiên là bỏ khoảng trắng nhé. Các bạn sửa nội dung trong file Main.master, overide lại method render :

protected override void Render(HtmlTextWriter writer)
{
using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
{
base.Render(htmlwriter);
string html = htmlwriter.InnerWriter.ToString();

if ((ConfigurationManager.AppSettings.Get("RemoveWhitespace") + string.Empty).Equals("true", StringComparison.OrdinalIgnoreCase))
{
html = Regex.Replace(html, @"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}", string.Empty);
html = Regex.Replace(html, @"[ \f\r\t\v]?([\n\xFE\xFF/{}[\];,<>*%&|^!~?:=])[\f\r\t\v]?", "$1");
html = html.Replace(";\n", ";");
}

writer.Write(html.Trim());
}

}

Thêm đoạn sau vào file web.config nhé

<configuration>
<appSettings>
<!--add key to remove white space-->
<add key="RemoveWhitespace" value="true"/>
</appSettings>

</configuration>

+Giờ là nén doc này. Các bạnsửa paste đoạn code sau trong Global.asax :

<%@ Application Codebehind="Global.asax.cs" Inherits="bogay.Global" Language="C#" %>

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.IO.Compression" %>

<script runat="server">
void Application_PreRequestHandlerExecute(object sender, EventArgs e)
{
HttpApplication app = sender as HttpApplication;
string acceptEncoding = app.Request.Headers["Accept-Encoding"];
Stream prevUncompressedStream = app.Response.Filter;

if (!(app.Context.CurrentHandler is Page ||
app.Context.CurrentHandler.GetType().Name == "SyncSessionlessHandler") ||
app.Request["HTTP_X_MICROSOFTAJAX"] != null)
return;

if (acceptEncoding == null || acceptEncoding.Length == 0)
return;

acceptEncoding = acceptEncoding.ToLower();

if (acceptEncoding.Contains("deflate") || acceptEncoding == "*")
{
// defalte
app.Response.Filter = new DeflateStream(prevUncompressedStream,
CompressionMode.Compress);
app.Response.AppendHeader("Content-Encoding", "deflate");
} else if (acceptEncoding.Contains("gzip"))
{
// gzip
app.Response.Filter = new GZipStream(prevUncompressedStream,
CompressionMode.Compress);
app.Response.AppendHeader("Content-Encoding", "gzip");
}
}
</script>

2.Use a Content Delivery Network (CDN)

Đây là giải pháp phân phối các tài nguyên sao cho client được lợi về đường đi .

Có thể tưởng tượng đây là bài toán phân phôi gà rán KFC . Nếu bạn muốn ăn thị gà KFC bạn chỉ cần gọi đến số 3848999 , yêu cầu món gà rán và đọc địa chỉ nhà , KFC sẽ chọn cửa hàng gần nhà bạn nhất để rao hàng . Tuy nhiên dự án Vccorp.vn chỉ là một website giới thiệu về gia đình vc với lượng truy cập thấp , giới hạn trong lãnh thổ việt nam . Nên không cần thiết cần có một CDN . Vì vậy bỏ qua phần này , nếu bạn vẫn muốn có rank A mà không thật sự  có một CDN thì đó là chuyện khác  ( hacking way ) mình sẽ nói đến nếu có thời gian .

3. Add Exprites header

Đưa Exprites và tất cả các header của các tài nguyên , đặc biệt là static content , Bạn chỉ cần config IIS để xử lý gọn vấn đề này :

Thanm khảo link . Thật lòng mà nói thì IIS 7 đã có bước tiến dài so với IIS 6 về xử lý static content . Nhưng so với các webserver như  apahce  , lightd , Nginx hay mới đây là Cherokee thì IIS thuộc hàng siêu cùi mía . Chính vì vậy mình vẫn muốn chuyển hẳn  static  content sang một server chuyện dụng ( recomend Cherokee + squid hoặc Varnish ) .

Đón đọc tiếp phần 2 ..

58 nhận xét:

  1. khi combine các file js/css, làm sao để replace các references trong file HTML nếu dùng msbuild vậy chị?

    Trả lờiXóa
  2. Hoặc là if else theo config file , hoặc là dùng ScriptManager

    Trả lờiXóa
  3. đại ka cho sample code cái đoạn if else theo config file đi, em hông hỉu ý nì

    Trả lờiXóa
  4. Trong nội dung của file StyleHandler.ashx.cs và ScriptsHandler.ashx.cs, trong này sẽ xử lý việc lấy nội dung từ các file sẽ gộp trong file config. Sau đó, nội dung của các file sẽ được đối tượng writer, write thẳng trên trình duyệt. Trong main.master, khi code phần


    thì thực chất ko hề tồn tại 2 file này. Đó chỉ là file ảo dẫn đến các handler được config trong file web.config

    Trả lờiXóa
  5. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.

    Trả lờiXóa
  6. Hey admin, very informative blog post! Pleasee continue this awesome work..

    Trả lờiXóa
  7. Nice read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that: thank you for food!

    Trả lờiXóa
  8. Great read, I just gave this onto a friend who was doing a little research on that. And he actually bought me dinner because I found it for him ;-) So let me rephrase that; thank you for food!

    Trả lờiXóa
  9. Don't you assume amazing to express "Thank You" for any good article?

    Trả lờiXóa
  10. Wait about a moment! I have something crucial could nicely just like

    Trả lờiXóa
  11. Extremely easy and also exceptional guidebook

    Trả lờiXóa
  12. each and every and every time I took in also as study a write-up I identified a new challenge that helped me to generate. A lot of thanks!

    Trả lờiXóa
  13. Thanks to take your current time so as to give rise to people

    Trả lờiXóa
  14. right now nowadays and I have read numerous fantastic articles more than here.

    Trả lờiXóa
  15. It is wonderful to view that may we're even now reading the other person. Thanks for itemizing me! All of the very best

    Trả lờiXóa
  16. Appreciate such a helpful post ! Very easy to know together with labored first-time web design and development

    Trả lờiXóa
  17. Great post at $i->php(); » Blog Archive » Tối Æ°u hóa website theo chuẩn Yslow part 1. I was checking continuously this blog and I am impressed! Extremely helpful information particularly the last part :) I care for such information a lot. I was seeking this particular info for a very long time. Thank you and good luck.

    Trả lờiXóa
  18. Which dude truly knows what is he's referring to. symphony

    Trả lờiXóa
  19. I am amazed with the abundance of interesting articles on your site! The author – good luck and wish you the new interesting posts..!

    Trả lờiXóa
  20. Hunting more than this submit reminds me of my brother! I'll onward this write-up in order to him or her.

    Trả lờiXóa
  21. I have to build a really good articles available and i genuinely think your post Meets extremely best with it. company registration singapore

    Trả lờiXóa
  22. I do think it could be completely extraordinary how useful it was when I read it

    Trả lờiXóa
  23. Like a Novice, I'll be continually browsing on-line for articles that will advantage me personally. Thanks a good deal

    Trả lờiXóa
  24. Outstanding website. Lots of useful info here. We are sending it to a couple close friends ans also discussing in delightful. And definitely, thanks for your work!

    Trả lờiXóa
  25. precisely why invest your personal brains upon simply publishing video clips within your world wide web internet site once you could be providing us a factor helpful you just read?

    Trả lờiXóa
  26. Appreciate the information. Most successful

    Trả lờiXóa
  27. Howdy say thanks to with regard to give us beneficial details inside your weblog i think you are going to supplies far more particulars like this later on.

    Trả lờiXóa
  28. I'm sorry concerning twice post, your web site cause me to really feel proud sports news

    Trả lờiXóa
  29. Many thanks for this, excellent report. Will probably be third , carefully even though I attempt for you to batter

    Trả lờiXóa
  30. We managed to save which in order that you are able to my favorite characteristics web site listing and can also be analyzing returning prior to long.

    Trả lờiXóa
  31. could you views upgrading your weblog with an increase of info? It's really a superb selection for myself.

    Trả lờiXóa
  32. I'm going to become back as you revise.

    Trả lờiXóa
  33. Finally I identified remarkable written content on your personal web site, preserve placing up this way, It really is really helpfull.

    Trả lờiXóa
  34. I'll instantly grab your existing rss to become knowledgeable from a revisions.

    Trả lờiXóa
  35. Hi there! amazing weblog site! I'm a ordinary customer to become able to your own

    Trả lờiXóa
  36. Inventive producing potential has encouraged me personally, many thanks !

    Trả lờiXóa
  37. Now i'm thus pleased to notice that can

    Trả lờiXóa
  38. I am for that reason thrilled to know of your data ! Sewer

    Trả lờiXóa
  39. latest world news I've not a hint precisely what your personal on relating to here, however hello, anyway i'm truthful !.

    Trả lờiXóa
  40. Certainly the thumbs upwards. All of the greatest!

    Trả lờiXóa
  41. We've 2 sites a single my private and the other which might be my school internet site.I'll release a number of component within the college weblog site.I do hope you don't brain

    Trả lờiXóa
  42. Any individual who read this write-up is going to be really feel helpfull, I'll wait the far far more content subsequent time. thanks companion.

    Trả lờiXóa
  43. We have moreover book-marked your internet site and can come back

    Trả lờiXóa
  44. Exceptional post, several thanks for posting the concept, I am wanting to decide this kind of away

    Trả lờiXóa
  45. Hello! I became browsing on and discovered your website submit... great! I like your website. Numerous thanks!

    Trả lờiXóa
  46. Hi! incredible website! I am a normal visitor to your personal house

    Trả lờiXóa
  47. For the time becoming you could have some of the many amazing sites in my blogroll.

    Trả lờiXóa
  48. We've also book marked your internet site which enable it to return

    Trả lờiXóa
  49. Excellent. All the best ., tell me the way ought to go. Great topic also, We keep reading which will identify all more than the spot.

    Trả lờiXóa
  50. short sale coaching Precisely what I was looking for, and extremely nicely spelled out.

    Trả lờiXóa
  51. Very best answers my own lover! Essentially respect your current methods joined with advise regarding this particular.

    Trả lờiXóa
  52. Thank you for spending some time to go more than this specific, I feel strongly relating to it and also truly like reading via far more about this specific topic.

    Trả lờiXóa
  53. A good deal of people miss the first handful of crucial steps, like ensuring there's a very good

    Trả lờiXóa
  54. Seem complex for you personally to far more brought reasonable within you!

    Trả lờiXóa