Przyspiesz swoją witrynę dzięki CSS Sprite

spritemaster web

Dość dużo piszę o szybkości strony na tej stronie i jest to ważna część analizy i ulepszeń, które wprowadzamy w witrynach naszych klientów. Oprócz przejścia na potężne serwery i korzystania z narzędzi takich jak Sieci dostarczania treści, istnieje wiele innych technik programowania, z których może korzystać przeciętny programista.

Standard oryginalnego Kaskadowego Arkusza Stylów ma już ponad 15 lat. CSS był ważną ewolucją w tworzeniu stron internetowych, ponieważ oddzielał treść od projektu. Spójrz na tego bloga i wszystkie inne, a większość różnic w stylizacji jest po prostu w załączonym arkuszu stylów. Arkusze stylów są również ważne, ponieważ są przechowywane lokalnie w pamięci podręcznej przeglądarki. W rezultacie, gdy ludzie nadal odwiedzają Twoją witrynę, nie pobierają za każdym razem arkusza stylów… tylko zawartość strony.

Jednym z często niewykorzystywanych elementów CSS są Sprites CSS. Gdy użytkownik odwiedza Twoją witrynę, możesz nie zdawać sobie sprawy, że nie wysyła po prostu jednego żądania dotyczącego strony. one składać wiele próśb… Żądanie strony, dowolnych arkuszy stylów, załączonych plików JavaScript, a następnie każdego obrazu. Jeśli masz motyw zawierający serię obrazów dla obramowań, pasków nawigacji, tła, przycisków itp.… Przeglądarka musi żądać każdego z nich pojedynczo z serwera WWW. Pomnóż to przez tysiące odwiedzających, a mogą to być dziesiątki tysięcy żądań wysłanych do twojego serwera!

To z kolei spowalnia Twoją witrynę. ZA powolna witryna może mieć dramatyczny wpływ na zaangażowanie i konwersje twoich odbiorców. Strategia stosowana przez świetnych programistów internetowych polega na umieszczaniu wszystkich obrazów w jednym pliku… nazywanym plikiem sprite. Zamiast wysyłać żądanie dla każdego obrazu pliku, teraz wystarczy jedno żądanie dla jednego obrazu sprite!

Możesz przeczytać o jak działają CSS Sprites w CSS-Tricks or Smashing Magazine's CSS Sprite Poczta. Nie chodzi mi o to, aby pokazać, jak z nich korzystać, tylko po to, aby doradzić, aby Twój zespół programistów włączył je do witryny. Przykład, który zapewnia CSS Tricks, pokazuje 10 obrazów, które są 10 żądaniami i dodają do 20.5 KB. Po zebraniu w jednym duszku to jest 1 żądanie o rozmiarze 13 KB! Zniknęły żądania i czasy odpowiedzi w obie strony dla 9 obrazów, a ilość danych została zmniejszona o ponad 30%. Pomnóż to przez liczbę odwiedzających Twoją witrynę, a naprawdę zaoszczędzisz trochę zasobów!

globalna nawigacjaW ramach projektu Apple pasek nawigacji jest doskonałym przykładem. Każdy przycisk ma kilka stanów… niezależnie od tego, czy jesteś na stronie, poza nią, czy najeżdżasz kursorem myszy na przycisk. CSS definiuje współrzędne przycisku i prezentuje region o prawidłowym stanie w przeglądarce użytkownika. Wszystkie te stany są zwinięte razem w jednej grafice - ale są wyświetlane region po regionie, jak określono w arkuszu stylów.

Jeśli twoi programiści uwielbiają narzędzia, jest ich mnóstwo, które mogą im pomóc, w tym Kompas CSS, Prośba o zmniejszenie dla ASP.NET, CSS-Spriter dla Ruby, Skrypt CSSSprite dla Photoshopa, SpritePad, SpritePrawo, SpriteKrowa, ZeroSprites, Generator sprite'ów CSS projektu Fondue, Sprite Master WebI SpriteMe Zakładka.

Zrzut ekranu z Sprite Master Web:
spritemaster web

Martech Zone nie wykorzystuje obrazów tła w całym swoim motywie, więc nie musimy obecnie wdrażać tej techniki.

Komentarze 2

  1. 1

    Czekaj… czy cała kolekcja nie jest „obrazem” (lub „płaszczyzną”), a każdy podobraz (lub podgrupa obrazów w przypadku animowanych lub zmieniających się interaktywnie) „duszkiem”?

    Może zmieniono nazwy rzeczy od czasu, gdy ostatnio zajmowałem się tego rodzaju rzeczami, ale mogę przysiąc, że to Sprite był elementem, który został wyświetlony, a nie tabela dużych zbiorów danych, z której został wyciągnięty.

    („Tabela Sprite”… to nie było to?)

    • 2

      Możemy rozmawiać o dwóch różnych rzeczach, Mark. Dzięki CSS możesz w zasadzie określić, która „część” pliku obrazu ma być wyświetlana przy użyciu współrzędnych. Pozwala to umieścić wszystkie obrazy w jednym „sprite”, a następnie po prostu wskazać obszar, który chcesz wyświetlić za pomocą CSS.

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.