Jak przyspieszyć ładowanie strony www?

Poznaj sześć najważniejszych zasad, które w znaczący sposób pomogą Ci przyspieszyć ładowanie Twojej strony.

25 stycznia 2020

Jak przyspieszyć ładowanie strony www?

Dowiedz się jak przyspieszyć

Twoją stronę www

Szybki hosting

Czasy reakcji i odpowiedzi serwera, na którym umieszczona jest strona są kluczowe dla szybkiego jej ładowania. Wybierając hosting – nie kierujmy się wyłącznie ceną. Z drugiej strony nie oznacza to, że hosting musi być bardzo drogi – do każdej strony trzeba indywidualnie przemyśleć i dobrze dobrać rozwiązania hostingowe. Cel, który ma spełniać strona internetowa powinien pomóc nam w wyborze odpowiedniego rozwiązania – dla prostej wizytówki najlepiej sprawdzi się hostowanie na sieci CDN – dla sklepów internetowych odpowiednio skonfigurowany serwer VPS.

TTFB – to czas liczony od wysłania przez klienta zapytania do serwera WWW do momentu odebrania pierwszego bajtu danych. Optymalnie powinien on być krótszy niż 300ms.

Optymalizacja zdjęć i grafik

Prawidłowe przygotowanie i osadzenie grafik i zdjęć pozwoli nam czasem zaoszczędzić 80–90% ich rozmiaru. Mniejszy rozmiar = szybsze ładowanie. Częstym błędem jest używanie dużych zdjęć w małym formacie – tzn. użytkownikowi prezentujemy zdjęcie rozmiaru 100x100px, a w rzeczywistości jego przeglądarka pobiera oryginalny plik o rozmiarze 1000x1000px lub większym.

Utworzenie Critical CSS

Pliki CSS generowane przez systemy CMS lub generatory HTML są czasem są bardzo duże – a do załadowania pierwszych widocznych fragmentów strony nie nie jest konieczne załadowanie ich w całości. Wyodrębnienie i załadowanie krytycznego CSS – Critical CSS – czyli tej części kodu, która odpowiada za formatowanie pierwszej części strony, może znacząco przyspieszyć czas, po którym użytkownik zobaczy pierwsze fragmenty naszej strony w przeglądarce.

W znaczący sposób skróci to parametr FCP (First Contentful Paint) – czyli czas, po którym w przeglądarce użytkownika pojawiają się pierwsze elementy naszej strony. Odpowiednia implementacja krytycznego CSS potrafi poprawić czas FCP o ponad 100%!

Ładowanie plików JS – JavaScript

Nie wszystkie pliki Javascript muszą być ładowane w pierwszej kolejności. Odpowiednia hierarchia i rozłożenie pobierania ich w czasie przyspieszają ładowanie strony dla użytkownika. Ważne jest umiejętne korzystanie z możliwości ładowania asynchronicznego – async oraz defer. Pozwól użytkownikowi załadować stronę w pełni, a dopiero później niech uruchomią się odpowiedniego skrypty.

Wykorzystaj CDN

Kluczowe jest również efektywne wykorzystanie CDN – czyli Content Delivery Network – sieci która dostarcza pliki użytkownikowi z najbliższej dla niego lokalizacji. Odciąża to również nasz serwer oraz zapewnia szybsze ładowanie po stronie użytkownika. Przykładowo jeśli na stronie ładujesz 10 zdjęć, to jest 10 dodatkowych żądań, które musi wykonać Twój serwer. W tym samym czasie może obsłużyć pilniejsze zapytania, a sieć CDN dostarczy użytkownikowi zdjęcia w sposób „równoległy”.

Zawsze używaj obsługi cache dla stron dynamicznych

Użycie cache – strony postawione np. na WordPress są generowane każdorazowo przez serwer. Oznacza to, że serwer zanim „wyśle” nam gotową stronę – musi ją sobie „złożyć”. Dzięki użyciu cache zapisujemy tak wygenerowane strony i dostarczamy je użytkownikowi bez ponownego „składania”. W ogromny sposób przyspiesza to TTFB – czyli czas pierwszej odpowiedzi serwera.

Oczywiście część stron będzie generowana w sposób dynamiczny – np. strona zawartości koszyka lub formularz podsumowujący zamówienie. Jest to jednak bardzo mały procent w udziale całkowitych wyświetleń sklepów internetowych.

Na jednym ze sklepów, które obsługuję wyświetlenia koszyka to ok. 0,44% całkowitych wyświetleń. Strony związane z zamówieniami generują ok. 0,98% wyświetleń. Dodajmy do tego wyświetlenia wyników wyszukiwania – 6,38% oraz strony po odfiltrowaniu parametrów ustawionych przez użytkownika w ilości 1,11%. W sumie da na to wartość – 8,91% co oznacza, że 91,09% ruchu użytkownicy strony odczytują z utworzonych wcześniej stron w cache.

Prawidłowa implementacja pozwoli Ci w olbrzymim stopniu poprawić prędkość ładowania strony dla Twoich użytkowników oraz odciążyć swój serwer.