Nie każ im czekać – jak zmniejszyć ciężar strony internetowej?

Zdjęcie royalty free z Fotolia

Oryginalny tekst pochodzi ze strony HubSpot.com i jest autorstwa Carly Stec – poniżej tłumaczenie autorstwa Wojciecha Popiela.

Według badań przeprowadzonych przez Akamai, opóźnienie rzędu dwóch sekund może spowodować, że  znaczny odsetek odwiedzających opuści stronę. Z każdą kolejną sekundą wskaźnik porzuceń rośnie o 5,8%. Przedmiotem badań była strona oferująca streaming wideo, ale można bezpiecznie założyć, że czas oczekiwania ma duży wpływ na zachowanie internauty.

Warto również wspomnieć o tym, że Google przyznało, iż prędkość ładowania strony jest jednym z czynników wpływających na jej pozycję w rankingach wyszukiwarki. Jak wiadomo, prędkość wczytywania stron na urządzeniach mobilnych pozostawia jeszcze wiele do życzenia, więc na smartfonach i tabletach jeszcze trudniej załadować „ciężką” stronę. W tym artykule poznasz podstawowe techniki redukcji rozmiaru strony.

Czym jest rozmiar strony?

Rozmiar strony WWW, potocznie zwany też ciężarem, to suma rozmiarów elementów wykorzystanych do jej stworzenia, czyli plików tekstowych z kodem (np. .html, .php), wszystkich zdjęć, arkuszy stylów CSS i innych mediów. Według badań przeprowadzonych przez firmę Soasta, typowe strony internetowe ważą aktualnie nieco ponad 2 MB. Wszystko zależy od rodzaju prowadzonej działalności (dla przykładu, strony e-commerce zawierające sporo zdjęć będą naturalnie cięższe), lecz jeśli chcesz, żeby strona zapewniała optymalny czas wczytywania, postaraj się zrobić jak najlżejszą.

Polskie strony błędu 404 – cz. 6

5 sposobów na zredukowanie rozmiaru strony:

#1: Zmień rozmiar grafik i kompresuj zdjęcia

Obrazki w bardzo wysokim stopniu przyczyniają się do zwiększania rozmiaru strony. Jeśli  chcesz poprawić prędkość wczytywania, dobór, jakość i ilość elementów graficznych ma ogromne znaczenie. 

Publikując nowe zdjęcia, upewnij się, że ich wymiary nie są większe, niż potrzebujesz. Jeśli Twoja strona może pomieścić grafikę o maksymalnej rozdzielczości 600 pikseli, nie ma sensu umieszczać na niej zdjęcia o szerokości 1000 pikseli i skalować go poprzez kod. Przeglądarka, mimo że będzie wyświetlać grafikę w pożądanym rozmiarze, i tak będzie musiała pobrać duży plik.

Przypuśćmy jednak, że chcesz opublikować zdjęcie wysokiej jakości, którym ludzie mogliby się podzielić ze znajomymi. Co zrobić w takiej sytuacji? Najlepiej będzie załadować zdjęcie o optymalnych rozmiarach albo jego miniaturę, a następnie zamieścić w nim link do zdjęcia w wysokiej rozdzielczości. W ten sposób unikniesz niepotrzebnego obciążania strony, a duże pliki będą pobierane wyłącznie na wyraźne żądanie użytkownika. 

Oprócz publikowania zdjęć o odpowiednich wymiarach, możesz dodatkowo zmniejszyć ich ciężar dzięki odpowiedniej kompresji. Kompresja zdjęcia pomaga zmniejszyć wagę pliku, co  poprawia szybkość ładowania strony. Do kompresji grafik możesz wykorzystać darmowe narzędzia, np. Compressor.io.

Warto również się zastanowić, czy na pewno potrzebujesz wszystkich zdjęć, które znajdują się na stronie. Każde zdjęcie powinno spełniać jakąś funkcję. Jeśli znajdziesz kilka zbędnych zdjęć, pozbądź się ich jak najszybciej.

#2: Wykorzystaj CSS Sprites

Teraz już wiesz, że duża liczba grafik na każdej stronie znacznie zwiększy jej ciężar i czas ładowania. Dzieje się tak między innymi dlatego, że każde zdjęcie generuje żądanie do serwera, co spowalnia proces ładowania. Aby temu zapobiec, możesz wykorzystać niezbyt popularną technikę o nazwie CSS Sprites. 

CSS Sprites to kolekcja połączonych obrazów, które tworzą jeden, większy plik graficzny. Dzięki temu możesz wyświetlać wyłącznie część grafik, które pojawiają się na stronie (zamiast powolnego ładowania wszystkich elementów, których użytkownik nawet nie zobaczy). CSS Sprites ograniczy liczbę żądań do serwera potrzebnych do poprawnego załadowania strony. Być może wydaje się to dość skomplikowane, jednak w rzeczywistości zastosowanie tej techniki nie wymaga wiele czasu. W sieci znajdują się znakomite poradniki na ten temat. Jeśli używasz CMS-a typu WordPress, możesz również znaleźć specjalne wtyczki, które zrobią większość pracy za Ciebie.

#3: Zminimalizuj zasoby wymagane do załadowania strony dzięki minifikacji, Image-Set oraz Critical CSS

Minifikacja

Niektóre z zasobów wykorzystywanych na Twojej stronie z pewnością można „zminifikować”. Minifikacja to proces usuwania niepotrzebnych lub nadmiernych danych bez wpływu na to, jak zasoby będą przetwarzane przez przeglądarkę. Do tej kategorii można zaliczyć kod systemu komentarzy, formatowanie strony, usuwanie niepotrzebnego kodu, wykorzystanie krótszych zmiennych lub nazw funkcji HTML, CSS, itd. Zoptymalizowaną wersję kodu HTML możesz wygenerować między innymi przy pomocy narzędzia Page Speed Insights. Nie zapomnij jednak pozostawić na swoim dysku kopii oryginałów, zminifikowany kod jest dużo mniej przejrzysty  i może nastręczać wielu problemów w późniejszej edycji.

Image-set

Warto również zwrócić uwagę na specjalną funkcję CSS o nazwie Image-set. Dzięki niej obrazy na Twojej stronie będą się wyświetlać w zależności od cech urządzenia, z którego korzysta dany użytkownik. Dla przykładu, jeśli przepustowość sieci jest dość niska, pliki graficzne zostaną automatycznie wyświetlone w niższej jakości lub mniejszej skali, aby ułatwić wczytanie strony. 

Critical CSS

Zdecydowana większość stron internetowych jest zbudowana z wykorzystaniem arkuszy CSS (Cascading Style Sheets). CSS pozwala na nadanie stylu wyglądu poszczególnym elementom strony. W celu wyświetlenia witryny przeglądarka musi zatem najpierw załadować plik CSS zawierający „opis” wyglądu wszystkich jej elementów. Duży arkusz stylów może spowolnić wczytywanie strony. Problem ten można rozwiązać dzięki technice Critical CSS, która pozwala na załadowanie wyłącznie najważniejszych elementów w umieszczonym między znacznikami <head> arkuszu, niezbędnym do wyświetlenia strony na ekranie użytkownika, a następnie doładowanie reszty. W sieci istnieją gotowe rozwiązania, które mogą pomóc przy tworzeniu zestawu krytycznego deklaracji stylów. Jest to pomysł, który na pewno przyczyni się do poprawy prędkości strony.

#4: Wykorzystaj Content Delivery Network (CDN)

Content Delivery Network to system wzajemnie połączonych serwerów, które dostarczają treści internetowych na podstawie położenia geograficznego poszczególnych użytkowników. Co to oznacza w praktyce?

Załóżmy, że serwer zawierający elementy Twojej strony internetowej znajduje się w Poznaniu. Każdy użytkownik z Poznania znajduje się wtedy w uprzywilejowanej pozycji, ponieważ ma szybszy dostęp do danych. Odwiedzający z innych części kraju lub w szczególności z zagranicy (jeśli Twoja strona jest dostępna w różnych wersjach językowych) będą musieli poczekać nieco dłużej na załadowanie się strony wyłącznie z powodu lokalizacji serwera. Content Delivery Network rozwiązuje ten problem, umieszczając elementy strony w różnych lokalizacjach w kraju i na świecie. Podjęcie tego kroku niekoniecznie przyczyni się do zredukowania ciężaru strony, lecz poprawi prędkość ładowania. Ponadto dodatkowe serwery hostujące zasoby mogą odciążyć główny serwer.

#5 Cache’uj zasoby

Gdy użytkownik wchodzi na Twoją stronę, pobiera określone zasoby, jak np. zdjęcia, szablony CSS czy pliki tworzone dynamicznie, które następnie przekładają się na to, co widzimy w oknie przeglądarki. Bezpiecznie jest założyć, że pobieranie za każdym razem wszystkich zasobów jest zbędne. Dlatego właśnie powstała pamięć podręczna – cache. Jeśli część strony została zapamiętana w przeglądarce użytkownika przy pomocy pamięci podręcznej, z każdą kolejną wizytą elementy strony wczytają się dzięki elementom znajdującym się w pamięci, unikając potrzeby wysyłania żądań do serwera. Mechanizm ten ogranicza ilość żądań do serwera i znacznie przyspiesza wczytywanie strony. Istnieje szereg sposobów korzystania z cache – można stosować akceleratory, takie jak Varnish Cache,  odpowiednio skonfigurować plik .htaccess sterujący oprogramowaniem serwera (Apache) i wiele innych. Jeśli część strony została zapamiętana w przeglądarce użytkownika przy pomocy pamięci podręcznej, elementy strony wczytają się przy każdej kolejnej wizycie dzięki elementom znajdującym się w pamięci, bez potrzeby wysyłania żądań do serwera. Różnym elementom można przypisać różne „terminy ważności”, po których upływie przeglądarka ponownie pobierze je z serwera. 

Zwiększ prędkość ładowania strony

Zanim wykorzystasz powyższe wskazówki, sprawdź jak szybko ładuje się Twoja strona. Dzięki temu będziesz w stanie dokładnie zbadać wyniki optymalizacji. Aby zbadać prędkość strony, możesz wykorzystać darmowe narzędzie typu Web Page Analyzer.  Następnie wypróbuj pomysły z tego artykułu i zobacz, o ile udało Ci się obniżyć ciężar strony.

 

Wojciech Popiela
Project Manager, Grupa TENSE

 

Źródło:
-Carly Stec, Don’t Make Them Wait: How to Reduce Page Weight on Your Website