Waarom is mijn frontend traag?
Een trage frontend komt in vrijwel alle gevallen door drie dingen: te zware afbeeldingen, te veel lettertypen en te veel scripts van buitenaf.
De server krijgt de schuld, maar die is zelden de oorzaak. Meet het en je ziet het meteen.
Begin bij het zwaarste.
Je afbeeldingen
Bij vrijwel elke site die ik meet, zijn de afbeeldingen goed voor het grootste deel van het gewicht.
Een foto rechtstreeks van een camera is enkele megabytes; op je site heb je aan een fractie genoeg. Meer daarover lees je bij pagespeed.
Je lettertypen
Elk gewicht is een apart bestand, en ze houden het tonen van je tekst op tot ze binnen zijn.
Vier gewichten van een externe dienst is een halve seconde die je cadeau geeft.
Scripts van buiten
Chatvensters, meetcode, advertentiescripts en ingesloten video’s. Elk brengt een nieuwe verbinding en eigen bestanden mee.
Ze staan bovendien buiten jouw beheer: wordt zo’n partij traag, dan word jij traag. Meer daarover lees je bij dom.
Mijn vuistregels
- Meet eerst; raad niet.
- Los je afbeeldingen op voordat je iets anders doet.
- Beperk je lettertypen tot twee gewichten.
- Haal scripts weg die je niet gebruikt.
Die laatste levert vaak meer op dan alle technische optimalisaties samen.
Wat er nog meer speelt
Schokkerig scrollen komt niet door gewicht maar door rekenwerk in de browser: animaties, scrolleffecten en tellers.
Dat is een ander probleem met een andere oplossing. Meer daarover lees je bij css.
Waar je meet
In de ontwikkelaarshulpmiddelen van je browser, onder netwerkverkeer. Daar zie je per bestand wat het weegt en hoe lang het duurde.
Meer daarover lees je bij wat de frontend is.
Doe dat op een pagina die je belangrijk vindt, niet op je startpagina alleen. Die is vaak juist het lichtst.