Ekran za učitavanje (preloader) je slika ili animacija preko stranice dok se ona učitava. Neki sajtovi izgledaju uredno sa njim, a drugi deluju sporije nego što jesu. Razlika nije u samoj ideji, nego u tome kako je podešen. U ovom članku objašnjavamo šta ekran za učitavanje može, a šta ne može, i kako da ga podesite tako da pomaže prvom utisku umesto da smeta brzini.
Šta ekran za učitavanje zapravo radi
Dok se stranica učitava, pregledač je iscrtava deo po deo: prvo tekst, pa fontovi, pa slike koje pomeraju sve ispod sebe. Ekran za učitavanje prekriva taj trenutak i podiže se kada je stranica spremna, pa posetilac odmah vidi gotovu stranicu.
Važno je razumeti jedno: ekran za učitavanje ne ubrzava sajt. Stranica se učitava isto kao i bez njega. On samo menja ono što posetilac vidi dok čeka. Zato je dobar kada sakriva neuredno iscrtavanje, a loš kada produžava čekanje.
Kada pomaže
- Prodavnice i sajtovi sa mnogo slika, gde se proizvodi i baneri inače pojavljuju jedan po jedan.
- Sajtovi sa jakim brendom, gde logo dočeka posetioca pre stranice.
- Portfolio i prezentacije, gde je prvi utisak deo onoga što prodajete.
- Glatki prelazi između stranica, kada se ekran kratko spusti pri kliku i podigne kada je nova stranica spremna.
Kada smeta
- Kada traje predugo. Ekran koji čeka svaku sporu skriptu ili reklamu drži posetioca ispred zatvorenih vrata.
- Kada se prikazuje na svakoj stranici, i pri desetom kliku. Prvi put je doček, deseti put je smetnja.
- Kada je animacija teža od stranice. Velika animacija koja se prva učitava odlaže sve ostalo.
- Na korpi i plaćanju. Kupac koji plaća ne treba da čeka ni sekund više nego što mora.
- Kada stranica može da ostane prekrivena jer se skripta ekrana nije učitala ili ju je dodatak za brzinu odložio.
Kako da ga podesite kako treba
1. Ograničite trajanje
Potrebne su dve granice. Najkraće trajanje (oko pola sekunde) sprečava da ekran samo trepne kada stranica dolazi iz keša. Najduže trajanje (nekoliko sekundi) je sigurnosna mreža: ekran se podiže i kada se neka spora slika ili skripta još učitava.
2. Prikažite ga jednom
Za većinu sajtova najbolje je „samo na prvoj stranici posete“. Posetilac dobije doček kada dođe, a dalje se kreće bez zastoja.
3. Izaberite laku animaciju
Spiner napravljen u CSS-u ne učitava nijedan fajl i pojavljuje se odmah. Mali logo na providnoj pozadini je takođe dobar izbor. Lottie animacije su lepe, ali birajte male fajlove i učitavajte ih sa svog sajta, ne sa tuđeg servera.
4. Izuzmite korpu i plaćanje
Koraci kupovine, povratak sa stranice banke posle plaćanja karticom i stranice naloga treba da se otvaraju bez ekrana za učitavanje.
5. Poštujte „smanji pokrete“
Neki posetioci u telefonu ili računaru uključe „smanji pokrete“ jer im animacije smetaju. Za njih ekran treba da miruje i da se odmah podigne.
6. Proverite kako radi sa dodacima za brzinu
Dodaci za brzinu često odlažu ili spajaju JavaScript. Ako odlože i skriptu ekrana za učitavanje, ekran može da ostane predugo. Dobro rešenje se samo izuzima iz odlaganja i ima mali tajmer u samoj stranici koji ga podiže i kada je skripta blokirana. Bez JavaScript-a ekran ne treba ni da se prikaže.
Kako da izmerite brzinu sa ekranom za učitavanje
Alati kao što je PageSpeed Insights mere kada se sadržaj stranice stvarno pojavi i koliko se pomera dok se učitava. Ekran za učitavanje ne menja koliko brzo server šalje stranicu, ali dugačak ekran odlaže trenutak kada posetilac vidi sadržaj. Zato:
- izmerite stranicu i sa ekranom i bez njega, pa uporedite;
- ako se razlika vidi, skratite najduže trajanje ili izaberite „podigni čim je tekst spreman“ umesto čekanja svih slika;
- pravu brzinu popravljajte kešom, manjim slikama i manjim brojem dodataka, a ne ekranom za učitavanje.
Kako to radi NikolicWP Zavesa
Sve iz ovog članka je ugrađeno u NikolicWP Zavesa. Prikazuje Nika, maskotu NikolicWP, spiner, vaš logo ili Lottie animaciju. Ima najkraće i najduže trajanje, prikaz jednom po poseti, preskače korpu i plaćanje i poštuje „smanji pokrete“. Sama se izuzima iz odlaganja JavaScript-a kod poznatih dodataka za brzinu, a mali tajmer u stranici je podiže i kada je skripta blokirana. Njen CSS je nekoliko redova u zaglavlju, a skripta ima oko 3 KB. Sa ?nwp_zavesa_off=1 u adresi stranica se otvara bez nje, pa brzinu lako merite i sa njom i bez nje.
Česta pitanja
Da li ekran za učitavanje loše utiče na Google?
Ne, ako je kratak i lak. Google čita isti sadržaj stranice kao i bez njega. Problem nastaje samo kada ekran dugo drži sadržaj sakrivenim, pa ga zato ograničite najdužim trajanjem.
Koliko treba da traje?
Koliko traje učitavanje, a ne duže. Na brzom sajtu to je delić sekunde, uz najkraće trajanje od oko pola sekunde da ne bi trepnuo. Najduže trajanje od nekoliko sekundi je samo sigurnosna mreža.
Može li stranica da ostane zauvek prekrivena?
Kod dobrog rešenja ne. Ekran se podiže posle najdužeg trajanja i kada je skripta blokirana, a bez JavaScript-a se uopšte ne prikazuje.
Da li mi uopšte treba?
Ne mora. Brz sajt bez ekrana za učitavanje je odličan. Ekran ima smisla kada želite uredan doček, jači utisak brenda ili glatke prelaze, i kada ga podesite tako da ne produžava čekanje.
Ukratko: ekran za učitavanje ne ubrzava sajt, ali može da sakrije neuredno iscrtavanje i da ostavi lep prvi utisak. Neka bude kratak, lak, prikazan jednom po poseti, bez korpe i plaćanja i sa sigurnosnom mrežom. Tako pomaže, a ne smeta.
