“Ik heb de tekst aangepast, maar ik zie er niets van.” Dat telefoontje krijg ik elke maand. In negen van de tien gevallen is de site allang bijgewerkt. Alleen de computer van de klant toont nog de oude versie.
De schuldige is dan geen bug, maar de webbrowser. Die bewaart namelijk een kopie om sneller te zijn. Handig, tot je zelf iets wijzigt.
Bij Bultsma Transport speelde dit bij de oplevering. De eigenaar zag op zijn werkcomputer nog de oude huisstijl staan, terwijl de nieuwe site live was.
We hebben samen zijn cache geleegd en het beeld klopte meteen. Sindsdien geef ik bij elke oplevering standaard de sneltoets mee om te verversen. Dat scheelt aan beide kanten een telefoontje.
Je website wordt bij elk bezoek opnieuw getekend.
Wat doet een browser precies?
Een browser haalt bestanden op van een server en tekent daar een pagina mee. Hij leest de HTML voor de structuur. Daarna de CSS voor de opmaak en de JavaScript voor het gedrag.
Dat tekenen heet renderen. Het gebeurt bij elk bezoek opnieuw, in milliseconden. Jouw website bestaat dus niet als plaatje. Hij wordt elke keer opnieuw opgebouwd.
De motor eronder
Elke browser gebruikt een rendering engine. Chrome en Edge draaien op Blink. Safari draait op WebKit. Firefox gebruikt Gecko. Die motoren interpreteren dezelfde code net iets anders.
Daar komen de weergaveverschillen vandaan. Meestal gaat het om details: een schaduw die net anders valt, een formulierveld met een andere hoogte.
Waarom je site er anders uitziet per browser
Nieuwe technieken worden niet overal tegelijk ondersteund. Safari en Chrome zijn daarin het klassieke voorbeeld. Safari loopt vaak een aantal maanden achter op Chrome.
Daarnaast heeft elke browser eigen standaardopmaak. Een knop zonder styling ziet er in Safari anders uit dan in Firefox. Daarom begin ik elk project met een reset die die verschillen gelijktrekt.
Welke browsers ondersteun ik?
Ik test standaard op Chrome, Safari, Firefox en Edge. Daarmee dek je in Nederland ruim 95 procent van het verkeer. Kijk voor jouw site in je eigen statistieken, want dat verschilt per branche.
oude browsers zoals Internet Explorer ondersteun ik niet meer. Microsoft heeft die zelf uitgezet. Ondersteuning volhouden kost meer dan het oplevert. Zie ook cross-browser.
De cache: nuttig en vervelend tegelijk
Je browser bewaart afbeeldingen, stijlen en scripts lokaal. De tweede keer laadt je site daardoor veel sneller. Dat is precies de bedoeling.
Het nadeel merk je bij wijzigingen. Jij ziet nog de oude versie, terwijl een nieuwe bezoeker het nieuwe beeld krijgt.
Zo verversen zonder cache
Windows: Ctrl en F5 tegelijk indrukken.
Mac: Cmd, Shift en R tegelijk indrukken.
Werkt dat niet, open dan een prive-venster.
Nog steeds oud? Dan zit het in de servercache.
Dat laatste komt bij mijn sites voor omdat er ook op de server gecachet wordt. Meer daarover lees je bij cache. Bij browsercache legen ruim je trouwens ook je opgeslagen wachtwoorden op, dus kies de juiste optie.
Wat je verder in je browser kunt
Druk op F12 en je opent de ontwikkelaarstools. Daar zie je de code, de laadtijden en de foutmeldingen. Ook zonder programmeerkennis is dat nuttig.
Je kunt er bijvoorbeeld je site op elke schermbreedte bekijken. Handig om te controleren of je breakpoint klopt. En je ziet welke afbeelding je pagina traag maakt.
Houd je eigen browser bij de tijd. Nieuwe browserversies brengen niet alleen functies, maar vooral beveiligingsupdates. Dat geldt net zo goed voor je WordPress installatie, wat ik meeneem in het onderhoud.
Wat dit voor jou betekent
Je hoeft geen browserexpert te worden. Onthoud vooral twee dingen.
Ten eerste: zie je iets vreemds, ververs dan eerst hard voordat je belt. Dat lost het merendeel van de meldingen direct op. Scheelt jou een telefoontje en mij een zoektocht.
Ten tweede: beoordeel je site niet op één computer. Kijk ook op je telefoon en laat een collega meekijken. Kleine verschillen horen erbij, grote verschillen niet.
Twijfel je of iets een fout is of gewoon techniek? Stuur me een screenshot met de naam van je browser erbij. Dan zie ik binnen een minuut waar het aan ligt.
Meer vragen over Browser
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat doet een browser precies?
Waarom ziet mijn website er anders uit per browser?
Welke browsers moet ik ondersteunen?
Hoe leeg je je browsercache?
Waarom zie ik mijn wijzigingen niet terug?
Werkt mijn website nog op oude browsers?
Waarom ziet mijn website er anders uit per browser?
Kijk eerst in je eigen statistieken, want dat verschilt sterk per branche. Een bouwbedrijf heeft ander bezoek dan een ontwerpbureau.
In Nederland dek je met Chrome, Safari, Firefox en Edge ruim 95 procent van het verkeer. Op die vier test ik standaard, in de nieuwste en de voorlaatste versie.
Safari verdient extra aandacht. Op iPhones en iPads is dat verplicht de onderliggende motor, ook als iemand Chrome gebruikt. Bij veel van mijn klanten is dat een derde van het bezoek.
Oude browsers zoals Internet Explorer ondersteun ik niet meer. Microsoft heeft die zelf uitgezet en ondersteuning volhouden kost meer dan het oplevert.
Zie je in je cijfers toch een groep op een oude browser? Zorg dan dat je site daar leesbaar blijft, ook al is hij niet perfect. Zie ook Google Analytics.
Kijk elk half jaar opnieuw naar die verdeling. Browsergebruik verschuift langzaam maar zeker. Vraag bij oplevering gewoon om die lijst. Een goede bouwer noemt hem uit zichzelf.
Welke browsers moet ik ondersteunen?
Omdat elke browser een eigen motor gebruikt om je pagina te tekenen. Chrome en Edge draaien op Blink, Safari op WebKit en Firefox op Gecko.
Die motoren lezen dezelfde code, maar interpreteren details net anders. Een schaduw valt net iets anders. Een formulierveld is een paar pixels hoger. Een lettertype oogt een fractie zwaarder.
Daarnaast heeft elke browser eigen standaardopmaak. Een knop zonder styling ziet er in Safari anders uit dan in Firefox. Daarom begin ik elk project met een reset die die verschillen gelijktrekt.
De grootste verschillen ontstaan bij nieuwe technieken. Safari loopt vaak enkele maanden achter op Chrome. Wat op je laptop werkt, kan op een iPhone dus net anders vallen.
Kleine verschillen zijn normaal en niet erg. Grote verschillen zijn een fout. Zie ook cross-browser.
Vraag bij oplevering om een test op meerdere browsers. Dat hoort er gewoon bij en kost weinig tijd. Kleine afwijkingen zijn dus geen fout, maar techniek. Grote afwijkingen wel.
Hoe leeg je je browsercache?
De snelste manier is een harde vernieuwing. Op Windows druk je Ctrl en F5 tegelijk in. Op een Mac gebruik je Cmd, Shift en R.
Daarmee haalt je browser de pagina opnieuw op in plaats van de opgeslagen kopie te tonen. In negen van de tien gevallen is dat genoeg.
Helpt dat niet, open dan een prive-venster. Daar wordt niets bewaard, dus je ziet meteen wat een nieuwe bezoeker ziet. Handig om te controleren of het probleem bij jou of bij de site zit.
Wil je de cache echt legen, dan zit dat in je browserinstellingen onder privacy. Let op welke vinkjes je aanzet, want daar staan ook je wachtwoorden en je inloggegevens tussen.
Zie je daarna nog steeds de oude versie? Dan zit het in de servercache en moet je bouwer die legen. Zie ook cache.
Doe dit ook voordat je je bouwer belt. In de meeste gevallen is het probleem daarmee al opgelost.
Waarom zie ik mijn wijzigingen niet terug?
Dit is de vraag die ik het vaakst krijg, en bijna altijd is de site allang bijgewerkt. Alleen jouw computer toont nog de oude versie.
Er zijn drie lagen waar een kopie kan blijven hangen. Je eigen browser en de cache op de server. En soms nog een laag bij je hostingpartij.
Begin bij jezelf met een harde vernieuwing. Werkt dat, dan weet je dat de site klopt en dat het aan je browser lag.
Zie je het in een prive-venster ook nog fout, dan zit het dieper. Meld dat aan je bouwer, want servercache legen is niets wat jij zelf hoeft te doen.
Een laatste veelvoorkomende oorzaak: je hebt gewerkt in een testomgeving en niet op de live site. Controleer het adres in je adresbalk. Zie ook staging.
Stuur bij een melding altijd een screenshot mee. Dan zie ik meteen welke versie jij voor je hebt. Meld ook op welk apparaat en in welke browser je kijkt. Dat scheelt een ronde heen en weer.
Werkt mijn website nog op oude browsers?
Meestal wel, alleen niet perfect. Dat onderscheid is belangrijk en het heeft een naam: progressive enhancement.
Het idee is simpel. Je site blijft leesbaar en bruikbaar, ook als een browser de nieuwste technieken mist. Iemand mist dan een afgeronde hoek of een animatie. Bestellen en contact opnemen werkt gewoon.
Dat werkt alleen als je site op degelijke HTML is gebouwd. Draait alles op zware scripts, dan valt er bij een oude browser een gat.
Hoe ver ik daarin ga, hangt af van je bezoekers. Zie ik in de cijfers een noemenswaardige groep op oudere software, dan test ik daar ook op.
Zie ik die groep niet, dan besteed ik die tijd liever aan snelheid en toegankelijkheid. Zie ook HTML.
Kijk dus eerst in je cijfers voordat je hier tijd in steekt. Vaak blijkt die groep verwaarloosbaar klein. Zet die tijd liever in op snelheid en toegankelijkheid. Daar heeft iedereen wat aan.
Ziet jouw website er op de ene computer anders uit dan op de andere? Stuur me het adres en een screenshot via het formulier hieronder. Ik test hem op Chrome, Safari, Firefox en Edge en stuur je terug wat er afwijkt. Dan weet je of het aan je site ligt of aan de computer. Vermeld je plaats, dan weet ik meteen waar je zit.
