HomeTăng tốc website theo Yahoo! (Phần 1)
Wednesday, January 7, 2009
Tăng tốc website luôn là 1 vấn đề cần thiết đối với tất cả các webmaster. Các tiêu chí, hướng dẫn để tăng tốc website có khá nhiều trên mạng (rất tiếc là có rất ít hướng dẫn chi tiết bằng tiếng Việt), ở đây tôi xin được bàn đến các quy tắc của Yahoo. Yahoo! đưa ra bộ quy tắc khá khoa học, được phân chia làm 7 mục chính với tất cả là 34 đề mục (và có thể trong tương lai sẽ được chỉnh sửa dần thêm). Để biết chi tiết về các quy tắc, các bạn có thể đọc tại đây. Trong loạt bài viết này, tôi sẽ cố gắng trình bày 1 vài quy tắc trong số đó cũng như cách áp dụng vào website.
Trước tiên chúng ta cần có công cụ kiểm tra website theo các tiêu chí mà Yahoo! đưa ra, đó là addon YSlow do chính Yahoo! cung cấp, dành cho trình duyệt Firefox. Addon này là 1 plugin của addon Firebug khá nổi tiếng. Do đó cần phải cài đặt Firebug cho Firefox trước khi cài YSlow.
Để cài đặt Firebug, các bạn hãy vào đây. Còn để cài đặt YSlow, hãy vào đây.
Nếu bạn mới làm quen với Firebug, có thể bạn nên đọc 1 hướng dẫn cơ bản về sử dụng nó.
Sau khi cài đặt 2 plugin này, bạn hãy khởi động lại Firefox, lúc này ở dưới thanh trạng thái của Firefox sẽ xuất hiện thêm 2 biểu tượng: 1 hình con bọ của Firebug, 1 hình đồng hồ tốc độ của YSlow. Nhấn vào đồng hồ đó, YSlow sẽ mở 1 vùng ở dưới màn hình, cho phép bạn xem các chỉ số đánh giá của website theo luật của Yahoo!
Mặc định thì YSlow không được bật với mọi website, do việc phân tích này sẽ kéo dài thời gian, làm máy tính của bạn load chậm. Vì vậy, để bật YSlow cho website của bạn để kiểm tra, hãy nhấn vào nút Preference hoặc Stat trên thanh ngang mà YSlow mở ra.
1. Quy tắc thứ nhất: Giảm tối đa các request
Request là các truy vấn của trình duyệt tới các thành phần của website, bao gồm hình ảnh, text, các script, flash, media, ... 80% thời gian tải trang web là dành cho việc tải các thành phần này. Việc có càng nhiều các thành phần đồng nghĩa với có càng nhiều truy vấn, và trình duyệt càng phải đợi lâu để server trả lời. Hơn thế nữa, có nhiều thành phần phức tạp trên trang web sẽ làm trình duyệt tốn nhiều thời gian hơn để sắp xếp, hiển thị (render) chúng.
Vậy thì có các phương pháp nào để giảm tối đa các request?
1.1. Đơn giản hóa thiết kế
Hãy sử dụng ít hình ảnh, flash hay script trên trang web nếu chúng không thực sự cần thiết. Theo phong cách này, thiết kế của bạn sẽ thuộc loại minimize, chủ yếu sử dụng màu sắc. Tuy vậy, giao diện đẹp, hấp dẫn và tương tác luôn là 1 yếu tố thu hút khách viếng thăm. Do đó, việc cân bằng giữa các yếu tố này là cần thiết.
Bạn cũng nên theo dõi lượng khách viếng thăm website, nhu cầu của họ để thay đổi phong cách thiết kế cho phù hợp. Thông thường, nếu khách viếng thăm đến từ các công cụ tìm kiếm thì có thể bạn cần 1 giao diện bắt mắt để thu hút, ngược lại, nếu khách viếng thăm chủ yếu là những người truy cập trực tiếp vào trang web (khách tiềm năng) thì yếu tố đó có lẽ giảm đi rất nhiều.
Bạn cũng nên xem xét vấn đề nội dung trang web để thiết kế phù hợp. Một website thảo luận kĩ thuật hay các vấn đề chuyên môn chắc sẽ không cần nhiều flash hay banner, nhưng 1 website ca nhạc, giải trí thì sẽ khác.
Mặc dù cân nhắc như thế, nhưng có những trường hợp, bạn chỉ giảm thiểu các thành phần trong website đến một giới hạn cân bằng nào đó, vậy thì làm thế nào để có thể giảm hơn được nữa?
1.2. Tích hợp các file lại với nhau
Việc tích hợp các file nhỏ thành 1 file lớn này thường được dùng cho các file Javascript và CSS. Nguyên tắc cũng rất đơn giản, bạn chỉ cần copy nội dùng của từng file nhỏ đó vào 1 file lớn rồi save lại là đã có 1 file tổng hợp. Yên tâm rằng nó hoạt động y hệt như các file nhỏ kia.
Tuy nhiên, nhược điểm của cách làm trên là bạn phải làm bằng tay. Và khi có sự thay đổi của các file js, css nhỏ (hãy nhớ lưu các file nhỏ này) thì bạn phải cập nhật lại file lớn tổng hợp kia - một công việc khá mất thời gian.
Để giải quyết vấn đề này, bạn nên dùng các công cụ tự động:
a) PHP Speedy: công cụ này sẽ làm nhiệm vụ tự động tóm các file js, css trong website của bạn, tích hợp chúng thành 1 (gồm 1 file js và 1 file css tương ứng) và thay thế cho các file có sẵn kia. Hướng dẫn cài đặt và sử dụng đều có sẵn ở trang chủ, cũng khá dễ dàng để thực hiện.
PHP Speedy còn có 1 chức năng khác khá tốt là nén gzip các thành phần js và css đó. Chức năng này giúp cho bạn tiết kiệm băng thông, đồng thời tăng tốc rất nhiều quá trình tải trang do file js và css đều là các file text đơn thuần, gzip sẽ có hiệu quả rất cao. PHP Speedy cũng có chức năng cache, giúp cho server không phải hoạt động mạnh mỗi khi có request.
Nếu bạn sử dụng WordPress, thì PHP Speedy cũng có 1 plugin dành riêng cho nó. Hãy làm theo hướng dẫn trong file readme để cài đặt. Tuy vậy, nên lưu ý khi sử dụng PHP Speedy cho WordPress vì có thể sẽ không hoạt động đúng nếu bạn sử dụng plugin WP Super Cache. Nguyên nhân lỗi này là do PHP Speedy cũng sử dụng cache của riêng nó, và cache này nằm ở phía dưới cache do WP Super Cache tạo ra. Vì vậy, khi WP Super Cache hiển thị phần cache của nó cho người dùng, thì vô tình hiển thị cả cache của PHP Speedy. Do đó, chúng ta phải giải phóng phần cache của PHP Speedy trước. Cách lí giải này và cách sửa lỗi, các bạn có thể đọc tại forum hỗ trợ của WordPress.
b) Sử dụng script của rakaz: ngoài PHP Speedy, bạn có thêm 1 lựa chọn nữa từ rakaz. Script này làm chức năng tương tự như PHP Speedy, bao gồm các chức năng: tổng hợp các file js, css; nén chúng thông qua gzip và cache chúng. Tuy nhiên, nó đòi hỏi bạn phải thao tác thêm 1 chút với .htaccess.
Nó có khả năng tích hợp toàn bộ các file js hay css trong 1 thư mục được chỉ định - một điểm khác so với PHP Speedy. Tất nhiên là khi có request đến 1 file js hay css bất kì thì file tổng hợp sẽ được đưa ra theo quy tắc của .htaccess. Điểm này có lợi nếu website của bạn sử dụng nhiều file js hay css trong thư mục đó, nhưng nó có hại khi bạn sử dụng 1 hoặc rất ít file js, css do lúc nào bạn cũng nhận được file tổng hợp vì dung lượng file này sẽ lớn hơn những gì bạn cần.
Bạn nên đọc kĩ hướng dẫn sử dụng và cấu hình để sử dụng nó 1 cách hiệu quả.
c) Plugin WP-JS và WP-CSS dành cho WordPress: cả 2 plugin này đều có chức năng như 2 công cụ trên, tuy nhiên nó chỉ dành riêng cho WordPress. Điều dở ở 2 plugin này là chúng ta phải tự điều chỉnh lại trong theme bằng cách đặt link đến file của plugin với các tham số tương ứng để bắt chúng tích hợp các file js hay css, một công việc thủ công không kém việc làm bằng tay.
Các bạn lưu ý là cả 3 công cụ trên đều có 3 chức năng:
- tự động gom các file js, css vào làm 1
- minify (tối giản) chúng đến mức tối đa
- nén gzip chúng
chứ không phải chỉ có 1 chức năng tích hợp các file js, css. Tuy vậy các chức năng kia lại liên quan đến các quy tắc khác của Yahoo! nên tạm thời tôi không xem xét kĩ ở đây.
(Còn tiếp)
0. Chuẩn bị:
Trước tiên chúng ta cần có công cụ kiểm tra website theo các tiêu chí mà Yahoo! đưa ra, đó là addon YSlow do chính Yahoo! cung cấp, dành cho trình duyệt Firefox. Addon này là 1 plugin của addon Firebug khá nổi tiếng. Do đó cần phải cài đặt Firebug cho Firefox trước khi cài YSlow.
Để cài đặt Firebug, các bạn hãy vào đây. Còn để cài đặt YSlow, hãy vào đây.
Nếu bạn mới làm quen với Firebug, có thể bạn nên đọc 1 hướng dẫn cơ bản về sử dụng nó.
Sau khi cài đặt 2 plugin này, bạn hãy khởi động lại Firefox, lúc này ở dưới thanh trạng thái của Firefox sẽ xuất hiện thêm 2 biểu tượng: 1 hình con bọ của Firebug, 1 hình đồng hồ tốc độ của YSlow. Nhấn vào đồng hồ đó, YSlow sẽ mở 1 vùng ở dưới màn hình, cho phép bạn xem các chỉ số đánh giá của website theo luật của Yahoo!
Mặc định thì YSlow không được bật với mọi website, do việc phân tích này sẽ kéo dài thời gian, làm máy tính của bạn load chậm. Vì vậy, để bật YSlow cho website của bạn để kiểm tra, hãy nhấn vào nút Preference hoặc Stat trên thanh ngang mà YSlow mở ra.
1. Quy tắc thứ nhất: Giảm tối đa các request
Request là các truy vấn của trình duyệt tới các thành phần của website, bao gồm hình ảnh, text, các script, flash, media, ... 80% thời gian tải trang web là dành cho việc tải các thành phần này. Việc có càng nhiều các thành phần đồng nghĩa với có càng nhiều truy vấn, và trình duyệt càng phải đợi lâu để server trả lời. Hơn thế nữa, có nhiều thành phần phức tạp trên trang web sẽ làm trình duyệt tốn nhiều thời gian hơn để sắp xếp, hiển thị (render) chúng.
Vậy thì có các phương pháp nào để giảm tối đa các request?
1.1. Đơn giản hóa thiết kế
Hãy sử dụng ít hình ảnh, flash hay script trên trang web nếu chúng không thực sự cần thiết. Theo phong cách này, thiết kế của bạn sẽ thuộc loại minimize, chủ yếu sử dụng màu sắc. Tuy vậy, giao diện đẹp, hấp dẫn và tương tác luôn là 1 yếu tố thu hút khách viếng thăm. Do đó, việc cân bằng giữa các yếu tố này là cần thiết.
Bạn cũng nên theo dõi lượng khách viếng thăm website, nhu cầu của họ để thay đổi phong cách thiết kế cho phù hợp. Thông thường, nếu khách viếng thăm đến từ các công cụ tìm kiếm thì có thể bạn cần 1 giao diện bắt mắt để thu hút, ngược lại, nếu khách viếng thăm chủ yếu là những người truy cập trực tiếp vào trang web (khách tiềm năng) thì yếu tố đó có lẽ giảm đi rất nhiều.
Bạn cũng nên xem xét vấn đề nội dung trang web để thiết kế phù hợp. Một website thảo luận kĩ thuật hay các vấn đề chuyên môn chắc sẽ không cần nhiều flash hay banner, nhưng 1 website ca nhạc, giải trí thì sẽ khác.
Mặc dù cân nhắc như thế, nhưng có những trường hợp, bạn chỉ giảm thiểu các thành phần trong website đến một giới hạn cân bằng nào đó, vậy thì làm thế nào để có thể giảm hơn được nữa?
1.2. Tích hợp các file lại với nhau
Việc tích hợp các file nhỏ thành 1 file lớn này thường được dùng cho các file Javascript và CSS. Nguyên tắc cũng rất đơn giản, bạn chỉ cần copy nội dùng của từng file nhỏ đó vào 1 file lớn rồi save lại là đã có 1 file tổng hợp. Yên tâm rằng nó hoạt động y hệt như các file nhỏ kia.
Tuy nhiên, nhược điểm của cách làm trên là bạn phải làm bằng tay. Và khi có sự thay đổi của các file js, css nhỏ (hãy nhớ lưu các file nhỏ này) thì bạn phải cập nhật lại file lớn tổng hợp kia - một công việc khá mất thời gian.
Để giải quyết vấn đề này, bạn nên dùng các công cụ tự động:
a) PHP Speedy: công cụ này sẽ làm nhiệm vụ tự động tóm các file js, css trong website của bạn, tích hợp chúng thành 1 (gồm 1 file js và 1 file css tương ứng) và thay thế cho các file có sẵn kia. Hướng dẫn cài đặt và sử dụng đều có sẵn ở trang chủ, cũng khá dễ dàng để thực hiện.
PHP Speedy còn có 1 chức năng khác khá tốt là nén gzip các thành phần js và css đó. Chức năng này giúp cho bạn tiết kiệm băng thông, đồng thời tăng tốc rất nhiều quá trình tải trang do file js và css đều là các file text đơn thuần, gzip sẽ có hiệu quả rất cao. PHP Speedy cũng có chức năng cache, giúp cho server không phải hoạt động mạnh mỗi khi có request.
Nếu bạn sử dụng WordPress, thì PHP Speedy cũng có 1 plugin dành riêng cho nó. Hãy làm theo hướng dẫn trong file readme để cài đặt. Tuy vậy, nên lưu ý khi sử dụng PHP Speedy cho WordPress vì có thể sẽ không hoạt động đúng nếu bạn sử dụng plugin WP Super Cache. Nguyên nhân lỗi này là do PHP Speedy cũng sử dụng cache của riêng nó, và cache này nằm ở phía dưới cache do WP Super Cache tạo ra. Vì vậy, khi WP Super Cache hiển thị phần cache của nó cho người dùng, thì vô tình hiển thị cả cache của PHP Speedy. Do đó, chúng ta phải giải phóng phần cache của PHP Speedy trước. Cách lí giải này và cách sửa lỗi, các bạn có thể đọc tại forum hỗ trợ của WordPress.
b) Sử dụng script của rakaz: ngoài PHP Speedy, bạn có thêm 1 lựa chọn nữa từ rakaz. Script này làm chức năng tương tự như PHP Speedy, bao gồm các chức năng: tổng hợp các file js, css; nén chúng thông qua gzip và cache chúng. Tuy nhiên, nó đòi hỏi bạn phải thao tác thêm 1 chút với .htaccess.
Nó có khả năng tích hợp toàn bộ các file js hay css trong 1 thư mục được chỉ định - một điểm khác so với PHP Speedy. Tất nhiên là khi có request đến 1 file js hay css bất kì thì file tổng hợp sẽ được đưa ra theo quy tắc của .htaccess. Điểm này có lợi nếu website của bạn sử dụng nhiều file js hay css trong thư mục đó, nhưng nó có hại khi bạn sử dụng 1 hoặc rất ít file js, css do lúc nào bạn cũng nhận được file tổng hợp vì dung lượng file này sẽ lớn hơn những gì bạn cần.
Bạn nên đọc kĩ hướng dẫn sử dụng và cấu hình để sử dụng nó 1 cách hiệu quả.
c) Plugin WP-JS và WP-CSS dành cho WordPress: cả 2 plugin này đều có chức năng như 2 công cụ trên, tuy nhiên nó chỉ dành riêng cho WordPress. Điều dở ở 2 plugin này là chúng ta phải tự điều chỉnh lại trong theme bằng cách đặt link đến file của plugin với các tham số tương ứng để bắt chúng tích hợp các file js hay css, một công việc thủ công không kém việc làm bằng tay.
Các bạn lưu ý là cả 3 công cụ trên đều có 3 chức năng:
- tự động gom các file js, css vào làm 1
- minify (tối giản) chúng đến mức tối đa
- nén gzip chúng
chứ không phải chỉ có 1 chức năng tích hợp các file js, css. Tuy vậy các chức năng kia lại liên quan đến các quy tắc khác của Yahoo! nên tạm thời tôi không xem xét kĩ ở đây.
(Còn tiếp)
Bài liên quan
.jpg)
.jpg)
.jpg)
