Jak optymalizować strony responsywne?

Strony responsywne są to takie witryny, które przystosowano do wielu urządzeń typu komputery PC, tablety czy smartfony. Sama responsywność uzyskiwana jest dzięki przystosowaniu układu strony WWW oraz optymalizacji jej grafiki do różnorodnych wymiarów ekranów, na których witryna ma być prezentowana. Tego rodzaju optymalizacja często dotyczy również skryptów zastosowanych w witrynie. Co jeszcze ukrywa się pod hasłem optymalizacji stron responsywnych, o tym poniżej a artykule.

Strony responsywne skierowane są głównie do użytkowników urządzeń mobilnych typu tablet czy smartfon. Są one dostosowane do potrzeb urządzeń przenośnych dzięki zastosowaniu arkusza stylów stron pełnowymiarowych. Przy tego typu witrynach obie wersje stron (tj. na komputery oraz mniejsze urządzenia) posiadają taki sam adres URL dla każdej podstrony. Dzięki temu można w bardzo łatwy sposób pozyskiwać linki i zarządzać treścią. Wyszukiwarka Google zaleca tworzenia stron responsywnych jako przyjaznych urządzeniom mobilnym, ponieważ posiadają tylko jeden adres URL i jeden kod, dzięki czemu znacznie łatwiej jest zaindeksować oraz przeszukać przez roboty wyszukiwarki. Posiadając responsywną stronę internetową, nie trzeba zatem martwić się, że dana witryna działa poprawnie zarówno na urządzeniu mobilnym, jak i stacjonarnym.

Strony responsywne nie mają jednak tylko samych zalet. Często posiadają one bowiem słabą wydajność. Warto zatem popracować nad ich optymalizacją, skracając czas m.in. ładowania obrazków. W tym celu należy je osadzać nie z poziomu markupu, lecz w CSS-ie, wykorzystując media queries oraz wyświetlając alternatywną wersję obrazka. Poza tym można zoptymalizować same obrazki, wrzucając je do programu typu ImageOptim lub serwisu Smush.it. Warto używać wektorowych ikon, jak np. FontAwesome, zamiast bitmap oraz efektów CSS, zrezygnować zaś z tła w podwójnym rozmiarze.

W przypadku listowania na jednej stronie sporej ilości dużych obrazków, które wyświetlane są w modal window, warto zastosować Lazy Load.

W przypadku wyświetlania pokazu slajdów obrazków o dużych wymiarach w tle danej strony można zmodyfikować skrypt Backstretch, stosując również cache i minification.

Kolejnym krokiem do optymalizacji będzie kompresja GZIP, czyli włączenie tzw. gzipowania. Stosując prosty wpis w htaccess, znacznie zredukujemy rozmiary przesyłanych plików.

Wydajność strony responsywnej można poprawić też ustawiając odpowiednie „expiry headers” dla tworzonych plików (tzw. cachowanie). Dzięki temu przy ponownym uruchomieniu witryny, przeglądarka podejmie próbę załadowania plików przechowywanych w podręcznej pamięci zamiast ściągać je po raz kolejny z serwera.

Zmniejszenie liczby requestów osiąga się za pomocą grupowania plików javascript i css w jedne, a także zrezygnowania z osadzania playerów video oraz webfontów z zewnętrznych serwisów i ładowania wszelkich pluginów social media bądź ładowania ich „on hover” za pomocą wtyczki SocialCount.

Minimalizacja skryptów (np. korzystając z serwisu online albo desktopowych aplikacji) odejmie nam kolejne kilkadziesiąt kilobajtów. Można też uniknąć ładowania całego CSS-a, jeśli odwróci się kolejność media-query, tworząc witryny w podejściu „mobile first”.

Tworząc strony responsywne, należy zwrócić uwagę na to, aby były one lekkie i szybkie. Warto skorzystać także z narzędzi do testowania wydajności typu Google Page Speed Insights czy Yslow. Wówczas będziemy mieć pewność połączenia plików JS/CSS w jeden, przeniesienia JavaScript do stopki, włączenia kompresji poprzez .htaccess. i zastosowania cache, gdy wszystkie pliki CSS oraz JS będą całkowicie wolne od błędów.