U opent uw site op kantoor, hij staat er binnen een seconde, en u concludeert dat het snel genoeg is. Uw klant staat ondertussen op een parkeerplaats langs de A28 met twee streepjes bereik. Uw website testen mobiel netwerk-gewijs is daarom geen extraatje maar de enige meting die iets zegt over de helft van uw bezoekers die niet achter een bureau zit.
Hieronder drie manieren om dat na te bootsen, van gratis en snel tot dicht bij de werkelijkheid, plus wat u met de uitkomst doet.
Website testen, mobiel netwerk: waarom uw eigen indruk niet meetelt
Er zijn drie redenen waarom uw indruk structureel te rooskleurig is.
Ten eerste heeft uw browser alles al bewaard. Lettertypen, stylesheets, logo’s: die worden bij uw tweede bezoek helemaal niet meer opgehaald. Een nieuwe bezoeker begint met een lege lei.
Ten tweede zit u op een verbinding met veel bandbreedte en, belangrijker nog, met een lage vertraging. Op 4G ligt die vertraging op zeventig tot honderdvijftig milliseconden per heen-en-weertje, tegenover vijf op glasvezel. Bij een pagina die honderd verzoeken doet, telt dat hard aan.
Ten derde is uw computer sneller dan de telefoon van uw klant. JavaScript verwerken kost op een middenklassetoestel van vier jaar oud drie tot vijf keer zoveel tijd. Zwaar scriptwerk dat u niet merkt, laat zo’n telefoon zichtbaar haperen.
Manier 1: de simulatie in uw eigen browser
De snelste methode, en gratis. In Chrome:
- Open de ontwikkelaarshulpmiddelen met F12 en klik op het icoontje voor apparaatweergave, of gebruik Ctrl en Shift met M.
- Kies een toestel, bijvoorbeeld een gangbare telefoon met een schermbreedte rond de 390 pixels.
- Ga naar het tabblad Netwerk en zet de snelheidskeuze op Slow 4G. Vink daarnaast Disable cache aan, anders meet u opnieuw uzelf.
- Zet in het tabblad Prestaties de processorvertraging op vier keer trager. Dit is de stap die bijna iedereen overslaat, terwijl juist die het beeld realistisch maakt.
- Laad de pagina opnieuw en kijk naar de tijdlijn: wanneer verschijnt de eerste tekst, wanneer de grote afbeelding, wanneer reageert het menu.
Let vooral op wat er in de eerste drie seconden gebeurt. Ziet u een wit scherm, dan heeft u een probleem met renderblokkerende bestanden; dat verschijnsel staat uitgelegd in het stuk over renderblokkerende opmaak.
Manier 2: online meettools met een mobiel profiel
PageSpeed Insights meet standaard al met een gesimuleerde middenklassetelefoon op een trage verbinding; het mobiele tabblad is dus meteen de test die u zoekt. Wilt u meer controle, dan biedt WebPageTest de mogelijkheid om zelf een meetlocatie, een toestel en een verbindingsprofiel te kiezen.
Kies bij dat laatste een Europese meetlocatie. Meet u vanuit Virginia terwijl uw server in Amsterdam staat, dan meet u vooral de oceaan. Herhaal elke meting drie keer en gebruik de middelste uitkomst, want losse metingen schommelen flink.
Handig aan WebPageTest is de filmstrook: u ziet beeld voor beeld wat de bezoeker ziet. Dat is overtuigender in een gesprek met uw bouwer dan welk getal ook.
Bewaar bij zo’n test altijd de link naar het resultaat. Beide diensten geven u een adres waar het rapport blijft staan, en dat is later goud waard: u kunt dan aantonen hoe de situatie was voordat er iets werd aangepast. Zet die adressen met de datum in een eenvoudig overzicht, bijvoorbeeld in uw projectmap. Zonder die vastlegging blijft elke discussie over vooruitgang steken in herinneringen.
Manier 3: gewoon een echte telefoon
Niets vervangt de praktijk. Zet op uw telefoon de wifi uit, zet zo mogelijk het netwerk op 4G in plaats van 5G, en open uw site in een privévenster zodat er niets bewaard is.
Doe dat op een plek met matig bereik, en doe niet alleen de startpagina maar de hele route: zoeken, doorklikken, formulier invullen, versturen. Bij een webshop hoort het afrekenen daar nadrukkelijk bij, want dat is precies het deel dat niet uit een cache komt.
Wilt u meten in plaats van alleen ervaren, dan kunt u uw telefoon met een kabel aan uw computer koppelen en in Chrome op afstand inspecteren. Dat is even instellen, maar dan ziet u het echte netwerkverkeer van het echte toestel.
Wat u meet, en welke grenzen redelijk zijn
- Eerste zichtbare inhoud binnen 1,8 seconden. Daarboven denkt een bezoeker dat er niets gebeurt.
- Grootste element in beeld binnen 2,5 seconden. Dit is de waarde waar Google op stuurt.
- Menu of knop reageert binnen 200 milliseconden na de eerste aanraking.
- Totaal paginagewicht onder de 1,5 megabyte voor een gewone pagina.
Haalt u die op een gesimuleerde trage verbinding, dan zit u goed. Haalt u ze niet, dan weet u nu ook wáár het misgaat, en dat is de helft van de oplossing.
Vergeet daarbij niet dat een deel van uw bezoekers helemaal geen 4G heeft maar een oudere verbinding, of in een gebouw zit waar het signaal wegvalt. Voor die groep telt vooral of de tekst er al staat voordat de rest binnen is. Een pagina die zijn inhoud toont en pas daarna zijn opsmuk ophaalt, blijft bruikbaar op een slechte lijn. Een pagina die wacht tot alles binnen is, is dat niet, hoe fraai hij op kantoor ook oogt.
Van meting naar actie
Maak van de uitkomst een lijstje in volgorde van gewicht: het zwaarste bestand eerst. In negen van de tien gevallen staat er een afbeelding bovenaan, daarna een script van derden, en pas daarna uw thema.
Herhaal de meting na elke ingreep, en noteer beide getallen. Dat klinkt pietluttig, maar zonder nulmeting eindigt elk snelheidstraject in een discussie over gevoel. Wij leggen bij WebMaintor daarom altijd een meting vast voordat er iets verandert, als vast onderdeel van een traject waarin elke ingreep aantoonbaar iets moet opleveren.
Concrete volgende stap: pak uw telefoon, zet wifi uit en open uw contactpagina in een privévenster. Duurt het langer dan drie seconden voordat u het formulier ziet, dan heeft u uw eerste klus gevonden.
