Jak osiągnąłem 100 punktów mobilnych Google Pagesspeed na WooCommerce z WP Rocket

Czy chcesz uzyskać idealne 100 w Google Pagespeed Insights for Mobile ze swoim sklepem WooCommerce?

W tym artykule pokażę dokładnie, jak osiągnęliśmy to dzięki femme-fatale.gr, e-sklepowi e-shopowi, który pierwotnie działał na Magento. W tym czasie obciążenia stron mobilnych trwały od 5 do 15 sekund, a strona krwawiła sprzedaż, pomimo katalogu 35 000 produktów z 500 kategoriami produktów i 450 atrybutami produktu.

Jestem Dimitris Vayenas, założycielem Oxford Metadata. W ciągu ostatnich trzech dekad miałem obsesję na punkcie każdego milisekundy wydajności sieci. Na początku 2022 r. Mój przyjaciel Nikos Orfanos poprosił mnie o pomoc w jego sklepie internetowym, a my zaczęliśmy pracować.

Po migracji do WooCommerce i skupieniu się całkowicie na prędkości - wykorzystywaniu rakiety WP jako naszej tajnej broni - roztrzaskaliśmy wyniki mobilnych stron z konsekwentnym wynikiem między 99 a 100/100. Co ważniejsze, strona przeszła z Stagnant do Machine.

Czytaj dalej, a dowiesz się, w jaki sposób udało nam się uzyskać takie wyniki i jak WP Rocket pomogła nam osiągnąć wynik 95+, a także ostateczny poprawek, który popchnął nas do idealnego 100. Co ważniejsze, dowiesz się wpływu biznesowego, który nastąpił, gdy strona zaczęła ładować zaledwie 300 milisekund.

Po co skupić się na wydajności, szczególnie na telefonie komórkowym

W Femme - Fatale.gr ponad 90% zakupów odbywa się na urządzeniach mobilnych. To sprawiło, że wydajność mobilna jest naszym najwyższym priorytetem od pierwszego dnia.

Urządzenia mobilne są najlepszym testem warunków skrajnych dla każdej strony internetowej. Ograniczony procesor, pamięć i niestabilne połączenia mogą sprawić, że nawet najmłodsze strony ładują się do 10 razy wolniej niż na pulpicie. Dlatego każda optymalizacja ma znaczenie.

Prędkość oznacza wydajność. Czyszczenie kodu, mniejsze zasoby i szczuplejsze DOM przekładają się na płynniejsze wrażenia dla każdego gościa, szczególnie na urządzeniach mobilnych.

Jak lubię mówić: „Jeśli twoje wrażenia mobilne nie jest natychmiastowe, tracisz prawdziwe pieniądze z każdym dodatkowym milisekundem”.

Punkt zwrotny: migracja z Magento do WooCommerce

W grudniu 2021 r. Nikos osiągnął wyraźne wyzwanie. „Mój sklep osiągnął szczyt podczas blokady 0,81 € za sesję. Wtedy sprzedaż spadła do 0,15 € na sesję. Czy możemy wrócić do wzlotów Lockdown?”

Wiedzieliśmy, że pierwszym krokiem jest zmiana platform.

Po pierwsze, wybraliśmy WooCommerce ze względu na jego zwinny, nowoczesny stos. Oferował ekosystem wtyczek i twórców motywów, które obejmują każdą funkcjonalność, jaką można sobie wyobrazić, a także największą społeczność inżynierów nastawionych na wydajność.

W marcu 2022 r. Zostaliśmy na żywo bez zmiany danych produktu lub zwiększania wydatków marketingowych. Jedyną różnicą była prędkość. Obciążymy obciążenia stron z 5 do 10 sekund do zaledwie 1 do 2 sekund.

Jest to zrzut ekranu GTMetrix pokazujący wyniki czasu ładowania przed migracją z Magento: 5,8 sekundy dla strony głównej i 7,9 sekundy dla kategorii, przechwyconych podczas opracowywania nowej strony internetowej.

Z drugiej strony jest to obecny wydajność, a wszystkie podstawowe witalne witalne w kolorze zielonym:

Jaka jest prawdziwa wartość prędkości dla WooCommerce?

Wpływ biznesu na wyniki nie był możliwy do zignorowania, a liczby jasno wynika z krystalicznie.

Przed migracją femme -fatale.gr utknął w rutynie występu. W Magento miesięczny obrót wahał się od 7 000 do 10 000 EUR z około 40 000 sesji, średnio zaledwie 0,15 do 0,20 EUR na sesję. Nawet podczas szczytu Lockdown w 2020 r., Kiedy ruch wzrósł do 62 500 sesji, najlepsza wydajność osiągnęła 0,81 EUR na sesję.

Do lutego 2022 r., Tuż przed wyemigrowaniem do WooCommerce, strona uniosła się nieznacznie do 0,29 € na sesję, ale wciąż była daleka od jego potencjału.

Wpływ szybszej wydajności był natychmiastowy. W marcu 2022 r., Pierwszy pełny miesiąc po migracji, przychody na sesję podwoiły się do 0,58 EUR, pomimo tymczasowego spadku sesji, podczas gdy boty rozgrzały pamięci podręczne.

Zyski nie kończą się na tym. Do grudnia 2023 r. Dopasowaliśmy szczyt Lockdown o 0,81 EUR na sesję. Dzisiaj liczba ta wzrosła jeszcze wyżej: strona internetowa zarabia teraz 1,11 € za sesję z 40 000 miesięcznych wizyt.

Nikos, właściciel femme - fatale.gr, umieść to najlepiej:

Dopasowując się, a teraz przekraczając nasz szczyt Covid, udowodniliśmy, że szybkość jest największą dźwignią naszej firmy.

Fundacja wydajności, jaką potrzebuje każda strona WooCommerce

Zanim WP rakieta mogła zapewnić pełny potencjał wydajności, musi istnieć solidny fundament. Te wczesne decyzje miały znaczący wpływ na nasze wyniki, a to właśnie polecam każdemu, kto prowadził sklep WooCommerce:

1. Wybierz motyw Performance: Przed ustaleniem najlepszych opcji przetestowaliśmy dziesiątki motywów. Botiga (oparta na Gutenberg) Athemes i Ray Temat (oparty na elementorach), który uzyskał 90+ w wersjach dostawców. Coś poniżej 70? Unikaliśmy tego.

2. Wybierz naprawdę szybki host: używamy Cloudways , wspieranych przez Linode, Vultr i Digitalocean w kluczowych regionach europejskich, takich jak Londyn, Frankfurt, Amsterdam, Mediolan i Sztokholm. Daje nam aktualizacje PHP i bazy danych jedno kliknięcie, wbudowane lakier i redis oraz płynne wykrywanie urządzeń mobilnych. Zapewnia to, że nie dociekłe wywołania interfejsu API zawsze trafiają zoptymalizowaną treść. Od trzech lat nie mieliśmy zera przestoju, a ich zespół wsparcia jest znakomity.
   
   W e -commerce bliskość klientów nie jest w stanie negocjować: każde zapytanie o produkt, aktualizacja koszyka i kontrola zapasów dotyka Twojego pochodzenia. Z kupującymi w Atenach lub na greckich wyspach i Cloudways nie mają lokalnego węzła, musimy wdrożyć szybką ścieżkę . Zachowuje się bezpośrednio ze wszystkimi głównymi operatorami telefonu komórkowego i Cloudflare, zapewniając TTFBS poniżej 50 i prawdziwie lokalne wrażenia.

3. Współpracuj z wspierającymi dostawcami: wybraliśmy dostawców, którzy oferują niezawodne i szybkie wsparcie, aby odpowiedzieć na pytania i rozwiązywanie problemów u boku, od Athemes i Fibosearch po Welaunch , Pixel twoją stronę , formy grawitacyjne , Aioseo i samą rakietę WP .

4. Zoptymalizuj Twoją treść: Konwertowaliśmy wszystkie obrazy na WebP i zorganizowaliśmy je w foldery oparte na daty, upewniając się, że każdy folder zawiera mniej niż 10 000 plików. W przypadku czcionek samowystarczalnyliśmy pliki WOFF2 i podzielić je, aby zawierać tylko postacie potrzebne przez naszych odbiorców. To zmniejszyło rozmiary plików czcionek o 70 do 80 procent. Podanie im lokalnie i wczesne ładowanie pomogło wyeliminować zewnętrzne wyszukiwania i uniknąć zmian układu.

5. Użyj chirurgicznego ładowania wtyczek i utrzymywania higieny bazy danych: Użyliśmy organizatora wtyczek i filtrów ręcznych do załadowania tylko wtyczek potrzebnych na stronę. Cotygodniowe czyszliśmy przejściowe i wyłączane autoload dla dużych wpisów WP_OPTIONS.

Funkcje rakiety WP, które doprowadziły nas do 99/100 na Pagespeed

Po wprowadzeniu fundacji WP Rocket pomogła nam zwiększyć szybkość i szybko osiągnąć wyjątkowe wyniki. Te funkcje odegrały kluczową rolę w zdobyciu nas do wyniku 95+ na Google Pagesspeed na telefonie komórkowym:

• Mobilna pamięć podręczna i mapa witryny: WP Rocket automatycznie wykrywa urządzenia mobilne i buduje dla nich dedykowaną pamięć podręczną. Oznacza to, że użytkownicy smartfonów zawsze otrzymują wstępnie załadowaną migawkę HTML. Wstępny ładunek oparty na witrynach pełzają również twoje strony zaraz po każdym czyszczeniu pamięci podręcznej, co usuwa opóźnienie, które często zdarza się podczas pierwszych wizyt.
  
• CSS i JS Minification : WP Rocket wypija białe listy i komentarze do zmniejszania rozmiarów plików. Może również łączyć pliki JavaScript w jedno, zmniejszając liczbę żądań HTTP. Jest to szczególnie ważne dla użytkowników mobilnych w wolniejszych sieciach.  
  
• Usuń nieużywany CSS (RUCSS): W przeciwieństwie do prostej minifikacji, RUCSS analizuje HTML twoich stron i usuwa każdą regułę CSS, nigdy nie używana z przodu. Zakłada, że ​​arkusze stylów często przecina dziesiątki Kilobyte, więc przeglądarka szybciej renderuje z mniejszą liczbą bajtów. Widzieliśmy z pierwszej ręki, że samodzielne RUCS ogoliło się 200 kb od ładunku strony głównej, co skutkuje szybszymi stronami ładowania.
  
• Opóźnij wykonanie JavaScript : Skrypty takie jak analityka, narzędzia do czatu lub widżety stron trzecich zwykle nie muszą uruchomić od razu. Rakieta WP opóźnia je, dopóki użytkownik nie przewiduje, stuknie lub kliknie. To sprawia, że ​​strony są szybsze interaktywne i poprawia interakcję do następnej farby i ogólnej reakcji strony na interakcje użytkowników.

Po włączeniu tych funkcji otrzymaliśmy 99 mobilnych wyników wydajności Pagesspeed:

Premia: dodatki rakietowe WP do specjalnych przypadków

Czasami ustawienia out -box wymagają odrobiny wzmocnienia. W przypadku konfiguracji wybranych takich jak nasze - z złożonymi harmonogramami, niestandardowymi regułami czcionek lub niezwykłym wykrywaniem urządzeń - zainstalowaliśmy pięć bezpłatnych dodatków rakietowych WP po ​​konsultacji z inżynierami starszymi rakietami WP:

• Zmień parametry RUCSS: Dostosowaliśmy, jak często i jak głęboko biegowe rakiety usuwają nieużywane CSS. Było to niezbędne dla kompatybilności z wtyczkami takimi jak AutomateWoo, które mogą przeciążyć harmonogram zadań.
• Dezaktywuj fragmenty WooCommerce Cart: Ponieważ nasza baza danych została już zoptymalizowana, wyłączyliśmy pamięć podręczną WP Rocket Fragment, aby jeszcze bardziej przyspieszyć połączenia kasy.
• Wyłącz używane czcionki CSS wstępne: Wykorzystaliśmy niestandardowe samozwańcze czcionki WOFF2 z ręcznym zasadami wstępnego obciążenia. Ten dodatek zapewnił, że te zasady nie zostały zastąpione przez automatyczne obciążenie czcionki WP Rocket.
• Usuń reguły HTML: nasz CDN i serwer już obsługiwane nagłówki pamięci podręcznej, więc usunęliśmy domyślne zasady WP Rocket HTML, aby uniknąć konfliktów.
• Ustaw tablety jako mobilne: traktowaliśmy tablety jak urządzenia mobilne, aby skorzystały z mobilnych buforowania i responsywnych optymalizacji. Było to ważne dla niestandardowych funkcjonalności polegających na sprawdzeniu WP_IS_Mobile ().

Oprócz wtyczki tabletu większość z tych dodatków jest potrzebna tylko w sklepach o dużej kompleksowości. W przypadku typowych konfiguracji e -commerce Rakieta WP świetnie działa od razu po wyjęciu z pudełka.

The 100/100 Secret: Perfecting Lazyloading i ten obraz LCP

Dotarcie do 99 w Pagespeed Insights było wielkim kamieniem milowym, ale nie byliśmy zadowoleni. Jeden punkt stał między nami a perfekcją.

Najpierw rozwiązaliśmy wzdęcia elementu, co oznacza zmniejszenie liczby elementów HTML na stronie. Google karze strony z ponad 810 elementami domów, a nasze menu, suwaki i sama stopka popchnęły nas po 1000.

Oto, co zrobiliśmy:

• Lazy obciążone treści statyczne : odroczyliśmy elementy niekrytyczne, takie jak menu nagłówka, suwaki kategorii produktów, karuzele marki i stopka aż do początkowej farby.

• Usunięte niepotrzebne elementy : przycinaliśmy głębokie poziomy menu i wyłączyliśmy nieaktywne obszary widżetu na telefonie komórkowym. Pomogło nam to uzyskać całkowitą liczbę Dom poniżej progu karnego Google.

Nawet przy czystszej stronie nadal nie mogliśmy złamać 100. Ostatnim problemem był obraz bohatera.

Pierwotnie był to obraz 350 × 622 PX z nakładkami, cieniami i tekstem - zbyt złożonym, aby szybko się załadować. Uprościliśmy go do sieci Webp 350 × 350 PX i wstępnie załadowaliśmy z wysokim priorytetem za pomocą następującego kodu:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

I tak, upraszczając i wstępnie ładując obraz bohatera, osiągnęliśmy doskonały wynik 100/100 psi z Mobile.

Wpływ biznesowy: prędkość jako silnik wzrostu

Jak wyjaśniłem, prędkość nie tylko poprawiła nasz wynik Pagesspeed. To bezpośrednio zwiększyło nasz wynik.

Po optymalizacji wydajności i wykorzystaniu funkcji rakiety WP widzieliśmy mierzalne zyski w wynikach:

• Wskaźniki konwersji wzrosły o 33%.

• Przychody na sesję wzrosły ponad pięć razy , z 0,20 € do 1,11 €.

Wyniki te przełożyły się na dodatkowe 384 000 EUR przychodów w ciągu pierwszych 18 miesięcy po migracji .

Nie były to drobne ulepszenia. Dopasowali i ostatecznie przekroczyli naszą wydajność blokady szczytowej, udowadniając, że prędkość witryny była kluczową dźwignią wzrostu .

Jak lubię mówić: „Każde milisekundowe ogolone dodało prawdziwe euro do dolnej linii”.

3 praktyczne wskazówki dla właścicieli firm

Jeśli prowadzisz sklep e -commerce, chciałbym podzielić się dodatkowymi praktycznymi wskazówkami, które pomogą Ci w pełni wykorzystać swoje wysiłki - niezależnie od tego, czy jesteś techniczny, czy nie.

1. Śledź prawdziwych użytkowników: Użyj prawdziwego monitorowania użytkowników (RUM), aby mieć oko na dane terenowe. Wyniki laboratoryjne są przydatne, ale tak naprawdę liczy się to, jak Twoja witryna działa dla rzeczywistych odwiedzających. Upewnij się, że wyłącz to podczas uruchamiania testów Pagespeed Insights, aby uniknąć wypaczonych wyników.
2. Geolocate Your Origin: host swoją witrynę w pobliżu klientów. Gdy serwer pochodzenia znajduje się w pobliżu odbiorców, wszystko, od wyszukiwania produktów po kasę, staje się szybsze i bardziej niezawodne.
3. Leń na rakiecie WP: Zacznij od domyślnych ustawień. Od razu automatycznie zajmują się większością problemów z wydajnością. Gdy linia bazowa jest solidna, możesz dostroić, umożliwiając niektóre dodatkowe funkcje, na przykład optymalizację plików CSS i JS. A jeśli nie jesteś obserwowany w technologii, pamiętaj: „Szybsze witryny oznaczają mniejszą frustrację, większą sprzedaż i szczęśliwszych klientów”.

Owinięcie

Przeprowadziliśmy się z Magento do WooCommerce, podnieśliśmy nasz mobilny wynik Pagesspeed z 55 do idealnego 100 i zwiększyli przychody na sesję z 0,20 € do 1,11 EUR. Ta podróż wyraźnie okazała się jedna rzecz: prędkość jest czymś więcej niż technicznym kamieniem milowym. Jest to prawdziwy motor wzrostu biznesu.

Skoncentrowaliśmy się na wydajności, zbudowaliśmy silny fundament techniczny i wykorzystaliśmy rakietę WP, aby szybko odblokować wyniki. Jeśli Twój sklep WooCommerce czuje się powolny lub gorszy, nadszedł czas na podjęcie działań. Szybsza strona oznacza gładsze doświadczenie dla odwiedzających i prawdziwe korzyści dla Twojej firmy.