11 sposobów na zoptymalizowanie witryny eCommerce pod kątem szybkości

Jako firma zajmująca się handlem elektronicznym optymalizacja wydajności witryny powinna być jednym z Twoich głównych priorytetów.

Dzieje się tak, ponieważ na konwersje bezpośrednio wpływa szybkość ładowania stron. Dzisiejsi konsumenci oczekują niezwykle szybkich witryn. Jeśli Twój sklep internetowy z jakiegoś powodu działa wolno, ryzykujesz utratę klientów, a ostatecznie przychody.

W rzeczywistości stracisz 20% odwiedzających, jeśli doświadczą 3-sekundowego opóźnienia w czasie ładowania strony, wynika z badania przeprowadzonego w 2016 r. przez Aberdeen Group.

Jak szybki jest szybka? Według firmy Dynatrace zajmującej się zarządzaniem wydajnością cyfrową, globalne witryny handlu detalicznego działające w 2017 r. od Czarnego Piątku do 3 stycznia były wizualnie kompletne i gotowe do użycia w ciągu 2,5 sekundy.

Oto kilka kluczowych sposobów na zoptymalizowanie witryny pod kątem szybkości:

1. Ogranicz liczbę wyszukiwań DNS

Za każdym razem, gdy Twoja witryna eCommerce się ładuje, przeglądarka musi znaleźć adres IP odpowiadający Twojej nazwie domeny. Nazywa się to wyszukiwaniem DNS (systemu nazw domen).

Przeglądarka musi wyszukać Twoją domenę główną, a także wszelkie domeny na Twojej stronie, które pochodzą z zewnętrznego źródła, takiego jak kanał Twittera lub osadzony film z YouTube. Dlatego zmniejszenie liczby zapytań do zewnętrznych źródeł w Twojej witrynie zminimalizuje różne wyszukiwania DNS, które klient musi wykonać, co może opóźnić początkowe ładowanie strony. Na przykład zamiast hiperłącza do obrazów możesz umieścić je na swoim serwerze.

Możesz także poszukać szybszego dostawcy DNS, zmienić wartości TTL (czasu życia), aby skorzystać z buforowania DNS, lub przenieść jak najwięcej zasobów do sieci dostarczania treści (więcej na ten temat później).

2. Zainwestuj w lepsze wyszukiwania hostingu

Niezawodny, szybki hosting jest kluczowym czynnikiem wpływającym na szybkość Twojej witryny. I nie wszystkie hosty internetowe są sobie równe. Będziesz chciał znaleźć usługę, która poradzi sobie z dużymi skokami ruchu internetowego i transakcji (na przykład podczas premiery dużego produktu lub okresu od Czarnego Piątku do Cyberponiedziałku).

Nie ma gorszego losu dla witryny eCommerce niż bycie niedostępnym dla odwiedzających. Dobra usługa hostingowa zagwarantuje uptime 99,5% lub więcej. Host premium obiecuje uptime aż 99,99%.

Bez wątpienia będziesz potrzebować certyfikatu SSL i dedykowanego adresu IP.

3. Kompresuj swoje zdjęcia

Obrazy stanowią 50-75% całkowitej wagi Twojej witryny, ale co zaskakujące, około 45% ze 100 najlepszych witryn eCommerce nie zadaje sobie trudu kompresowania swoich obrazów. Powinni i powinniście. Możesz wybrać kompresję bezstratną, która zmniejsza rozmiar pliku bez obniżania jakości.

Zawsze należy ustawić wymiary obrazu w kodzie, aby przeglądarka nie musiała czekać na pełne renderowanie obrazu przed przejściem do innych elementów na stronie. Po prostu zostawi pudełko z ustawionymi wymiarami i będzie kontynuować pracę nad ładowaniem witryny.

Kompresuj obrazy w programie Photoshop lub użyj kompresora obrazu, takiego jak TinyPNG lub Kraken.io.

4. Priorytetowe ładowanie nad fałdą

Ponieważ górna część Twojej witryny będzie pierwszą rzeczą, którą zobaczą Twoi użytkownicy, sensowne jest, aby wszystko, co znajduje się powyżej części ekranu, ładowało się szybciej niż reszta witryny. Innym terminem na określenie tego procesu jest leniwe ładowanie. Jest to szczególnie pomocne przy przyspieszeniu jednostronicowych witryn z obrazami, które stały się popularnym wyborem dla wielu marek.

Aby uzyskać instrukcje, jak włączyć leniwe ładowanie, przejdź tutaj.

5. Buforuj swoją stronę

Zamiast zmuszać użytkownika do pobierania każdego komponentu każdej strony podczas każdej wizyty, buforowanie umożliwia buforowanie elementów globalnych przez przeglądarkę, więc tylko nowe elementy będą wymagały żądania przeglądarki.

Buforowanie przyspiesza czas ładowania, ponieważ elementy strony, takie jak indeksy wyszukiwania witryn, informacje katalogowe, informacje o użytkownikach, bloki paska bocznego, instrukcje dotyczące układu i pliki tłumaczeń, są przechowywane przez przeglądarkę. Te elementy zwykle pozostają takie same na każdej stronie, więc przeglądarka nie musi żądać tych zasobów za każdym razem, gdy użytkownik kliknie na nową stronę.

Aby włączyć buforowanie przeglądarki, musisz edytować nagłówki HTTP, aby ustawić dłuższe czasy wygaśnięcia dla niektórych typów plików. Oto kilka rekomendacji od programistów Google.

6. Zmniejsz liczbę żądań HTTP

Około 80% czasu odpowiedzi witryny poświęca się na pobranie elementów frontendu, takich jak obrazy, arkusze stylów, skrypty, elementy Flash itp. Zmniejszenie liczby elementów zmniejsza liczbę żądań HTTP, które są potrzebne do pełnego wyrenderowania strony .

Najłatwiej to zrobić, po prostu uprościć projekt witryny. Ale w wielu przypadkach nie jest to realna opcja. Możesz użyć sprite'ów CSS i map obrazów, aby połączyć wiele obrazów w jeden obraz, a tym samym zmniejszyć liczbę żądań obrazów. Możesz także połączyć wszystkie arkusze stylów w jeden plik, a także połączyć wszystkie CSS w jeden arkusz stylów.

7. Użyj kompresji Gzip

Gdy odwiedzający trafi na Twoją witrynę, do Twojego serwera wysyłane jest żądanie dostarczenia plików. Ma sens, że im większe pliki, tym dłużej zajmie dotarcie do Twojej przeglądarki.

Kompresja Gzip umożliwia serwerowi kompresowanie plików witryny przed zwróceniem ich do przeglądarki, co drastycznie skraca czas przesyłania. W rzeczywistości gzip może zmniejszyć rozmiar stron i arkuszy stylów o 90%!

Kompresja jest włączana poprzez konfigurację serwera WWW. Każdy serwer sieciowy będzie miał inne instrukcje. Postępuj zgodnie z tym samouczkiem Google, aby uzyskać więcej informacji.

8. Wykorzystaj sieć dostarczania treści

Jeśli prowadzisz globalną firmę eCommerce z odwiedzającymi z całego świata, zdecydowanie powinieneś korzystać z sieci dostarczania treści, aby zoptymalizować wydajność swojej witryny. Sieć CDN działa poprzez rozproszenie węzłów serwerów na całym świecie, dzięki czemu odwiedzający witrynę mogą pobierać zasoby z pamięci podręcznej w najbliższym węźle, poprawiając wydajność i zmniejszając opóźnienia w ładowaniu.

Dostawcy CDN mogą pochwalić się większymi potokami sieciowymi, większą liczbą serwerów zlokalizowanych na całym świecie i możliwościami komunikacji równorzędnej w sieci, niż jest to możliwe. Ponadto mają dedykowane zespoły, które stale monitorują i optymalizują swoją infrastrukturę.

Wybór właściwej sieci CDN może być trudny. Zacznij od tego przewodnika.

9. Zminimalizuj swój kod

Minifikacja to proces usuwania wszystkich niepotrzebnych znaków, takich jak białe znaki i wiersze, z kodu źródłowego bez wpływu na jego funkcjonalność, dzięki czemu przeglądarki mogą szybciej ładować strony. Proces ten obejmuje pliki HTML, CSS i JavaScript i może mieć duży wpływ na przyspieszenie czasu ładowania. Minifikacja zmniejsza zarówno rozmiar plików, jak i liczbę potrzebnych plików.

Postępuj zgodnie z tymi zasobami, aby wyczyścić kod i ułatwić przeglądarkom renderowanie strony.

10. Użyj ładowania asynchronicznego

Kiedy przeglądarka ładuje stronę, przesuwa się z góry na dół. Możesz przyspieszyć działanie, umożliwiając jednoczesne ładowanie skryptów, takich jak CSS i JavaScript. Nazywa się to ładowaniem asynchronicznym. Jeśli Twoje skrypty ładują się synchronicznie, ładują się w kolejności, w jakiej pojawiają się na stronie, co może być wolniejszym procesem.

Postępuj zgodnie z tym przewodnikiem, aby dowiedzieć się, jak włączyć ładowanie asynchroniczne.

11. Stale monitoruj prędkość swojej witryny

Na koniec zakończymy tam, gdzie zaczęliśmy: każdego dnia należy traktować wydajność witryny jako priorytet. Oznacza to, że musisz stale monitorować swoją witrynę pod kątem problemów i szukać sposobów optymalizacji pod kątem szybkości i wydajności.

Google PageSpeed ​​Insights to dobre narzędzie do analizy szybkości witryny na urządzeniach mobilnych i komputerach stacjonarnych.

Kolejne doskonałe narzędzie do badania szybkości witryny jest dostępne w Pingdom.

Zapamiętaj tę praktyczną zasadę: za każdą sekundę dłużej trwającą wczytywanie witryny stracisz 10% odwiedzających. Auć.