Tối ưu hóa tốc độ website của bạn bằng Yslow

YSlow. Nó dựa trên các tiêu chí đánh giá chất lượng web speed và tối ưu hóa code của Yahoo! Hoặc cụ thể 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.  Sau đây là điểm qua một số chức năng cơ bản của YSlow

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

<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, @"[ frtv]?([nxFExFF/{}[];,<>*%&|^!~?:=])[frtv]?", "$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 )

Make fewer HTTP requests – Hạn chế các yêu cầu xử lý

80% thời gian mà máy chủ làm việc phần lớn là để xử lý frontend. Trong đó hầu hết là để xử lý các yêu cầu liên quan đến việc download các hình ảnh, flash, stylesheets, scripts… Đây là yếu tố quan trọng nhất ảnh hưởng đến thời gian tải trang. Bạn cần xem xét lại các yếu tố hình ảnh, flash, css… trên website và giảm thiểu chúng ở mức tốt nhất có thể. Một số phương án bạn có thể sử dụng như :

-Kết hợp file:bạn có thể gộp nhiều script lại thành 1 (như với javascript, stylesheet… chẳng hạn). Thay vì cần nhiều HTTP request để gọi từng file, chúng ta chỉ cần gọi 1 lần.
- CSS Sprites: cái này khá hay nhưng hơi khó đối với các bạn không rành CSS . Nói nôm na, nó là việc bạn sử dụng 1 hình ảnh bao gồm nhiều hình ảnh khác nhau và sử dụng thuộc tính background-image và background-position của CSS để lựa chọn hình ảnh thích hợp (theo vị trí) làm background tại một vị trí. Bạn có thể xem thêm ví dụ tại đây.
-Image maps: kết hợp nhiều hình ảnh lại thành 1 hình.

Use a Content Delivery Network – Phân tán tài nguyên

Nhắc lại một lần nữa là 80-90% thời gian tải trang là để giành cho việc download hình ảnh, flash, stylesheets, scripts… và việc xử lý nhiều reuquest sẽ làm cho máy chủ web của bạn gặp nhiều bất lợi trong việc xử lý nội dung chính. Thay vì để máy chủ đảm đương quá nhiều công việc, chúng ta nên phân tán những luồng xử lý đi những nơi khác để giảm tải cho máy chủ bằng cách thiết lập một hệ thống phân tán tài nguyên. Nói đơn giản là: chứa những tài nguyên khác nhau ở những hosting, máy chủ khác nhau và chuyên biệt cho việc xử lý tài nguyên đó.

Add Expires headers

Đơn giản là thêm thời gian cache cho các trang đã tải. Giúp cho lần sau quay lại của người dùng sẽ nhanh hơn. Expires là gì thì chắc mọi người nắm rồi nên thôi tôi không nói nữa nhé.

Đây là đoạn tôi sẽ thêm vào .htaccess của mình:
<FilesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Expires “Thu, 15 Apr 2010 20:00:00 GMT”
</FilesMatch>

Còn nếu trong php thì bạn có thể sử dụng cái này:
<?php
header(“Cache-Control: no-cache, must-revalidate”); // HTTP/1.1
header(“Expires: Sat, 26 Jul 1997 05:00:00 GMT”); // Date in the past
?>

Compress components with gzip – Nén dữ liệu trước khi chuyển đi

Ở đây mình bổ sung thêm 1 đoạn code .htaccess
# Enable gzip (deflate) compression
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Dòng đầu là ghi chú thôi . dòng thứ 2 là enable tính năng gzip compression. AddOutputFilterByType là các loại file sẽ được nén lại. Các loại file:

• text/html – đây là định dạng xuất ra trước khi trả về người dùng của webpage rồi. Không có gì bàn cãi.
• text/css – Giành cho các file stylesheet.
• application/x-javascript – Giành cho các ứng dụng javascript các phiên bản.

Put CSS at top – Đặt CSS lên đầu trang

Chuyển các stylesheets tới documents HEAD sẽ làm trang web load nhanh hơn. Bởi khi chuyển các stylesheets vào HEAD cho phép trang trả lại nhanh hơn.Người dùng cuối quan tâm tới về năng lực trang web dựa vào thời gian load trang web nhanh. Và  mình  thấy các trình duyệt hiển thị bất cứ nội dung nào có thể. Nó là vấn đề cụ thể và quan trọng cho những trang với nhiều nội dung và người dùng sử dụng Internet với kết nối tốc độ thấp. Theo nghiên cứu thì khi các trình duyệt web load một trang thì nhanh nhất là các header, rồi đến các thanh công cụ, logo của trang web…..Vấn đề xảy ra khi các stylesheets gần phần dưới của các văn bản nó sẽ cấm quá trình trả lời của hầu hết các trình duyệt, bao gồm cả IE. Các trình duyệt block quá trình trả lại nhằm hạn chế việc hiển thị lại các thành phần của trang.

Put JavaScript at bottom – Javaascript đặt cuối trang.

Các master thì không phải nói thêm về cái này. Chỉ giải thích thêm 1 tí cho các newbie thôi  . Điều này là cần thiết vì các Javascript sẽ làm ảnh hưởng không nhỏ đến thời gian tải trang. Đặt javascript bên dưới để javascript load sau cùng và không ảnh hưởng nhiều đến việc hiển thị nội dung (người dùng có thể đọc nội dung trong lúc đợi javascript load).