Boven de vouw... Wat betekent dat in Google Pagespeed Insights?

**A. Hendriks** · 08-01-2014, 18:57

Zoals de titel al aangeeft, wat houdt 'boven de vouw' (above-the-fold content) in? Wat is het en hoe zorg je ervoor dat deze eerst weergegeven wordt tijdens het laden van de pagina?

**Marcel Melis** · 08-01-2014, 19:09

Daarmee wordt de content (dus teksten, afbeeldingen en video's) bedoeld die je direct op je scherm ziet, dus zonder te scrollen. Dat wordt dus sowieso als eerste weergegeven.

**A. Hendriks** · 08-01-2014, 19:14

Maar hoe zorg je dat bijvoorbeeld javascript documenten of css bestanden pas na de vouw geladen worden? Google suggereert dit, maar hoe doe je dat?

**Luuk Olde Bijvank** · 08-01-2014, 20:52

door ze lager in je code te plaatsen. En website laadt van boven naar beneden zo ook de code.

**A. Hendriks** · 08-01-2014, 21:32

Maar je kunt een .css document of een .js bestand van jquery toch niet pas onderaan de pagina inladen? Dan gaat het met de weergave van de website toch niet goed? Ik wil vrij bovenaan al een lightbox van jquery weergeven namelijk... Hoe kan ik dit aanpassen?

**Mark Puts** · 08-01-2014, 21:33

Je lightbox wordt sowieso pas geladen als de pagina geladen is? Dus dat is geen probleem?

**Marcel Melis** · 08-01-2014, 21:51

Een browser laadt de onderdelen van je website in de volgorde waarin ze in je HTML / PHP document staan. Dus eerst de stylesheet, dan de header, dan het menu, dan de content enzovoorts.

Dingen als javacript voor een lightbox kun je gemakkelijk onderin het HTML document zetten. De afbeelding zelf wordt dan al wel direct geladen, maar de javascript code om die afbeelding in een lightbox weer te geven wordt dan pas later geladen. Mensen moeten zich toch eerst even oriënteren, tegen de tijd dat ze op de afbeelding klikken is dat lightbox script al lang geladen.

Je kunt inderdaad niet alles zomaar naar onderen plaatsen. Dingen als stylesheets en bepaalde javascripts moeten in het <head> gedeelte van de site dus die vallen niet naar onderen te plaatsen.

**Wilbert E.** · 08-01-2014, 21:52

Origineel gepost door A. Hendriks

Maar je kunt een .css document of een .js bestand van jquery toch niet pas onderaan de pagina inladen? Dan gaat het met de weergave van de website toch niet goed? Ik wil vrij bovenaan al een lightbox van jquery weergeven namelijk... Hoe kan ik dit aanpassen?

Nee het is ergens anders voor, ik weet niet exact hoe het zit maar het heeft te maken met het asynchroon laden van je bestanden.
Alles in de <head> wordt geladen op het moment dat de browser het tegen komt en wacht totdat dit voltooid is.

Stel je hebt 2 CSS bestanden en 1 Javascript bestand en je plaatst deze in de head. Wat er dan gebeurt is het volgende:
1. De browser gaat je pagina laden.
2. Je browser komt CSS bestand 1 tegen en wacht met laden tot deze volledig binnen is.
3. Je browser komt CSS bestand 2 tegen en wacht met laden tot deze volledig binnen is.
4. Je browser komt het Javascript bestand tegen en wacht met laden tot deze volledig binnen is.
5. Je browser gaat verder met de HTML laden.
6. Pagina is geladen en wordt weergegeven.

Wat er gebeurt als je je HTML onderaan de pagina in de HTML zet (below the fold):
1. De browser gaat je complete HTML laden want komt niets tegen in de Head.
2. De browser komt je css bestanden en je javascript tegen maar laadt deze asynchroon (dus allemaal tegelijk)
3. Je pagina is geladen en wordt weergegeven.

**A. Hendriks** · 14-01-2014, 14:30

Dank allemaal voor de reacties! Het wordt al iets duidelijker.
Wilbert E., hoe realiseer ik dit? De css zal in de header moeten blijven staan, kan ik zomaar alle andere bestanden aan de footer zetten? Of kan ik anders instellen dat alles asynchroon geladen wordt? Probleem is nu dat als iemand via Google mijn website bezoekt het lang duurt voor er een pagina weergegeven wordt. (Heb het idee dat het komt doordat ik sinds recent gzip compressie aan heb staan). Nu is het zo dat eerst de gehele pagina geladen wordt (duurt 3 seconden ofzo) en dan pas alles in één keer weergegeven wordt. Hoe kan ik dat dan veranderen?

**J. Melgert** · 10-04-2014, 15:13

fwiw, http://cssminifier.com/

Boven de vouw... Wat betekent dat in Google Pagespeed Insights?