Tăng tốc website: tối ưu hóa Cookie, JavaScript, CSS

1) Giảm kích thước cookie

Về cơ bản, cookie trình duyệt thường được sử dụng cho nhiều mục đích, điển hình như xác thực và cá nhân hóa nội dung trên trang web cần hiển thị. Thông tin cookie được trao đổi trên phần header của yêu cầu HTTP (HTTP request) giữa máy chủ dịch vụ (web server) và trình duyệt. Do đó, điều quan trọng là lập trình viên phải giữ kích thước của các cookie càng thấp càng tốt để giảm thiểu ảnh hưởng đến thời gian đáp ứng của trang web.

Việc giảm kích thước cookie thường tuân theo các nguyên tắc sau:

• Loại bỏ cookie không cần thiết

• Quan tâm đến việc đặt cookie ở mức domain thích hợp đế các domain ở mức khác không bị ảnh hưởng.

• Thiết lập ngày hết hiệu lực (Expires date) phù hợp. Một thời điểm Expires sớm hơn hay không gỡ bỏ cookie sớm hơn sẽ cải thiện thời gian đáp ứng của trang web.

2) Sử dụng domain "sạch"

Khi trình duyệt thực hiện yêu cầu liên quan đến hình ảnh tĩnh và gửi cookie đi kèm yêu cầu đó thì máy chủ dịch vụ sẽ không "đụng chạm" gì đến những cookie này. Vì thế, chúng chỉ chiếm dụng băng thông cho những lý do không quan trọng.

Theo đó, bạn cần chắc chắn rằng các đối tượng tĩnh phải được "triệu tập" bởi các yêu cầu không kèm cookie. Bạn nên tạo ra một domain phụ (subdomain) để lưu mọi đối tượng/thành phần dạng tĩnh. Ví dụ, nếu đang dùng domain là www.my-domain.vn, bạn có thể lưu các component tĩnh trên domain phụ mang tên www.static.my-domain.vn. Tuy nhiên, nếu bạn đã thiết lập các cookie trên domain có cấp cao nhất là my-domain.vn thì tất cả yêu cầu đến static.my-domain.vn sẽ bao gồm những cookie kể trên. Trong trường hợp này, bạn có thể mua một domain mới, lưu các component tĩnh tại đây và giữ cho domain này không chứa cookie. Ví dụ, Yahoo sử dụng domain phụ để lưu trữ hình ảnh là yimg.com, hay YouTube với ytimg.com và Amazon với images.amazon.com, v.v. Một ích lợi khác của việc lưu các component tĩnh trên một domain không chứa cookie là vài proxy có thể từ chối lưu tạm thời (cache) các component mà được yêu cầu chung với cookie.

3) Đặt định dạng lên đầu

Các nghiên cứu tại Yahoo cho thấy việc chuyển các định dạng (stylesheet) lên phần đầu của tài liệu sẽ giúp các trang web xuất hiện nhanh hơn vì cho phép trang web được dựng lại một cách tuần tự (progressive).

Phương pháp này là lời giải cho yêu cầu "muốn trình duyệt hiển thị bất kỳ nội dung nào mà 1 website hay trang web chứa đựng càng nhanh càng tốt". Địều này đặc biệt quan trọng cho các trang web có nhiều nội dung và người dùng sử dụng kết nối Internet tốc độ thấp. Thực tế cho thấy, tầm quan trọng của việc cung cấp cho người dùng các công cụ/tính năng phản hồi trực quan, như thanh trạng thái tiến trình hiển thị của trang chủ Yahoo, đã được nghiên cứu kỹ và tạo tài liệu. Về cơ bản, chúng cải thiện những trải nghiệm chung của người dùng trong khi truy xuất trang web bên cạnh mục tiêu chính là cải thiện tốc độ đáp ứng của website hay trang web.

Rắc rối của việc đặt các stylesheet lên gần phần đầu của tài liệu thường liên quan đến khả năng dựng lại trang web theo từng nấc (cách gọi khác của hiển thị tuần tự) của nhiều trình duyệt, trong đó có IE. Những trình duyệt này vô hiệu hóa tính năng dựng trang web để không vẽ lại các thành phần của trang web nếu các định dạng có sự thay đổi. Khi này, người dùng chỉ nhìn thấy một trang web trống.

4) Tránh dùng CSS Expression

Thực tế cho thấy, CSS Expression là một cách thức mạnh mẽ (và cũng nguy hiểm) để thiết lập các thuộc tính CSS động. Chúng được hỗ trợ trong Internet Explorer phiên bản 5 trở đi, tuy nhiên lại không được tán thành trong IE8. Ví dụ, bằng cách sử dụng CSS sau, màu nền sẽ được thay đồi sau mỗi giờ:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Ở ví dụ trên, chúng ta thấy phương thức sử dụng biểu thức (expression) chấp nhận một biểu thức dạng javascript. Thuộc tính/giá trị của CSS được gán bằng giá trị của việc tính biểu thức javascript.

Vấn đề cần quan tâm khi sử dụng phương pháp này là các giá trị được đánh giá lại quá thường xuyên hơn những gì hầu hết người dùng mong đợi. Chúng không chỉ được đánh giá/cập nhật khi trang web được dựng lại hay giảm kích thước, mà còn cả khi cuộn trang web và thậm chí khi người dùng rê chuột qua nội dung.

Để khắc phục tình trạng này, bạn cần bổ sung một bộ đếm vào CSS Expression, qua đó cho phép chúng ta giám sát khi nào và bao lâu một CSS Expression được đánh giá/cập nhật lại. Theo YDN, việc di chuyển chuột trên trang web có thể tạo ra trên 10.000 lần cập nhật giá trị cho CSS Expression.

Một cách khác để giảm số lần CSS Expression được cập nhật là sử dụng các biểu thức có giá trị chỉ khai thác một lần (hay nói đơn giản là dùng 1 lần rồi bỏ). Theo đó, khi lần đẩu tiên được đánh giá/cập nhật thì biểu thức sẽ gán giá trị định dạng bằng một giá trị cụ thể nhằm. Nếu giá trị định dạng phải được thiết lập động trong suốt thời gian sống của trang web, tốt hơn hết là nên chọn một bộ kiểm soát sự kiện (event handler) thay cho CSS Expression. Nếu buộc phải sử dụng CSS Expression, hãy ghi nhớ việc chúng có thể được cập nhật hàng ngàn lần!

5) Không sử dụng bộ lọc

Bộ lọc AlphaImageLoader độc quyền của IE có nhiệm vụ khắc phục lỗi hiển thị các tập tin hình PNG trong suốt trong các trình duỵệt IE từ phiên bản 7 trở về trước. Trục trặc với bộ lọc này nằm ở chỗ bộ lọc vô hiệu hóa việc dựng trang web và "đóng băng" trình duyệt trong khi hình ảnh đang được tải về. Bộ lọc cũng làm tăng sự chiếm dụng bộ nhớ và được áp dụng cho mọi thành phần chứ không chỉ riêng cho trang web nên trục trặc sẽ xuất hiện với cấp số nhân.

Do đó, tránh áp dụng bộ lọc này một cách rập khuôn cho toàn website, thay vào đó hãy sử dụng chuẩn PNG8 cấp thấp được chào đón trên mọi phiên bản IE.

6) Đặt mã lệnh xuống cuối

Khác với stylesheet, lệnh viết sẵn (script) nên được đặt ở phần cuối của tài liệu. Vấn đề gây ra bởi các script chính là chúng vô hiệu hóa các tải về song song. Đặc tả HTTP/1.1 đề nghị các trình duyệt không nên tải về nhiều hơn 2 thành phần cùng lúc đối với một máy chủ (hostname). Nếu phân phối các hình ảnh từ nhiều hostname,có thể có hơn 2 tải về đồng thời. Tuy nhiên, khi một script đang tải về, trình duyệt sẽ không bắt đầu bất kỳ tải vể nào, thậm chí trên các hostname khác nhau.

Trong vài trường hợp, chuyển các script xuống phần cuối của trang web không dễ dàng gì. Ví dụ, nếu đoạn script sử dụng lệnh document.write để chèn một phần nội dung của trang web thì rõ ràng là không thể chuyển xuống cuối. Ngoài ra, cũng sẽ xuất hiện các lỗi liên quan đến phạm vi tác động của script.

Một cách thường được khai thác cho vấn đề này là sử dụng các script bị trì hoãn. Thuộc tính DEFER cho biết script không chứa lệnh document.write, và là 1 đầu mối cho trình duyệt để chúng có thể tiếp tục dựng trang web. Đáng tiếc, Firefox không hỗ trợ thuộc tính DEFER. Trong IE, các đoạn script có thể được trì hoãn, tuy nhiên không nhiều như mong muốn. Nếu 1 script có thể bị trì hoãn thì cũng có thể chuyển xuống cuối của trang web.

7) Sử dụng javascript và CSS "gằn ngoài"

Vấn đề cải thiện hiệu năng của một trang web thường được "bắt cặp" với câu hỏi làm thế nào để quản lý các thành phần bên ngoài. Tuy nhiên, trước khi xem xét ý trên, bạn cần tự trả lời 1 câu hỏi cơ bản hơn, đó là "liệu javascript và CSS có thể chứa trong một tập tin gắn ngoài hay trong chính trang web không?" .

Việc sử dụng các tập tin bên ngoài về cơ bản giúp tạo ra các trang web đáp ứng nhanh hơn vì javascript và CSS có thể được lưu tạm bởi trình duyệt. javascript và CSS được chèn sẵn trong các tài liệu HTML sẽ được tải về mỗi khi tài liệu HTML được yêu cầu. Việc này giúp giảm số lần yêu cầu HTTP cần thiết nhưng lại làm tăng kích thước của tài liệu HTML. Mặt khác, nếu javascript và CSS tồn tại trong các tập tin bên ngoài được lưu tạm thời bởi trình duyệt, kích thước của các tài liệu HTML sẽ giảm xuống mà không làm tăng số lần yêu cầu HTTP.

Tiếp đến, yếu tố then chốt cần quan tâm là tần suất mà thành phần javascript và CSS bên ngoài được lưu lại có liên quan đến số lượng tài liệu HTML được yêu cầu. Yếu tố này, dù khó xác định, nhưng vẫn có thể được hiệu chỉnh bằng cách sử dụng nhiều phương pháp khác nhau. Nếu người dùng trên website của bạn xem nhiều trang web trong cùng 1 phiên làm việc và nhiều trang web sử dụng lại (re-use) cùng các script và stylesheet thì đó là một ưu điểm của việc lưu lại các tập tin bên ngoài.

8) Rút gọn javascript và CSS

Việc loại bỏ những ký tự không cần thiết khỏi các đoạn mã lập trình (code) sẽ giúp thu giảm kích thước của tập tin HTML và qua đó giúp cải thiện thời gian đáp ứng của trang web. Trong trường hợp của javascript, việc này cải thiện hiệu năng phản hồi của trang web vì kích thước của các tập tin tải về được giảm xuống. Hai công cụ thông dụng để rút gọn mã javascript là JSMin và YUI

Compressor. Ngoài ra, YUI Compressor cũng có thể rút gọn CSS.

Đáng chú ý, ngay khi bạn đã nén các stylesheet và script, việc rút gọn này vẫn có thể giúp giảm kích thước của chúng thêm 5% hay nhiều hơn.

9) Loại bỏ các đoạn mã trùng nhau

Có thể khẳng định, việc có cùng 1 đoạn script xuất hiện 2 lần trở lên trong 1 trang web sẽ làm giảm hiệu năng hiển thị của chính trang web đó. Hiện tượng này rất thường xảy ra. Một cuộc khảo sát 10 website thuộc hàng Top 10 tại Mỹ cho thấy có 2 trong số 10 website này chứa một đoạn script trùng nhau. Hai yếu tố chính làm tăng khả năng xuất hiện của 1 đoạn script trùng nhau trong 1 trang web là kích thước và số lượng các script. Khi có sự trùng lặp, các đoạn script trùng sẽ giảm hiệu năng của trang web bằng cách tạo ra các yêu cầu HTTP không cần thiết và từ đó gây ra sự lãng phí thực thi các mã lệnh javascript.

Các yêu cầu HTTP không cần thiết chỉ diễn ra trong IE, còn với Firefox thì không. Trong IE, nếu một script bên ngoài xuất hiện 2 lần và không được lưu lại thì sẽ tạo ra 2 yêu cầu HTTP trong suốt thời gian tải trang web. Thậm chí nếu script được lưu lại, các yêu cầu HTTP bổ sung vẫn sẽ xảy ra khi người dùng tải lại trang web.

Để khắc phục hiện tượng này, bạn cần trang bị một module có nhiệm vụ quản lý các đoạn script và cách thông thường là bổ sung 1 đoạn script để sử dụng thẻ (tag) mang tên SCRIPT trong trang HTML.

Với PHP, bạn cần tạo ra một hàm mang tên insertScript.

10) Thu nhỏ DOM Access

Việc truy xuất các đối tượng DOM thường chậm vì thế để có được 1 trang web phản hồi nhanh hơn, bạn nên:

• Lưu lại các tham khảo liên quan đến các thành phần được truy xuất

• Cập nhật các node ở chế độ "offline" và sau đó bổ sung vào cây thư mục

• Tránh sửa layout có sử dụng javascript

11) Phát triển bộ kiểm soát thông minh

Thi thoảng, các trang web trở nên "ì ạch" vì có quá nhiều bộ xử lý biến cố (event handler) được gán vào những đối tượng khác nhau của cây DOM mà vốn dĩ chúng thường xuyên được thực thi. Nếu bạn có 10 nút nhấn trên 1 dòng, hãy sử dụng 1 bộ xử lý biến cố, thay vì mỗi nút là một bộ xứ lý biến cố. Khi biến cố xảy ra, bạn sẽ có thể nhận biết chính xác biến cố nào và cấu hình tính năng tương ứng cho nút nhấn