Przyspiesz stronę: zoptymalizuj ładowanie, zmniejsz pliki oraz popraw UX, by zwiększyć SEO i konwersje.
Thomas Haurum
Czy jest coś bardziej frustrującego, niż trafienie na bardzo powolną stronę? Raczej nie.
Nasza cierpliwość jest ograniczona, gdy szukamy informacji lub produktów online. Jeśli strona ładuje się zbyt wolno – przechodzimy dalej.
Wolne strony to same problemy. To zła perspektywa dla użytkownika oraz właściciela strony: ryzykujesz utratę zamówień, a Google rejestruje szybkie opuszczanie witryny przez odwiedzających.
Jak temu zapobiec? Kluczowe jest postawienie na optymalizację szybkości.
Optymalizacja prędkości to złożona dziedzina łącząca wiedzę teoretyczną i praktyczną. Dlaczego teraz temat jest tak ważny?
W miarę jak Google udoskonala swój algorytm, szybkość strony zyskuje na znaczeniu. Ostatnio ogłoszono, że prędkość ładowania to bezpośredni czynnik rankingowy. Zlekceważysz temat – Google to odnotuje.
Szybkość ma też ważną funkcję natychmiastową – zadowolić użytkownika. Badania pokazują, że zyskujesz lub tracisz użytkownika w pierwszej sekundzie. Strona, która ładuje się wolniej niż sekundę, oznacza:
To naprawdę proste: prędkość ładowania wpływa na UX, współczynnik konwersji i wynik finansowy.
Krótko mówiąc: nie ma już wymówek. Zadbaj o szybkość strony! Jeśli chcesz osiągnąć cokolwiek online, to konieczność.
W tym wpisie przedstawię najważniejsze fundamenty szybkiej strony.
Najpierw sprawdź, jak działa Twoja strona. Dostępnych jest wiele narzędzi do analizy i diagnozy (np. GTmetrix). Narzędzie to jest darmowe, czytelne i intuicyjne. Ocenia stronę w skali 1-100, a także wskazuje parametry wymagające poprawy.
Proces optymalizacji zależy od budowy strony i Twoich umiejętności technicznych. W większości CMS-ów znajdziesz wtyczki ułatwiające optymalizację bez programisty.
Większość stron ma typowe miejsca do poprawy. Oto one.
Wtyczki to doskonałe narzędzia, które mogą usprawnić wygląd i funkcjonalność. Niestety, zbyt wiele wtyczek to typowy powód wolnego działania witryny. Im więcej wtyczek, tym więcej plików musi obsłużyć przeglądarka. To one najbardziej spowalniają stronę. Na jakość także trzeba uważać – słabe wtyczki to ryzyko bezpieczeństwa i także wolniejsze ładowanie.
Zainstaluj tylko niezbędne narzędzia. Unikaj zbędnych „bajerów”.
Podstawowa czynność – zawsze kompresuj grafiki. Dwa aspekty: rozmiar (wysokość/szerokość) i kompresja (KB/MB). Oba są ważne i należy je stosować razem.
Przycinanie
Zastanów się, gdzie chcesz wykorzystać obraz. Jeśli na sliderze – dopasuj rozmiar. Jeśli nie znasz wymiarów, możesz:
Zobaczysz rzeczywisty rozmiar i wymiary wyświetlane w danym miejscu (wstaw obrazek). Dzięki temu dostosujesz wymiary pliku.
Kompresja
Dużo osób nie chce tracić na jakości zdjęć – słusznie. Ale można mocno zmniejszyć rozmiar obrazu, nie tracąc jakości. Dzięki kompresji stratnej lub bezstratnej plik waży mniej, a obraz praktycznie się nie zmienia. Zredukuj liczbę kolorów, zmniejszając liczbę bajtów potrzebnych do zapisania grafiki.
Jeśli masz stronę na WordPress – użyj Smush Image Compression and Optimization, który kompresuje obrazy przy przesyłaniu. W innym przypadku możesz skorzystać z TinyPNG.com.
Każde odniesienie do pliku generuje tzw. request do serwera. Każde zapytanie oznacza drobne opóźnienie, które spowalnia stronę.
Przykład
Prowadzisz sklep od lat. Wypróbowałeś wiele narzędzi: MailChimp, SleekNote, Piksele, Analytics, Hotjar, CrazyEgg, Facebook Messenger, LinkedIn Conversion Tracking itd. Do tego kilka fontów, różne style nagłówków i dziesiątki plików JS dla efektów wizualnych. W końcu prędkość strony na tym cierpi.
Oceń i uporządkuj żądania
Czy na pewno potrzebujesz wszystkich tych fontów i narzędzi? Usuń te, których nie używasz lub nie przynoszą efektu.
Łącz pliki CSS i JS
Zamiast kilku plików JS możesz je połączyć w jeden. Poproś dewelopera lub użyj dedykowanej wtyczki, np. Autoptimize dla WordPressa.
Słyszałeś o cache, lecz nie do końca wiesz, co to? To pamięć podręczna – przeglądarka zapisuje dane odwiedzanych stron. Za pierwszym razem ładuje się wszystko z serwera, następnym – wiele się pobiera z pamięci lokalnej. Dzięki temu kolejne odwiedziny są szybsze.
Nie korzystasz jeszcze z cache? Sprawdź dostępne wtyczki dla swojego CMS.
Mało kto o tym wie, ale to ważny czynnik. Wersja PHP, jakiej używasz, ma realny wpływ na wydajność. Zmień ją u swojego hostingu (Unoeuro, One.com, SurfTown etc.).
Często dostępne są wersje od 5.0 do 7.4. Rekomendujemy aktualizację do najnowszej możliwej – może to jednak wpłynąć na wyświetlanie strony.
Skontaktuj się z deweloperem, aby pomógł Ci w aktualizacji PHP i innych szybkich usprawnieniach opisanych w tym artykule. Skorzystasz na tym Ty i Twoi klienci.
Polecane artykuły:
Google wprowadza lepszy podział testów A/B
Dlaczego Google przeszedł na indeks Mobile First?
WeMarket ma duże doświadczenie w projektowaniu stron – zobacz więcej tutaj.
At WeMarket, we offer businesses a benchmark report that compares their marketing efforts with their key competitors. You decide which competitors we should compare against.
We specialise in selling physical goods online and growing webshops – and now you can benefit from this expertise, even if you’re not already a client.
It’s completely free.
