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

Có rất nhiều trang web lớn ngày nay, như Google, Facebook, TheGioiDiDong, Zing,.. đã áp dụng kỹ thuật CSS sprite để cải thiện tốc độ tải trang web.

Trong bài viết này, chúng ta sẽ đi vào chi tiết hơn về kỹ thuật CSS sprite, bao gồm ưu nhược điểm của nó và cách áp dụng một cách chính xác.

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

CSS Sprite là gì ?

Định nghĩa


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

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

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


CSS Sprite 


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, bạn có thể sử dụng các công cụ chỉnh sửa hình ảnh như Photoshop hoặc sử dụng các công cụ trực tuyến có sẵn trên Internet.

Bạn có thể tìm kiếm trên Google với từ khóa "online image sprite generator". Một trong những công cụ miễn phí mà bạn có thể sử dụng là https://cssspritestool.com.

Sau khi tạo được ảnh Image Sprite, bạn cần biết vị trí và kích thước của các ảnh nhỏ để sử dụng chú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;

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


Ưu điểm của CSS Sprite


1. CSS Sprite (hay còn được gọi là CSS Image Sprites) mang lại hai lợi ích quan trọng như đã được mô tả trong định nghĩa:

2. Giảm số lượng yêu cầu (requests): Bằng cách gộp nhiều hình ảnh thành một ảnh duy nhất, CSS Sprite giúp giảm đáng kể số lượng yêu cầu gửi đến máy chủ khi tải trang. Điều này dẫn đến thời gian tải trang nhanh hơn và tối ưu hơn cho trang web của bạn. Ví dụ, trang web TheGioiDiDong đã áp dụng kỹ thuật này và giảm hơn 40 yêu cầu tới máy chủ khi tải trang.

3. Đồng bộ tải tài nguyên: Việc hợp nhất các ảnh nhỏ thành một ảnh lớn giúp đồng bộ việc tải các tài nguyên này trên trang web của bạn. Điều này loại bỏ sự cố không tải hoặc tải chậm của một số ảnh, đảm bảo trải nghiệm thống nhất cho người dùng.

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

CSS Sprite, giống như bất kỳ phương pháp nào khác, cũng có hai mặt của nó. Một lợi ích rõ ràng của kỹ thuật CSS Sprite là giảm thiểu số lượng yêu cầu. Tuy nhiên, nếu bạn lạm dụng kỹ thuật này, có thể 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ỏ thành một ảnh lớn có thể tạo ra vấn đề về dung lượng của ảnh hợp nhất (sprited image) khi nó trở nên quá lớn. Điều này có thể ảnh hưởng đến tốc độ tải trang và trải nghiệm người dùng.

Đương nhiên, việc gộp hai ảnh có dung lượng 5KB với nhau không thể tạo ra một ảnh có dung lượng chính xác là 10KB. Thông thường, sau khi gộp, ảnh kết quả 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 của ảnh hợp nhất (sprited image) không nên quá lớn, tốt nhất là dưới 80KB để không ảnh hưởng đến trải nghiệm người dùng. Nếu trang web của bạn có quá nhiều ảnh biểu tượng, bạn có thể xem xét chia chúng thành nhiều tập sprited image.

Ví dụ về Sprite Images của TheGioiDiDong chỉ có dung lượng 50KB.

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

Nếu 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, hãy xem xét tách chúng thành hai nhóm và áp dụng CSS Sprite.

Việc tách các ảnh thành nhiều sprited image theo mục đích và khu vực khác nhau 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 là một kỹ thuật mạnh mẽ mà các nhà thiết kế trang web thường sử dụng để tối ưu hóa sản phẩm của họ. Sử dụng kỹ thuật này một cách thông minh và khéo léo có thể 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, việc kết hợp kỹ thuật Lazy Load sẽ tạo thành một combo hiệu quả để tăng tốc độ tải trang.

Đăng nhận xét

Mới hơn Cũ hơn