Kurs Responsive Web Design cz. 3

W poprzednich odcinkach (część pierwsza, część druga) wspólnie stworzyliśmy działający szablon strony w stylu RWD. W tym zajmiemy się galerią zdjęć i optymalizacją.

Zaczniemy od optymalizacji

Po co optymalizować, dzisiaj każdy ma super szybkie łącze internetowe, prawda? Niestety nie jest to prawda. Prawdopodobnie zdarzyło się to każdemu korzystającemu z internetu komórkowego, że nie było „pola” albo że internet był bardzo, bardzo wolny. I wtedy okazuje się, że każdy dodatkowo przesłany Kilobajt opóźnia wyświetlenie się strony.

Co możemy zrobić?

Najpierw spójrzmy na wynik naszej pracy w zainstalowanej wcześniej wtyczce. Wynik nie jest zły, lecz można szybko go poprawić. Pierwszym i najprostszym zadaniem jest połączenie plików CSS w jeden. Dobrze byłoby się też pokusić o usunięcie zbędnych wpisów (pozostawiam jako zadanie domowe). A na końcu zminifikować (usunąć zbędne komentarze i białe znaki). Pomóc w tym nam może YUI CSS Compressor (z zakładki Tools z YSlow). Efekt naszej pracy sprawdźmy w przeglądarkach i na koniec we wtyczce YSlow.

Z 17,3 Kilobajta plików CSS zrobiło się 6,1. I o dwa zapytania do serwera mniej.

Analogicznie przyjrzyjmy się plikom Javascript

Usuńmy nie wykorzystane przez nas: modernizr-2.6.1.min.js i plugin.js. A plik main.js zminifikujmy. Odchudziliśmy stronę o kolejne 14 Kilobajtów i pozbyliśmy się dwóch zapytań.

Autentyczne formaty mediów. Mikrotrend, który zmieni reklamę wideo online? [FELIETON]

Zajmijmy się grafiką

W naszym przypadku jedynym elementem graficznym jest znacznik zachęcający do rozwinięcia lub zwinięcia menu na małych urządzeniach.

Jak uważny czytelnik pewnie zauważył wykorzystaliśmy technikę optymalizacji obrazków, używanych w CSS — CSS Sprites, czyli łączenie wielu plików graficznych w jeden. Gdybyśmy mieli kilka grafik, w oddzielnych plikach, pomocny byłby wspomniany w pierwszej części bookmarklet.

Efekty? Jak widać po krótkiej chwili mamy 27 Kilobajtów i 4 pliki mniej. I to przy tak prostej stronie. Co na wolnym łączu GPRS przełoży się na prawie sekundę szybsze wczytanie strony. Gra warta świeczki, prawda?

Czy możemy jeszcze przyspieszyć wczytywanie naszej strony?

Oczywiście tak! Moglibyśmy zrezygnować z wykorzystania jQuery i napisać skrypt Javascript bez jego pomocy (plik main.js, odpowiedzialny za menu typu drop-down). Być może nie potrzebne też są statystyki Google Analitycs. To kolejne Kilobajbty mniej. 

Po stronie serwera moglibyśmy wymusić kompresję plików, przesyłanych do klienta. I także wspomóc proces cache’owania zawartości naszej strony poprzez skonfigurowanie Expires headers i Entity tags (ETags). Tak by kolejne wczytanie naszej strony lub podstron było szybsze.

Ten etap pozostawiam czytelnikowi jako zadanie domowe 🙂 

Galeria zdjęć

Galeria zdjęć nie różni się za bardzo od strony, którą zajmowaliśmy się w poprzednim odcinku. Dlatego skupię się tylko na różnicy. A jest nią prezentacja zdjęć.

Mam nadzieję, że przekonałem Cię, drogi Czytelniku, że warto optymalizować serwisy WWW. I jak się pewnie domyślasz, w przypadku galerii to najważniejszy element. Nie warto przecież przesyłać wielkich zdjęć na mały telefon komórkowy.

Niestety nie ma idealnego rozwiązania. Pomysł, by wykorzystać Media Queries i właściwość display:none nie działa. Część przeglądarek nadal wczyta zawartość, czyli np. nasz obrazek w dużej rozdzielczości.

Jakie mamy rozwiązania?

Jedne z popularniejszych to:

1) HiSRC – to wtyczka do jQuery. Powoduje, że najpierw wczytywana jest wersja „mobilna”, a potem sprawdzane jest jaki mamy rodzaj połączenia, jeśli nie mobilne — wczytujemy pełną wersję. Jeśli mamy wyświetlacz typu Retina (umownie nazwijmy) pobieramy plik dla niego.

Plusy: Wczytujemy odpowiednią wielkość

Minusy: Dodatkowy kod Javascript, niestandardowy HTML (dodatkowe atrybuty znacznika <img>), pierwotny obrazek („mobilny”) zawsze zostaje wczytany.

2) Responsive-Enhance – samodzielny skrypt Javascript. Podobny w działaniu do poprzedniego.

Plusy: Wczytujemy odpowiednią wielkość

Minusy: Dodatkowy kod Javascript, niestandardowy HTML (dodatkowe atrybuty znacznika <img>), pierwotny obrazek zawsze zostaje wczytany.

3) Adaptive Images – to połączenie skryptu Javascript i skryptów po stronie serwera. Nie wymaga jakichkolwiek zmian w znacznikach obrazków <img>. Automatycznie wysyła odpowiedni rozmiar zdjęcia, dopasowany do przeglądarki/urządzenia.

Plusy: Wczytujemy odpowiednią wielkość, standardowy HTML

Minusy: Skrypty po stronie serwera (a przecież tego chcieliśmy uniknąć)

Co wybrać? Czym się kierować?

W przypadku wielkiej, działającej strony z setkami czy tysiącami zdjęć wybrałbym Adaptive Images. W innym przypadku – raczej konkurencję.

Warto też śledzić grupę www.w3.org/community/respimg/. Być może tutaj narodzi się rozwiązanie idealne.

A gdzie moja galeria?

Galerię, drogi czytelniku, potrafisz już zbudować sam. Dałem Ci wędkę, wykorzystaj ją.

—

Poprzednie części kursu: pierwsza, druga >>>

galeria stron responsywnych  >>>