Żyjemy w czasach mobile, większość z nas szuka informacji i konsumuje treści w swoich smartfonach. Jako właściciel strony musisz dopilnować, żeby była ona szybko dostępna dla każdego twojego potencjalnego klienta czy czytelnika. Nawet jeżeli używa on starszego (czyt. wolniejszego) modelu telefonu i korzysta z wolniejszej sieci.

Na początek podstawy, czyli co wpływa na szybkość ładowania się strony?

Zacznijmy od podstaw, aby strona internetowa ukazała się na twoim ekranie muszą wydarzyć się dwie rzeczy.

Po pierwsze, serwer, na którym strona jest umieszczona, musi przygotować kod HTML oraz inne niezbędne pliki, a następnie wysłać do twojej przeglądarki.

Po drugie, twoja przeglądarka (np. Chrome) musi odebrać te dane, a następnie zamienić kod oraz pliki na właściwy wygląd strony.

Co się dzieje na serwerze?

Zadaniem serwera jest trzymanie oraz serwowanie plików i kodu strony przeglądarkom, które o to poproszą. Dzieje się to w chwili, gdy wpisujesz adres strony do paska przeglądarki lub klikasz link.

To, w jakim czasie przeglądarka otrzyma kod od serwera, zależy od jego konfiguracji oraz jakości samego kodu. Na hostingach współdzielonych (większość stron jest utrzymywana właśnie na takich hostingach), nie ma wielu możliwości związanych z ich konfiguracją. To administratorzy dbają o poprawne i jak najszybsze jego działanie i zazwyczaj takie serwery działają szybko.

Za to, jako właściciel strony masz wpływ na jakość kodu. Większość stron internetowych opartych jest o systemy CMS, które pozwalają na edycje treści. Najliczniejszym przedstawicielem tych systemów jest oczywiście WordPress napisany w języku PHP. To jakoś kodu WordPress’a, (a w zasadzie wtyczek i motywu, którego uzywasz) ma największy wpływ na szybkość odpowiedzi serwera.

W dużym uproszczeniu serwer ma za zadanie wygenerowanie kodu HTML na podstawie instrukcji zawartych w PHP. To w tej chwili serwer przetwarza dane zawierające treści na stronie oraz wszystkie funkcje, które odpowiadają za wygenerowanie prostego HTML, zrozumianego dla przeglądarki.

Im bardziej skomplikowany, zawiły kod PHP, tym dłużej serwer będzie go przetwarzał. To m.in. dlatego instalacja wielu wtyczek w WordPress’ach może doprowadzić do spowolnienia strony. Dzieje się tak, ponieważ każda kolejna wtyczka generuje kolejne linijki kodu do przetworzenia.

Większość właścicieli stron, nie dba o to co dzieje się kodem po stronie serwera, a optymalizacja tej kwestii może przyspieszyć czas, w jakim przeglądarka otrzyma dane z serwera. W dalszej części artykułu dowiesz się, co możesz z tym zrobić.

Co się dzieje po stronie przeglądarki?

Gdy serwer zakończy pracę z przetwarzaniem, wygenerowany kod HTML trafia do przeglądarki użytkownika. Jej zadaniem jest teraz wyrenderowanie strony na podstawie danych otrzymanych z serwera.

Oprócz kodu HTML, przeglądarka potrzebuje jeszcze dwóch rodzajów danych/plików. Będą to

  • CSS (kaskadowe arkusze stylów) odpowiadają one za wygląd strony. CSS zawierają instrukcje wyglądu danego elementu takie jak kształt kolor, wielkość fontu itp.
  • JavaScript — kod, który odpowiada za wszelkie dynamiczne akcje niewymagające przeładowania strony. Będą to na przykład animacje lub działanie koszyka w sklepie internetowym.

Przeglądarka otrzymuje więc trzy rodzaje kodu źródłowego, który musi przekuć w wygląd i funkcjonalność strony (HTML, CSS, JS). Dopiero gdy to zrobi, strona załaduje się w przeglądarce. Istnieje jednak istotna różnica pomiędzy tym co dzieje się na serwerze. Przeglądarka interpretuje kod w sposób sekwencyjny, co oznacza, że kod może być ładowany częściowo.

Na pewno nie raz spotkałeś się z sytuacją, że kolejne elementy strony doładowywują się, gdy inne już dawno są widoczne. Wynika to z faktu, że kod JavaScript odpowiedzialny na przykład za wyświetlenie reklamy uruchamia się dopiero, gdy inne ważne elementy strony są już widoczne dla użytkownika.

Jeżeli chodzi o szybkość strony po stronie przeglądarki, to twoim zadaniem jest jak najwcześniej dostarczyć najważniejszą część strony użytkownikowi, reszta elementów może doładować się później. Najważniejsze, żeby użytkownik nie czekał na pierwszą treść, patrząc na białą kartę lub pasek ładowania.

Czy szybkość strony rzeczywiście wpływa na pozycję w Google?

Nie jest to proces bezpośredni, ale tak. Szybkość twojej strony wpływa na ogólną ocenę strony, która przekłada się na lepszą widoczność. Dlaczego nie bezpośrednio? Sam fakt, że strona ładuje się szybko lub wolno nie ma wpływu na pozycję, jednak szybkość strony wpływa na zachowania użytkowników, które mogą już wywierać wpływ na algorytmy.

Załóżmy, że masz genialny artykuł lub produkt i jest on na pierwszej pozycji na ważne zapytania. Nagle, twoja strona zwalnia w wyniku błędu wdrożeniowego. Użytkownicy, którzy na nią trafiają, muszą czekać ponad 10 sekund na załadownie się strony, by zobaczenie szczegółów było w ogóle możliwe.

Co zrobi większość z nich? Wróci do wyników wyszukiwania i kliknie drugą, trzecią lub kolejną pozycję. Przy odpowiedniej skali takiego zjawiska, Google zauważy, że twoja strona nie jest odpowiednia dla osób, którzy szukają danego produktu i może (bo wcale nie musi) obniżyć pozycję twojej strony.

Oczywiście chwilowe problemy z wydajnością nie przełożą się na spadki pozycji. Można jednak tego doświadczyć, na przykład wdrażając nową wersję strony, ignorując zasady performance.

Dlaczego warto inwestować w przyspieszanie strony?

Wyższe pozycje w Google to chyba najmniej ważny argument, serio. Istnieje o wiele więcej zalet szybko działającej strony. Poniżej kilka najważniejszych:

Twoi klienci się nie denerwują

Znasz to uczucie, gdy wchodzisz na stronę internetową i ona bardzo długo się ładuje? Chcesz kupić ten produkt, ale koszyk się zawiesza lub strona nie nadaje się do użytkownika z powodu wolnego ładowania?

Takie działanie strony jest bardzo irytujące i może każdego wyprowadzić z równowagi. Warto zadbać o szybkość strony, by twoi klienci z przyjemnością korzystali z twojej strony czy sklepu. Niech wizyta w twojej stronie będzie kojarzyć się z czymś miłym, nikt nie wróci na sklep, który kojarzy mu się ze stresem.

Zmniejszasz współczynnik odrzuceń

Współczynnik odrzuceń (Bounce Rate) pokazuje jaka część użytkowników opuszcza twoją stronę bez żadnej interakcji. Im większy współczynnik, tym większa część ruchu kończy się bez jakiejkolwiek interakcji. Zobacz teraz na dane zaprezentowane przez Google:

Prawdopodobieństwo opuszczenia strony bez interakcji vs szybkość

Zobacz, jak rozkłada się ryzyko odbicia (wyjścia ze strony bez interakcji), w zależności od szybkości ładowania się storny:

  • 1s – 3s — prawdopodobieństwa odbicia zwiększa się o 32%,
  • 1s – 5s — prawdopodobieństwa odbicia zwiększa się o 90%,
  • 1s – 6s — prawdopodobieństwa odbicia zwiększa się o 106%,
  • 1s – 10s — prawdopodobieństwa odbicia zwiększa się o 123%,

Liczby mówią same za siebie, im wolniejsza strona, tym więcej osób wyjdzie ze strony. Co to oznacza? Niestety utratę potencjalnego klienta lub czytelnika.

Zwiększasz współczynnik konwersji/sprzdedaży

Im szybsza strona, tym więcej zadowolonych użytkowników, którzy chętniej kupują czy wypełniają formularze kontaktowe. Innymi słowy, szybkość twojej strony internetowej przekłada się na pieniądze.

Za granicą fakt ten jest już oczywistością. Zobacz jak szybko działa strona Amazona, która jest uważana za najszybszą stronę w e-commerce. W Polsce świadomość wpływu szybkości strony na cele biznesowe jest znacznie mniejsza. Oznacza to większe szanse dla firm, które mocno zainwestują w ten obszar.

Jakimi narzędziami mierzyć szybkość strony?

Na przestrzeni ostatnich lat powstało wiele narzędzi, za pomocą których można zmierzyć szybkość działania strony. Jedne są proste, inne bardziej zaawansowane, a jeszcze pomagają optymalizować proces przyspieszania strony. Niestety, są też takie, które mogą wprowadzać w błąd właścicieli stron. Poniżej przedstawię kilka, które uważam za warte wymienienia:

Własne oczy

Twoje oczy to jedno z najprostszych narzędzi, którego możesz użyć. Instrukcja obsługi jest banalna, wejdź na stronę i zobacz czy szybko się wczytała. Jeśli strona wczytała się szybko i sprawnie — wszytko jest ok!

Piszę o tym, ponieważ wiele osób bezrefleksyjnie sprawdza swoje strony w przeróżnych narzędziach pokazujących problemy z szybkością, podczas gdy ich strony są w miarę szybkie. Nie ma sensu inwestować środków w poprawę współczynnika szybkości w Google PageSpeed Insights, jeśli twoja strona bardzo dobrze działa nawet na słabszych urządzeniach mobilnych.

Jeśli jednak zauważysz, że twoja strona działa za wolno, możesz wtedy zacząć szukanie sposób na poprawę tej sytuacji. Pomogą ci w tym kolejne narzędzia.

PageSpeed Insights

PSI to narzędzi od Google, które, analizuje zawartość strony internetowej, a następnie sugeruje sposoby zwiększenia szybkości jej wyświetlania. Aby rozpocząć analizę, wystarczy podać adres strony i chwilkę poczekać.

Narzędzie to, pokaże ci najważniejsze błędy związane z opóźnieniami ładowania strony, jakie są generowane przez różne problemy. Dowiesz się też wiele co zrobić, by poprawić daną sytuację.

Lighthouse w Chrome

Lighthouse to narzędzie do pełnej analizy szybkości strony dostępne w każdej przeglądarce Chrome. Za jego pomocą można zmierzyć realne szybkości ładowania się strony na twoim komputerze.

Warto zauważyć, że Google Page Speed działa na bazie tego narzędzia!

Narzędzie można uruchomić, włączając tryb dla deweloperów w przeglądarce Chrome (np. F12). Znajduje się ono w zakładce „Audits”, jedyne co musisz zrobić to wybrać zakres analizy i użyć przycisku „Run”.

Raport performance w narzędziu Lighthouse

Narzędzie Lighthouse pokaże ci dane na temat szybkości strony, jej dostępności oraz tych związanych z SEO. W przypadku błędów otrzymasz też podstawowe instrukcje ich naprawy lub odesłania do treści które pomogą rozwiązać problem.

Narzędzie jest o tyle dobre, że bazuje na metrykach, które wpływają na wygodę używania strony przez potencjalnego klienta. Będą to na przykład załadowanie się pierwszego ekranu z treścią lub czas, w jakim storna jest gotowa na używanie.

CrUX Dashboard

CrUX Dashboard to prosty raport, jaki możesz wygenerować w Google Data Studio. Co daje ten raport? Pokazuje on, jaka jest szybkość twojej strony na komputerach użytkowników twojej strony.

Google analizuje dane o szybkości ładowania stron za pomocą przeglądarki Chrome. Dzięki temu raportowi jesteś w stanie zobaczyć, jaka jest realna szybkość twojej strony. To nie testy w warunkach laboratoryjnych (wszystkie inne narzędzia tak testują), tylko sprawdzenie, jak twoja strona działa na komputerach twoich realnych użytkowników.

Aby zobaczyć te dane, wystarczy skorzystać z instrukcji od Google. Proces jest dość skomplikowany, na szczęście Google przygotowało film instruktażowy:

Instrukcja generowania raportu CrUX

Jakich narzędzi nie polecam?

W sieci istnieje bardzo dużo narzędzi analizujących proces ładowania wszystkich plików podczas ładowania strony. Najbardziej znanymi ich przedstawicielami będą:

  • GTmetrix
  • Pinhdom FTP
  • narzędzie „Network” w Google Chrome

Narzędzia te mogą bardzo mocno zaniżać ocenę szybkości strony. Wynika to z faktu, że uznają pełne załadowanie strony, gdy przeglądarka wczyta każdy plik i skrypt.

Wyobraź sobie sytuację, gdy twoja strona ładuje się w 1 sekundę i po tym czasie można już z niej korzystać. Ale w ostatnim etapie uruchamia się jeszcze proces ładowania zewnętrznego skryptu (wczytywane są reklamy lub np. Pixel Facebooka).

Realnie, twoja strona załadowała się w jedną sekundę i po tym czasie jest w pełni funkcjonalna. Wyżej wymienione narzędzia jako czas ładowania pokażą czas, gdy wszystkie procesy się zakończą. Reklamy i inne skrypty ładowane w tle mogą się czasem ładować kilkanaście sekund. Oznacza to, że narzędzie uzna to za czas ładowania twojej strony.

Nie twierdze, żeby w ogóle nie używać takich narzędzi, czasem podpowiedzi mogą być naprawdę pomocne. Polecam jednak zwracać uwagę na fakt, jakie skrypty powodują opóźnienia i czy na pewno warto zwracać na nie uwagę.

Jak przyspieszyć stronę? – poradnik krok po kroku

Stronę można przyspieszyć w dwóch obszarach. Po stronie serwera możesz zoptymalizować czas, w jakim serwer wysyła dane z treścią strony. Kilka podstawowych opcji może wpłynąć na poprawę parametru TTFB (Time To first Byte). Jest to parametr określający, w jakim czasie serwer zaczyna wysyłać pliki strony.

Drugi obszar to przeglądarka, to tutaj możesz zdziałać najwięcej. Optymalizacji szybkości będzie podlegało wszystko, co związane z procesem renderowania strony (zamiany kodu na właściwą stronę).

Co można przyspieszyć, po stronie serwera?

Jeżeli chodzi o konfigurację serwera, to niewiele możesz zrobić, dbają o to hostingodawcy. Jedyne, na co możesz zwrócić uwagę to wersja PHP. Dopilnuj, by była wyższa niż 7.1.

Używanie niższych wersji będzie wiązało się o wiele wolniejszym wykonywaniem kodu PHP – serwer będzie powodował opóźnienie. Dlatego jeśli masz wpływ na wybór hostingu – wybierz ten z wersją PHP wyższa niż 7.1.

Oprócz wersji PHP po stronie serwera możesz zrobić jeszcze kilka rzeczy:

Użyj kompresji bezstratnej

Kompresja bezstratna to sposób na „spakowanie” danych na czas transferu między serwerem a przeglądarką. Najbardziej popularne narzędzia, które się tym zajmują, to moduły do Apache (oprogramowanie po stornie serwera): GZIP oraz deflate.

Zasada ich działania jest prosta. Serwer kompresuje dane w niewidoczny sposób podczas transmisji. Przeglądarka odbierająca je – dekompresuje. Kompresja danych może sięgać nawet 75% ich objętości, co znacznie oszczędza transfer — pliki twojej strony szybciej wylądują w przeglądarce potencjalnego klienta.

Jak włączyć kompresję bezstratną na serwerze?

W przypadku serwerów linuksowych (99% hostingów) wystarczy dodać zestaw instrukcji do pliku odpowiedzialnego za kontrolę serwera (.htaccess).

W przypadku, gdy chcesz uruchomić GZIP, dodaj na końcu pliku .htaccess następujący kod:

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

W przypadku, gdy chcesz uruchomić DEFLATE, dodaj na końcu pliku .htacces następujący kod:

<ifModule mod_deflate.c> 
  <filesMatch "\.(js|css)$"> SetOutputFilter DEFLATE </filesMatch>
</ifModule>

Ogranicz kod PHP

Kolejnym sposobem na przyspieszenie reakcji serwera będzie ograniczenie kodu PHP. Co to oznacza? Może się zdarzyć, że serwer analizuje skrypty, które nie są używane, a deweloper zapomniał je wyłączyć.

Typowym przypadkiem tej sytuacji jest używanie dużej ilości wielozadaniowych wtyczek do WrodPress’a. Często zdarza się, że właściciele stron, instalują wielofunkcyjne wtyczki, tylko po to, by skorzystać z jednej z ich funkcji.

Może i korzystasz tylko z jednej funkcji danej wtyczki, natomiast kod PHP odpowiedzialny za pozostałe 100 innych działań tego pluginu, wykonuje się za każdym razem, gdy ktoś trafia na twoją stronę. To jeden z częstszych powodów wolno działających WrdPress’ów — duże liczby wtyczek.

Co z tym zrobić?

Ogranicz ilość wtyczek do minimum, szerokim łukiem omijaj tzw. kombajny (wtyczki od wszystkiego). Czasem warto poświęcić własnego trochę czasu (lub pieniędzy, jeśli nie masz wiedzy), by wprowadzić daną funkcjonalność we własnym zakresie.

Zoptymalizuj kod PHP

Optymalizacja kodu to zadanie dla zaawansowanych właścicieli posiadających własne wdrożenia. Nie da się optymalizować kodu wtyczek czy szablonów WordPress’a — to zadanie dla ich twórców.

Jeśli jednak posiadasz swój autorski szablon na WordPress’ie lub zbudowałeś stronę w innej technologii — jesteś w stanie optymalizować kod, by serwer działał wydajniej.

Optymalizacja polega na przepisywaniu kodu z uwzględnieniem czasu reakcji serwera. W procesie optymalizacji możesz ograniczyć zapytania do bazy danych lub usunąć duże zapętlenia.

Optymalizacja kodu po stronie serwera będzie raczej ostatnią rzeczą, na jaką się zdecydujesz. To trudne zagadnienie i do tego nie zawsze potrzebne czy nawet możliwe. Piszę o tym, żebyś wiedział o istnieniu takiej opcji.

Uzyj cache po stronie serwera

Cache po stronie serwera to poniekąd dobry i szybki sposób, na rozwiązanie wszystkich problemów z ilością oraz jakością kodu. Działanie mechanizmu cachowania jest proste. Pamiętasz co dzieje się gdy użytkownik wchodzi na stronę?

Serwer uruchamia wszystkie funkcje i pobiera dane z bazy danych, by wygenerować kod HTML zrozumiały dla przeglądarki. W normalnych warunkach dzieje się to za każdym razem, gdy ktoś wchodzi na twoją stronę. Jeśli, na twoją stronę wejdzie 100 osób w ciągu minuty, serwer za każdym razem, od nowa wykona wszystkie funkcje.

Sytuacja zmienia się po uruchomieniu cache. Teraz gdy w ciągu minuty, na twoją stronę wejdzie 100 osób, serwer uruchomi wszystkie funkcje tylko raz (dla pierwszej osoby). Podczas gdy pierwsza osoba ogląda stronę, serwer zapisuję zawartość wygenerowanego kodu HTML do swojej pamięci podręcznej.

Aby pokazać tę stronę pozostałym 99 osobom, serwer nie wykonuje już wszystkich niezbędnych funkcji. Po prostu pobiera zawartość statycznego pliku HTML i go wszystkim serwuje.

Takie rozwiązanie znacząco ogranicza zasoby serwera i skraca czas odpowiedzi serwera. Wiąże się z tym jedna wada, każda kolejna osoba zobaczy taką samą treść strony jak osoba, która była odpowiedzialna za wygenerowanie kodu HTML. Dlatego, nie sprawdzi się to w sytuacji gdy strona jest bardzo dynamiczna i każdy użytkownik ma zobaczyć inne treści.

Jak uruchomić cache?

W przypadku większości dostępnych systemów CMS mechanizm cache można uruchomić za pomocą wtyczek lub plugiów. Niektóre z nich mają wbudowane opcje do generowanie cache. Dla WordPress’a będą to następujące wtyczki:

  • WP Super Cache
  • W3 Total Cache
  • WP Rocket 
  • WP Fastest Cache
  • Comet Cache

Wszystkie powyższe pluginy będą działały na podobnych zasadach, ich wybór będzie zależał głównie od rodzaju serwera i potrzeb.

Co można przyspieszyć po stronie przeglądarki?

Wbrew pozorom po stronie serwera dzieje się relatywnie mało. Jeżeli chodzi o przyspieszanie strony, to znacznie więcej można ugrać w działaniu samej przeglądarki. Jako właściciel strony masz na to ogromny wpływ. Oto co możesz zrobić w pierwszej kolejności:

Włącz buforowanie po stronie przeglądarki

Pamiętasz mechanizm cache po stronie serwera? Każda przeglądarka ma bardzo podobną funkcję. Polega to na zapisywaniu potrzebnych plików na dysku użytkownika i wczytywaniu ich po ponownym wejściu na stronę.

Kiedy trafiasz na jakąś stronę pierwszy raz, każdy plik CSS, JS czy grafiki wczytywane są z serwera. Jednak gdy poruszasz się po różnych podstronach, przeglądarka nie pyta od nowa o każdy plik. Te, które były dostępne na innej podstronie, są zapisane na twoim dysku, pobierane są tylko nowe elementy, które nie były wcześniej używane.

Załadowanie pliku z dysku użytkownika podczas używania strony jest znacznie szybsze niż pobieranie ich za każdym razem z serwera. Strona ładuje się o wiele szybciej, a do tego serwer jest odciążony. Dlatego szczególnie polecam stosowanie cache po stronie przeglądarki.

Jak włączyć buforowanie po stronie przeglądarki?

Aby to zrobić, znów musisz edytować plik .htaccess znajdujący się na serwerze. Plik ten zawiera nie tylko instrukcje dla samego serwera, ale także dla przeglądarek pobierających dane z tego serwera. Dodaj na końcu pliku taką instrukcję:

<IfModule mod_headers.c>
  <FilesMatch ".(css|js|jpg|svg|jpg|jpeg|png|webp|gif|)$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>
</IfModule>

Powyższy kod powoduje, że pliki o podanych rozszerzeniach będą zawierały informacje o możliwości zapisania ich na dysku przez przeglądarkę. Parametr max-age oznacza czas, przez jaki przeglądarka może przetrzymywać dany plik i jest to wartość w sekundach. W tym przypadku liczba 31536000 to dokładnie jeden rok.

Zoptymalizuj grafiki

Jednym z największych czynników powodujących obciążenia ładowania strony są grafiki. Wynika to z faktu ich rozmiarów, pliki graficzne w odróżnieniu od tekstowych mogą zajmować nawet bardzo dużo miejsca. Warto poświęcić chwilę na zbadanie tematu i zoptymalizowanie swoich grafik pod kątem szybkości ładowania strony.

Po pierwsze, rozmiar grafik

Nie wielu właścicieli stron zwraca uwagę na rozmiar oraz rozdzielczość wstawianych zdjęć. Deweloperzy też nie dokładają starań, by na przykład uniemożliwić dodawania zdjęć prosto z aparatu — zdjęcie o rozdzielczości 4000 pikseli zajmujące ponad 20 mb nie jest potrzebne na twojej stronie!

Ekran przeciętnego komputera przenośnego ma szerokość koło 1300-1400 pikseli. Utarło się, że strony powinny być zaprojektowane na szerokość 1200 lub 1440 pikseli. Po co większe pliki? Nawet jeśli zastosujesz rozdzielczość 1080 (szerokości), takie zdjęcie będzie bardzo dobrze wyglądało na stronie, nie ma sensu dodawać większych grafik.

Zdjęcie, które zajmuje 20 mb, może zostać zmniejszone do rozmiaru 0,5 mb, bez żadnej utraty jakości. Skorzystają na tym wszyscy, użytkownik, serwer i transfer. Pomyśl, jak twoja strona może przyspieszyć, jeśli w tej chwili masz na niej kilkanaście takich zdjęć. Istnieją strony, które zajmują nawet po kilkadziesiąt megabajtów, samo ograniczenie rozmiaru zdjęć może zmniejszyć ich rozmiar do kilku megabajtów.

Po drugie, odpowiednie użycie grafik

Zdarza się, że jedna grafika pojawia się w kilku miejscach na stronie. Czasami będzie to duży banner, a czasami mała miniaturka. Każde z tych użyć powinno mieć dedykowaną grafikę.

Ładowanie pliku dużej rozdzielczości dla wygenerowania małej miniaturki jest marnowaniem zasobów. Po pierwsze przeglądarka musi pobrać duży plik, następnie musi jeszcze go wyskalować — to też zajmuje czas oraz zasoby procesora.

Zamiast używać jednej grafiki, lepiej jest przygotować kilka w zależności od przeznaczenia lub miejsca, w którym się będą znajdować. Na szczęście większość systemu CMS robi to za ciebie, wystarczy pamiętać o tej funkcji.

Po trzecie, odpowiedni format grafiki

Istnieje wiele formatów grafik, najbardziej popularne to JPG, PNG, oraz SVG. Każdy z nich nadaję się do nieco innych elementów graficznych.

  • JPG jest zoptymalizowany do zdjęć. Pliki JPG są stratnymi plikami rastrowymi, co oznacza, że ​​tracą niewielką ilość informacji za każdym razem, gdy plik JPG jest zapisywany. Pliki JPG działają z kompresją kolorów, dzięki czemu świetnie nadają się do zdjęć. Zmniejszenie rozmiaru pliku powoduje obniżenie jakości obrazu.
  • PNG został zaprojektowany do użytku w internecie i jest najczęściej używanym formatem kompresji obrazu w sieci. format PNG to grafika rastrowa i został wprowadzony jako ulepszenie do formatu GIF. Pliki PNG działają dobrze z obrazami graficznymi generowanymi na potrzeby internetu. Niestety, mogą powodować naprawdę duże rozmiary plików. Dużą zaletą formatu PNG jest obsługa kanału alfa, co oznacza, że ich tło może być przezroczyste.
  • SVG to grafika wektorowa, która obsługuje także animację. Grafika wektorowa doskonale nadaje się na przykład na logo oraz inne geometryczne kształty. Pliki SVG nie są wykonane z pikseli i można je skalować w nieskończoność, do tego bez utraty jakości lub zwiększenia rozmiaru pliku. Pliki SVG są najlepszą opcją przy tworzeniu ikon i grafiki liniowej dla wyświetlaczy o wysokiej rozdzielczości.

Warto trzymać się powyższych zastosowań, pomoże to oszczędzić kolejne kilobajty danych. Na przykład, duże zdjęcie zapisane w formacie PNG może zajmować kilkanaście mb, podczas gdy zapisanie go w formacie JPG zredukuje ten rozmiar do nawet 0,5 mb — pamiętaj o tym!

Po czwarte, Lazy Load

Lazy load to technika polegająca na ładowaniu grafik dopiero gdy te są potrzebne. Działa to tak, że jeśli strona wymaga scrollowania, to grafiki dostępne poniżej pierwszego ekranu (viewport) nie załadują się od razu.

Dopiero gdy użytkownik zaczyna scrollować stronę w dół, grafiki doładowywują się chwilę przed tym, jak będą potrzebne.

Zasada działania Lazy Load

Co z wideo na stronie?

Ogólnie nie polecam stosowania wideo, zwłaszcza na pierwszym ekranie po wejściu na stronę. Wideo w tle header’a strony to performancowe zabójstwo dla strony. Oczywiście możesz używać filmów na stronie, polecam jednak dodawanie ich za pomocą serwisów do hostowania takich jak Youtube czy Vimeo. Jak pewnie zauważyłeś, zrobiłem tak w tym wpisie.

Używaj wideo tylko wtedy jeśli daje ono wartość użytkownikowi. Przykładem takiego wideo jest film wyjaśniający trudny produkt (tzw. explainer wideo), który pomoże użytkownikowi zrozumieć twoje rozwiązanie. Natomiast używanie Wideo, tylko żeby było „ładnie” jest raczej nietrafionym rozwiązaniem, zwłaszcza jeżeli większość twojego ruchu pochodzi z urządzeń mobilnych.

Optymalizacja plików CSS oraz JS

Optymalizacja plików CSS oraz JS to duża część procesu przyspieszania ładowania strony. To one odpowiadają za wygląd (CSS) oraz różne funkcjonalności (JS) twojej strony. Zadbanie o kilka podstawowych zasada z ich używaniem może znacząco wpłynąć na odczuwalną prędkość strony.

Zminifikuj kod

Zarówno CSS, jak i JS można minifikować, znacząco zmniejszając ich rozmiar. Co to oznacza? W najprostszym wyjaśnieniu proces minifikacji to usunięcie zbędnych spacji oraz znaków nowej linii. Zarówno znak spacji, jak i znak nowej lini są zwykłymi elementami kodu — jednym słowem zajmują zbędne kilobajty danych. Dlatego ich usunięcie zmniejsza rozmiar pliku, do tego przeglądarce znacznie łatwiej czytać taki kod.

Zwykła i zminifikowana wersja kodu CSS

Oczywiście nie musisz robić tego ręcznie, istnieje wiele narzędzi online, które to wykonują. Jeśli jesteś użytkownikiem WordPressaa, polecam wtyczkę Autoptimize, która zrobi to w pełni automatycznie.

Połącz pliki CSS oraz JS

Prawdopodobnie, twoja strona korzysta z kilku plików CSS oraz kilku plików JS. Może to być spowodowane na przykład dodawaniem różnych wtyczek czy modułów, które generują własny kod CSS czy JS.

Warto zminimalizować ilość plików CSS oraz JS przez ich połączenie w jeden zbiorczy plik CSS oraz jeden zbiorczy plik JS. Przełoży się to na szybkość przesyłania (łatwiej przesłać jeden większy plik niż kilkanaście mniejszych) oraz ograniczy zasoby przeglądarki, która będzie miała tylko jeden plik do obsługi.

Łączenie plików CSS oraz JS

Łącznie plików można zorganizować już na etapie wdrażania strony (musi to zrobić developer) lub za pomocą wspomnianej wcześniej wtyczki Autoptimize, która pomoże połączyć pliki CSS oraz JS w dwa zbiorcze pliki CSS i JS.

Ładuj pliki CSS/JS możliwie najpóźniej

Duża część stron umieszcza wszystkie pliki CSS oraz JS w sekcji HEAD dokumentu HTML. Oznacza to tyle, że instrukcje zawarte w tych plikach ładują się wcześniej niż właściwa treść strony. Takie podejście może powodować prezentowanie treści strony z opóźnieniem.

Pliki JS powinny być ładowane na końcu dokumentu HTML, są one potrzebne, dopiero gdy strona działa i ma już swój wygląd. Wcześniejsze ich załadowanie może jedynie opóźnić pokazanie istotnej dla użytkownika treści.

W przypadki CSS najlepiej by było zrobić tak samo i umieścić pliki ze stylami tuż przed plikami JS. Może to jednak spowodować, że podczas pierwszego uruchomienia strony użytkownik zauważy przez chwilę nieostylowaną stronę.

Nie jest pożądany efekt, dlatego dobrą praktyką jest przeniesienie do części HEAD strony styli odpowiedzialnych za pokazanie pierwszego ekranu (Above the Fold styles). Dzieki temu mała ilość kodu CSS znajduje się na początku strony, reszta potrzebna poźniej — dopiero po załadowaniu treści.

Przykład dokumentu HTML, może wyglądać nastepująco:

<!doctype html>

<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Tytuł strony</title>
  <style>
    /* Kod CSS potrzebny do ostylowania pierwszego ekranu strony */
  </style>
</head>

<body>
  <header>
    <h1>Nagłówek strony</h1>
  </header>
  <section>
    <p>Treść strony...</p>
  </section>

  <!-- Jeden plik zawierający zminifikowany kod CSS -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Jeden plik zawierający zminifikowany kod JS -->
  <script src="js/scripts.js"></script>

</body>
</html>

Zoptymalizuj jakość kodu CSS/JS

O optymalizacji kodu pisałem już w części poświęconej serwerowi i optymalizacji kodu PHP. Kod CSS oraz JS też może zostać zoptymalizowany.

W przypadku CSS możesz sprawdzić, czy na pewno potrzebujesz wszystkich instrukcji dotyczących stylowania elementów strony. Bardzo często zdarza się trzymanie kodu odpowiedzialnego za wygląd elementów, których nie ma na stronie. Po co więc marnować zasoby i dodawać ten kod?

Kod JS zawiera wiele funkcji dotyczących dynamicznych funkcji strony. Możliwe, że nie wszystkie te funkcje są wykorzystywane. Warto się nad tym zastanowić i pozbyć się niepotrzebnych linii kodu.

Optymalizacja kodu nie jest rzeczą prostą, będziesz sięgać po ten krok zazwyczaj tylko wtedy, będziesz potrzebował maksymlanie szybkiej strony.

Ogranicz łańcuchy przekierowań

Przekierowania mają miejsce, gdy zmieniłeś adres jednej (lub wielu) podstrony i za pomocą serwera przenosisz użytkownika do nowego, aktualnego adresu. Przekierowania używa się też przy wdrażaniu certyfikatu SSL czy wybierania jednej wersji adresów (z przedrostkiem www lub bez).

Przekierowania są istotne, bo pomagają użytkownikom (oraz robotom Google) trafić na aktualne adresy podstron. Jednak gdy zmieniasz ten adres wiele razy, może powstać łańcuch przekierowań, wyobraź sobie taką sytuację:

  • strona (pierwotna) A kieruje do nowej wersji — adresu B,
  • adres B też zostaje zmieniony i ponownie przekierowany na kolejną stronę o adresie C,
  • Po pewnym czasie strona C zostaje ponownie przekierowana na adres D.

Jeśli nie zadbasz o przekierowania we właściwy sposób, osoba która zna tylko adres A, zostanie przekierowana wg schematu: A -> B -> C -> D.

Takie rozwiązanie jest bez sensu z punktu widzenia technologicznego oraz szybkości strony. Użytkownik musi czekać, aż wszystkie przekierowania się wykonają — a to cenny czas. Zamiast tego, przekieruj użytkownika od razu na właściwą stronę, czyli:

  • osoby ze strony A od razu do D,
  • osoby ze strony B od razu do D,
  • osoby ze strony C do D,

Nie ważne, który z adresów zostanie wpisany w przeglądarkę, użytkownik trafi na właściwy adres za pomocą jednego przekierowania.

Zacznij używać CDN

CDN (Content delivery network) to rozproszona sieć szybkich serwerów znajdujących się w wielu miejscach na świecie. Jeśli podłączysz stronę do takiej sieci, pliki statyczne (grafiki, CSS, JS) będą hostowane na wielu serwerach i dostępne znacznie szybciej.

Mapa serwerów CDN sieci CloudFlare

Takie podejście pozwala na maksymalne przyspieszenie serwowania plików graficznych oraz skryptów. Nawet w przypadku awarii takiego serwera, inny przejmie jego rolę i użytkownik nie zauważy braku grafik na stronie.

Podsumowanie

Szybkość strony to rzecz bardzo ważna. Szczególnie na stronach, które mają na celu sprzedaż produktów czy usług. Możesz stracić potencjalnego klienta tylko dlatego, że Twoja strona ładuje się za wolno.

Jeśli inwestujesz już w jakąkolwiek formę promocji swojej firmy w sieci, nie pozwól, by szybkość twojej strony była powodem mniejszego zwrotu z inwestycji.