Hvorfor lige over / under folden
Der tales meget i min verden om over og under folden og det gør der af den simple årsag at det har positiv indflydelse på hastigheden og renderingstiden, hvis man husker at tage højde for det mens man optimerer.
der er nemlig forskellige ting man skal tage højde for når man optimere det der er over folden og det samme når man taler under folden.
Hvad er over folden og under folden?
Over folden: er det der vises i browseren når du tilgår din hjemmeside. Det er det første du ser før du begynder at scrolle.
Under folden: er så at det du skal scrolle for at se i din browser
de typiske regler
der er tommelfingerregler som man lige kan følge når man optimerer sin hjemmeside.
Over folden skal hjemmesiden loade hurtigt, den må ikke visuelt ændre sig alt for meget.
- Logo
- fonte
- grid
- header
- billeder
- css som bruges på elementer over folden
- mf.
er alt sammen noget som skal loades hurtigt over folden og som noget af det første. Meget skal inlines i html koden og skal preloades. Man må ikke lazyloade elementer over folden. En typisk regel er også, undgå slidere, store billeder, videoer mm over folden, da det skaber yderligere load af elementer som du faktisk ikke er sikker på at brugeren overhovedet gider se på.
Under folden er det fint at elementer loader senere, og gerne efter onload er skudt af.
- Billeder
- chats
- eksterne elementer
- Css
- js
er dele som kan loades senere når der er tale om under folden. Her må og skal man helst lazyloade billeder og videoer. og man skal helst også dele css op sådan at det der reelt kun bruges under folden, loades senere.
ja det kan virke forvirrende
ja det er klart at det kan virke forvirrende når de samme typer elementer på en hjemmeside skal to forskellige ting.
men fx kan man ofte på fx billeder sætte en attribut for at lige netop det billede ikke bliver lazyloadet. Det kan du læse mere om i det plugin eller den metode du bruger til lazyload.
Det var lige et hurtigt tip fra min julekalender 🙂 God Jul
