Preconnect – zrychlení stahování z více domén

Pro získání obsahu (HTML stránky, obrázku, stylu, skriptu, …) musí prohlížeč zjednodušeně udělat dvě věci:

1. Sestavit spojení
2. Stáhnout obsah

Do sestavení spojení patří vyhledání doménového jména (tzv. DNS Lookup), navázání TCP spojení a podobně.

Výhoda je, že tyto činnosti se provádí pouze jednou pro danou doménu, takže je prohlížeč nemusí provádět pro každý soubor, který stránka potřebuje (CSS, JS, obrázky, …).

Na druhou stranu potom připojování souborů z různých domén může logicky načítání prodloužit.

Zvlášť problematické je to třeba u Google Fontů, kdy prohlížeč nejprve stáhne CSS z jedné domény, aby následně stáhl nadefinovaná písma, která se nachází na doméně jiné.

U datově malých souborů a rychlého připojení často samotné stažení zabere menší čas než navázání spojení.

Pomocí preconnect jde prohlížeči napovědět, pro které všechny domény si má připojení připravit. Navázání spojení pro další domény tak může proběhnout paralelně s dřívějšími požadavky:

Podpora

Použití preconnect nápovědy podporují následující prohlížeče:

• Chrome 46+,
• Firefox 39+,
• Opera 33+

Existují různé způsoby, jak preconnect technicky implementovat:

HTML značka <link>

Nejednodušší je přidat do hlavičky stránky <link> značku:

<link href='https://example.com' rel='preconnect' crossorigin>

HTTP hlavička Link

Připravit preconnect jde i přímo v HTTP hlavičce. Tuto informaci dostane prohlížeč dříve než z HTML značky, což může být výhoda.

Link: <https://example.com>; rel=preconnect; crossorigin

JavaScript

Při dynamickém připojování obsahu JavaScriptem stačí pro preconnect vytvořit HTML značku <link>:

function preconnectTo(url) {
  var hint = document.createElement("link");
  hint.rel = "preconnect";
  hint.href = url;
  document.head.appendChild(hint);
}

Odkazy jinam