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.