Netwerkrequests die blijven omleiden

Wanneer een pagina een bestand aanvraagt en de server antwoordt met een verwijzing naar een andere URL, moet de browser een tweede aanvraag doen. Dat betekent extra netwerkverkeer vóór het bestand er is. MDN beschrijft in zijn overzicht over webprestaties dat latentie de tijd is die een datapakket nodig heeft om van bron naar bestemming te reizen, en dat je rekening moet houden met trage of onbetrouwbare verbindingen. Dat de omleiding zelf een extra aanvraag vergt, volgt uit hoe browsers omleidingen afhandelen; de bron zelf gaat niet specifiek over omleidingen.

Hoeveel tijd dat in jouw geval kost, hangt af van de verbinding van je bezoeker en van de afstand tot de server. Dat bepaal je niet vooraf, dat meet je. De procedure in deze gids is dus bedoeld om te vinden welke requests omleiden en om daarna zelf te testen of het zin heeft ze aan te passen.

Het vermijden van een omleiding is niet altijd de moeite waard. Bij een bestand dat laat in de pagina laadt en niets blokkeert, is de winst in beleving klein. Bij bestanden die vroeg nodig zijn om de pagina zichtbaar te maken, zoals een lettertype of een stijlbestand, weegt het zwaarder.

Gebruik de ontwikkelaarstools van je browser om te zien welke bestanden omleiden. De exacte schermnamen en kolommen verschillen per browser en per versie, dus kijk in het netwerkpaneel van jouw browser naar de kolommen voor statuscode, type en bestemming.

1. Open de pagina die je wilt controleren in een schoon browserprofiel of een venster waarin je extensies hebt uitgeschakeld, zodat extensies geen extra requests of omleidingen veroorzaken.
2. Open de ontwikkelaarstools en ga naar het netwerkpaneel. Laad de pagina opnieuw terwijl dat paneel openstaat.
3. Sorteer of filter op statuscode. Omleidingen herken je aan statuscodes zoals 301, 302, 303, 307 of 308, met een location-kop in het antwoord. Niet elke 3xx-code is een omleiding: 304 betekent dat de browser zijn gecachete kopie mag hergebruiken.
4. Noteer per omleidende request: de oorspronkelijke URL, de URL waarnaar verwezen wordt, het type bestand (font, script, afbeelding, stijl) en of het bestand vroeg of laat in de laadvolgorde zat.
5. Test ook met cache uitgeschakeld in de tools en met een tweede keer laden, zodat je het verschil ziet tussen eerste en herhaald bezoek.

Houd daarbij je lijst bij in een tabel. Zonder lijst vergeet je welke bestanden je al nagekeken hebt.

Een omleidende request kan één of meer stappen hebben. Soms wijst een bestand naar een tweede omleiding, die pas daarna naar het eindbestand leidt. Je zoekt het laatste adres in die keten, het adres dat uiteindelijk een bestand teruggeeft met statuscode 200.

Zo ga je te werk:

• Klik in het netwerkpaneel op de omleidende request en bekijk de antwoordkoppen. Zoek de kop die aangeeft waarnaar verwezen wordt, meestal 'location' genoemd.
• Open dat adres in een nieuw tabblad of vraag het op met de tools. Volg de keten tot je een bestand ontvangt.
• Noteer het eindadres en controleer of het bestand van het verwachte type is (een font moet een fontbestand zijn, geen HTML-pagina).
• Let op omleidingen die van domein veranderen, bijvoorbeeld van een oud adres naar een content delivery-adres. Daar zit vaak een reden achter, zoals een verhuisde bron.

Kopieer het eindadres niet blind over naar je code. Controleer eerst of het stabiel is. Een eindadres met een versienummer of een tijdelijke sleutel in de URL kan over een tijd niet meer werken.

Niet elke omleiding hoef je op te lossen. Gebruik dit beslisblad om per gevonden request te bepalen wat je doet. Pas het aan op jouw situatie en beheerrechten.

Als je geen toegang hebt tot de code, noteer dan de bevinding en geef die door aan wie je website beheert, samen met het oorspronkelijke adres en het eindadres.

Dit scenario bevat uitsluitend verzonnen invoer en verwachte controles. Het zegt niets over wat jouw website zal tonen of hoeveel tijd je kan winnen.

Invoer (fictief): op een kleine bedrijfswebsite laadt het stijlbestand een lettertype via een adres op een eigen domein, bijvoorbeeld een pad zoals /fonts/regular.woff2. In het netwerkpaneel toont dat adres statuscode 301 en verwijst het naar een nieuw pad onder /assets/fonts/. Dat nieuwe pad geeft statuscode 200 terug met een fontbestand.

Diagnose: het stijlbestand bevat nog de oude verwijzing uit een eerdere herstructurering van de bestanden. De omleiding is een overblijfsel van die verhuizing.

Wijziging: de verwijzing in het stijlbestand wijzigen naar het nieuwe pad. Het oude adres laat je voorlopig staan als omleiding, zodat externe verwijzingen of oude pagina's niet breken.

Verwachte controles na de wijziging:

1. In het netwerkpaneel toont het fontbestand bij laden met lege cache rechtstreeks statuscode 200, zonder voorafgaande 301. Bij een herhaald bezoek kan het uit de cache komen of 304 tonen.
2. De tekst op de pagina toont nog steeds het juiste lettertype, ook bij een eerste bezoek zonder cache.
3. Er verschijnen geen foutmeldingen in de console van de browser, zoals geblokkeerde fontrequests of ontbrekende cross-origin-toestemming bij een font van een ander domein.

Of de pagina daardoor merkbaar sneller laadt, meet je zelf, bij voorkeur herhaald en op verschillende verbindingssnelheden. Het kan zijn dat het verschil zo klein is dat je het niet merkt.

Na elke aanpassing doorloop je dezelfde controle als bij het opsporen, zodat je vergelijkbare gegevens hebt. De cursus Learn Performance op web.dev behandelt onder meer het kritieke pad, het optimaliseren van het laden van bronnen en het efficiënt omgaan met afbeeldingen en lettertypen. Gebruik die onderwerpen als verdieping, vooral als je merkt dat een bestand nog steeds vroeg geladen wordt maar niet noodzakelijk is.

Een compacte controle na elke wijziging:

1. Laad de pagina met lege cache en noteer of de gewijzigde request nu direct statuscode 200 geeft.
2. Doorloop de belangrijkste pagina's van je website, niet alleen de homepage, want elk paginatype kan eigen bestanden laden.
3. Test op een telefoon en op een computer, en bij voorkeur op een tragere verbinding.
4. Controleer of de pagina visueel hetzelfde oogt: lettertypen, afbeeldingen en scripts moeten nog werken.
5. Noteer wat je wijzigde, wanneer, en welke requests je daarna opnieuw hebt nagekeken.

Grenzen: deze procedure toont welke requests omleiden en laat je veilig verwijzingen aanpassen. Ze zegt niet hoeveel sneller je website wordt en ze bewijst geen effect op zoekresultaten of conversie. Een omleiding die door een externe aanbieder is ingesteld, kun je vaak niet zelf oplossen. Wil je zien welke zichtbare signalen je website publiek toont, bekijk dan je site via Marketing Scan. Die scan voert niet alle controles uit deze gids uit.