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í.

Požadavků na více domén

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:

Požadavků na více domén

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Automatická datová optimalisace obrázků

Hromadné datové zmenšení obrázků

Chceme-li zrychlit načítání své stránky, datová optimalisace obrázků může pomoci.

Lazy loading obrázků

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Spojení CSS a JS souborů

Spojení CSS a JS souborů do jednoho

Zrychlit načítání webu pomůže sloučení CSS a JavaScriptu do jednoho souboru. Hotové řešení v PHP.

Data URI

Data URI

Data URI je způsob, jak obsah externího souboru zapsat přímo do HTML/CSS.

Připojení JavaScriptu s async a defer

Připojení JavaScriptu s async a defer

Různé způsoby připojení JavaScriptu na stránku, aby se nezdržovalo načítání stránky.

Komentáře