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

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

(do không có thời gian căn chỉnh bai viết nên các bạn xem bài viết đầy đủ tại http://i-php.net)


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é


(do không có thời gian căn chỉnh bai viết nên các bạn xem bài viết đầy đủ tại i-php.net)