V rámci vývoje webových aplikací a stránek je neustálým cílem zrychlení jejich načítání a zlepšení celkového uživatelského zážitku. Jedním z technických řešení, které vývojáři mohou využít k dosažení tohoto cíle, je využití HTML značky <link> s atributem rel="preconnect". Tento článek se podrobně věnuje tomu, co toto nastavení znamená, jak funguje a jak ho efektivně implementovat do webových projektů.
Co je to Preconnect?
Preconnect je proces, při kterém prohlížeč předem navazuje spojení s určitým serverem, ještě předtím, než je to skutečně potřeba. Tím se snižuje latence spojení a zkracuje celkový čas potřebný k načtení zdrojů z tohoto serveru.
Jak funguje Preconnect
Když prohlížeč zpracovává HTML dokument, narazí-li na značku <link> s atributem rel="preconnect", okamžitě se snaží navázat spojení se serverem uvedeným v atributu href. Toto spojení zahrnuje DNS vyhledávání, navázání TCP spojení a zahájení TLS dohodnutí (v případě zabezpečených spojení). Díky tomu, když je potřeba z uvedeného serveru načíst zdroje (např. CSS, JavaScript, obrázky), spojení je již navázáno a přenos může začít okamžitě.
Příklad použití
<link rel="preconnect" href="https://example.com">
Kdy použít Preconnect
- Externí zdroje: Pokud vaše Webová stránka načítá obsah nebo zdroje z externích serverů (např. fonty z Google Fonts, obrázky z CDN),
preconnect může výrazně zlepšit rychlost načítání těchto zdrojů.
- Analytické skripty: Analytické a marketingové skripty často vyžadují načítání z externích serverů. Předem navázané spojení zrychlí jejich zpracování.
- Aplikace s vysokou návštěvností: Na velmi frekventovaných webech může i malé zlepšení načítání znamenat velký přínos pro celkový uživatelský zážitek.
Best Practices
- Omezte počet preconnectů: Každé navázání spojení zatěžuje prohlížeč. Doporučuje se omezit počet
preconnect na nejnutnější servery.
- Použijte společně s DNS-prefetch: Pro prohlížeče, které nepodporují
preconnect, lze použít alternativní rel="dns-prefetch", který alespoň zrychlí DNS vyhledávání.
- Monitorujte výkon: Použití
preconnect by mělo být součástí širší strategie optimalizace výkonu, včetně sledování dopadu na rychlost načítání a uživatelský zážitek.
Implementace preconnect je relativně jednoduchá, ale může mít významný dopad na zlepšení výkonu webových stránek. Je důležité pečlivě vybrat, které spojení předem navázat, a monitorovat vliv této optimalizace na celkovou rychlost načítání webu.
