Serverrespons 103 Early Hints

Wat is HTTP-statuscode 103 (Early Hints)

HTTP-statuscode 103, ook bekend als Early Hints, is een nieuw statuscode die servers in staat stelt om voorlopige aanwijzingen naar clients te sturen over bronnen die mogelijk nodig zijn voor de verwerking van een verzoek. Dit kan helpen om de laadtijd van pagina's te versnellen, omdat browsers al kunnen beginnen met het laden van deze bronnen voordat de server de verwerking van het hoofdverzoek heeft voltooid.

Toepassing van statuscode 103 in de praktijk

Statuscode 103 kan worden gebruikt om de laadtijden van webpagina's te optimaliseren door browsers in staat te stellen om essentiële bronnen eerder te laden. Hier zijn enkele voorbeelden van hoe statuscode 103 kan worden toegepast:

• Voorbeeld: Vooraf laden van lettertypen en stijlen

  Door de lettertypen en stijlen vroegtijdig aan te geven, kunnen browsers deze alvast downloaden, waardoor de weergave van de pagina sneller is.

• Voorbeeld: Aanduiden van cachebare bronnen

  Door aan te geven welke bronnen kunnen worden gecached, kunnen browsers deze middelen lokaal opslaan voor snellere toegang bij vervolgverzoeken.

Interactie met browsers en clients

Browsers verwerken statuscode 103 door de voorgestelde bronnen te laden voordat het hoofdverzoek is voltooid. Hierdoor kunnen gebruikers sneller inhoud zien. De ondersteuning voor statuscode 103 varieert echter tussen verschillende browsers.

Browser	Ondersteuning voor statuscode 103
Chrome	Ja
Firefox	Ja
Safari	Beperkt
Edge	Ja

Voorbeelden van implementatie

Voorbeeldimplementatie op de server met Node.js

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(103, {'Link': '; rel=preload; as=style'});
    res.writeHead(200, {'Content-Type': 'text/'});
    res.end('<>Hello World!');
});

server.listen(3000);

In dit voorbeeld wordt statuscode 103 gebruikt om een stijlblad voor te laden.

Voorbeeldimplementatie op de server met Python (Flask)

from flask import Flask, Response

app = Flask(__name__)

@app.route('/')
def index():
    headers = {'Link': '; rel=preload; as=style'}
    response = Response('<>Hello World!')
    response.headers.extend(headers)
    response.status_code = 200
    return response

if __name__ == '__main__':
    app.run(port=5000)

Hier wordt statuscode 103 toegepast in een Flask-applicatie om een stylesheet te preloaden.

Voorbeeldimplementatie op de server met PHP

<?php
header('Link: ; rel=preload; as=style', false);
header('HTTP/1.1 200 OK');
?>
<>

    <link rel="stylesheet" href="style.css">


    Hello World!

In dit PHP-voorbeeld wordt ook statuscode 103 gebruikt om de browser te informeren over het preloaden van een stylesheet.

Potentiële problemen en hun oplossingen

Bij het gebruik van statuscode 103 kunnen zich enkele problemen voordoen:

• Fout: Client ondersteunt statuscode 103 niet

  Als een client deze statuscode niet ondersteunt, kan de preload niet plaatsvinden. Het is belangrijk om een fallback-optie te hebben voor oudere browsers.

• Hoe verkeerd gebruik van statuscode 103 te vermijden

  Vermijd veelvuldige en onnodige aanroepen van statuscode 103. Dit kan de prestaties negatief beïnvloeden.

Serverconfiguratie voor ondersteuning van statuscode 103

Om statuscode 103 correct te implementeren, moeten servers correct worden ingesteld.

• Nginx-configuratie

  location / {
              add_header Link '; rel=preload; as=style';
              return 103;
          }

• Apache-configuratie

  Header add Link '; rel=preload; as=style' env=early_hints
          RewriteEngine On
          RewriteCond %{REQUEST_URI} ^/$
          RewriteRule ^ - [E=early_hints:1]

Door deze configuraties op te zetten, kan de server statuscode 103 effectief gebruiken om de prestaties te verbeteren en de laadtijden van pagina's te verkorten.