Konfigurator 3D spowalnia stron\u0119, gdy jego biblioteka, modele i tekstury pobieraj\u0105 si\u0119 razem z reszt\u0105 tre\u015bci, zanim klient w og\u00f3le zdecyduje si\u0119 z niego skorzysta\u0107. Naprawa polega na odwr\u00f3ceniu kolejno\u015bci: najpierw lekka strona z obrazem podgl\u0105du produktu, a konfigurator dopiero po klikni\u0119ciu albo wtedy, gdy pojawi si\u0119 na ekranie.<\/p>\n
Po tym, \u017ce s\u0142abe wyniki dotycz\u0105 tylko stron z konfiguratorem, a w PageSpeed Insights w\u015br\u00f3d najwi\u0119kszych pobieranych plik\u00f3w s\u0105 biblioteka 3D, pliki modeli i tekstury. Wtedy og\u00f3lne przyspieszanie strony niewiele da.<\/p>\n
Je\u015bli wolne s\u0105 wszystkie podstrony, przyczyna le\u017cy gdzie indziej: w zdj\u0119ciach, wtyczkach albo hostingu. Og\u00f3lne przyczyny i ich napraw\u0119 opisujemy we wpisie strona internetowa wolno si\u0119 \u0142aduje<\/a>.<\/p>\n Bo przegl\u0105darka musi pobra\u0107 i uruchomi\u0107 kilka ci\u0119\u017ckich rzeczy naraz: bibliotek\u0119 3D, model, tekstury i kod konfiguratora, a telefon robi to wolniej ni\u017c komputer stacjonarny. Do tego konfigurator zwykle stoi w najbardziej wra\u017cliwym miejscu strony, czyli na samej g\u00f3rze.<\/p>\n Skrypt konfiguratora jest do\u0142\u0105czony do strony jak ka\u017cdy inny i startuje od razu, wi\u0119c pobiera model i wszystkie warianty kolor\u00f3w oraz dodatk\u00f3w, tak\u017ce te, kt\u00f3rych klient nigdy nie wybierze. P\u0142ac\u0105 za to r\u00f3wnie\u017c osoby, kt\u00f3re przysz\u0142y tylko przeczyta\u0107 opis i sprawdzi\u0107 cen\u0119. Dzieje si\u0119 tak nawet wtedy, gdy konfigurator jest kilka ekran\u00f3w ni\u017cej, bo skrypt startuje niezale\u017cnie od tego, czy klient do niego dotrze.<\/p>\n Nieskompresowany model i tekstury w wysokiej rozdzielczo\u015bci potrafi\u0105 wa\u017cy\u0107 wi\u0119cej ni\u017c ca\u0142a reszta strony. Tekstury zapisane jako JPG lub PNG trzeba jeszcze rozpakowa\u0107 w pami\u0119ci karty graficznej, co na telefonie trwa i zajmuje pami\u0119\u0107. Jak przygotowa\u0107 l\u017cejszy model, opisujemy we wpisie model 3D z CAD za ci\u0119\u017cki do przegl\u0105darki<\/a>.<\/p>\n Element canvas, na kt\u00f3rym rysuje si\u0119 model 3D, nie jest brany pod uwag\u0119 przy liczeniu LCP. Je\u015bli pierwszy ekran zajmuje sam konfigurator, wynik zale\u017cy od innego elementu, np. nag\u0142\u00f3wka, a jego wy\u015bwietlenie op\u00f3\u017aniaj\u0105 skrypty 3D, kt\u00f3re konkuruj\u0105 o \u0142\u0105cze i procesor. Klient widzi wtedy pusty prostok\u0105t zamiast produktu, cho\u0107 m\u00f3g\u0142by od razu zobaczy\u0107 jego zdj\u0119cie.<\/p>\n Rozpakowanie modelu i przygotowanie sceny zajmuj\u0105 procesor telefonu. Je\u015bli dzieje si\u0119 to zaraz po wej\u015bciu na stron\u0119, pierwsze klikni\u0119cia w menu czy przyciski reaguj\u0105 z op\u00f3\u017anieniem, co pogarsza INP i wra\u017cenie, \u017ce strona dzia\u0142a sprawnie.<\/p>\n Poka\u017c w pierwszym ekranie lekki obraz podgl\u0105du, kt\u00f3ry stanie si\u0119 elementem LCP, a konfigurator \u0142aduj dopiero wtedy, gdy klient go potrzebuje. Reszt\u0119 zysku daj\u0105 skompresowane pliki i dobre ustawienia pami\u0119ci podr\u0119cznej. Kolejno\u015b\u0107 zmian ma znaczenie: najpierw obraz podgl\u0105du i \u0142adowanie na klikni\u0119cie, bo poprawiaj\u0105 wynik dla wszystkich odwiedzaj\u0105cych, a dopiero potem kompresja, kt\u00f3ra skraca czekanie tych, kt\u00f3rzy konfigurator uruchomi\u0105.<\/p>\nDlaczego konfigurator 3D psuje wynik PageSpeed?<\/h2>\n
Wszystko \u0142aduje si\u0119 razem ze stron\u0105<\/h3>\n
Za du\u017ce modele i tekstury<\/h3>\n
Brak obrazu podgl\u0105du i konfigurator w pierwszym ekranie<\/h3>\n
Ci\u0119\u017cki kod uruchamiany przy starcie<\/h3>\n
Jak przyspieszy\u0107 stron\u0119 z konfiguratorem 3D?<\/h2>\n