Na prędkość ładowania strony internetowej wpływają dziesiątki, jak nie setki różnych aspektów. Istnieje zatem wiele sposobów i dobrych praktyk przyspieszenia strony – poruszymy najważniejsze z nich.
Czas ładowania strony ma znaczenie
Szybko ładująca się strona zachęca do „klikania”. Interakcja z serwisem staje się płynna i po prostu przyjemna, gdyż nie ma się wrażenia tracenia czasu by wyszukać interesujące nas informacje. W dobie ciągłego pośpiechu niewielu użytkowników skupia się na czytaniu wszystkiego na ekranie „od deski do deski”. Zdecydowana większość pobieżnie przegląda stronę wyszukując w ten sposób głównych, istotnych informacji, które same rzucą się w oko. Jeśli na stronę trzeba czekać, to tak jakby jej nie było… a jak jej nie ma, to trzeba szukać innej, szybszej, lepszej.
Dlatego też, jeśli chcesz utrzymać użytkowników (i tym samym osiągnąć odpowiednio wysoki poziom konwersji) należy wpasować się w to wysokie tempo lub przynajmniej próbować za nim nadążyć ze swoją stroną. Każde spowolnienie strony odbija się negatywnie na potencjalnych klientach / użytkownikach serwisu.
Google przeprowadziło badania, w których potwierdzono, że już 0.5 sec opóźnienia w czasie ładowania serwisu jest w stanie zmniejszyć ilość użytkowników nawet o 20%.
# 1. Wybierz odpowiedni hosting
Dobry hosting rzadko kiedy jest tani. Tani natomiast, rzadko kiedy bywa dobry. Oczywiście możemy iść na kompromisy i wybrać opcję pośrednią, ale wybierając hosting dla naszego serwisu powinniśmy się kierować przede wszystkim:
- realnymi potrzebami uruchamianego systemu – czy jest to Twoje rozwiązanie, a może opierasz się o jakiś framework lub gotowy system zarządzania treścią?
- niezbędną wydajnością serwerów – zastanów się, jakiej wydajności serwera hostingowego w gruncie rzeczy potrzebujesz? Jeśli Twój serwis nie może być uruchomiony w oparciu o serwery współdzielone rozważ skorzystanie z rozwiązań w chmurze, serwera dedykowanego lub serwera VPS. Pamiętaj jednak, że nie wystarczy uruchomienie serwera, by działał on dobrze i stabilnie – w tym przypadku musisz liczyć się z administracją serwerem. Oczywiście nie musisz robić wszystkiego samodzielnie – możesz też skorzystać z usług opieki serwerowej, gdzie to profesjonaliści będą dbać o prawidłową kondycję Twojego serwera.
- lokalizacją serwerów – im bliżej naszych użytkowników (pod względem infrastruktury serwerowej) tym lepiej
- ceną – oczywiście
# 2. Dobrze przemyślany projekt
Jeśli ciągle jesteś na etapie projektowania swojego serwisu – to przyłóż się jeszcze bardziej! Uwzględnij ten fragment strony, który użytkownik będzie „widział” na swoim ekranie jako pierwszy i zbuduj go tak, aby to, co zobaczy załadowało się praktycznie natychmiastowo. To poprawi pierwsze wrażenia użytkownika i zachęci do kolejnych kliknięć.
# 3. Wykorzystaj cache przeglądarki
Tak, tak… nic nowego – cache przeglądarki. Jednak mimo to, jest to jeden z najczęściej pomijalnych aspektów optymalizacyjnych serwisów WWW. Ustaw odpowiednie header’y (expires, Cache-Control, Pragma) i odpowiadające im wartości. Nie ma tutaj z góry określonych standardów, które każdy powinien używać na swoim serwisie. Zazwyczaj jednak stosuje się maksymalnie długi czas życia cache dla treści statycznych takich jak obrazki lub pliki do pobrania (które praktycznie nie zmieniają się). Treści dynamiczne (html) także można cache’ować. Przykładowo – gdy prowadzimy serwis z artykułami, które tworzymy / wrzucamy np. raz dziennie. Wówczas wystarczy jak ustawimy cache np. na 6h.
# 4. Użyj serwerów CDN
Skrót CDN oznacza Content Delivery Network – czyli sieć za pośrednictwem, której możemy dostarczyć użytkownikom konkretne treści. Wykorzystanie CDN pozwoli odciążenie serwera WWW, a więc ostatecznie przyspieszenie serwisu. Mechanizm działania serwerów CDN przyjmuje najczęściej dwie formy:
- pośredniczące CDN – są to sieci / usługi, które pośredniczą w połączeniach do Twojego serwisu jednocześnie pozwalając na wykorzystanie własnego rozproszonego systemu cache. Zazwyczaj serwery takiej sieci są rozmieszczone na całym świecie, co skraca fizyczną odległość między użytkownikiem serwisu a serwerem WWW – co oczywiście skraca czas nawiązywania połączenia, a więc wpływa na szybkość. Jedną z zalet takiego rozwiązania jest to, że nie musimy wywracać do góry nogami całej architektury naszego serwisu – wystarczy przeprowadzić podstawową konfigurację, aby móc skorzystać z takiej sieci i wykorzystać ją np. do cache’owania wszystkich plików graficznych w naszej galerii. Wśród dostawców tego typu usługi prym wiedzie CloudFlare, gdzie już w darmowym pakiecie dostajemy dostęp do całej sieci CDN, możliwości cache’owania praktycznie dowolnych obiektów a także darmowy transfer.
- CDN niezależne – w tym przypadku sieć działa zupełnie niezależnie od serwisu. Sami decydujemy co wrzucamy „do sieci”, gdzie jest przetrzymywane, jak cache’owane, jak i pod jakim adresem udostępniane. Musimy też pamiętać o odpowiednim zaimplementowaniu tego rozwiązania w naszym serwisie. Przytoczony wyżej przykład z galerią też będzie możliwy do zaimplementowania, ale już sami będziemy musieli przerobić naszą galerię tak, aby pokazywane obrazki serwowała z odrębnego adresu internetowego naszego CDN. Do tej grupy CDN zalicza się między innymi usługa AWS S3 – dostajemy w pełni niezależne środowisko, praktycznie nieograniczoną przestrzeń dyskową, transfer, zaawansowane zarządzanie itp. Jedyny minus – trzeba za wszystko płacić… od transferu, poprzez zużytą przestrzeń na ilości żądań skończywszy.
#5 Użyj asynchronicznego ładowania skryptów JS oraz plików CSS
Nie wystarczy ładować mniej skryptów i stylów. Oczywiście – to pomaga, ale kluczem może być też ładowanie ich w odpowiedniej kolejności, z odpowiednim opóźnieniem lub za pomocą dodatkowych bibliotek obsługujących modularyzację kodu JS.
# 6. Zmniejsz wagę ładowanych zasobów
W czasach szybkiego internet i niemal darmowych danych mobilnych waga zasobów ściąganych z serwera podczas wyświetlania jakiejkolwiek strony może się wydawać, że nie ma znczenia. Oczywiście – ma. Miejsze pliki ściągają się po prostu szybciej. Co za tym idzie szybciej ściągnięty plik (np. javascript) będzie szybciej wykonany. Przeglądarka otrzyma wynik szybciej więc czas oczekiwania na wyświetlenie strony ulegnie znacznemu pomniejszeniu przyspieszając w ten sposób odbiór całego serwisu.
Warto zwrócić tutaj uwagę na zakładkę Coverage w Chrome DevTools. W ładny sposób przedstawia załadowane i uruchomione zarówno style jak i javascripty w danym widokdu.
# 7. Zmniejsz ilość ładowanych zasobów
Mimo, iż wprowadzenie protokołu http2 przyspieszyło nam obrót spraw w kwestii problemów związanych z ilością requestów wysyłanych do pobrania pojedynczej strony, to jednak w dalszym ciągu pozostaje aktywna stara zasada – im mniej żądań (np. style. skrypty, dodatkowe pliki itp.) – tym po prostu lepiej.
Sprawdź czy jest możliwe zróżnicowanie ładowania zasobów zależnie od rodzaju podstrony – np. na stronie głównej serwisu (np. informacyjnego) raczej mało prawdopodobne jest, że będzie potrzebny kod dotyczący ładowania i obsługi galerii zdjęć z pojedynczego artykułu. A jeśli tak – to może nie warto go w ogóle ładować w tym widoku i rozdzielić główny plik z funkcjami JS?
# 8. Zminimalizuj czas pierwszego bajta odpowiedzi serwera (TTFB)
TTFB – to Time To First Byte – czyli czas od wysłania żądania przez przeglądarkę do pierwszego bajta odpowiedzi. Należy dążyć do jego minimalizacji. Czasami nawet za cenę mniej kluczowych funkcjonalności. Im krótszy TTFB tym strona działa „płynniej” – czyli użytkownik nie odczuwa efektu oczekiwania na reakcję przeglądarki po kliknięciu w jakiś odnośnik.
Im krótszy czas – tym lepiej. W tym celu warto zastosować optymalizację w postaci serwerów CDN z dodatkowym cache’m. Wszystko po to, by użytkownicy otrzymywali już wygenerowane treści strony (cache) i z serwerów sieciowo (i zazwyczaj geograficznie) im bliższych.