Tăng tốc website theo Yahoo!

[bebadboy87]

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), Teppi may mắn đọc được một bài của tác giả bên Hỗn Tạp - chắc là lược dịch lại bộ nguyên 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. Teppi xin mạn phép tác giả được chỉnh sửa lại và cho phù hợp đưa về đăng tại HHT để ai có cùng đam mê và muốn nghiên cứu có thể tham khảo.

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.

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

- Hỗn Tạp -

[bebadboy87]

Ở bài, chúng ta đã xem qua 2 kĩ năng cơ bản trong việc giảm thiểu các request đến website, đó là đơn giản hóa thiết kế và tích hợp các file javascript, css. Trong bài 2 này, chúng ta sẽ xem xét tiếp một số kĩ năng khác cũng nhằm mục đích giảm thiểu các request đến website.

Các bạn cũng nên lưu ý một chút rằng những công cụ được nêu ra trong từng bài viết có thể chưa thực sự tốt và thích hợp với những trường hợp cụ thể mà bạn gặp phải. Vì thế hãy luôn luôn tìm kiếm trên Google, Yahoo! với các từ khóa trong bài viết hoặc có liên quan để khám phá các công cụ còn bị bỏ sót, và có thể bạn sẽ tìm thấy nhiều bài viết khác bổ ích và chi tiết hơn.

Bạn cũng nên nhớ kiểm tra lại bằng YSlow sau mỗi bước để xem số lượng request đã được giảm thế nào. Việc kiểm tra này nên thực hiện sau từng bước tối ưu để biết chúng hoạt động ra sao.

1.3. Kỹ thuật CSS Sprites

Kỹ thuật này được ứng dụng rất nhiều và khá phổ biến. Bản chất của nó là thay thế nhiều bức ảnh cần hiển thị trong website bằng 1 bức ảnh chung, và dùng các thuộc tính CSS về background để xác định tọa độ hiển thị từng thành phần tương ứng.

Thông thường, khi muốn hiển thị 1 ảnh trên website, chúng ta thường sử dụng thẻ img của HTML hoặc thuộc tính background của CSS. Cả 2 cách làm này đều tạo ra 1 request tương ứng với bức ảnh khi website được truy cập. Cùng với số lượng các bức ảnh được hiển thị, số request này sẽ tăng lên, và tốc độ của website sẽ giảm dần.

Bằng cách gom tất cả các ảnh đó vào 1 file lớn, chúng ta đã thu gọn nhiều request tới các file hình nhỏ thành 1 request tới file hình lớn. Hãy yên tâm rằng file lớn đó sẽ không bị request nhiều lần, nó đã được cache tại bộ nhớ đệm của trình duyệt và được gọi lại mỗi khi cần đến. Việc hiển thị các bức ảnh nhỏ được xác định bằng tọa độ của chúng trong bức hình lớn thông qua thuộc tính background của CSS.

Nếu bạn cần 1 ví dụ hay hướng dẫn cách làm chi tiết thì có thể tham khảo bài viết CSS Sprites: Image Slicing’s Kiss of Death hoặc bài viết CSS Sprites: What They Are, Why They’re Cool, and How To Use Them, hay 1 bài phân tích về cách mà Yahoo! và AOL ứng dụng kĩ thuật này.

Chỉ nên chú ý một điều nhỏ khi bạn gom các ảnh nhỏ vào 1 ảnh lớn là nên để khoảng cách giữa các ảnh xa nhau 1 chút (khoảng 20-100px) vì người dùng có thể phóng to, thu nhỏ website của bạn lại (bằng công cụ bạn cung cấp tại website, hoặc đơn giản bằng việc nhấn Ctrl+lăn bi chuột) để tăng giảm kích thước chữ, khi đó khoảng cách giữa các bức ảnh cũng tăng giảm 1 chút tương ứng, và nếu chúng sát nhau quá thì có thể bị hiển thị 2 ảnh 1 lúc.

Bạn cũng nên để ý cách người ta thực hiện kỹ thuật này ở 1 điểm nữa 1 là họ thường gom các ảnh nhỏ thành 1 hàng dọc. Lí do của việc gom thành 1 hàng (ngang hoặc dọc) khá đơn giản: là để xác định tọa độ dễ dàng. Còn lí do người ta chọn hàng dọc là vì các bức ảnh phía dưới của ảnh đang hiển thị sẽ bị hàng sau che đi mất. Bạn sẽ thấy nếu gom theo hàng ngang thì những ảnh khác nằm bên phải của ảnh đang hiển thị sẽ bị hiện ra, đó là điều chúng ta không mong muốn.

Nếu bạn không có công cụ chỉnh sửa ảnh để thực hiện, hoặc bạn muốn làm nhanh và tự động thì hãy sử dụng các công cụ CSS Sprites Generator online như tại trang http://www.csssprites.com/ hoặc tại trang http://spritegen.website-performance.org/. Tại csssprites.com thì bạn không có tùy chọn điều chỉnh lề và khoảng cách giữa các ảnh như spritegen.website-performance.org, tuy vậy nó cho phép bạn upload nhiều ảnh 1 lúc và dễ chọn lựa, thay đổi hơn là spritegen.website-performance.org, do trang web này bắt bạn phải nén các ảnh thành file zip trước khi upload. Một ưu điểm nữa của spritegen.website-performance.org là nó cho phép bạn chọn lựa định dạng ảnh xuất ra, cùng với 1 số tham số về chất lượng, giúp cho bạn tối ưu luôn được kích thước ảnh.

Kỹ thuật này thường được dùng nhiều nhất khi bạn có 1 danh sách các đề mục, hay khi các bức ảnh cần hiển thị có kích thước nhỏ. Tất nhiên là bạn hoàn toàn có thể thực hiện với các bức ảnh to, nhưng hãy thật cẩn thận vì chúng có thể (có hoặc không) bị che khuất hết.

Ngoài việc ứng dụng như vậy, CSS Sprites còn được dùng với hiệu ứng rollover: khi đưa chuột vào 1 thành phần (thường là 1 link) thì sẽ hiển thị 1 bức ảnh khác với ảnh khi di chuột ra phía ngoài thành phần đó. Để tham khảo kĩ thuật này, bạn hãy đọc bài viết về CSS Rollover.

Cơ bản là như vậy! Kỹ thuật này khó nhất ở việc dùng CSS để định vị ảnh. Nếu bạn dùng công cụ tự động ở trên, bạn có lẽ không cần quan tâm lắm. Nhưng nếu bạn tự làm hoặc cần chỉnh sửa thì nên tham khảo thuộc tính background-position.

1.4. Sử dụng Image Maps

Nguyên tắc sử dụng Image Maps cũng khá giống như CSS Sprites ở chỗ gom các bức ảnh nhỏ thành 1 bức ảnh lớn. Điểm khác biệt giữa chúng là với Image Maps, bạn có thể chỉ định các tác động tương ứng mỗi khi người dùng click chuột (hay di chuyển chuột qua) vào 1 vùng có tọa độ xác định.

Có 1 bài viết khá hay về Image Maps cùng với các ví dụ về việc sử dụng nó tại các website tại đây (bức ảnh minh hoạ trên được lấy từ bài viết đó).

Thông thường thì Image Maps hay sử dụng các vùng hình chữ nhật và gán mỗi vùng đó với 1 link tương ứng. Cách làm này được dùng nhiều trong các thanh navigation và các bức ảnh có nhiều người (click vào người nào sẽ ra thông tin về người đó).

Có 2 điểm cần lưu ý ở phương pháp này là:

a) Một là nó cần 1 bức ảnh toàn vẹn. Không giống như CSS Sprites, nơi bức ảnh lớn là sự ghép nối của nhiều ảnh nhỏ, ảnh dùng trong Image Maps thường là 1 ảnh lớn toàn vẹn, không có cắt xén hay chắp nối. Sử dụng những bức ảnh trong Image Maps thế này khiến cho website của bạn bị phụ thuộc vào bức ảnh đó vì bạn không thể sửa các dòng text bằng HTML (như trong trường hợp dùng cho thanh navigation). Nó cũng làm website của bạn kém thân thiện với SEO do không có text. Tuy nhiên nó cũng rất hữu dụng khi bạn muốn dùng nó trong các trường hợp về bản đồ, minh họa nhân vật, ...

b) Điểm thứ 2 là việc xác định tọa độ của các vùng ảnh. Việc này có thể khiến bạn nhàm chán và đôi khi có lỗi, nhất là trong những trường hợp vùng ảnh không phải là hình chữ nhật. Bạn cũng phải viết mã HTML nhiều hơn so với CSS Sprites.

Bản thân Yahoo! cũng không khuyến khích dùng phương pháp này lắm mặc dù vẫn đưa nó ra như là 1 trong những cách giảm số lượng request.

1.5. Chèn trực tiếp dữ liệu hình ảnh vào website thông qua data: URL scheme

Cách làm này cho phép bạn chèn trực tiếp nội dung của 1 bức ảnh vào website mà không yêu cầu 1 request nào cả. Hãy tưởng tượng bức ảnh là 1 dãy các byte chứa thông tin, và việc bạn làm là chèn luôn các byte đó vào tài liệu thay vì link đến file hình ảnh như trước thông qua 1 request.

Tất nhiên, với cách làm này thì nội dung file HTML của bạn sẽ lớn hơn do nó bao gồm cả nội dung bức ảnh. Nhưng có hề gì, vì làm cách này hay cách khác, tổng dung lượng của text và image vẫn không đổi. Chỉ có điều phương pháp này không làm bạn mất đi request. Chú ý là 1 trình duyệt chỉ gửi được tối đa 2 request đến website, vì vậy, việc ứng dụng phương pháp này sẽ giúp cho trình duyệt rảnh rỗi hơn để tải những thành phần khác.

Đây là tài liệu chuẩn về data: URL scheme, nó hơi khô khan 1 chút. Còn muốn xem cách thực hiện thì hãy vào đây. Chú ý 1 chút là có 2 cách thực hiện: 1 là chèn trực tiếp nội dung của hình ảnh vào file HTML, 2 là chèn nội dung đó vào file CSS.

Kỹ thuật này tất nhiên có thể áp dụng đối với các thành phần khác của website, không chỉ các hình ảnh, như css, javascript, html, ... nhưng thường nó được dùng cho hình ảnh vì phần lớn các thành phần khác đều có thể nhúng trực tiếp mà không cần nó. Bạn có thể cần nhiều ví dụ hơn về các loại dữ liệu có thể nhúng. Cần lưu ý khi nhúng các thành phần vào website: dữ liệu phải tương ứng với kiểu (mime).

Đối với hình ảnh, dữ liệu phải được mã hóa ở dạng base64. Do đó thông thường người ta sử dụng 1 ngôn ngữ script như PHP để sinh ra dữ liệu mã hóa này.

Điều dở nhất của phương pháp này là nó không hỗ trợ cho trình duyệt IE version 5 tới 7. Chỉ có phiên bản 8 của IE mới được thông báo là có hỗ trợ (hiện IE 8 vẫn đang ở trạng thái beta). Trong khi các trình duyệt khác như Firefox, Opera, Safari và ngay cả Google Chrome mới ra cũng đều có thể sử dụng nó.

Ngoài ra, đối với hình ảnh bị mã hóa base64 thì dữ liệu của nó bị tăng lên khoảng 33% so với dữ liệu dạng nhị phân. Trong khi chuẩn RFC lại quy định dữ liệu lớn nhất được chèn vào website là 1KB (thực tế thì Opera cho phép tới 4KB, còn Firefox - 100KB). Vì vậy đôi khi kích thước website của bạn bị tăng quá lên khiến bộ nhớ cache bị đầy và không lưu được những thành phần khác nữa.

Phương pháp này cũng đòi hỏi bạn phải làm thủ công khá nhiều như việc mã hóa dữ liệu dạng base64 rồi chèn nó vào website. Tất nhiên bạn có thể dùng 1 ngôn ngữ script như PHP để sinh ra nội dung mã hóa như đã nói ở trên, nhưng nó sẽ khiến server của bạn load thay vì trình duyệt của người dùng như trước!

Bạn có muốn xem kết quả nhận được sau khi thực hiện việc cắt giảm các request? Vậy thì hãy mở YSlow lên và quan sát. Nếu không, hãy xem thử 1 phân tích về mối liên hệ 80/20 giữa thời gian tải website và số lượng các thành phần của nó.

- Hỗn Tạp -

[bebadboy87]

2. Sử dụng mạng lưới phân bố nội dung (CDN)

CDN, viết tắt của Content Delivery Network - tạm dịch là mạng lưới phân bố nội dung - là 1 tập hợp các server được đặt ở nhiều vị trí (có thể hiểu là quốc gia, hay vùng lãnh thổ) khác nhau được dùng để cung cấp nội dung cần thiết cho người dùng 1 cách hiệu quả hơn. Quy tắc này dựa trên 1 sự thực là nếu server lưu giữ nội dung càng gần người dùng thì thời gian tải nội dung từ server đó sẽ càng nhanh, và ngược lại.

Nên nhớ rằng khoảng cách địa lí (vật lí) giữa người dùng và server có ảnh hưởng rất lớn tời thời gian hồi báo từ phía server. Yêu cầu của người dùng sẽ đi qua khá nhiều nút mạng trung gian trước khi tới được đích. Nếu muốn kiểm chứng các nút mạng từ máy tính của mình tới 1 server nào đó, bạn có thể dùng tiện ích traceroute. Bạn sẽ nhận ra rằng nếu số lượng nút mạng càng nhiều thì thời gian hồi báo càng tăng lên. Số lượng nút mạng trung gian thông thường phụ thuộc vào khoảng cách địa lí giữa người dùng và server, do đó việc phân bố nội dung của bạn ra nhiều server, phủ khắp các vùng địa lí mà bạn biết chắc phần lớn người dùng website của bạn ở đó, sẽ làm tốc độ tải website của bạn cải thiện rất nhiều.

Vì thế, việc cân nhắc lựa chọn server cho website của bạn sẽ phụ thuộc phần lớn vào lượng người dùng mà bạn nhắm đến. Một cách làm khá quen thuộc là nếu website của bạn bằng tiếng Việt, nhắm đến người dùng Việt Nam thì bạn nên chọn server đặt tại Việt Nam; nếu website bằng tiếng Anh, thì server nên đặt tại Mỹ, Anh hoặc Đức, ... Tất nhiên để biết chắc rằng phần lớn người ta đến với website bạn từ đâu, bạn nên sử dụng 1 công cụ theo dõi website như Google Analytics, nó có thống kê khá chi tiết số lượng người dùng theo từng quốc gia. Nếu bạn muốn biết sơ lược hơn thì có thể tạm sử dụng Alexa, tuy nhiên thống kê ở đó có thể không chính xác lắm do quy tắc tính toán dựa trên thanh công cụ Alexa Toolbar của nó.

Nhưng đó mới chỉ là cách lựa chọn 1 server (hoặc host), còn làm thế nào để có thể sử dụng nhiều server cho mục đích này. Một điều khá hiển nhiên là bạn phải sở hữu nhiều server cho mạng lưới phân bố nội dung của mình, điều này sẽ tiêu tốn của bạn số tiền lớn, và không phải ai cũng làm được. Ngay cả các công ty cũng khó có khả năng, chứ chưa nói đến cá nhân. Trên thực tế chỉ có 1 số công ty lớn mới có thể thực hiện được điều đó.

Tuy vậy, chúng ta vẫn có thể tận dụng những mạng lưới phân bố nội dung có sẵn từ các "đại gia" như Google và Yahoo! để phục vụ cho mục đích của mình.

Bạn có sử dụng jQuery, 1 javascript framework rất nổi tiếng, trong các ứng dụng web? Hay prototype, MooTools, Dojo, script.aculo.us hay 1 sản phẩm nổi tiếng của Yahoo! - YUI? Vậy thì bạn đã gặp may, vì Google đã lưu trữ những framework này trên hệ thống server của nó. Bạn cũng biết là hệ thống server của Google phủ khắp toàn thế giới, nên người dùng website của bạn sẽ được tải những framework này từ những nơi gần họ nhất. Tất cả những gì bạn cần làm là chỉ cần sửa 1 dòng liên kết nhỏ đến các framework này tương tự như:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
</script>

thay cho dòng liên kết cũ trong thẻ HEAD. Hoặc bạn cũng có thể gọi bằng hàm loader(); của Google để có thể nạp được nhiều framework 1 lúc. Về chi tiết bạn có thể tham khảo thêm tại trang của Google AJAX Libraries API.

Nếu bạn dùng các tiện ích trong thư viện YUI của Yahoo, hoặc dùng các thư viện khác trong Google API (chúng có rất nhiều!) thì hãy để ý tới Documents của nó để sử dụng. Có thể kể ra đây vài thư viện được người ta hay dùng như:

1. Reset CSS để reset lại các thuộc tính của các thẻ HTML bằng CSS
2. Base CSS dùng để thiết lập các thuộc tính cơ bản (chuẩn) cho các thẻ HTML bằng CSS
3. TreeView dùng để tạo danh mục dạng cây, có thể đóng mở được
4. Color Picker: dùng để lấy màu
5. Calendar dùng để tạo lịch
6. Google Ajax Feed API dùng để đọc nội dung Feed với tương tác bằng Ajax
7. Google Ajax Language API dùng để dịch 1 phần văn bản được chọn
...
và còn rất nhiều nữa đang chờ bạn khám phá.Việc sử dụng chúng không chỉ giúp bạn truyền tải tới người dùng thông qua mạng lưới phân bố nội dung của Google hay Yahoo! mà còn giúp bạn tiết kiệm công sức lập trình rất nhiều.

- Hỗn Tạp -