Makieta 3D na telefonie tnie się albo wolno ładuje? Przyczyny i rozwiązania

Makieta 3D przycina się albo wolno ładuje na telefonie najczęściej z trzech powodów: model liczony w przeglądarce jest za ciężki dla telefonu, makieta pobiera za duże pliki od razu razem ze stroną albo przechwytuje gesty i walczy z przewijaniem. Rozwiązania są znane: makieta z wyrenderowanych ujęć zamiast ciężkiego modelu (albo mocno odchudzony model), ładowanie dopiero po treści strony i w mniejszej rozdzielczości na telefon oraz gesty, które nie blokują czytania. Poniżej objawy, przyczyny i lista poprawek.

Objawy i ich przyczyny

Rendery czy model 3D w przeglądarce

To najważniejsza decyzja dla telefonu. Makieta z wyrenderowanych ujęć to seria zdjęć wykonanych dookoła osiedla, na których narysowane są obrysy lokali. Telefon nie liczy grafiki 3D, tylko pokazuje kolejne zdjęcia – dlatego działa płynnie nawet na starszych modelach. Model 3D liczony w przeglądarce daje swobodną kamerę i przybliżanie, ale wymaga od telefonu pracy karty graficznej. Na współczesnych telefonach działa dobrze, pod warunkiem że jest odchudzony.

Więcej o różnicach między rodzajami makiet przeczytasz w artykule makieta 3D osiedla: co to jest i jakie są rodzaje.

Co poprawić: lista dla zespołu albo dostawcy

1. Obraz zastępczy na start. Zanim makieta ruszy, kupujący widzi lekki obraz osiedla. Strona nie czeka na makietę.
2. Ładowanie po treści i dopiero w widoku. Makieta zaczyna pobierać pliki po załadowaniu strony, gdy przeglądarka ma wolną chwilę, i gdy kupujący do niej przewinie.
3. Mniejsze ujęcia na telefon. Na wąski ekran wystarczą ujęcia w mniejszej rozdzielczości. Duże pobiera się tylko na dużym ekranie i tylko dla widoku, na którym kupujący się zatrzymał.
4. Kolejność pobierania. Najpierw co kilka ujęć, żeby obrót działał od razu, potem uzupełnianie reszty – zamiast czekania na komplet.
5. Pauza poza ekranem. Gdy makieta zniknie z widoku, przestaje liczyć obraz i pobierać pliki.
6. Odchudzony model. W makiecie liczonej w przeglądarce: mniej wielokątów, mniejsze tekstury, proste cienie i ograniczona rozdzielczość renderowania na ekranach o dużej gęstości pikseli.
7. Gesty jak w aplikacji. Przesunięcie palcem w bok obraca makietę, w pionie przewija stronę, dwa palce przybliżają.
8. Karta lokalu od dołu ekranu. Na telefonie karta wysuwa się jak arkusz od dołu i nie zasłania całej makiety.
9. Lista lokali pod makietą. Gdy mieszkania są małe na ekranie, kupujący wybiera z listy, a makieta podświetla lokal.

Makieta a szybkość strony w Google

Google ocenia szybkość strony między innymi po tym, jak szybko pojawia się główna treść i czy układ strony nie skacze podczas ładowania. Makieta, która rusza po treści, z obrazem zastępczym o stałych wymiarach, nie musi tych wyników pogarszać. Pogarsza je makieta, która blokuje ładowanie strony albo zmienia wysokość, gdy się wczyta. Pod makietą powinna być też zwykła lista lokali w HTML – grafiki 3D wyszukiwarki nie przeczytają. O szybkości strony z makietą i dostępności piszemy też w artykule o wyszukiwarce mieszkań 3D na WordPressie.

Jak to rozwiązaliśmy w makietach DeweloperCeny 3D

• FOTO to obrót z renderów: przeglądarka pokazuje zdjęcia, więc działa płynnie na każdym telefonie.
• Makieta zaczyna ładowanie dopiero po wczytaniu strony, najpierw co kilka ujęć, a resztę uzupełnia w tle. Do tego czasu widać kadr osiedla i licznik wczytanych widoków.
• Na telefonie pobiera mniejsze ujęcia. Duże pobiera tylko na dużym ekranie, dla widoku, na którym kupujący się zatrzyma.
• Poza ekranem makieta robi pauzę.
• Obrót przesunięciem palca w bok, przewijanie strony w pionie bez blokady, karta lokalu jako arkusz od dołu ekranu.
• 3D LITE to lekki, stylizowany model liczony w przeglądarce, ze swobodną kamerą – na współczesnych telefonach działa dobrze.

Otwórz demo makiety 3D osiedla na swoim telefonie i sprawdź sam. Przy budynkach wielorodzinnych zobacz też, jak pokazać mieszkania, żeby dało się w nie trafić palcem – w artykule o makiecie 3D budynku wielorodzinnego.