Chủ đề: Tối ưu hóa giao diện người dùng (frontend) với YSLOW

Một trong những yếu tố quyết định sự thành công hay thất bại của một website đó là thời gian tải trang web xuống máy người dùng đầu cuối (client). Thời gian tải trang web càng lâu càng làm người dùng mất niềm tin hơn với website đó và nhanh chóng rời bỏ. Bạn hãy thử tưởng tượng bạn truy cập 1 website mà sau 5 giây website vẫn chưa tải xong thì bạn sẽ làm gì (?). Với tôi, tôi sẽ đóng trình duyệt lại và lựa chọn một website khác có cùng nội dung :yes: .

Xin giới thiệu với các webmaster một ứng dụng giúp bạn tối ưu hóa frontend website khá hữu hiệu - một addon của Firefox giúp bạn xác định những yếu tố cần chỉnh sửa để tăng tốc độ tải trang của mình: YSlow.

YSlow là một addon khá hữu ích cho webmaster. Nó dựa trên các tiêu chí đánh giá chất lượng của Yahoo! Đây là ứng ụng rất cần thiết cho webmaster và cả các designer nữa :yes: . Sau đây xin điểm qua một số chức năng cơ bản của YSlow và hướng dẫn các bạn tối ưu hóa từng phần.

1. Giao diện addon YSlow giành cho Firefox



Phần Grade ở trên cho biết đánh giá chung về website của bạn đã đạt được mức độ điểm nào so với thang điểm chung. A Grade là điểm cao nhất và sẽ thấp dần.

- Cột trái là những tiêu chí đánh giá và mức độ hoàn thiện của website bạn so với những tiêu chí trên. Điều bạn cần làm là làm thế nào để càng nhiều điểm A càng tốt để nâng thang điểm chung của website.
- Phần nội dung bên phải là diễn giải cho những yếu tố bạn cần chỉnh sửa để đạt được số điểm cao hơn.

2. Tối ưu hóa frontend
Tôi sẽ cùng bạn nghiên cứu từng yếu tố một và tìm cách khắc phục tốt nhất cho từng phần:

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.[/*:m:zr7nzu6k]
• 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 :lick: . 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.

Về vấn đề này bạn nên kết hợp với designer vì ảnh hưởng khá nhiều đến cấu trúc chung của website.

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 đó.

Lấy ví dụ Amazon.com: bạn sẽ dễ dàng nhận thấy các hình ảnh của Amazon không bao giờ được đặt trên chính domain amazon.com mà sẽ là các máy chủ khác như :

Code:

http://g-ecx.images-amazon.com/images/G/01/kindle/merch/gw/turingww-C1-01-US-110509._V226564583_.gif

http://ecx.images-amazon.com/images/...mL._SL135_.jpg

Hãy làm tương tự nếu bạn có thể :punk:

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:

Code:

<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 Code:

<span class="syntaxhtml">
<span class="syntaxdefault"><?php
header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Cache-Control:*no-cache,*must-revalidate"</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">*</span><span class="syntaxcomment">//*HTTP/1.1
</span><span class="syntaxdefault">header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Expires:*Sat,*26*Jul*1997*05:00:00*GMT"</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">*</span><span class="syntaxcomment">//*Date*in*the*past
</span><span class="syntaxdefault">?>
</span></span>

Compress components with gzip - Nén dữ liệu trước khi chuyển đi
Phần này đã có bài viết Tăng tốc độ load website bằng cách nén dữ liệu rồi ! Mọi người chịu khó đọc lại nhé.

Ở đây mình bổ sung thêm 1 đoạn code .htaccess

Code:

# Enable gzip (deflate) compression
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Dòng đầu là comment thôi :lick: , không có gì hết :lick: . Còn 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

Quá rõ ràng không cần phải hướng dẫn đúng không.

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 :lick: . Đ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).

(Còn tiếp)
Note: bạn nào rãnh thì tiếp 1 tay với nhé :p

Chủ đề có liên quan:

• Các pro cứu em về code html với
• Lỗi nghiêm trọng ảnh hưởng đến vị trí SEO
• Chứng năng hỗ trợ trực tuyến giống...
• Thiết kế web HTML5: Hướng dẫn tạo Columns...
• Hỏi về cách Neo 1 mục trên website
• Share cho mấy bác một số giao diện web...
• Edit HTML AncMedia Blogger Với
• Thiết kế web HTML5: CSS3 thay thế java làm...
• Thiết kế web HTML5: các hiệu ứng CSS3 thú vị
• Share code báo giá quảng cáo đẹp và gần Pro

Vố tay vổ chưn 2 phát.

Mình vừa làm thử:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$" >
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
# Enable gzip (deflate) compression
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Gửi bởi vuatintac

Vố tay vổ chưn 2 phát.

Vỗ tay thì vỗ bằng cái nút Cám ơn dùm mình là đủ rồi. Đừng làm tốn thời gian đọc bài..."vỗ tay" của anh em nữa :chair: . Và nếu có reply thì reply theo nội dung. Lần này nhắc nhở. Lần sau chém thẳng tay :chair: :chair:

Hoan hô bác Nhân đã chia sẽ các kiến thức bổ ích cho các anh em. Em thì hiếm khi viết cái gì mà đã được in thành sách roài nên không thể giúp bác được !

Nếu đơn giản là theo yslow để optimize thì các đồng chí có thể tham kháo cuốn "High Performance Web Sites", đây là một cuốn sách không dày và trình bày hầu hết các điều được chỉ ra trong tiêu chí của yslow. Còn tìm sách thế nào thì các anh em tự hỏi anh gồ ý, anh ý cái gì cũng có nếu biết khai thác ảnh, đừng có hỏi mình nhé. Còn muốn đọc tiếng việt thì chờ anh Nhân khi nào ảnh post lên thì đọc ^^.

"Each performance rule is supported by specific examples, and code snippets are available on the book's companion web site. The rules include how to:

* Make Fewer HTTP Requests
* Use a Content Delivery Network
* Add an Expires Header
* Gzip Components
* Put Stylesheets at the Top
* Put Scripts at the Bottom
* Avoid CSS Expressions
* Make JavaScript and CSS External
* Reduce DNS Lookups
* Minify JavaScript
* Avoid Redirects
* Remove Duplicates Scripts
* Configure ETags
* Make Ajax Cacheable
..."

Híc! Mình chưa đọc cuốn đó :wacko: . Hễ nhìn thấy Ebook là buồn ngủ :bawling:
Cái này viết khi sử dụng YSlow để tối ưu thôi :punk:

Do thời gian có hạn nên mình không thể viết tất cả ra cho anh em được. Mình cố gắng tóm lược những yếu tố khó hoặc cần chỉnh sửa nhiều. Các vấn đề còn lại anh em chịu khó đọc thêm hướng dẫn từ YSLOW hoặc từ bài của bạn lonelywolf nhé

Avoid URL redirects - tránh các trang chuyển hướng
Lỗi này thường mắc phải khi bạn nâng cấp phiên bản và để tránh lỗi duplicated content (liên quan đến SEO) bạn thường có xu hướng chuyển từ link cũ sang link mới. Hãy hạn chế các trang chuyển hướng kiểu này ở mức thấp nhất có thể. Trong trường hợp bất khả kháng bạn có thể sử dụng các lệnh redirect 301, redirect 302.

Configure entity tags (ETags)

Etag là loại tag thuộc tính dùng kiểm tra file tải về máy client có tương ứng với file được chứa đựng trên máy chủ hay là không. Bạn có thể đưa code sau vào .htaccess:

Code:

<FilesMatch "\.(jpg|jpeg|gif|png|mp3|flv|mov|avi|3pg|html|htm|swf)$">
    FileETag MTime Size
</FilesMatch>

Hoặc bạn có thể cấu hình .htaccess để bỏ luôn nó nếu muốn (mình nghĩ nên bỏ luôn cho nhẹ nhàng ):

Code:

FileETag none

Avoid HTTP 404 (Not Found) error - tránh lỗi 404
Việc này khá cần thiết. Bạn có thể thiết lập ở .htaccess bằng đoạn code sau:

Code:

ErrorDocument 401 /error.html
ErrorDocument 403 /error.html
ErrorDocument 404 /error.html
ErrorDocument 500 /error.html

Trong đó trang error.html là trang sẽ được gọi khi lỗi 404 xuất hiện.

Ngoài ra bạn có thể cấu hình trong Host Control Panel nếu hosting của bạn hỗ trợ (hầu hết các host đều hỗ trợ).

Do not scale images in HTML - không co/kéo giãn các hình ảnh
Lỗi này tuy đơn giản nhưng nhiều bạn mắc phải :p

Mỗi khi trình duyệt được tải xuống, hình ảnh được tải với kích thước nguyên mẫu. Client sẽ dựa vào nội dung định dạng cho file HTML của bạn mà co/kéo giãn hình ảnh. Việc co/kéo giãn làm cho trình duyệt của bạn phải xử lý nhiều hơn trong quá trình hiển thị và làm chậm quá trình xử lý nội dung :wink:

Căn bản những yếu tố mình liệt kê phía trên là những yếu tố khó tối ưu hóa nhất. Nếu bạn không tối ưu hóa được phần nào đó thì vui lòng reply để anh em cùng giúp đỡ nhé.

Kết quả cuối cùng khi mình tiến hành tối ưu hóa cho trang chủ của VNW:



Vẫn còn nhiều thứ chưa được tối ưu hóa do điều kiện chưa cho phép nhưng rõ ràng tốc độ truy cập VNW được cải thiện đáng kể và ít ngốn tài nguyên hệ thống (resource), banwith hơn trước :wink:

Báo cáo với các bác là cha google mới đưa ra một cái Add-on cho Firefox ngon hơn thằng YSlow nhiều, đó là em PageSpeed, cũng cần Firebug để chạy chung như là Yslow.
Mọi người xem thêm và download tại đây nhé http://code.google.com/speed/page-speed/download.html

À, trang vnw nhà mình được 81/100 đấy ạ

Page speed ko trực quan bằng Yslow được nhưng cũng khá hữu ích, em thì dùng cả hai nhưng vẫn thích Yslow hơn

Mình cũng vote 1 phiếu cho YSlow

Bác giống em, em cũng khoái dùng Yslow hơn/

Gửi bởi Hutek

Page speed ko trực quan bằng Yslow được nhưng cũng khá hữu ích, em thì dùng cả hai nhưng vẫn thích Yslow hơn