tin tức

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

22/02/2012 - Xem: 865

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



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

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


(i-php.net)

Liên kết

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

Quản cáo