Tăng tốc trang web của bạn với CSS Sprites

web spritemaster

Tôi viết khá nhiều về tốc độ trang trên trang web này và đó là một phần quan trọng trong quá trình phân tích và cải tiến chúng tôi thực hiện cho các trang web của khách hàng. Ngoài việc chuyển sang các máy chủ mạnh mẽ và sử dụng các công cụ như Mạng phân phối nội dung, có một số kỹ thuật lập trình khác mà nhà phát triển web trung bình có thể sử dụng.

Tiêu chuẩn cho Bảng kiểu xếp tầng ban đầu hiện đã hơn 15 năm tuổi. CSS là một bước tiến quan trọng trong phát triển web vì nó tách biệt nội dung khỏi thiết kế. Nhìn vào blog này và bất kỳ blog nào khác và phần lớn sự khác biệt về kiểu dáng chỉ đơn giản là trong bảng định kiểu đính kèm. Biểu định kiểu cũng rất quan trọng vì chúng được lưu trữ cục bộ trong bộ nhớ cache trong trình duyệt của bạn. Do đó, khi mọi người tiếp tục truy cập trang web của bạn, họ sẽ không tải xuống một biểu định kiểu mỗi lần ... chỉ nội dung trang.

Một phần tử của CSS thường được sử dụng ít là CSS Sprites. Khi người dùng truy cập trang web của bạn, bạn có thể không nhận ra rằng họ không chỉ đơn giản đưa ra một yêu cầu cho trang. Họ đưa ra nhiều yêu cầu… Một yêu cầu cho trang, cho bất kỳ biểu định kiểu nào, cho bất kỳ tệp JavaScript đính kèm nào và sau đó là mỗi hình ảnh. Nếu bạn có một chủ đề có một loạt hình ảnh cho đường viền, thanh điều hướng, hình nền, nút, v.v.… thì trình duyệt phải yêu cầu từng cái một từ máy chủ web của bạn. Nhân số đó với hàng nghìn khách truy cập và đó có thể là hàng chục nghìn yêu cầu được gửi đến máy chủ của bạn!

Điều này làm chậm trang web của bạn. A trang web chậm có thể có tác động đáng kể đến mức độ tương tác và chuyển đổi mà khán giả của bạn tạo ra. Một chiến lược mà các nhà phát triển web tuyệt vời sử dụng là đặt tất cả hình ảnh vào một tệp duy nhất… được gọi là ma. Thay vì đưa ra yêu cầu cho từng hình ảnh tệp của bạn, giờ đây chỉ cần có một yêu cầu duy nhất cho hình ảnh sprite duy nhất!

Bạn có thể đọc về cách CSS Sprites hoạt động tại CSS-Tricks or Sprite CSS của Smashing Magazine bài đăng. Quan điểm của tôi không phải là chỉ cho bạn cách sử dụng chúng, mà chỉ khuyên bạn đảm bảo nhóm phát triển của bạn kết hợp chúng vào trang web. Ví dụ mà CSS Tricks cung cấp hiển thị 10 hình ảnh là 10 yêu cầu và cộng tối đa 20.5Kb. Khi được tập hợp trong một sprite duy nhất, nó 1 yêu cầu 13kb! Yêu cầu khứ hồi và thời gian phản hồi cho 9 hình ảnh hiện đã không còn nữa và lượng dữ liệu giảm hơn 30%. Nhân số đó với số lượng khách truy cập trên trang web của bạn và bạn sẽ thực sự loại bỏ một số tài nguyên!

globalnavMô hình Apple thanh điều hướng là một ví dụ tuyệt vời. Mỗi nút có một vài trạng thái… cho dù bạn đang ở trên trang, ở ngoài trang hay đang di chuột qua nút. CSS xác định tọa độ của nút và hiển thị vùng có trạng thái chính xác cho trình duyệt của người dùng. Tất cả các trạng thái này được thu gọn lại với nhau trong một đồ họa duy nhất - nhưng được hiển thị theo từng vùng như được chỉ định trong biểu định kiểu.

Nếu nhà phát triển của bạn yêu thích các công cụ, có rất nhiều thứ có thể giúp họ, bao gồm Khung CSS la bàn, Yêu cầu giảm cho ASP.NET, CSS-Spriter cho Ruby, Tập lệnh CSSSprite cho Photoshop, SpritePad, SpriteRight, SpriteCow, Không thủ phạm, Trình tạo CSS Sprite của Project Fondue, Sprite Master Web, và SpriteMe Bookmarklet.

Ảnh chụp màn hình của Sprite Master Web:
web spritemaster

Martech Zone không sử dụng hình ảnh nền trong suốt chủ đề của nó, vì vậy chúng tôi không phải triển khai kỹ thuật này vào lúc này.

2 Comments

  1. 1

    Chờ đã… không phải toàn bộ bộ sưu tập là một “hình ảnh” (hoặc một “mặt phẳng”), và mỗi hình ảnh phụ (hoặc nhóm phụ các hình ảnh trong trường hợp thay đổi hoạt ảnh hoặc tương tác) là một “hình ảnh”?

    Có thể mọi thứ đã được đổi tên kể từ lần trước tôi xử lý loại việc này nhưng tôi có thể thề rằng Sprite là phần tử cuối cùng được hiển thị, không phải bảng dữ liệu lớn mà nó được lấy ra.

    (“Sprite table”… phải không?)

    • 2

      Chúng ta có thể đang nói hai điều khác nhau, Mark. Với CSS, về cơ bản bạn có thể chỉ định 'phần' nào của tệp hình ảnh để hiển thị bằng cách sử dụng tọa độ. Điều này cho phép bạn đặt tất cả hình ảnh của mình vào một 'sprite' duy nhất và sau đó chỉ đến khu vực bạn muốn hiển thị bằng CSS.

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.