Een klant belt dat zijn website traag is. De eerste reactie is bijna altijd hetzelfde: het ligt aan de server. Toch blijkt dat zelden zo te zijn. De server levert de pagina in een fractie van een seconde. Daarna moet de browser er nog iets van maken, en daar gaat de tijd zitten.
Dat deel heet de frontend. Het is de plek waar de meeste snelheidswinst ligt, en tegelijk de plek waar niemand kijkt.
Bij CK Bloemstyling speelde dat mee. Ik verzorgde daar het webdesign en de vindbaarheid. Bloemwerk verkoop je met beeld, dus er staan veel foto’s op de site.
Die foto’s kwamen ongecomprimeerd binnen, in volle resolutie. De server had zijn werk allang gedaan, maar de bezoeker keek naar een lege pagina. Ik heb het beeld teruggebracht en de volgorde van het laden aangepast. Aan de server is niets veranderd.
De frontend is alles wat je bezoeker ziet en aanraakt.
Wat is de frontend?
De frontend is de voorkant van je website. Alles wat in de browser gebeurt, hoort erbij. De teksten, de kleuren, de knoppen en wat er gebeurt als je erop drukt.
Het draait op het apparaat van je bezoeker, niet op jouw server. Dat is het wezenlijke verschil met de backend.
Waar het uit bestaat
Drie talen doen samen het werk. HTML bepaalt wat iets is. CSS bepaalt hoe het eruitziet. JavaScript bepaalt wat er gebeurt.
Die drie worden door de browser samengevoegd tot een levend model van je pagina. Dat model heet de DOM.
Het verschil met de backend
De backend is de keuken, de frontend is de eetzaal. De keuken bepaalt wat er op het bord komt. De eetzaal bepaalt of het er goed uitziet en of je er prettig zit.
Beide kunnen los traag zijn. Een trage keuken laat je wachten op je eten. Een rommelige eetzaal laat je wachten voordat je kunt zitten. Bij websites komt het tweede vaker voor.
Wat een frontender doet
Een frontend developer bouwt die eetzaal. Hij vertaalt een ontwerp naar werkende code die op elk scherm klopt.
Dat is meer dan overtekenen. Hij bepaalt wat er gebeurt bij een smal venster. Ook hoe een formulier reageert op een fout, en of alles met het toetsenbord bruikbaar blijft.
Waarom het traag wordt
De oorzaken zijn bijna altijd dezelfde vier.
Wat ik als eerste controleer
Afbeeldingen die veel groter zijn dan ze worden getoond.
scripts laden die de opbouw van de pagina blokkeren.
Lettertypen die van een externe partij komen.
Ingesloten onderdelen zoals video en kaarten.
Die eerste is veruit de grootste. Een foto van vier megabyte die als postzegel wordt getoond, kost je bezoekers. Meer daarover lees je bij pagespeed.
Overal hetzelfde?
Nee, en dat hoeft ook niet. De weergave op mobiel verschilt van die op desktop, en dat is precies de bedoeling.
Wat wel overal hetzelfde moet zijn, is de bruikbaarheid. Elke knop werkt, elke tekst is leesbaar, elk formulier is in te vullen. Verschillen in vormgeving zijn prima, verschillen in werking niet.
Kun je er zelf bij?
Voor teksten en afbeeldingen wel. Die beheer je gewoon in WordPress zonder code.
Voor opmaak en gedrag ligt het anders. Daar wil je niet zomaar in, want een kleine wijziging kan ergens anders iets breken. Laat dat over aan iemand die het overziet.
Wat je wel zelf kunt doen is beeld goed aanleveren. Upload geen foto’s rechtstreeks uit je camera. Dat is de grootste bijdrage aan een snelle gebruikerservaring die je zonder kennis kunt leveren. Ik controleer die kant standaard bij onderhoud, want elke nieuwe pagina brengt nieuw gewicht mee.
Waar je zelf op kunt letten
Schaal je foto’s terug voordat je ze uploadt. Een afbeelding die over de volle breedte staat, hoeft niet breder te zijn dan zo’n tweeduizend pixels.
Zet ook geen video rechtstreeks op je server. Gebruik daarvoor een platform en laad de speler pas na een klik.
Meten in plaats van gokken
Open de ontwikkelaarstools van je browser en kijk welke bestanden er binnenkomen. Sorteer op grootte en je ziet meteen wie de boosdoener is.
Vaak zijn het drie bestanden die samen de helft van je pagina uitmaken. Die drie aanpakken levert meer op dan honderd kleine optimalisaties.
Meer vragen over Frontend
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is de frontend van een website?
Wat is het verschil tussen frontend en backend?
Waarom is mijn frontend traag?
Wat doet een frontend developer?
Werkt mijn frontend op elk apparaat hetzelfde?
Kan ik zelf iets aan mijn frontend veranderen?
Wat is de frontend van een website?
De backend is de keuken, de frontend is de eetzaal. Die vergelijking dekt het aardig.
De keuken bepaalt wat er op het bord komt. Daar staan je teksten in een database, worden formulieren verwerkt en wordt bepaald wie wat mag zien.
De eetzaal bepaalt of het er goed uitziet en of je er prettig zit. Daar staat je opmaak, je indeling en je interactie.
Beide kunnen los traag zijn. Een trage keuken laat je wachten op je eten. Een rommelige eetzaal laat je wachten voordat je kunt zitten.
Bij websites komt dat tweede vaker voor dan mensen denken. De server levert de pagina vaak in een fractie van een seconde, waarna de browser er nog seconden over doet. Meer over die andere kant lees je bij backend.
Vraag bij een traagheidsklacht altijd welke van de twee onderzocht is. Wordt alleen naar de server gekeken, dan is de kans groot dat de echte oorzaak blijft staan.
Wat is het verschil tussen frontend en backend?
De frontend is het deel van je website dat de bezoeker ziet en gebruikt. Alles wat in de browser gebeurt, hoort erbij.
De teksten, de kleuren, de knoppen en wat er gebeurt als je erop drukt. Ook het menu dat inklapt op een telefoon en het formulier dat een foutmelding toont.
Het belangrijkste verschil met de achterkant is waar het draait. De frontend draait op het apparaat van je bezoeker, niet op jouw server.
Drie talen doen samen het werk. HTML bepaalt wat iets is, dus dit is een kop en dit is een knop. CSS bepaalt hoe het eruitziet. JavaScript bepaalt wat er gebeurt.
Die drie worden door de browser samengevoegd tot een levend model van je pagina. Dat model verandert terwijl iemand je site gebruikt. Meer daarover lees je bij DOM.
Je hoeft dit onderscheid niet dagelijks te gebruiken. Het helpt wel als je een offerte leest of als iemand zegt dat een probleem aan de voorkant zit.
Waarom is mijn frontend traag?
De oorzaken zijn bijna altijd dezelfde vier, en ik loop ze in deze volgorde langs.
De eerste is beeld. Afbeeldingen die veel groter zijn dan ze worden getoond. Een foto van vier megabyte die als postzegel op je pagina staat, is geen uitzondering.
De tweede zijn scripts die de opbouw van je pagina blokkeren. De browser stopt dan met tekenen tot het script binnen is.
De derde zijn lettertypen die van een externe partij komen. Dat is een extra verbinding voordat je tekst goed staat.
De vierde zijn ingesloten onderdelen zoals video en kaarten. Een enkele videospeler kan zwaarder zijn dan je hele pagina.
Begin altijd bij het beeld. Daar zit meestal de helft van de winst. Meer daarover lees je bij pagespeed.
Open de ontwikkelaarstools van je browser en sorteer de bestanden op grootte. Meestal zie je binnen tien seconden welke drie bestanden je pagina zwaar maken. Doe die check ook op een telefoon, want daar tellen zware bestanden het zwaarst.
Wat doet een frontend developer?
Een frontend developer bouwt de eetzaal. Hij vertaalt een ontwerp naar werkende code die op elk scherm klopt.
Dat is meer dan overtekenen wat de ontwerper heeft gemaakt. Hij bepaalt wat er gebeurt bij een smal venster, hoe een formulier reageert op een fout en of alles met het toetsenbord bruikbaar blijft.
Hij let ook op gewicht. Elke regel code en elk bestand telt mee in je laadtijd, en die keuzes maakt hij tijdens het bouwen.
Een goede frontender denkt dus na over drie dingen tegelijk: hoe het eruitziet, hoe snel het is en of iedereen het kan gebruiken.
Bij kleinere projecten doet een en dezelfde persoon zowel de voorkant als de achterkant. Bij grotere trajecten zijn dat aparte rollen met aparte kennis.
Vraag bij het inhuren van een bouwer of hij ook op laadtijd en toegankelijkheid let. Iemand die alleen een ontwerp natekent, levert je een mooie maar trage site.
Kan ik zelf iets aan mijn frontend veranderen?
Voor teksten en afbeeldingen wel. Die beheer je gewoon in WordPress zonder een regel code.
Voor opmaak en gedrag ligt het anders. Daar wil je niet zomaar in, want een kleine wijziging kan ergens anders iets breken. Een marge die je aanpast voor je homepage, verschuift misschien ook je contactpagina.
Wat je wel zelf kunt doen, en wat enorm scheelt, is beeld goed aanleveren. Upload geen foto’s rechtstreeks uit je camera of telefoon.
Schaal ze eerst terug naar de grootte waarop ze getoond worden. Een afbeelding die over de volle breedte staat, hoeft niet breder te zijn dan zo’n tweeduizend pixels.
Dat is de grootste bijdrage aan een snelle voorkant die je zonder technische kennis kunt leveren. En het scheelt je bouwer werk achteraf.
Spreek intern af wie foto’s aanlevert en in welk formaat. Zonder die afspraak sluipt er binnen een jaar weer een map met camerafoto’s je website in.
Laadt jouw website traag terwijl je hosting prima zou moeten zijn? Stuur me de link via het formulier hieronder. Ik meet wat er aan de voorkant gebeurt en welke bestanden je pagina zwaar maken. Je krijgt terug wat je kunt weghalen en wat het je oplevert. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Voorkant, clientzijde, gebruikerskant
