Repararea layouturilor care sar: cele mai dese pricini
Un layout care sare este greșeala pe care vizitatorii o simt cel mai tare și pe care dezvoltatorii o văd cel mai rar – fiindcă pe un calculator iute, cu memoria intermediară plină, nu sare nimic. Șase pricini acoperă aproape toate cazurile.
Pe scurt
- Șase pricini acoperă aproape toate cazurile – imagini fără măsuri, fonturi care se încarcă în urmă, conținuturi străine încorporate, mesaje arătate mai târziu, CSS încărcat târziu și conținuturi puse dinamic.
- Valoarea se măsoară cu regularitate prea bine pe calculatorul propriu: legătură iute, memorie intermediară plină, altă mărime de ecran.
- Măsura izolată cea mai lucrătoare este să dai fiecărei imagini și fiecărui element încorporat măsuri fixe sau un raport de laturi.
- O bandă de mesaj care apare după încărcare și împinge conținutul în jos este a doua pricină ca desime – și cea mai lesne de reparat.
Cele șase pricini
1. Imagini fără măsuri
Fără width și height, browserul nu știe cât loc trebuie păstrat – textul alunecă de îndată ce sosește imaginea.
Repararea: puneți amândouă atributele și adăugați în CSS height: auto, ca scalarea să rămână întreagă.
2. Fonturi care se încarcă în urmă
Textul apare mai întâi în fontul de schimb și sare la trecere, fiindcă cele două curg cu lățimi deosebite.
Repararea: încărcați fontul dinainte, font-display: swap și potriviți măsurile fontului de schimb cu cele ale fontului-țintă.
3. Conținuturi străine încorporate
Videoclipurile, hărțile, widgeturile de evaluări vin fără o înălțime cunoscută și împing totul în jos când sosesc.
Repararea: dați dinainte un loc de așteptare cu raport de laturi fix, în care se încarcă apoi conținutul.
4. Mesaje arătate mai târziu
Un banner de consimțământ sau o bandă de campanie care apare sus după încărcare și împinge toată pagina în jos.
Repararea: păstrați locul de la bun început sau arătați-l suprapus, nu împingând.
5. CSS încărcat târziu
Dacă foaia de stil intră în lucru abia după prima construire, pagina se arată o dată neîmpodobită și pe urmă împodobită.
Repararea: livrați devreme regulile de trebuință pentru partea văzută – întregi, nu pe bucăți.
6. Conținuturi puse dinamic
Un mesaj, o listă sau o zonă pe care JavaScript o pune, după încărcare, deasupra conținutului de față.
Repararea: puneți-o sub partea văzută sau păstrați loc pentru ea.
Știai că…?
Pricina a cincea este cea mai vicleană, fiindcă local nu apare aproape niciodată: pe o legătură iute, foaia de stil sosește înainte de prima construire și nu sare nimic. Pe o legătură înceată ea sosește după – iar toată pagina se construiește de două ori.
Să livrezi devreme o parte din CSS nu ajunge aici: dacă înăuntru lipsește o regulă care privește partea văzută, tocmai acel element sare. Ori întreg pentru partea văzută, ori deloc – soluțiile pe jumătate sunt aici mai rele decât niciuna.
Măsurarea făcută cum trebuie
| Calea de măsurare | Ce arată | Capcana |
|---|---|---|
| Calculatorul propriu, uneltele de dezvoltare | semne grosiere | prea iute, memoria intermediară plină |
| Test de laborator în unealta de verificare | o valoare care se poate repeta | o singură condiție, nu realitatea |
| Date de teren de la vizitatori adevărați | ce se întâmplă într-adevăr | cere destul trafic |
| Mobil, cu legătura strunită | cel mai cinstit test izolat | trebuie potrivit anume |
Un caz care se întipărește: o pagină avea local o valoare fără cusur, iar în unealta de verificare una foarte proastă. Pricina era o foaie de stil livrată dinainte doar în parte – înăuntru lipseau trei reguli pentru zone din partea văzută.
Local nu a sărit niciodată în ochi, fiindcă fișierul întreg sosea mai iute decât prima construire. Cu legătura strunită sosea după, iar trei zone săreau. Învățătura: la layouturile care sar, impresia locală nu este o contradovadă, ci doar un alt scenariu – și de obicei cel mai puțin realist.
Ordinea la reparare
- Verificați toate imaginile.
widthșiheightpuse, în CSSheight: auto. De obicei jumătate din problemă. - Încadrați conținuturile străine încorporate. Loc de așteptare cu raport de laturi fix.
- Verificați mesajele arătate. Suprapuse, nu împingând.
- Verificați încărcarea fonturilor. Încărcare dinainte, font de schimb potrivit.
- Verificați livrarea CSS. Întreagă pentru partea văzută.
- Măsurați din nou – cu legătura strunită. Și anume după fiecare pas în parte, altfel nu se știe ce a lucrat.
Ajută-mă să găsesc și să repar layouturile care sar pe pagina noastră. Date: - Valoarea măsurată pentru deplasarea layoutului: [valoare, unealtă, mobil sau desktop] - Elementele care, după măsurare, se deplasează: [listă, dacă se cunoaște] - Imagini cu atribute width/height? [da / nu / în parte] - Cum se livrează CSS-ul? [fișier extern / încorporat dinainte / în parte dinainte] - Conținuturi străine încorporate: [videoclipuri, hărți, evaluări, chat] - Se arată ceva după încărcare? [banner, mesaj, bandă de campanie] - Cum se încarcă fonturile? [indicație] Sarcini: 1. Așază fiecare element care se deplasează la una dintre cele șase pricini: imagini fără măsuri, fonturi care se încarcă în urmă, conținuturi străine încorporate, mesaje arătate mai târziu, CSS încărcat târziu, conținuturi puse dinamic. 2. Numește pentru fiecare pricină repararea concretă, cu exemplu de cod. 3. Dacă CSS-ul se livrează dinainte doar în parte: lămurește de ce asta poate fi mai rău decât deloc și ce trebuie verificat. 4. Dă-mi o ordine după efect raportat la efort. 5. Spune-mi cum ar trebui să măsor după fiecare pas, ca să știu ce a lucrat. Nu inventa valori măsurate.
Concluzie
Șase pricini, iar prima – imaginile fără măsuri – face de obicei jumătate. Se repară într-o jumătate de oră și lucrează numaidecât.
Partea mai grea este măsurarea: cine verifică local măsoară un scenariu pe care abia îl trăiește vreun vizitator. Măsurați cu legătura strunită, după fiecare pas în parte – altfel repari trei lucruri și nu știi care dintre ele a lucrat.
Întrebări frecvente
De ce sare conținutul la încărcarea unei pagini?
De obicei dintr-una din șase pricini: imagini fără măsuri, fonturi care se încarcă în urmă și au altă lățime de curgere, conținuturi străine încorporate fără înălțime cunoscută, benzi de mesaj arătate mai târziu, CSS care intră în lucru târziu și conținuturi puse de JavaScript deasupra părții văzute.
Care este măsura izolată cea mai lucrătoare?
Să dai fiecărei imagini width și height și să adaugi în CSS height: auto. Browserul păstrează atunci de la bun început locul potrivit, iar scalarea rămâne întreagă. Măsura aceasta face în practică adesea jumătate din problemă.
De ce este valoarea mai bună local decât în unealta de verificare?
Fiindcă pe calculatorul propriu legătura este iute, iar memoria intermediară plină: foile de stil, fonturile și imaginile sosesc înainte de prima construire a paginii și nu sare nimic. În condiții realiste ele sosesc după – de aceea trebuie măsurat cu legătura strunită.
Poate strica un CSS livrat dinainte doar în parte?
Da. Dacă în partea livrată dinainte lipsește o regulă care privește o zonă din partea văzută, tocmai acel element sare de îndată ce sosește foaia de stil întreagă. Ori întreg pentru partea văzută, ori deloc – soluțiile pe jumătate sunt aici mai rele decât niciuna.
Cum se repară bannerele de consimțământ care sar?
Arătându-le suprapus, nu împingând – adică așezate deasupra conținutului, fără să îl împingă în jos. Ca alternativă, locul se poate păstra de la bun început. Pricina aceasta este una dintre cele mai dese și, totodată, cea mai lesne de reparat.
Marketing care se configurează singur
Beta Studio Engine este deschisă. Rezervă-ți locul și contribuie de la început.
Participă la beta →