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.

Các định dạng được hỗ trợ bởi kỹ thuật CSS Sprite là các định dạng hình ảnh được hỗ trợ bởi thuộc tính background bao gồm cả định dạng svg.

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:

https://www.vietrick.com/wp-content/uploads/2020/11/thegioididong_sprite.png

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;

Kết quả áp dụng Sprite Image của trang TGDD:

Ư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:

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.
Đồ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.

Rõ ràng là việc bạn gộp 2 ảnh dung lượng 5KB lại với nhau sẽ không thể cho ảnh đầu ra là 10KB. Thông thường, ảnh sau khi gộp sẽ có dung lượng lớn hơn một chút.

Áp dụng CSS Sprite sao cho đúng

Việc áp dụng CSS Sprite chỉ dành cho các hình ảnh biểu tượng có dung lượng nhỏ. Về cơ bản, phương pháp tối ưu có thể chia làm 2 phương thức thực hiện như sau:

Tối ưu CSS Sprite theo dung lượng

Dung lượng ảnh hợp nhất (sprited image) không nên quá lớn, tốt nhất nên dưới 80KB để không gây ảnh hưởng đến trải nghiệm của người dùng. Nếu như trang web của bạn có quá nhiều ảnh biểu tượng, các có thể xem xét chia ra nhiều tập sprited image.

Trong ví dụ về Sprite Images của TheGioiDiDong, ảnh này chỉ có dung lượng 50KB mà thôi.

Tối ưu CSS Sprite theo mục đích

Nếu như trang web của bạn có một số hình ảnh biểu tượng quan trọng cần hiển thị ở phần đầu trang web, trong khi phần lớn các biểu tượng khác lại nằm ở phần chân trang. Lúc này bạn nên xem xét tách các biểu tượng này ra làm 2 nhóm để áp dụng CSS Sprite.

Việc tách thành nhiều ảnh sprited image theo mục đích và khu vực khác nhau vừa giúp đảm bảo cân bằng giữa tốc độ tải và trải nghiệm 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ả.