Hướng dẫn sử dụng Sprite Me để tăng tốc Website của bạn

Bạn sử dụng rất nhiều ảnh nền trong Website của mình: ảnh logo, ảnh nền menu, ảnh nền cho Header,... Khi tiến hành tải trang, tương ứng với mỗi ảnh nền là một yêu cầu tải ảnh tới máy chủ đó. Giả sử bạn có 50 ảnh nền riêng biệt sử dụng trên trang web, sẽ có 50 yêu cầu tới máy chủ. Nhiều yêu cầu, tốc độ tải trang chậm. Vậy, bạn sẽ làm thế nào để giảm bớt các yêu cầu đó.

Sprite Me là trang web cung cấp công cụ giải quyết vấn đề đó cho bạn. Thay vì sử dụng 50 tệp tin riêng biệt, Spirte Me sẽ tiến hành quét các hình ảnh và đoạn mã CSS để xem có thể gộp chung những ảnh nào thành một ảnh, tiến hành gộp các ảnh đó.

Để sử dụng Sprite Me, các bạn cần làm theo các bước sau:

Bước 1:

1. Đi tới trang Web http://spriteme.org

2. Giữ chuột trái kéo liên kết “SpriteMe” lên thanh đánh dấu của trình duyệt

Bước 2:

1.  Tiếp theo bạn đến trang Web mà bạn muốn sử dụng Sprites (Ví dụ: factsaboutbees.org)
2.  Nhấn vào liên kết “SpriteMe” trên thanh đánh dấu của trình duyệt Web.

Sprite Me sẽ quét và hiển thị kết quả với các mục:

  • Suggested Sprites : các ảnh có thể gộp làm một
  • Non-Sprited Images : các ảnh không thể gộp làm một

3. Nhấn vào nút “make sprite” để tiến hành gộp các ảnh vào làm một ảnh.

Kết quả bạn sẽ thu được:

4.  Nhấn vào liên kết trên xem ảnh đã được gộp.

Ảnh đã được gộp có tên "spriteme1.png" nằm trên đường dẫn: hxxp://www.jaredhirsch.com/coolrunning/public_Images/cd23d45517/spriteme1.png.

Ảnh này gộp từ 3 ảnh:

  • Image 1 - có tên là rss_tag.png nằm trên đường dẫn http://factsaboutbees.org/wp-content/themes/colorbold/images/rss_tag.png
  • Image 2 - có tên là bk_mainmenu.png nằm trên đường dẫn http://factsaboutbees.org/wp-content/themes/colorbold/images/blue/bk_mainmenu.png 
  • Image 3 - có tên là bk_list_right.png nằm trên đường dẫn http://factsaboutbees.org/wp-content/themes/colorbold/images/blue/bk_list_right.png

5. Bạn đã gộp ảnh thành công. Giờ bạn cần thay thế các ảnh riêng biệt Image 1, Image 2 , Image 3 bằng ảnh đã gộp "spriteme1.png". Nhấn vào Export CSS và Sprite Me sẽ hướng dẫn chi tiết cho bạn cách thay thế:

Để thay thế Image 1, bạn cần tìm tới tệp tin style.css nằm trên đường dẫn http://.../themes/colorbold/style.css, tìm tới thẻ .rssTag. Xóa bỏ đường dẫn chứa Image 1 ( ảnh riêng trước khi được gộp) như trong hình. Và thay bằng đường dẫn ở dưới. Khi đó, đoạn mã CSS đã được thay thế như sau:

.rssTag {

background-image: url(hxxp://www.jaredhirsch.com/coolrunning/public_Images/cd23d45517/spriteme.png) // Đường dẫn mới chứa ảnh "spriteme1.png" đã được gộp

background-position: -10px -10px;

}

Bạn thay thế dòng background-image và lưu lại. Vậy là bạn đã thành công trong việc thay thế ảnh Image 1 riêng biệt bằng ảnh "spriteme1.png" đã gộp. Tuy nhiên, bạn chỉ cần cắt lấy ảnh Image 1 từ ảnh chung đó làm ảnh nền cho RSS chứ không phải lấy tất cả ảnh chung gồm 3 ảnh đó làm ảnh nền cho RSS. Bạn sẽ làm thế nào?

Đoạn mã background-position quy định vị trí hiển thị Image 1 ( 2 ảnh Image 2 và Image 3 sẽ bị ẩn đi). Vì vậy, trong phần ảnh nền của RSS, chỉ hiển thị mỗi Image 1. Tiến hành thay thế Image 2 và Image 3 cũng tương tự như với Image 1.

Lưu ý:

Do đường dẫn ảnh sau khi gộp chung là: "hxxp://www.jaredhirsch.com/coolrunning/public_Images/cd23d45517/spriteme.png" nên khi bạn tải trang, trang này sẽ cần phải tới website hxxp://www.jaredhirsch.com để lấy ảnh chung "spriteme1.png". Điều này sẽ ảnh hưởng tới tốc độ trang cũng như việc phụ thuộc vào trang web khác. Nếu ảnh "spriteme1.png" bị xóa trên trang web đó, những hình ảnh sử dụng ảnh chung đó sẽ bị mất đi trên website của bạn.


Tốt nhất, bạn nên tải ảnh nền đã được gộp từ địa chỉ web và lưu vào máy chủ của bạn (bạn có thể lưu ảnh đó theo đường dẫn: http://factsaboutbees.org/wp-
content/uploads/spriteme1.png ) . Tiếp đến bạn thay thế đường dẫn đó vào các thẻ trên. Ví dụ với thẻ .rssTag, bạn có thể thay đổi như sau:


.rssTag {

background-image: url(http://factsaboutbees.org/wp-content/uploads/spriteme1.png);

      background-position: -10px -10px;
}

Kết luận:

Trong ví dụ này, bạn nắm được cách sử dụng Sprite Me để gộp các ảnh lại làm 1 ảnh chung, giảm số yêu cầu tới máy chủ và tăng tốc Website. Tuy nhiên, Sprite Me còn phải cân nhắc xem những ảnh nào có khả năng được gộp.

  • Nếu bạn có 50 tệp tin hình ảnh nhưng bạn chỉ có thể gộp được 3 ảnh trong ví dụ thành 1 ảnh chung duy nhất, các ảnh còn lại Sprite Me không thể gộp được. Điều này chỉ giúp số yêu cầu giảm từ 50 xuống 48 và bạn không nên sử dụng kỹ thuật này.
  • Nhưng nếu bạn có 50 tệp tin hình ảnh, và Sprite Me giúp bạn giảm xuống còn 25 tệp tin bằng cách gộp các tệp tin lại thì bạn hoàn toàn có thể sử dụng kỹ thuật này để cải thiện tốc độ cho website của mình.

Save

PS: Nếu bạn nào muốn thưởng thức các loại hải sản tươi ngon hết ý cùng giá cả phải chăng, được đánh bắt từ vùng biển Cô Tô, Quan Lạn, Vân Đồn - Quảng Ninh, vui lòng liên hệ với mình nhé. Cảm ơn các bạn đã ủng hộ!

 

                                                HẢI SẢN VÂN ĐỒN 399

                             Chuyên bán buôn, bán lẻ hải sản tươi sống, hải sản khô, hải sản 1 nắng

                                   (Ốc móng tay Cô Tô, Sá sùng Quan Lạn, Mực tươi Cô Tô,...)

                         - Cơ sở 1: Số nhà 399, Lý Anh Tông, Thị trấn Cái Rồng, Vân Đồn, Quảng Ninh
                         - Cơ sở 2: Ngõ 184, Hoàng Quốc Việt, Cầu Giấy, Hà Nội
                         - ĐT: 0985.286.522
                         - Website: http://vandon.com.vn/haisan