Goede pagespeed score

Eerder beschreef Vincent in zijn blog al wat Pagespeed Insights is, in dit blog beschrijf ik wat er technisch gedaan kan worden om een goede score te halen.

Optimaliseer afbeeldingen

Afbeeldingen kunnen erg zwaar zijn voor een browser en daarmee kan het tijd kosten deze in te laden. Er zijn verschillende manieren waarmee je ervoor kan zorgen dat afbeeldingen geoptimaliseerd kunnen worden.

Afbeeldingen comprimeren

Afbeeldingen hoeven niet altijd haarscherp getoond te worden, bedenk voor je een afbeelding op de site zet welke kwaliteitsgrootte die heeft. Hier kun je vaak wel tot 40% besparen door een afbeelding te comprimeren voor het web.

Lazyload images

Met lazyload van afbeeldingen wordt bedoeld om de afbeeldingen pas initieel in te laden wanneer deze gebruikt wordt oftewel wanneer de afbeelding te zien is in de viewport van het scherm.

Responsive images

Bij responsive images wordt niet meer gebruik gemaakt van de simpele manier van het ophalen van een afbeelding d.m.v. een image tag met een src attribuut. Maar schrijf je een afbeelding als volgt.

<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="400px">

Het src attribuut wordt gebruikt voor browsers die srcset en sizes niet ondersteunen.

Het srcset attribuut is een lijst met afbeeldingen die gebruikt kunnen worden gescheiden door komma’s achter de afbeelding staat wat ze noemen een width descriptor en verteld de browser hoe breed de afbeelding is.

Het sizes attribuut verteld de browser in welk formaat de afbeelding getoond moet worden, in het voorbeeld hierboven is dat dus 400 pixels. Deze sizes zijn nog per resolutie aan te passen zie bijvoorbeeld hieronder waar de afbeelding op een resolutie boven de 600 pixels getoond wordt op 160 pixels breed en onder 600 pixels zal de afbeelding 320 pixels breed worden ingeladen.

sizes="(min-width: 600px) 160px, 320px"

Lees hier wat Google meer zegt over het optimaliseren van afbeeldingen https://web.dev/uses-optimized-images

Critical CSS

Pagespeed Insights kan ook een melding geven over het blokkeren van CSS, de pagina laad dan meer CSS in dan die die daadwerkelijk nodig heeft op dat moment. Door critical CSS toe te passen kun je tegen de browser zeggen, dit is de CSS die je nu nodig hebt om in te laden en andere CSS kunnen worden uitgesteld zodat de pagina alvast goed kan inladen.

Critical CSS doet het volgende, deze CSS wordt maximaal verkleind en wordt in de head van de pagina gestopt. Zo is de CSS direct beschikbaar zonder een extra request. Zo kan de pagina direct gerenderd worden voor de bezoeker en is alles boven de vouw direct zichtbaar.

In het geval van onze homepagina is het volgende op een laptop resolutie boven de vouw.

Lees hier meer over render blocking issues https://web.dev/render-blocking-resources/

Inladen van web fonts

Chrome heft het volgende gedrag als het gaat om het inladen van een web font;

1. Zal de tekst verbergen voor 3 seconden
2. Als de font nog niet is in te laden, gebruikt de browser een systeem font
3. Wanneer web font klaar is dan zal de systeem font worden vervangen.

Deze 3 seconden wordt een flash of invisble text (FOIT) genoemd. Om deze 3 seconden te vermijden kun je kiezen voor een flash of unstyled text (FOUT). Dit betekent dat de browser al vanaf het begin kiest voor de systeem font tot wanneer de web font juist is ingeladen.

Dit kun je doen door ‘font-display: swap;’ toe te voegen aan je CSS.

Bekijk hier een visueel voorbeeld van FOIT en FOUT https://www.malthemilthers.com/wp-content/uploads/2017/06/foit-fout-animation.gif