Optimisation du CDN et réduction de latitude
1) Objectifs et carte des retards
Latency = DNS + TCP/TLS + TTFB (serveur/origin/cache) + livraison de contenu (RTT × volumes) + rendu client.
Optimisation = réduire le nombre de RTT, réduire les octets et déplacer les calculs/cache plus près de l'utilisateur.
2) Architecture CDN
Anycast POPs est un nœud proche du routage BGP.
Tiered caching/Origin Shield est une couche intermédiaire « parapluie » qui réduit la tempête miss sur l'origin.
Géo-/Routing régional - ancrage du tenant/juridiction (souveraineté des données, licences).
Failover est une région d'origine de secours, des échantillons de santé et un commutateur rapide.
3) Cache : clés, titres, stratégies
3. 1 Clés de cache (cache key)
Par défaut : 'scheme + host + path + ? query'.
N'ajoutez que les paramètres souhaités ('? v =', '? lang =', '? tenant ='). Les autres sont en ignore-params.
« Vary » est le minimum : 'Accept-Encoding', 'Accept-Language' (si nécessaire), 'Autorisation' brise généralement le cache.
3. 2 Politiques
Statique publique : 'Cache-Control : public, max-age = 31536000, immutable' + rev (hash dans le nom).
Semi-dynamique (catalogues, règles, FAQ) : 's-maxage = 300, stale-while-revalidate = 600, stale-if-error = 86400'.
API-GET : utilisez ETag/Last-Modified, 'SWR/SIE', activez le coalescing (une requête par clé chaude).
Privé : réponses personnelles - sur le périmètre via edge-compute (ESI/kv) ou cache per-tenant.
3. 3 Anti-tempête
Request coalescing - Capturer des requêtes de miss simultanées.
Serve-stale - donner un objet obsolète en cas d'échec de l'origin.
Revalidation de fond - mettre à jour en arrière-plan.
4) HTTP/2-3, TCP/TLS et retour précoce
HTTP/2 : multiplex, compression des titres ; limitez « max concours streams », gros titres.
HTTP/3 (QUIC) : une grande réduction TTFB sur de mobiles/hautes pertes; surveillez les seuils initiaux et Retry.
TLS 1. 3: 1-RTT handshake; OCSP stapling; HSTS.
0-RTT : uniquement pour les 'GET' idempotent et si les risques de replay sont pris en compte.
103 Early Hints : les premiers 'Link : rel = preload'pour les ressources critiques.
Preconnect / DNS-prefetch: `<link rel="preconnect" href="https://cdn. example">`.
5) Edge-compute et « fine personnalisation »
Sur le bord : recensement des titres, géo/tenant-fixation, A/B-marquage, personnalisation facile sans demande d'origin.
Règle : ne pas stocker de PII sur des nœuds POP ; ne mettre en cache que les agrégats/données publiques.
6) Optimisation des médias et des formats
Images : conversion automatique en WebP/AVIF, resize-on-edge, 'srcset/sizes', 'lazyload'.
Compression : Brotli pour les textes (HTML/CSS/JS/JSON), gzip fallback.
Vidéo : HLS/DASH, CDN-segment caching, 'preload = metadata', poster.
Polices : subset + 'font-display : swap' ; héberger avec un cache long.
CSS critique : premier écran inline ; le reste est async.
7) Modèles d'API et cache
Idempotent GET - Nous mettons en cache les clés de requête (y compris la version des données).
ETag : fort hachage de charge utile + 'If-None-Match'.
Surrogate-Control (CDN-spécificité) pour la différence avec « Cache-Control » du client.
Les URL signées sont pour la statique privée/médias.
GraphQL : Normaliser la clé cache par opération/variables ; utilisez le cache/resolver partial.
WebSockets : pour le temps réel - réduisez les messages, compressez (permessage-deflate), placez les shards WS plus près de l'utilisateur.
8) Exemples de configurations
8. 1 NGINX (origin : nous mettons en cache l'API-GET)
nginx
We give SWR and ETag location/api/v1/catalog/{
proxy_cache api_cache;
proxy_cache_key "$scheme$request_method$host$uri$is_args$args";
proxy_cache_valid 200 5m;
proxy_cache_use_stale updating error timeout http_500 http_502 http_503 http_504;
add_header Cache-Control "public, s-maxage=300, stale-while-revalidate=600, stale-if-error=86400";
add_header ETag $upstream_http_etag;
proxy_ignore_headers Set-Cookie; # do not break the Set-Cookie proxy_hide_header cache;
proxy_pass http://catalog;
}8. 2 Fastly VCL (SWR, coalescing, ignore cookies)
vcl sub vcl_recv {
set req. hash_ignore_busy = true; # coalescing if (req. url. qs ~ "^(?!.(lang v)=)") { remove req. url. qs; }
if (req. http. Cookie) { remove req. http. Cookie; }
}
sub vcl_backend_response {
set beresp. ttl = 300s;
set beresp. stale_if_error = 86400s;
set beresp. stale_while_revalidate = 600s;
if (beresp. http. Set-Cookie) { unset beresp. http. Set-Cookie; }
}8. 3 Cloudflare (Transform Rules, Cache Rules, Early Hints — псевдо)
json
{
"cache_rule": {
"if": "http. request. uri. path matches \"/assets/.\"",
"action": {"cache": {"eligibility":"eligible", "ttl": 31536000}}
},
"transform_rule": {
"set_headers": [{"name":"Cache-Control","value":"public, s-maxage=300, stale-while-revalidate=600"}]
},
"early_hints": {"enable": true}
}9) Réseaux mobiles et Internet « précaire »
Utilisez le HTTP/3 de manière agressive ; réduire la taille du chemin critique (HTML + critical CSS <14 KB).
Priorité H2/H3 : Hiérarchiser (HTML→CSS→JS→media plus tard).
Rétrospective avec jitter, idempotency pour API.
Size-budgets et bandling : code-spitting, deferred JS, suppression des CSS/JS inutilisés.
10) Observabilité et SLO
RUM : TTFB, LCP, INP, CLS par région/ASN/tenants ; distributions p95/p99.
Synthétique : voie de contrôle "/health/cdn'par POP-am.
Métriques de cache : hit-ratio overall et per-key ; origin fetch rate; coalescing savings.
Alerts : chute de hit-ratio, croissance de l'origin-egress, dégradation des lobes H3, 5xx par bouclier.
11) Spécificités d'iGaming/Finance
Catalogues de jeux/coefficients : court 's-maxage' + SWR ; region-aware ключ (`tenant|region|lang`).
Pics d'événements (matchs, tirages) : échauffement du cache (pré-warm), « gel » des personnalisations lourdes, sources mirror.
Paiement/bureau : ne pas mettre en cache privé, mais accélérer via H3 + edge-TLS et une région proche.
Juridictions : domaines divisés/chemins per-région ; Contrôle de « Vary : X-Region ».
12) Anti-modèles
« Vary : » pour tout ; la clé cache dépend des cookies/titres superflus.
Absence de SWR/SIE → « écrans noirs » pour les échecs courts de l'origin.
Nettoyer le cache « partout » au lieu d'une invalidité ponctuelle par tags/clés.
Ressources sans révision de nom et avec 'max-age = 0'.
Un deny-cache global pour « Autorisation » même là où le public est donné.
L'absence de coalescing → la tempête sur l'origin.
Personnalisation prématurée « lourde » sur POP.
13) Chèque-liste prod-prêt
- Anycast POP + tiered/shield; les contrôles de santé et l'erreur d'origine.
- Les clés de cache sont minimes ; ignorer l'excès de query/cookies ; 'Surrogate-Control'.
- SWR/SIE inclus, coalescing actif ; serve-stale pour les erreurs.
- HTTP/3 inclus ; TLS 1. 3; 103 Early Hints est configuré pour les ressources critiques.
- Images : AVIF/WebP, resize-on-edge ; Brotli pour les textes.
- API-GET с ETag/Last-Modified; Idempotence/rétroaction ; ne pas mettre en cache les profils privés.
- Preconnect aux domaines statiques ; critique CSS inline.
- Métriques : hit-ratio, origin-egress, TTFB/LCP p95, H3-part, par région/tenants.
- Plan de réchauffage du cache avant les événements ; handicap ponctuel (étiquettes).
- Documentation Vary/keys/TTL ; pleybuck d'incidents (chute de hit-ratio).
14) TL; DR
Réduisez les randonnées à l'origin au minimum : tiered/shield + correct cache-keys + SWR/SIE + coalescing. Activez le HTTP/3/TLS 1. 3, utilisez 103 Early Hints et preconnect. Compressez et convertissez les médias sur le bord, insérez le CSS critique. Pour l'API, ETag, « Vary », idempotence et mise en cache raisonnable « GET ». Mesurez hit-ratio, TTFB/LCP p95, origin egress et réchauffez votre cache à l'avance aux pics.