Kolejny wpis na temat wydajności stron internetowych poświęcimy zagadnieniu wymagającemu mniejszej wiedzy z dziedziny programowania i działania serwerów oraz niewielkiej znajomości skomplikowanych zagadnień w języku angielskim. Obiecuję, że w tekście znajdą się tylko dwa trudne pojęcia – ale po kolei.
Ostatnio omawialiśmy przechowywanie zasobów zawierających kod JavaScript czy też CSS, takich jak zdjęcia czy pliki tekstowe, do późniejszego wykorzystania przez przeglądarkę. Były to rozwiązania, które wymagają jednorazowej konfiguracji i są tak naprawdę bardzo tanie oraz proste do wprowadzenia. Tym razem skupimy się na zagadnieniu, które jest równie łatwe, jednak wymaga pewnej dozy konsekwencji. Stosowane na dłuższą metę przynosi zauważalne korzyści.
Optymalizacja zdjęć
Wszelkie formaty graficzne, wykorzystane w Internecie, można zoptymalizować tak, żeby przede wszystkim zajmowały mniej miejsca. Jak już ustaliliśmy wcześniej, sam rozmiar pliku ma znaczenie z punktu widzenia szybkości ściągania zasobów z serwera. Jeżeli zadbamy o to, żeby dostarczać użytkownikowi zawsze najmniejszy możliwy plik, zyskamy szybsze ładowanie strony oraz mniejsze zużycie zasobów serwera.
Można to osiągnąć na dwa sposoby:
1. Zmniejszyć „fizycznie” rozmiar pliku graficznego, a więc jego rozmiar wyrażony w pikselach
Do wykonania tej optymalizacji potrzebny jest edytor graficzny. Wystarczy nawet najprostszy MS Paint dostępny w każdym systemie operacyjnym z rodziny Windows.
Przykładem są zdjęcia przesyłane do nas przez klientów – te, robione nawet telefonem, często są w rozmiarze większym niż 3 megapiksele (1920×1440). Jeżeli takie zdjęcia nie są używane jako np. tło stron, warto je zmniejszyć do takiego rozmiaru, jaki będzie wyświetlany na stronie internetowej.
Jak szybko sprawdzić, jaki rozmiar zdjęć wyświetla się na stronie?
Wystarczy najechać myszką na dowolne zdjęcie na stronie, kliknąć na nie prawym przyciskiem myszki i z menu kontekstowego wybrać Zbadaj (w przypadku Google Chrome) lub Zbadaj element (w przypadku Mozilla Firefox).
W przeglądarce otworzą się narzędzia deweloperskie, a zaznaczone zdjęcie zostanie delikatnie zacieniowane – ukaże się etykieta zawierająca nazwę elementu w strukturze HTML oraz jej rozmiar wyrażony w pikselach. Ta wartość to największy rozmiar, jaki mieści się na ekranie, na którym wyświetlono stronę.
2. Skorzystać z kompresora zdjęć
Inną szybką i nie wymagającą programów graficznych metodą optymalizacji obrazów jest użycie kompresora do zdjęć. Istnieje wiele komercyjnych i darmowych rozwiązań, jednak ja w codziennej pracy używam strony compressor.io. Nie znalazłem do tej pory propozycji oferującej lepszy stosunek kompresji zdjęcia do zachowanych szczegółów na zdjęciu.
Aby skompresować zdjęcie, należy po przejściu na stronę nacisnąć przycisk TRY IT! znajdujący się u dołu ekranu, a następnie przeciągnąć jedno zdjęcie w okno wyznaczone przerywanymi liniami. Po krótkim przetwarzaniu przez skrypt powinien pojawić się interaktywny slider, ukazujący zdjęcie przed i po optymalizacji, suwak wyrażający procentową wartość zmniejszenia rozmiaru pliku oraz przycisk DOWNLOAD YOUR FILE, który pozwala na pobranie zoptymalizowanego zdjęcia.
Przykładowe zdjęcie, którego użyłem, miało rozmiar 3.50MB, a po kompresji jego rozmiar zmniejszył się do 1.78MB. Udało się „urwać” 49% rozmiaru zdjęcia bez zmiany jego rozdzielczości i tylko z minimalną, prawie niezauważalną stratą jakości!
Optymalizacja plików tekstowych
Tak jak w przypadku plików graficznych, pliki tekstowe również mają swoją wagę, która może wpłynąć na wydajność strony, a którą można zmniejszyć. Uwaga, teraz obiecane trudne pojęcia: konkatenacja oraz minifikacja. Nie ma się co jednak łapać za głowę, ponieważ czynności jakie kryją się za tymi słowami są banalnie proste i każdy sobie z nimi poradzi.
Konkatenacja
Polega na łączeniu ze sobą dwóch lub więcej plików JavaScript lub CSS celem otrzymania po jednym pliku zawierającym kod. W ten sposób zamiast kilku zapytań o arkusz styli czy skryptów, przeglądarka musi zapytać tylko (w najlepszym przypadku) o dwa pliki.
Minifikacja
Polega na usunięciu z pliku tekstowego wszystkich białych znaków (spacja, tabulator, znak nowej linii) oraz komentarzy, tak aby otrzymać możliwie najmniejszy plik bez zmiany działania kodu. Zysk otrzymany przy pomocy tej techniki zależy od samego sposobu pisania kodu, ale prawie zawsze udaje się zauważalnie obciąć rozmiar pliku.
Podsumowanie
Zastosowanie tych dwóch technik – optymalizacji grafik i plików tekstowych – pozwala na skuteczną optymalizację szybkości zasobów, które występują na każdej stronie internetowej.
Protip: Istnieje prosty sposób na skorzystanie z części omówionych technik za pomocą dosłownie paru kliknięć. Wystarczy przejść na stronę Google Pagespeed Insights, wprowadzić w formularzu adres strony oraz kliknąć przycisk analizuj.
W efekcie działania skryptu zostanie wygenerowany raport zawierający ocenę wydajności podanej strony internetowej i wśród tekstów można znaleźć opcję: „Pobierz zoptymalizowane obrazy oraz zasoby JavaScript i CSS dla tej strony”, zawierającą link do pliku .zip z już zoptymalizowanymi zasobami.
Aby powiększyć, kliknij w zdjęcie
