Popraviti skakanje rasporeda: najčešći uzroci
Raspored koji skače pogreška je koju posjetitelji najjače osjete, a razvijatelji najrjeđe vide – jer na brzom računalu s punim međuspremnikom ništa ne skače. Šest uzroka pokriva gotovo sve slučajeve.
Najvažnije ukratko
- Šest uzroka pokriva gotovo sve slučajeve – slike bez mjera, naknadno učitana pisma, ugrađeni tuđi sadržaji, naknadno prikazane napomene, kasno učitan CSS i dinamički umetnuti sadržaji.
- Vrijednost se na vlastitom računalu redovito izmjeri prepovoljno: brza veza, pun međuspremnik, druga veličina zaslona.
- Najdjelotvornija pojedinačna mjera jest svakoj slici i svakom ugrađenom elementu dati čvrste mjere ili omjer stranica.
- Traka s napomenom koja se pojavi nakon učitavanja i sadržaj gura prema dolje drugi je najčešći uzrok – i najlakše uklonjiv.
Šest uzroka
1. Slike bez navoda mjera
Bez width i height preglednik ne zna koliko prostora treba pridržati – tekst se pomakne čim slika stigne.
Uklanjanje: postaviti oba svojstva i u CSS-u dodati height: auto da se skaliranje zadrži.
2. Naknadno učitana pisma
Tekst se najprije pojavi u zamjenskom pismu i skoči pri promjeni jer oba teku različitom širinom.
Uklanjanje: pismo učitati unaprijed, font-display: swap, i zamjensko pismo u njegovim mjerama približiti ciljnom.
3. Ugrađeni tuđi sadržaji
Videozapisi, karte, dodaci s ocjenama dolaze bez poznate visine i pri dolasku sve guraju prema dolje.
Uklanjanje: zadati rezervirano mjesto s čvrstim omjerom stranica u koje se sadržaj učitava.
4. Naknadno prikazane napomene
Traka za privolu ili akcijska traka koja se nakon učitavanja pojavi gore i cijelu stranicu gurne prema dolje.
Uklanjanje: prostor pridržati od početka ili prikazati preklapajuće umjesto uguravajuće.
5. Kasno učitan CSS
Postane li stilski predložak djelatan tek nakon prve izgradnje, stranica se jednom prikaže neoblikovana pa onda oblikovana.
Uklanjanje: pravila potrebna za vidljivo područje isporučiti rano – u cijelosti, ne u dijelovima.
6. Dinamički umetnuti sadržaji
Napomena, popis ili područje koje JavaScript nakon učitavanja umetne iznad postojećeg sadržaja.
Uklanjanje: umetati ispod vidljivog područja ili pridržati prostor.
Jeste li znali?
Peti je uzrok najpodmukliji jer se mjesno gotovo nikada ne pojavljuje: na brzoj vezi stilski predložak stigne prije prve izgradnje i ništa ne skače. Na sporoj vezi stigne poslije – i cijela se stranica izgrađuje dvaput.
Isporučiti dio CSS-a rano pritom nije dovoljno: nedostaje li u njemu pravilo koje se tiče vidljivog područja, skoči upravo taj element. Ili u cijelosti za vidljivo područje ili nikako – polovična su rješenja ovdje lošija od nikakvih.
Ispravno mjeriti
| Način mjerenja | Što prikazuje | Zamka |
|---|---|---|
| Vlastito računalo, razvojni alati | grube naznake | prebrzo, međuspremnik pun |
| Laboratorijski test u alatu za provjeru | ponovljiva vrijednost | jedan uvjet, ne stvarnost |
| Terenski podaci stvarnih posjetitelja | što se zaista događa | treba dovoljno prometa |
| Mobilno s prigušenom vezom | najpošteniji pojedinačni test | mora se svjesno postaviti |
Slučaj koji ostaje u pamćenju: stranica je mjesno imala besprijekornu vrijednost, a u alatu za provjeru vrlo lošu. Uzrok je bio djelomično unaprijed isporučen stilski predložak – u njemu su nedostajala tri pravila za područja u vidljivom dijelu.
Mjesno se to nikada nije primijetilo jer je potpuna datoteka stizala brže od prve izgradnje. Uz prigušenje je stizala poslije, i tri su područja skakala. Pouka: kod rasporeda koji skače mjesni dojam nije protudokaz nego samo drugi scenarij – i najčešće onaj manje stvaran.
Redoslijed pri uklanjanju
- Provjeriti sve slike.
widthiheightpostavljeni, u CSS-uheight: auto. Najčešće polovica problema. - Uokviriti ugrađene tuđe sadržaje. Rezervirano mjesto s čvrstim omjerom stranica.
- Provjeriti prikazane napomene. Preklapajuće umjesto uguravajuće.
- Provjeriti učitavanje pisama. Učitati unaprijed, približiti zamjensko pismo.
- Provjeriti isporuku CSS-a. U cijelosti za vidljivo područje.
- Ponovno mjeriti – prigušeno. I to nakon svakog pojedinog koraka, inače se ne zna što je djelovalo.
Pomozi mi pronaći i ukloniti skakanje rasporeda na našoj stranici. Podaci: - Izmjerena vrijednost za pomicanje rasporeda: [vrijednost, alat, mobilno ili stolno] - Elementi koji se prema mjerenju pomiču: [popis, ako je poznat] - Slike sa svojstvima width/height? [da / ne / djelomično] - Kako se isporučuje CSS? [vanjska datoteka / unaprijed ugrađen / djelomično unaprijed] - Ugrađeni tuđi sadržaji: [videozapisi, karte, ocjene, razgovor] - Prikazuje li se nešto nakon učitavanja? [traka, napomena, akcijska traka] - Kako se učitavaju pisma? [podatak] Zadaci: 1. Pridruži svaki element koji se pomiče jednom od šest uzroka: slike bez mjera, naknadno učitana pisma, ugrađeni tuđi sadržaji, naknadno prikazane napomene, kasno učitan CSS, dinamički umetnuti sadržaji. 2. Navedi za svaki uzrok konkretno uklanjanje s primjerom koda. 3. Ako se CSS isporučuje samo djelomično unaprijed: objasni, zašto to može biti lošije nego nikako, i što treba provjeriti. 4. Daj mi redoslijed po učinku u odnosu na trud. 5. Reci mi kako bih nakon svakog koraka trebala mjeriti da znam što je djelovalo. Ne izmišljaj izmjerene vrijednosti.
Zaključak
Šest uzroka, a prvi – slike bez navoda mjera – najčešće čini polovicu. Uklanja se u pola sata i djeluje odmah.
Teži je dio mjerenje: tko provjerava mjesno, mjeri scenarij koji jedva koji posjetitelj doživljava. Mjeriti prigušeno, nakon svakog koraka pojedinačno – inače se ukloni tri stvari i ne zna se koja je od njih djelovala.
Česta pitanja
Zašto sadržaj skače pri učitavanju stranice?
Najčešće iz jednog od šest uzroka: slike bez navoda mjera, naknadno učitana pisma s drugom širinom hoda, ugrađeni tuđi sadržaji bez poznate visine, naknadno prikazane trake s napomenom, CSS koji postaje djelatan kasno i sadržaji koje JavaScript umetne iznad vidljivog područja.
Koja je najdjelotvornija pojedinačna mjera?
Svakoj slici dati width i height te u CSS-u dodati height: auto. Preglednik tada od početka pridržava pravi prostor, a skaliranje ostaje sačuvano. Ta mjera u praksi često čini polovicu problema.
Zašto je vrijednost mjesno bolja nego u alatu za provjeru?
Zato što je na vlastitom računalu veza brza, a međuspremnik pun: stilski predlošci, pisma i slike stižu prije prve izgradnje stranice i ništa ne skače. U stvarnim uvjetima stižu poslije – zato se mora mjeriti prigušeno.
Može li djelomično unaprijed isporučen CSS naškoditi?
Da. Nedostaje li u unaprijed isporučenom dijelu pravilo koje se tiče područja u vidljivom dijelu, upravo taj element skoči čim stigne potpun stilski predložak. Ili u cijelosti za vidljivo područje ili nikako – polovična su rješenja ovdje lošija od nikakvih.
Kako ukloniti skakanje traka za privolu?
Tako da se prikazuju preklapajuće umjesto uguravajuće – dakle da leže iznad sadržaja a da ga ne guraju prema dolje. Kao zamjena, prostor se može pridržati od početka. Taj je uzrok jedan od najčešćih i istodobno najlakše uklonjiv.
Marketing koji se sam postavlja
Beta verzija Studio Enginea je otvorena. Osigurajte mjesto i sudjelujte od početka.
Pridruži se beti →