tin tức

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

22/02/2012 - Xem: 882

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



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é















- Đố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é







+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" %>

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 ) .

Nguồn: http://i-php.net/

Liên kết

Tin được quan tâm nhất

Quản cáo