Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Keep preconnect hints matched to real network usage
Audit preconnect hints for domains that are actually contacted, and match crossorigin to the request's real credentials mode.
Bad example
| 1 | // Preconnects added ad hoc over time, never revisited |
| 2 | <link rel="preconnect" href="https://analytics-vendor-a.example.com" /> |
| 3 | <link rel="preconnect" href="https://analytics-vendor-b.example.com" /> |
| 4 | <link rel="preconnect" href="https://ads.example.com" crossorigin /> |
| 5 |
|
| 6 | // Real bid request actually sends cookies, but the hint above says "anonymous" |
| 7 | fetch('https://ads.example.com/bid', { credentials: 'include' }); |
| 8 | // analytics-vendor-b.example.com is no longer called anywhere in the app |
Explanation (EN)
Nobody removed the preconnect for `analytics-vendor-b.example.com` after it stopped being used, so the browser opens a connection that's never used. Worse, `ads.example.com` is preconnected with `crossorigin` (no-credentials mode) while the real request uses `credentials: 'include'` — the mismatch means the browser can't reuse the preconnected socket and opens a second connection, so the hint bought nothing.
Objašnjenje (HR)
Preconnect za `analytics-vendor-b.example.com` nitko nije uklonio nakon što se prestao koristiti, pa preglednik otvori konekciju koja se nikad ne iskoristi. Još gore, `ads.example.com` je preconnectan s `crossorigin` (bez kredencijala) dok stvarni request koristi `credentials: 'include'` — zbog te neusklađenosti preglednik ne može ponovno iskoristiti tu utičnicu i otvara drugu konekciju, pa hint ništa nije donio.
Good example
| 1 | // Only origins that are actually contacted, with matching credentials mode |
| 2 | <link rel="preconnect" href="https://analytics-vendor-a.example.com" /> |
| 3 | <link rel="preconnect" href="https://ads.example.com" /> |
| 4 |
|
| 5 | fetch('https://ads.example.com/bid', { credentials: 'include' }); |
Explanation (EN)
The unused vendor's preconnect was removed, and the `ads.example.com` hint dropped `crossorigin` so it matches the credentialed request that's actually made — the preconnected socket gets reused instead of a second connection being opened.
Objašnjenje (HR)
Preconnect za neiskorišteni vendor je uklonjen, a hint za `ads.example.com` više nema `crossorigin` pa odgovara stvarnom requestu koji šalje kredencijale — preconnectana utičnica se ponovno iskoristi umjesto da se otvara druga konekcija.
Notes (EN)
Verify with real traffic (network panel / production logs) which preconnected origins are actually hit before removing or keeping a hint — don't guess from memory which vendors are still in use.
Bilješke (HR)
Prije uklanjanja ili zadržavanja hinta provjeri na stvarnom prometu (network panel / produkcijski logovi) koji se preconnectani originі uopće pogode — ne pretpostavljaj iz sjećanja koji su vendori još u upotrebi.
Exceptions / Tradeoffs (EN)
If an origin is contacted rarely but on a critical path (e.g. a payment redirect on first user interaction), keeping its preconnect can still be worth it even though it's not called on every page load.
Iznimke / Tradeoffi (HR)
Ako se neki origin rijetko poziva ali je na kritičnom putu (npr. redirect na plaćanje pri prvoj interakciji korisnika), zadržavanje preconnecta za njega može biti opravdano i kad se ne poziva na svakom učitavanju stranice.