Giảm request HTTP để tăng tốc độ tải web

Giảm số lượng của các thành phần HTTP trên một trang sẽ làm giảm số lượng yêu cầu HTTP cần thiết, đây là chìa khóa để các trang nhanh hơn. Một số cách để giảm số lượng của các thành phần bao gồm: kết hợp các tập tin, kết hợp nhiều Script vào một Script, kết hợp nhiều file CSS vào một trong một style Sheet, và sử dụng CSS Sprites, và sử dụng CSS Sprites và bản đồ hình ảnh.

Tăng tốc độ website là yêu cầu bắt buộc trong dịch vụ thiết kế web hiện nay

80% thời gian phản ứng của người dùng cuối được dành cho front-end. Dưới đây là một số kỹ thuật để giảm số lượng yêu cầu HTTP, trong khi vẫn hỗ trợ thiết kế web phong phú.

Combined files – Kết hợp các file lại với nhau:
Kết hợp các file cùng loại lại với nhau là một cách để giảm số lượng yêu cầu HTTP bằng cách kết hợp tất cả các file cùng loại thành 1 file duy nhất, và tương tự kết hợp tất cả CSS vào một kiểu duy nhất. Kết hợp các Script và stylesheet là khó khăn hơn bởi vì các script và stylesheet khác nhau từ trang này sang trang, nhưng thực hiện điều này là một phần của quá trình của bạn nhằm cải thiện thời gian tải trang web.

CSS Sprites - Sử dụng CSS để kết hợp hình nền:
CSS Sprites là phương pháp ưa thích để giảm số lượng yêu cầu của hình ảnh. Kết hợp hình nền của bạn vào một hình ảnh duy nhất và sử dụng CSS thuộc tính background-image và background-position để hiển thị các đoạn hình ảnh mong muốn.

Image maps - Bản đồ hình ảnh:
Image maps kết hợp nhiều hình ảnh vào một ảnh duy nhất. Về kích thước tổng thể của hình ảnh là về giống, nhưng bạn sẽ giảm số lượng của HTTP của trang web. Image maps chỉ hoạt động nếu những hình ảnh liền kề nhau trong trang giống như 1 thanh điều hướng. Xác định tọa độ của bản đồ hình ảnh có thể rất nhàm chán và dễ bị lỗi. Ngoài ra, việc sử dụng Image maps để điều hướng không truy cập được, do đó, nó không được khuyến khích.

Inline images - Hình nội tuyến:
Hình ảnh nội tuyến (inline images) sử dụng dữ liệu: URL để nhúng dữ liệu hình ảnh vào trong trang thực tế. Điều này có thể làm tăng kích thước HTML của bạn. Kết hợp hình ảnh nội tuyến (inline images) vào stylesheets (cache) của bạn là một cách để giảm bớt các yêu cầu HTTP. Hình ảnh nội tuyến chưa được hỗ trợ trên tất cả các trình duyệt chính hiện nay.

Giảm số lượng yêu cầu HTTP trong trang của bạn là yêu cầu đầu tiên phải thực hiện nếu bạn muốn trang web của bạn load nhanh hơn. Đây là hướng dẫn quan trọng nhất để cải thiện hiệu suất dành cho lần tải web đầu tiên.