Tăng tốc website phần 1: hạn chế yêu cầu HTTP

Thực tế cho thấy, với mọi trang web hay website, khi nhận được yêu cầu hiển thị thì khoảng 80% quãng thời gian mà người dùng phải chờ đợi thường dành cho công tác truyền nhận dữ liệu giữa máy chủ dịch vụ (hay nói rõ hơn là nơi lưu trữ trang web) với trình duyệt. Trong khi đó, hầu hết thời gian “chết” này lại bị “cột chặt” với việc tải về tất cả thành phần trong một trang web như hình ảnh, định dạng (stylesheet), mã lệnh kịch bản (script), nội dung Flash,… để trình duyệt có thể dựng lại trang web trên màn hình (máy tính hay thiết bị di động) của người dùng. Do đó, giảm số lượng thành phần các nội dung dạng này đồng nghĩa với việc giảm số lượng yêu cầu HTTP (HTTP request) từ trình duyệt.

HTTP Request

Một cách để giảm số lượng các thành phần trong một trang web là cố gắng làm đơn giản thiết kế của chính trang web đó. Tuy nhiên, câu hỏi mà nhiều nhà thiết kế web thường đặt ra ở đây là “có cách nào xây dựng một trang web có nội dung phong phú trong khi vẫn đảm bảo tốc độ đáp ứng /hiển thị nhanh hay không?”. Hiện có vài kỹ thuật giúp giảm số lượng yêu cầu HTTP nhưng vẫn hỗ trợ thiết kế trang web phong phú, chẳng hạn:

“Gom” các tập tin (Combined files) là giải pháp cơ bản để giảm số lượng yêu cầu HTTP, bằng cách kết nối tất cả script có trên trang web vào một tập tin script duy nhất, và tương tự là kết hợp tất cả CSS vào một tập tin stylesheet. Các tập tin được nối lại với nhau gây khó khăn hơn cho người lập trình (và cả website nữa) vì script và stylesheet thường khác nhau ở mỗi trang web.

Trong khi đó, CSS Sprites là phương thức được nhiều lập trình viên thích sử dụng để giảm số lượng yêu cầu HTTP, bằng cách giảm số lần yêu cầu truy xuất hình ảnh. Cụ thể, người lập trình và thiết kế trang web cần kết hợp các hình nền vào một hình duy nhất và sau đó sử dụng công cụ lập trình (như CSS background-image và background-position) để yêu cầu hiển thị đúng phần ảnh cần thiết.

Tương tự, phương pháp Image maps cũng kết hợp nhiều ảnh vào một ảnh duy nhất. Với phương pháp này, dung lượng nội dung hình ảnh cần hiển thị sẽ không đổi (bởi bằng tổng các tập tin hình ảnh thành phần trước đó), tuy nhiên phương pháp “góp gạo” này làm cho số lần yêu cầu HTTP giảm đến mức tối thiểu, do đó cũng giúp trang web đáp ứng nhanh hơn rất nhiều. Lưu ý, phương pháp Image maps chỉ có thể áp dụng khi các ảnh xuất hiện cạnh nhau trên trang web.

Ngoài ra, còn có phương pháp Inline Image, sử dụng cú pháp data: URL để nhúng dữ liệu dạng hình ảnh vào ngay trong trang web và dĩ nhiên việc này sẽ làm tăng kích thước của tập tin HTML. Tuy nhiên, kết hợp các ảnh nhúng trong stylesheet (được lưu đệm) là cách để giảm số lần yêu cầu HTTP, đồng thời tránh hiện tượng tăng dung lượng của trang web. Đáng tiếc, phương pháp này hiện chưa được hỗ trợ trên tất cả trình duyệt phổ biến.

Nhìn chung, giảm số lượng yêu cầu HTTP là phương pháp đầu tiên bạn cần nghĩ đến khi muốn cải thiện tốc độ hiển thị cũng như thời gian đáp ứng của trang web.

Tham khảo: Yahoo! Developer Network