Over folden / under folden

Hvorfor er det vigtigt at have med i tankerne?

Hvad menes der egentlig når man siger over og under folden? Hvad skal man være obs på når man er over folden og hvad skal man være obs på under folden. Det er det du i dagens korte tip får et lille indblik i herunder.

over under folden

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

Årets julekalender

kim tetzlaff

Om forfatteren

Se mere Kim Tetzlaff

Jeg har siden 1995 arbejdet med og haft stor fokus på Teknisk SEO og hastighed på hjemmesider. Jeg er programmør, nørd og stolt af det. Jeg bygger hjemmesider, hastighedsoptimere, ser på det SEO tekniske og det er mere end 25 års erfaring der ligger bag – Du er i gode hænder når jeg laver noget for dig 🙂

Skriv en kommentar

Kategorier og tags på dette indlæg

,

Måske du også vil læse disse indlæg

Ja, jeg har også skrevet andre indlæg som måske kunne have din interesse