Tối ưu tốc độ trang web với CSS Sprite

Mở đầu bài viết cho series Tối ưu trang web, Vietrick xin giới thiệu đến các bạn kỹ thuật CSS Sprite. Rất nhiều website lớn hiện nay như Google, Facebook, TheGioiDiDong, Zing,.. đều áp dụng kỹ thuật này để tăng tốc độ tải trang web. Ở bài viết này chúng ta sẽ tìm hiểu kỹ hơn về kỹ thuật CSS sprite, ưu nhược điểm và cách áp dụng sao cho đúng nhé.

CSS Sprite là gì ?

Định nghĩa

CSS Sprite (hay CSS Image Sprites) là một kỹ thuật gộp nhiều hình ảnh nhỏ vào 1 ảnh lớn duy nhất. Các hình ảnh nhỏ sẽ được sử dụng làm background cho phần tử bằng cách trích xuất từ ảnh lớn qua CSS background-position.

Vi dụ trang web của bạn cần sử dụng 5 hình ảnh biểu tượng cho laptop, desktop, mobile, tablet, camera. Bạn có thể sử dụng kỹ thuật CSS sprite để gộp 5 biểu tượng này vào 1 ảnh lớn duy nhất.

Các hình ảnh khi được gộp vào ảnh lớn có thể được sắp xếp theo chiều ngang hoặc dọc, miễn là không chồng lấn với nhau.

Hướng dẫn tạo Image Sprite

Để hợp nhất các hình ảnh biểu tượng thành một ảnh lớn, các bạn có thể sử dụng các công cụ chỉnh sửa hình ảnh như Photoshop để tiến hành ghép ảnh hoặc sử dụng các công cụ online có sẵn trên Internet.

Các bạn có thể lên Google tìm với từ khóa: “online image sprite generator“. Mình thường sử dụng bộ công cụ online miễn phí tại https://cssspritestool.com

Sau khi tạo được ảnh Image Sprite, các bạn cần nắm rõ vị trí tọa độ gốc và kích thước của các ảnh nhỏ để sử dụng.

Hướng dẫn sử dụng Image Sprite

Sau khi tạo được Image Sprite. Với đường dẫn tại:

Chúng ta có thể thiết lập background cho các phần tử khi biết kích thước và tọa độ. Ví dụ với Sprite Image của TGDD:

• Logo: kích thước 160×30 px, tọa độ: 0 0.
• Sticker bộ công thương: kích thước 110×30 px, tọa độ: 0px -54px;
• Icon Camera: kích thước 26×24 px, tọa độ: -250px -50px;

Ưu điểm của CSS Sprite

Như đã mô tả rõ ràng ở phần định nghĩa của CSS Sprite, việc sử dụng kỹ thuật này mang lại 2 lợi ích:

1. Giảm số lượng request: Việc kết nhiều hình ảnh vào 1 ảnh duy nhất rõ ràng giúp giảm đáng kể số lượng request gởi đến server khi tải trang. Từ đó giúp thời gian tải trang và tối ưu hơn cho trang web của bạn. Trong ví dụ của TheGioiDiDong, áp dụng kỹ thuật này giúp giảm hơn 40 request tới server khi tải trang.
2. Đồng bộ tải tài nguyên: Việc hợp nhất các ảnh nhỏ giúp đồng bộ việc tải các tài nguyên này trên trang web của bạn. Loại bỏ sự cố không tải hoặc tải chậm ảnh nào đó, từ đó giúp đem lại trải nghiệm thống nhất cho người dùng.

Nhược điểm của CSS Sprite

Bất kỳ một phương pháp nào cũng có 2 mặt lợi hại, CSS Sprite cũng vậy. Giảm thiểu số lượng request là một lợi ích rõ ràng của kỹ thuật CSS Sprite. Tuy nhiên, nếu bạn quá lợi dụng kỹ thuật này lại gây ảnh hưởng không tốt đến tốc độ tải trang và trải nghiệm người dùng.

Việc gộp nhiều ảnh nhỏ vào 1 ảnh lớn gây phát sinh ra vấn đề dung lượng ảnh hợp nhất (sprited image) quá lớn. Từ đó ảnh hướng đến tốc độ tải trang cũng như trải nghiệm của người dùng.

Kết luận

CSS Sprite thực sự là một kỹ thuật lợi hại mà các nhà thiết kế trang web thường sử dụng để tối ưu cho sản phẩm của mình. Áp dụng kỹ thuật này một cách thông minh và khéo léo sẽ giúp cải thiện đáng kể tốc độ tải trang và trải nghiệm trên trang web của bạn.

Ngoài ra, nếu bạn áp dụng thêm kỹ thuật Lazy Load sẽ tạo thành combo tăng tốc độ tải hiệu quả.