6 niedocenianych sztuczek, które zwiększą szybkość witryny e-commerce

Jeśli chodzi o doświadczenie użytkownika, jednym z najważniejszych elementów decydujących o sukcesie Twojej witryny e-commerce jest szybkość. Każda tykająca sekunda staje się cenna do tego stopnia, że ​​poprawa szybkości witryny o jedną sekundę może zwiększyć transakcje mobilne o 27%.

Istnieje kilka dobrze znanych, wypróbowanych i przetestowanych sposobów na przyspieszenie sklepu internetowego. Znajdziesz wiele zasobów, które wspominają o optymalizacji rozmiarów obrazów, odczytywaniu żądań HTTP i przełączaniu usług hostingowych.

Ten blog zagłębia się w te techniki i przedstawia kilka przydatnych, niedocenianych technik, które mogą faktycznie przynieść zauważalny wzrost szybkości witryny e-commerce. Zacznijmy.

1. Oceń rozszerzenia stron trzecich

Każdy sklep e-commerce musi w jakiś sposób, w jakiś sposób lub w formie korzystać z rozszerzeń firm trzecich. Chociaż włączenie dowolnej liczby rozszerzeń nie ma nic wspólnego z szybkością witryny, a większość z nich skutkuje usprawnieniem działania sklepu internetowego, zawsze najlepiej sprawdzać te rozszerzenia.

Gdy mają ogromną ilość niestandardowych funkcji, niestabilny kod i złą zawartość, prędkość witryny znacznie się zmniejsza. Możesz kontrolować takie rozszerzenia, wykonując następujące czynności:

• Rozpoznaj skrypty lub tagi, które są oznaczone jako wolno, i napraw je za pomocą Chrome DevTools
• Aby skrócić czas wczytywania, spróbuj skorzystać z instrukcji asynchronicznych/odroczeń lub wskazówek dotyczących zasobów, gdy tylko jest to możliwe
• Dokładnie przetestuj każdą modyfikację JS na stronie testowej, zanim zostaną opublikowane

2. Popraw czas do pierwszego bajtu (TTFB)

Chociaż możemy tolerować światła stopu i kuchenki mikrofalowe do dwóch minut, nie możemy znieść czekania na załadowanie strony internetowej przez mniej niż trzy sekundy. W tym momencie kluczowy staje się „czas do pierwszego bajtu” (TTFB).

TTFB działa jako element responsywny. Nie mówi, że strona będzie się ładować szybciej, tylko że zacznie to robić. Z drugiej strony niski TTFB zwykle wskazuje, że witryna jest szybsza i bardziej responsywna.

Aby zapewnić użytkownikom dobre wrażenia, niezbędna jest witryna, która szybko reaguje na kliknięcia. W rzeczywistości responsywność witryny może być ważniejsza dla SEO niż czas potrzebny do pełnego załadowania witryny. Według Google TTFB poniżej 200 milisekund jest doskonały. Jednak najnowsza wersja narzędzia PageSpeed ​​nie generuje alertu, chyba że czas przekracza 600 milisekund.

Aby dowiedzieć się, co powoduje opóźnienia TTFB, należy przyjrzeć się mnóstwu rzeczy. Jeśli zauważysz, że wygenerowanie początkowego bajtu zasobów zajmuje dużo czasu, przeanalizuj problem i wprowadź wymagane modyfikacje, aby poprawić szybkość witryny. Oto niektóre z najczęstszych powodów, dla których Twój TTFB jest wolniejszy niż zwykle:

• Problemy z siecią
• Problemy z pojemnością serwera (dyski we/wy, pamięć RAM i ograniczenia sieciowe)
• Konfiguracja i projekt bazy danych

Możesz włączyć buforowanie przeglądarki lub sieć dostarczania treści (omówione wcześniej), aby znacznie zmniejszyć TTFB.

3. Użyj buforowania przeglądarki

Gdy przeglądarka przechowuje w pamięci podręcznej kluczowe pliki, które tworzą Twoją witrynę, nazywa się to buforowaniem przeglądarki. Oznacza to, że gdy użytkownik wróci do Twojej witryny, jego przeglądarka nie będzie musiała ponownie pobierać każdego pliku z Twoich serwerów. Wystarczy zażądać określonych plików lub nawet części poszczególnych stron, które prawdopodobnie zostały zmienione (takich jak obraz logo). Ponieważ liczba zapytań kierowanych do serwera jest zmniejszona, znacznie wydłuża to czas ładowania.

Dodanie krótkiego fragmentu kodu do nagłówków HTTP w celu ustalenia okresów wygaśnięcia niektórych plików jest dość prostą metodą włączenia buforowania. Ponieważ strony często podlegają zmianom cen w czasie kampanii, opiniom produktów, informacjom o dostawie dostarczanym przez międzynarodowe firmy kurierskie itd., buforowanie przeglądarki może być wyzwaniem dla sprzedawców internetowych.

W rezultacie bardzo ważne jest rozróżnienie między plikami, które zapewniają naprawdę stabilny materiał – style CSS, logo, nawigacja itd. – a plikami, które zawierają zawartość podatną na zmiany. Następnie możesz kodować według potrzeb. Pamiętaj, że bardzo łatwo jest napisać poszczególne elementy strony, takie jak nagłówki i stopki, a także większe pliki (takie jak arkusze stylów CSS), które nie są wrażliwe na czas, a samo włączenie ich buforowania poprawi szybkość witryny.

4. Użyj sieci dostarczania treści (CDN)

Sieć dostarczania treści można zdefiniować jako zbiór serwerów rozmieszczonych na całym świecie. Ich zadaniem jest rozłożenie obciążenia dostarczanego na serwer znajdujący się najbliżej lokalizacji użytkownika, co skutkuje szybszymi doświadczeniami użytkowników lokalnych. CDN jest niepodlegającym negocjacjom komponentem wydajności platformy, ponieważ coraz więcej firm e-commerce działa na całym świecie.

Pliki Twojej witryny zostaną skopiowane i zapisane na tych serwerach po użyciu CDN. Kiedy konsumenci z różnych kontynentów (a nawet krajów) odwiedzają Twój sklep internetowy, wszystkie dane są ładowane z najbliższego im serwera, dzięki czemu strona ładuje się znacznie szybciej.

CDN to doskonały wybór dla witryn e-commerce o dużym natężeniu ruchu. Punkty PoP o wysokiej gęstości pozwalają im oferować więcej statycznych i sterowanych zdarzeniami informacji z pamięci podręcznej. W rezultacie skuteczność trafienia w pamięć podręczną poprawia się do 90%-98%, co zapewnia lepsze wrażenia dla użytkowników. Poprawia również rankingi w wyszukiwarkach w wyniku dostrojenia metryk wydajności. Połączenie CDN ułatwia długoterminowe utrzymanie witryny i ma na celu poprawę ogólnej szybkości witryny.

5. Wypróbuj leniwe ładowanie

Jeśli ładowanie strony trwa kilka sekund, możesz poprawić wrażenia użytkownika, przyspieszając górną część strony. Lazy loading to metoda, która sprawdza się dobrze w przypadku witryn, które zawierają dużo treści w części strony widocznej na ekranie. API jest przyjmowane przez 17% stron internetowych, co jest znaczną liczbą, biorąc pod uwagę, że zostało uruchomione w 2019 roku. Dzięki leniwemu ładowaniu najpierw załaduje obrazy wewnątrz wyświetlacza, a później wszystkie inne obrazy.

Użytkownik nie będzie musiał długo czekać na wejście na stronę, a zdjęcia załadują się, gdy tylko będą dostępne. Spowoduje to znaczne skrócenie czasu ładowania artykułów z dużą liczbą zdjęć. Konfiguracja tej wtyczki jest prosta. Dostępne są wtyczki, takie jak Lazy load, BJ Lazy load, WP Rocket i inne.

6. Opracuj AMP i PWA

Ponieważ 52% ruchu internetowego pochodzi ze smartfonów, ważne jest, aby zoptymalizować swoje sklepy e-commerce pod kątem tych urządzeń. Przyspieszone strony mobilne (AMP) i progresywne aplikacje internetowe (PWA) ułatwiły zwiększenie szybkości witryny na urządzeniach mobilnych.

Google zbudował platformę programistyczną AMP, która składa się z podzbioru HTML (AMP HTML), struktury JavaScript i opcjonalnego CDN, aby umożliwić programistom dostarczanie błyskawicznych stron mobilnych bez inwestowania znacznych zasobów w optymalizację szybkości. Chociaż AMP został stworzony z myślą o stronach opartych na treści, staje się coraz bardziej popularny wśród sklepów internetowych.

Progressive Web App (PWA) to aplikacja internetowa, do której można uzyskać dostęp za pomocą przeglądarki mobilnej. Naśladują one wiele funkcji aplikacji, takich jak dostęp za pomocą ikony na ekranie głównym urządzenia mobilnego, lepsze zaangażowanie (nawet 400%), a także powiadomienia push, ale bez konieczności instalowania czegokolwiek na swoich telefonach.

Zawijanie

Wszystkie te niedoceniane sztuczki gwarantują najskuteczniejsze sposoby na zwiększenie szybkości witryny. Powinieneś spróbować włączyć te elementy do swojej witryny e-commerce, aby zamienić ruch w przychody, zminimalizować wskaźnik rezygnacji i po prostu zachwycić swoich klientów wyjątkowym doświadczeniem użytkownika.