Konfigurator 3D długo się ładuje i psuje wynik PageSpeed - przyczyny i naprawa

Konfigurator 3D spowalnia stronę, gdy jego biblioteka, modele i tekstury pobierają się razem z resztą treści, zanim klient w ogóle zdecyduje się z niego skorzystać. Naprawa polega na odwróceniu kolejności: najpierw lekka strona z obrazem podglądu produktu, a konfigurator dopiero po kliknięciu albo wtedy, gdy pojawi się na ekranie.

Po czym poznać, że to konfigurator spowalnia stronę?

Po tym, że słabe wyniki dotyczą tylko stron z konfiguratorem, a w PageSpeed Insights wśród największych pobieranych plików są biblioteka 3D, pliki modeli i tekstury. Wtedy ogólne przyspieszanie strony niewiele da.

• przez kilka sekund widać pusty prostokąt, kręcący się wskaźnik albo pasek postępu w miejscu modelu,
• PageSpeed Insights dla telefonu pokazuje słabe LCP i długi czas blokowania, a w diagnostyce dominują pliki JavaScript, GLB i duże obrazy tekstur,
• pierwsze dotknięcie menu albo przycisku reaguje z opóźnieniem,
• podstrony bez konfiguratora w tej samej witrynie mają dobre wyniki.

Jeśli wolne są wszystkie podstrony, przyczyna leży gdzie indziej: w zdjęciach, wtyczkach albo hostingu. Ogólne przyczyny i ich naprawę opisujemy we wpisie strona internetowa wolno się ładuje.

Dlaczego konfigurator 3D psuje wynik PageSpeed?

Bo przeglądarka musi pobrać i uruchomić kilka ciężkich rzeczy naraz: bibliotekę 3D, model, tekstury i kod konfiguratora, a telefon robi to wolniej niż komputer stacjonarny. Do tego konfigurator zwykle stoi w najbardziej wrażliwym miejscu strony, czyli na samej górze.

Wszystko ładuje się razem ze stroną

Skrypt konfiguratora jest dołączony do strony jak każdy inny i startuje od razu, więc pobiera model i wszystkie warianty kolorów oraz dodatków, także te, których klient nigdy nie wybierze. Płacą za to również osoby, które przyszły tylko przeczytać opis i sprawdzić cenę. Dzieje się tak nawet wtedy, gdy konfigurator jest kilka ekranów niżej, bo skrypt startuje niezależnie od tego, czy klient do niego dotrze.

Za duże modele i tekstury

Nieskompresowany model i tekstury w wysokiej rozdzielczości potrafią ważyć więcej niż cała reszta strony. Tekstury zapisane jako JPG lub PNG trzeba jeszcze rozpakować w pamięci karty graficznej, co na telefonie trwa i zajmuje pamięć. Jak przygotować lżejszy model, opisujemy we wpisie model 3D z CAD za ciężki do przeglądarki.

Brak obrazu podglądu i konfigurator w pierwszym ekranie

Element canvas, na którym rysuje się model 3D, nie jest brany pod uwagę przy liczeniu LCP. Jeśli pierwszy ekran zajmuje sam konfigurator, wynik zależy od innego elementu, np. nagłówka, a jego wyświetlenie opóźniają skrypty 3D, które konkurują o łącze i procesor. Klient widzi wtedy pusty prostokąt zamiast produktu, choć mógłby od razu zobaczyć jego zdjęcie.

Ciężki kod uruchamiany przy starcie

Rozpakowanie modelu i przygotowanie sceny zajmują procesor telefonu. Jeśli dzieje się to zaraz po wejściu na stronę, pierwsze kliknięcia w menu czy przyciski reagują z opóźnieniem, co pogarsza INP i wrażenie, że strona działa sprawnie.

Jak przyspieszyć stronę z konfiguratorem 3D?

Pokaż w pierwszym ekranie lekki obraz podglądu, który stanie się elementem LCP, a konfigurator ładuj dopiero wtedy, gdy klient go potrzebuje. Resztę zysku dają skompresowane pliki i dobre ustawienia pamięci podręcznej. Kolejność zmian ma znaczenie: najpierw obraz podglądu i ładowanie na kliknięcie, bo poprawiają wynik dla wszystkich odwiedzających, a dopiero potem kompresja, która skraca czekanie tych, którzy konfigurator uruchomią.

Podczas ładowania po kliknięciu pokazuj postęp na tle obrazu podglądu, a nie pusty prostokąt. Klient widzi wtedy produkt przez cały czas, a konfigurator płynnie zastępuje zdjęcie, gdy jest gotowy. Tę samą zasadę warto zastosować do zmian w trakcie konfiguracji: tekstura nowego koloru albo model bramy pobierają się dopiero przy pierwszym wyborze, a kolejne zmiany korzystają już z plików w pamięci.

Jak sprawdzić, co dokładnie pobiera się przed kliknięciem?

Otwórz stronę w Chrome, w narzędziach przeglądarki przejdź do karty Sieć, włącz ograniczenie prędkości do wolnego łącza mobilnego i przeładuj stronę bez pamięci podręcznej. Posortuj pliki według rozmiaru: na górze zobaczysz bibliotekę 3D, pliki GLB, tekstury i dekodery kompresji. Każdy z nich, który pobiera się, zanim klient kliknie konfigurator, można przenieść na później. Ten sam test po zmianach pokaże, czy przed kliknięciem strona pobiera już tylko obraz podglądu i własne skrypty.

Iframe czy osadzenie bezpośrednio na stronie?

Oba sposoby mogą być szybkie, jeśli konfigurator nie startuje razem ze stroną. Iframe z atrybutem loading="lazy" sam odkłada pobieranie do momentu przewinięcia, ale utrudnia dopasowanie wysokości i pomiar zdarzeń. Osadzenie bezpośrednio na stronie daje więcej kontroli: obraz podglądu, ładowanie po kliknięciu i wspólny formularz zapytania w jednym miejscu.

Przy garażach i wiatach dobrze sprawdza się układ, w którym na górze strony jest zdjęcie albo render najpopularniejszego wariantu z ceną „od” i przyciskiem „Skonfiguruj swój garaż”, a konfigurator otwiera się po kliknięciu. Taki układ proponujemy przy wdrożeniach opisanych na stronie konfiguratora 3D garaży.

Co sprawdzić przed publikacją? Lista kontrolna

• w pierwszym ekranie jest obraz podglądu z podanymi wymiarami, a nie pusty canvas,
• żaden plik 3D nie pobiera się, dopóki klient nie kliknie albo nie przewinie do konfiguratora,
• model jest w formacie GLB z kompresją, a tekstury w KTX2,
• pliki 3D mają w nazwie numer wersji i długi czas przechowywania w cache,
• podczas ładowania klient widzi postęp na tle podglądu,
• wynik sprawdzono w PageSpeed Insights dla telefonu i na prawdziwym telefonie.

Ładowanie na kliknięcie za obrazem podglądu to standard każdego konfiguratora 3D na stronę, który budujemy w three.js. Ten problem jest jednym z naszej listy 50 problemów z konfiguratorem 3D produktu.