HomeTăng tốc website theo Yahoo! (Phần 2)
Friday, January 9, 2009
Ở phần một, 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 phần 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ó.
(Còn tiếp)
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ó.
(Còn tiếp)
Bài liên quan
.jpg)
.jpg)
.jpg)
