Jak przyspieszyć stronę internetową? – Sprawdzone metody

Wstęp

Czas to pieniądz. Czas ładowania strony też. Tak więc jak przyspieszyć stronę internetową? Zadbaj o kompresję obrazków i ich poprawną rozdzielczość, a następnie zastosuj mechanizm cache. Jeśli chcesz znacząco przyspieszyć swoją stronę przeczytaj artykuł do końca.

Czemu powinno mnie to interesować?

Jest godzina 19:35. Na godzinę 20:00 zaprosiłeś/aś swojego małżonka i teściów, z którymi ostatnio mocno się pokłóciłeś, na kolację w znanej włoskiej restauracji. Właśnie dostałeś telefon informujący Cię o tym, że w wyniku awarii prądu w knajpie wasza rezerwacja została anulowana! Zdenerwowany szybko wyciągasz telefon i wpisujesz w wyszukiwarkę “Najlepsza włoska restauracja Warszawa”. Mocno zestresowany otwierasz pierwszą stronę, minęły 2 sekundy, ale wydaje Ci się, że to wieczność, a na ekranie dalej nic nie ma! Szybko rezygnujesz z tej restauracji i wybierasz kolejną z listy. Jest lepiej, strona załadowała się od razu! Przewijasz stronę w poszukiwaniu numeru telefonu, szybko namierzasz go wzrokiem, ale nagle BAM! Ładuje się reklama i cała strona przeskakuje o parę centymetrów niżej, w wyniku czego numer ucieka ci sprzed oczu. Rzucasz pod nosem przekleństwem i znów wychodzisz do wyników wyszukiwania Google. Wybierasz kolejną pozycję z listy – strona ładuje się w przeciągu sekundy i nic nie przerywa Twojej interakcji. Prędko znajdujesz numer telefonu, składasz rezerwację (na szczęście jest wolny stolik!) i dzwonisz do swojego małżonka i teściów by poinformować ich o nieznaczącej zmianie planów. Czy ostatnia restauracja była lepsza? Może tak, może nie, to subiektywne. Natomiast jej strona załadowała się najszybciej i właśnie to było kluczowe
Oczywiście jest to przykład skrajny, natomiast dobrze ilustrujący to, że długi czas oczekiwania na stronę rodzi u odwiedzających frustrację i zmniejsza szansę na wybranie Twoich usług (źródło – Cloudflare). Użytkownik z każdą sekundą oczekiwania jest coraz mniej skłonny by pozostać na stronie, kupić Twój produkt, zapisać się do newslettera, bądź umówić na wstępną konsultację.

Jak sprawdzić prękość mojej strony?

Świetnym i prostym w obsłudze narzędziem do sprawdzenia prędkości swojej strony jest PageSpeed Insight od Google. Wystarczy wejść na pagespeed.web.dev (Rys. 1) i w polu tekstowym wpisać adres strony i kliknąć “Analyze”.

W chwila moment otrzymamy raport o czterech kluczowych aspektach naszej strony, w tym o jej prędkości.(Rys. 2)
Interesuje nas metryka Performance. Każdy wynik poniżej 70% powinien być traktowany jako niewystarczający.

Przyjrzyjmy się bardziej szczegółowym zmiennym. First Contentful Paint (FCP) informuje nas o tym w jakim czasie, od wpisania adresu Twojej strony i kliknięciu Enter, na ekranie pojawi się cokolwiek. Google uważa za dobry wynik każdy poniżej 1.8 sekundy.
Starszym bratem FCP jest Largest Contentful Paint – mówi o tym ile trzeba czekać na załadowanie całości strony, łącznie z reklamami, popup’ami, banerami informującymi o plikach Cookies itd. Google uważa za dobry wynik każdy poniżej 2.5 sekundy.
Ostatnią metryką, której się przyjrzymy będzie Cumulative Layout Shift(CLS). Przypomnijcie sobie historię z początku wpisu. Próbowaliśmy znaleźć na stronie informację o numerze kontaktowym do restauracji, natomiast układ strony nagle przeskoczył w dół za sprawą pojawienia się reklamy. Wartość CLS opisuje nam jak znacząco zmieniało się położenie elementów na stronie podczas jej ładowania. Dla ciekawych tego jak oblicza się tę wartość odsyłam do tego artykułu, natomiast reszcie powiem tylko, że CLS nie powinien przekroczyć poziomu 0.1 punktu.
Ciekawostka! Możliwe, że zauważyliście, że niektóre wartości nie zgadzają się z waszą intuicją. Być może PageSpeed stwierdziło, że czas First Contentful Painting wynosi 5, 10, a może i nawet 15 sekund kiedy jesteście pewni, że w rzeczywistości wynosi on o wiele mniej. Dzieje się tak ponieważ Google testuje strony na leciwych urządzeniach podpiętych do wolnego łącza internetowego. Chodzi o to by zmusić programistów do dostosowania swoich stron dla wszystkich użytkowników.

Jak łatwo przyspieszyć swoją stronę?

Jeśli zjedziecie w dół raportu PageSpeed zobaczycie, że przedstawia on szereg usprawnień (rys. 3), które należy wprowadzić. Są to w większości skomplikowane poprawki, które ciężko wprowadzić bez specjalistycznej wiedzy.

Całe szczęście istnieją 2 sprawdzone sposoby, które prawie w każdym przypadku znacząco przyspieszają stronę. Co więcej do ich wprowadzenia jest potrzebna tylko minimalna sprawność techniczna. Tak więc jeśli byłeś w stanie otworzyć ten artykuł będziesz też w stanie zastosować te metody! Gdyby raport PageSpeed był pisany nie przez algorytm, a przez człowieka, to ów człowiek zapewne umarł by z nudów wystawiając w kółko i w kółko to samo zalecenie – skompresuj obrazki, oraz zmniejsz ich rozdzielczość! Zanim wrzucisz na swoją stronę jakiekolwiek zdjęcie najpierw skompresuj je. Polecam do tego darmowe narzędzie compressor.io. Wystarczy na ekran przeciągnąć obrazek, który chcemy skompresować, potem wcisnąć “Download”. Następnie skompresowany obrazek należy przyciąć do odpowiednich rozmiarów, np. używając iloveimg.com. Baner na całą szerokość ekranu nie powinien być większy niż 1500px na 1200px, duże zdjęcie w sekcji nie większe niż 800px na 500px, a zdjęcia osób używane w sekcjach takich jak “Nasz zespół”, czy “Opinie” nie większe niż 100px na 100px. Oczywiście są to wartości orientacyjne, jeśli zauważycie, że po wgraniu zdjęcie jest trochę niewyraźne, oryginał przytnijcie trochę łagodniej. Kompresja, oraz zmiana rozmiaru obrazków powinna znacząco podnieść metrykę Performance. Kolejną sztuczką, którą możecie zastosować jest wprowadzenie cachingu. Normalnie kiedy ktoś chce dostać się na waszą stronę, to ta za każdym razem zastanawia się w jakiej postaci powinna się wyświetlić. Pobiera informacje o członkach zespołu, których dodałeś, a z bazy danych artykuły z Twojego bloga itd. To zajmuje czas. Dzięki cache co jakiś czas tworzona jest kopia, a raczej “zrzut ekranu” Twojej strony. Dzięki temu witryna nie musi “tworzyć się na nowo” za każdym razem gdy ktoś próbuje na nią wejść, po prostu wysyła do użytkownika ostatnią kopię. Jeśli Twoja strona jest na WordPress to przejdź do panelu admina, oraz zainstaluj wtyczkę WP Fastest Cache. Włącz ją, oraz zaznacz następujące opcje: “Cache system”, oraz “Browser caching”. Jeśli zaś Twoja strona nie używa systemu CMS możesz spróbować skorzystać z tego poradnika. W wypadku gdy powyższe zmiany nie przyniosły oczekiwanego skutku, bądź czujesz się niepewnie z ich wprowadzeniem, serdecznie polecam skontaktowanie się z nami przez maila, telefon, bądź formularz kontaktowy na dole strony. W ciągu dwóch dni zoptymalizujemy Twoją stronę tak by osiągała wyniki 85+ we wszystkich czterech metrykach.

Zakończenie

Bardzo dziękuję za przeczytanie tego artykułu, mam nadzieję, że był pomocny. W wypadku jakichkolwiek pytań serdecznie zachęcam do kontaktu.

Zobacz wszystkie wpisy