{"id":30281,"date":"2019-10-31T21:34:39","date_gmt":"2019-10-31T18:34:39","guid":{"rendered":"https:\/\/prohoster.info\/blog\/preload-prefetch-i-drugie-tegi\/"},"modified":"2019-10-31T21:34:39","modified_gmt":"2019-10-31T18:34:39","slug":"preload-prefetch-i-drugie-tegi","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pl\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch i inne tagi","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Tak <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">wiele sposob\u00f3w na popraw\u0119 wydajno\u015bci sieci<\/a><\/noindex>. Jednym z nich jest wst\u0119pne \u0142adowanie zawarto\u015bci, kt\u00f3ra b\u0119dzie potrzebna p\u00f3\u017aniej. Prefetching CSS, wst\u0119pne renderowanie ca\u0142ej strony lub rozwi\u0105zywanie nazw domen. Robimy wszystko z wyprzedzeniem, aby nast\u0119pnie natychmiast pokaza\u0107 wynik! Brzmi \u015bwietnie.<\/p>\n<p>Jeszcze lepsze jest to, \u017ce jest to bardzo proste do zrealizowania. Pi\u0119\u0107 tag\u00f3w  daje przegl\u0105darkom polecenie wykonania wst\u0119pnych czynno\u015bci:<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nKr\u00f3tko om\u00f3wimy, co robi\u0105 i kiedy ich u\u017cywa\u0107.<\/p>\n<p>Przejd\u017a do: <noindex><a rel=\"nofollow\" href=\"#preload\">preload<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#prefetch\">prefetch<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#preconnect\">preconnect<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#dns-prefetch\">dns-prefetch<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#prerender\">prerender<\/a><\/noindex><\/p>\n<p><noindex><a rel=\"nofollow\" name=\"preload\"><\/a><\/noindex><\/p>\n<h1>preload<\/h1>\n<p>\n<code>&lt;link rel= \"preload\"&gt;<\/code> m\u00f3wi przegl\u0105darkom, aby za\u0142adowa\u0142y i zbuforowa\u0142y zas\u00f3b (np. skrypt lub arkusz styl\u00f3w) tak szybko, jak to mo\u017cliwe. Jest to przydatne, gdy zas\u00f3b b\u0119dzie potrzebny w ci\u0105gu kilku sekund po za\u0142adowaniu strony i chcesz przyspieszy\u0107 proces.<\/p>\n<p>Przegl\u0105darka nic nie robi z zasobem po za\u0142adowaniu. Skrypty nie s\u0105 wykonywane, arkusze styl\u00f3w nie s\u0105 stosowane. Zas\u00f3b jest po prostu buforowany i natychmiast udost\u0119pniany na \u017c\u0105danie.<\/p>\n<h3>Sk\u0142adnia<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> wskazuje na zas\u00f3b, kt\u00f3ry chcesz pobra\u0107.<\/p>\n<p><code> as<\/code> mo\u017ce to by\u0107 cokolwiek, co mo\u017cna pobra\u0107 w przegl\u0105darce:<\/p>\n<ul>\n<li><code>style<\/code> dla arkuszy styl\u00f3w,\n<\/li>\n<li><code>script<\/code> dla skrypt\u00f3w,\n<\/li>\n<li><code>font<\/code> dla czcionek,\n<\/li>\n<li><code>fetch<\/code> dla zasob\u00f3w \u0142adowanych przy pomocy <code>fetch()<\/code> lub <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>pe\u0142na lista zob. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">na MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nWa\u017cne, aby wskaza\u0107 atrybut <code>as<\/code> \u2013 to pomaga przegl\u0105darkom prawid\u0142owo ustawi\u0107 priorytety oraz planowa\u0107 \u0142adowanie.<\/p>\n<h3>Kiedy u\u017cywa\u0107<\/h3>\n<p>\nU\u017cywaj wst\u0119pnego \u0142adowania, gdy zas\u00f3b b\u0119dzie potrzebny w najbli\u017cszym czasie. Na przyk\u0142ad:<\/p>\n<ul>\n<li>Niestandardowe czcionki z zewn\u0119trznego pliku:\n<pre><code class=\"xml\"><!-- index.html -->\n\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nDomy\u015blnie <code>comic-sans.woff2<\/code> rozpocznie \u0142adowanie dopiero po za\u0142adowaniu i przeanalizowaniu. <code>index.css<\/code>Aby nie czeka\u0107 tak d\u0142ugo, mo\u017cna za\u0142adowa\u0107 czcionk\u0119 wcze\u015bniej za pomoc\u0105 <code>&lt;link rel= \"preload\"&gt;<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"comic-sans.woff2\" as=\"font\" \/&gt;<\/code><\/pre>\n<\/li>\n<li>Je\u015bli dzielisz swoje style zgodnie z podej\u015bciem <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> na dwie cz\u0119\u015bci, krytyczn\u0105 (do natychmiastowego renderowania) i niekrytyczn\u0105:\n<pre><code class=\"xml\">\/* Zintegrowane krytyczne style *\/<\/code><\/pre>\n<p>\nPrzy takim podej\u015bciu style niekrytyczne b\u0119d\u0105 \u0142adowane tylko po uruchomieniu JavaScript, co mo\u017ce nast\u0105pi\u0107 kilka sekund po renderowaniu. Zamiast czeka\u0107 na JS, u\u017cyj <code>&lt;link rel= \"preload\"&gt;<\/code>, aby rozpocz\u0105\u0107 \u0142adowanie wcze\u015bniej:<\/p>\n<pre><code class=\"xml\">\/* Wbudowane style krytyczne *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Nie nadu\u017cywaj pre\u0142adowania<\/b>. Je\u015bli b\u0119dziesz \u0142adowa\u0107 wszystko, strona nie przyspieszy magicznie, wr\u0119cz przeciwnie, mo\u017ce to przeszkodzi\u0107 przegl\u0105darce w odpowiednim planowaniu pracy.<\/p>\n<p><b> Nie myl z prefetchem<\/b>. Nie u\u017cywaj <code>&lt;link rel= \"preload\"&gt;<\/code>, je\u015bli nie potrzebujesz zasobu zaraz po za\u0142adowaniu strony. Je\u015bli b\u0119dzie potrzebny p\u00f3\u017aniej, na przyk\u0142ad na nast\u0119pnej stronie, u\u017cyj <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Szczeg\u00f3\u0142y<\/h3>\n<p>\n<b>To obowi\u0105zkowy tag<\/b> do wykonania przez przegl\u0105dark\u0119 (je\u015bli go obs\u0142uguje), w przeciwie\u0144stwie do wszystkich innych tag\u00f3w , zwi\u0105zanych z wcze\u015bniejszym \u0142adowaniem. Przegl\u0105darka musi za\u0142adowa\u0107 zas\u00f3b wskazany w <code>&lt;link rel=\"preload\"&gt;<\/code>. W innych przypadkach mo\u017ce zignorowa\u0107 wcze\u015bniejsze \u0142adowanie, na przyk\u0142ad je\u015bli dzia\u0142a na wolnym po\u0142\u0105czeniu.<\/p>\n<p><b>Priorytety<\/b>. R\u00f3\u017cnym zasobom (style, skrypty, czcionki itp.) przegl\u0105darki zazwyczaj przypisuj\u0105 r\u00f3\u017cne priorytety, aby najpierw \u0142adowa\u0107 najwa\u017cniejsze zasoby. W tym przypadku przegl\u0105darka okre\u015bla priorytet na podstawie atrybutu <code>as<\/code>. W przypadku przegl\u0105darki Chrome mo\u017cesz zobaczy\u0107 <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">pe\u0142n\u0105 tabel\u0119 priorytet\u00f3w<\/a><\/noindex>.<\/p>\n<p><noindex><a rel=\"nofollow\" href=\"https:\/\/habrastorage.org\/webt\/i2\/bf\/vi\/i2bfvijtqhb3wt6cnkcskwc55ew.png\"><img decoding=\"async\" alt=\"Preload, prefetch i inne tagi\" src=\"\/wp-content\/uploads\/2019\/03\/3d66bce7749d647e16d842958f56ff3c.png\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><\/p>\n<p><noindex><a rel=\"nofollow\" name=\"prefetch\"><\/a><\/noindex><\/p>\n<h1>prefetch<\/h1>\n<p>\n<code>&lt;link rel= \"prefetch\"&gt;<\/code> prosi przegl\u0105dark\u0119, aby za\u0142adowa\u0142a i zbuforowa\u0142a zas\u00f3b (na przyk\u0142ad skrypt lub arkusz styl\u00f3w) w tle. \u0141adowanie odbywa si\u0119 z ni\u017cszym priorytetem, dlatego nie przeszkadza w wa\u017cniejszych zasobach. Jest to przydatne, je\u015bli zas\u00f3b b\u0119dzie potrzebny na nast\u0119pnej stronie, a chcesz go zbuforowa\u0107 z wyprzedzeniem.<\/p>\n<p>Tutaj r\u00f3wnie\u017c przegl\u0105darka nic nie robi z zasobem po za\u0142adowaniu. Skrypty nie s\u0105 wykonywane, arkusze styl\u00f3w nie s\u0105 stosowane. Zas\u00f3b po prostu jest buforowany i natychmiast udost\u0119pniany na \u017c\u0105danie.<\/p>\n<h3>Sk\u0142adnia<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> wskazuje na zas\u00f3b, kt\u00f3ry chcesz pobra\u0107.<\/p>\n<p><code> as<\/code> mo\u017ce to by\u0107 cokolwiek, co mo\u017cna pobra\u0107 w przegl\u0105darce:<\/p>\n<ul>\n<li><code>style<\/code> dla arkuszy styl\u00f3w,\n<\/li>\n<li><code>script<\/code> dla skrypt\u00f3w,\n<\/li>\n<li><code>font<\/code> dla czcionek,\n<\/li>\n<li><code>fetch<\/code> dla zasob\u00f3w \u0142adowanych przy pomocy <code>fetch()<\/code> lub <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>pe\u0142na lista zob. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">na MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nWa\u017cne, aby wskaza\u0107 atrybut <code>as<\/code>\u00a0\u2014 to pomaga przegl\u0105darce poprawnie ustawi\u0107 priorytety i planowa\u0107 \u0142adowanie.<\/p>\n<h3>Kiedy u\u017cywa\u0107<\/h3>\n<p>\n<b>Aby za\u0142adowa\u0107 zasoby z innych stron<\/b>, je\u015bli potrzebujesz zasobu z innej strony i chcesz go wcze\u015bniej za\u0142adowa\u0107, aby p\u00f3\u017aniej przyspieszy\u0107 renderowanie tej strony. Na przyk\u0142ad:<\/p>\n<ul>\n<li>Masz sklep internetowy, a 40% u\u017cytkownik\u00f3w wychodzi z g\u0142\u00f3wnej strony na stron\u0119 produktu. U\u017cyj <code>&lt;link rel= \"prefetch\"&gt;<\/code>, \u0142aduj\u0105c pliki CSS i JS do renderowania stron z produktem.\n<\/li>\n<li>Masz aplikacj\u0119 jednostronicow\u0105, a r\u00f3\u017cne strony \u0142aduj\u0105 r\u00f3\u017cne pakiety. Gdy u\u017cytkownik odwiedza jak\u0105\u015b stron\u0119, mo\u017cna wst\u0119pnie za\u0142adowa\u0107 pakiety dla wszystkich stron, do kt\u00f3rych ta strona si\u0119 odwo\u0142uje.<\/li>\n<\/ul>\n<p>\n<b>Prawdopodobnie ten tag mo\u017cna bezpiecznie u\u017cywa\u0107 w ka\u017cdej ilo\u015bci<\/b>. Przegl\u0105darki zazwyczaj planuj\u0105 prefetch z najni\u017cszym priorytetem, wi\u0119c nikomu to nie przeszkadza. Zaledwie pami\u0119taj, \u017ce wykorzystuje to ruch u\u017cytkownika, kt\u00f3ry mo\u017ce kosztowa\u0107 pieni\u0105dze.<\/p>\n<p><b>Nie dla pilnych zapyta\u0144<\/b>. Nie u\u017cywaj <code>&lt;link rel= \"prefetch\"&gt;<\/code>, kiedy zas\u00f3b b\u0119dzie potrzebny za kilka sekund. W takim przypadku zastosuj <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>Szczeg\u00f3\u0142y<\/h3>\n<p>\n<b>Opcjonalny tag<\/b>. Przegl\u0105darka nie ma obowi\u0105zku stosowa\u0107 tej instrukcji, mo\u017ce j\u0105 zignorowa\u0107, na przyk\u0142ad na wolnym po\u0142\u0105czeniu.<\/p>\n<p><b>Priorytet w Chrome<\/b>. W Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> zazwyczaj dzia\u0142a z minimalnym priorytetem (patrz <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">pe\u0142n\u0105 tabel\u0119 priorytet\u00f3w<\/a><\/noindex>), to znaczy po za\u0142adowaniu wszystkiego innego.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"preconnect\"><\/a><\/noindex><\/p>\n<h1>preconnect<\/h1>\n<p>\n<code>&lt;link rel= \"preconnect\"&gt;<\/code> prosi przegl\u0105dark\u0119 o wcze\u015bniejsze po\u0142\u0105czenie z domen\u0105, gdy chcesz przyspieszy\u0107 ustanowienie po\u0142\u0105czenia w przysz\u0142o\u015bci.<\/p>\n<p>Przegl\u0105darka powinna nawi\u0105za\u0107 po\u0142\u0105czenie, je\u015bli pobiera jakie\u015b zasoby z nowej zewn\u0119trznej domeny. Na przyk\u0142ad, je\u015bli \u0142aduje czcionki Google Fonts, React z CDN lub \u017c\u0105da odpowiedzi JSON z serwera API.<\/p>\n<p>Ustanowienie nowego po\u0142\u0105czenia zazwyczaj trwa kilka setek milisekund. Jest to robione raz, ale wci\u0105\u017c zajmuje czas. Je\u015bli nawi\u0105za\u0142e\u015b po\u0142\u0105czenie wcze\u015bniej, zaoszcz\u0119dzisz czas i szybciej za\u0142adujesz zasoby z tej domeny.<\/p>\n<h3>Sk\u0142adnia<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"preconnect\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> okre\u015bla nazw\u0119 domeny, dla kt\u00f3rej nale\u017cy ustali\u0107 adres IP. Mo\u017cna poda\u0107 z prefiksem (<code>https:\/\/domain.com<\/code>) lub bez niego (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kiedy u\u017cywa\u0107<\/h3>\n<p>\n<b>U\u017cyj dla domen, kt\u00f3re wkr\u00f3tce b\u0119d\u0105 potrzebne<\/b> do za\u0142adowania stamt\u0105d wa\u017cnego stylu, skryptu lub obrazu, ale jeszcze nie znasz adresu URL zasobu. Na przyk\u0142ad:<\/p>\n<ul>\n<li>Twoja aplikacja jest hostowana na <code>my-app.com<\/code> i wykonuje zapytania AJAX do <code>api.my-app.com<\/code>: nie znasz z g\u00f3ry konkretnych zapyta\u0144, poniewa\u017c s\u0105 one wykonywane dynamicznie z JS. Tutaj ca\u0142kowicie uzasadnione jest u\u017cycie tagu do wst\u0119pnego po\u0142\u0105czenia z domen\u0105.\n<\/li>\n<li>Twoja aplikacja jest hostowana na <code>my-app.com<\/code> i u\u017cywa czcionek Google Fonts. S\u0105 one \u0142adowane w dw\u00f3ch etapach: najpierw \u0142adowany jest plik CSS z domeny <code>fonts.googleapis.com<\/code>, nast\u0119pnie ten plik \u017c\u0105da czcionek z <code>fonts.gstatic.com<\/code>. Nie mo\u017cesz wiedzie\u0107, jakie konkretne pliki czcionek z <code>fonts.gstatic.com<\/code> b\u0119dziesz potrzebowa\u0107, dop\u00f3ki nie za\u0142adujesz pliku CSS, dlatego wcze\u015bniej mo\u017cemy tylko ustanowi\u0107 wst\u0119pne po\u0142\u0105czenie.<\/li>\n<\/ul>\n<p>\n<b>U\u017cyj tego tagu, aby nieco przyspieszy\u0107 jaki\u015b zewn\u0119trzny skrypt lub styl.<\/b> dzi\u0119ki wst\u0119pnemu ustanowieniu po\u0142\u0105czenia.<\/p>\n<p><b>Nie nadu\u017cywaj.<\/b>Ustanowienie i utrzymanie po\u0142\u0105czenia jest kosztown\u0105 operacj\u0105 zar\u00f3wno dla klienta, jak i dla serwera. U\u017cywaj tego tagu maksymalnie dla 4-6 domen.<\/p>\n<h3>Szczeg\u00f3\u0142y<\/h3>\n<p>\n<b>Opcjonalny tag<\/b>Przegl\u0105darka nie jest zobowi\u0105zana do przestrzegania tej instrukcji i mo\u017ce j\u0105 zignorowa\u0107, na przyk\u0142ad, je\u015bli ju\u017c zosta\u0142o ustanowionych wiele po\u0142\u0105cze\u0144 lub w jakim\u015b innym przypadku.<\/p>\n<p><b>Co obejmuje proces \u0142\u0105czenia.<\/b>Aby po\u0142\u0105czy\u0107 si\u0119 z ka\u017cd\u0105 stron\u0105, przegl\u0105darka musi wykona\u0107 nast\u0119puj\u0105ce kroki:<\/p>\n<ul>\n<li><i>Rozwi\u0105zywanie DNS.<\/i>Znalezienie adresu IP serwera (<code>216.58.215.78<\/code>) dla podanej nazwy domeny (<code>google.com<\/code>).<\/li>\n<li><i>U\u015bcisk r\u0119ki TCP.<\/i>Wymiana pakiet\u00f3w (klient \u2192 serwer \u2192 klient), aby zainicjowa\u0107 po\u0142\u0105czenie TCP z serwerem.<\/li>\n<li><i>U\u015bcisk r\u0119ki TLS (tylko dla stron HTTPS).<\/i>Dwa cykle wymiany pakiet\u00f3w (klient \u2192 serwer \u2192 klient \u2192 serwer \u2192 klient), aby zainicjowa\u0107 bezpieczn\u0105 sesj\u0119 TLS.<\/li>\n<\/ul>\n<p>\nUwaga: HTTP\/3 poprawi i przyspieszy mechanizm u\u015bcisku r\u0119ki, ale jest jeszcze daleko.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"dns-prefetch\"><\/a><\/noindex><\/p>\n<h1>dns-prefetch<\/h1>\n<p>\n<code>&lt;link rel= \"dns-prefetch\"&gt;<\/code> prosi przegl\u0105dark\u0119 o wcze\u015bniejsze rozwi\u0105zanie DNS dla domeny, je\u015bli wkr\u00f3tce si\u0119 do niej po\u0142\u0105czysz i chcesz przyspieszy\u0107 pocz\u0105tkowe po\u0142\u0105czenie.<\/p>\n<p>Przegl\u0105darka powinna okre\u015bli\u0107 adres IP domeny, je\u015bli ma pobra\u0107 jakie\u015b zasoby z nowej zewn\u0119trznej domeny. Na przyk\u0142ad, \u0142adowa\u0107 czcionki Google Fonts, React z CDN lub \u017c\u0105da\u0107 odpowiedzi JSON z serwera API.<\/p>\n<p>Dla ka\u017cdej nowej domeny rozwi\u0105zywanie wpisu DNS zazwyczaj zajmuje oko\u0142o 20-120 ms. Wp\u0142ywa to tylko na za\u0142adunek pierwszego zasobu z tej domeny, ale i tak stanowi op\u00f3\u017anienie. Je\u015bli rozwi\u0105\u017cemy DNS wcze\u015bniej, zaoszcz\u0119dzimy czas i szybciej za\u0142adujemy zas\u00f3b.<\/p>\n<h3>Sk\u0142adnia<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"dns-prefetch\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> wskazuje na nazw\u0119 domeny, dla kt\u00f3rej nale\u017cy ustali\u0107 adres IP. Mo\u017cna to poda\u0107 z prefiksem (<code>https:\/\/domain.com<\/code>) lub bez niego (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kiedy u\u017cywa\u0107<\/h3>\n<p>\n<b>U\u017cyj dla domen, kt\u00f3re wkr\u00f3tce b\u0119d\u0105 potrzebne<\/b> do pobierania stamt\u0105d zasob\u00f3w, o kt\u00f3rych przegl\u0105darka nie wie z g\u00f3ry. Na przyk\u0142ad:<\/p>\n<ul>\n<li>Twoja aplikacja jest hostowana na <code>my-app.com<\/code> i wykonuje zapytania AJAX do <code>api.my-app.com<\/code>: nie znasz z g\u00f3ry konkretnych zapyta\u0144, poniewa\u017c s\u0105 one wykonywane dynamicznie z JS. Tutaj ca\u0142kowicie uzasadnione jest u\u017cycie tagu do wst\u0119pnego po\u0142\u0105czenia z domen\u0105.\n<\/li>\n<li>Twoja aplikacja jest hostowana na <code>my-app.com<\/code>, i u\u017cywa czcionek Google Fonts. \u0141adowane s\u0105 w dw\u00f3ch etapach: najpierw \u0142adowany jest plik CSS z domeny. <code>fonts.googleapis.com<\/code>, nast\u0119pnie ten plik \u017c\u0105da czcionek z <code>fonts.gstatic.com<\/code>. Nie mo\u017cesz wiedzie\u0107, jakie konkretne pliki czcionek z <code>fonts.gstatic.com<\/code> b\u0119dziesz potrzebowa\u0107, dop\u00f3ki nie za\u0142adujesz pliku CSS, dlatego wcze\u015bniej mo\u017cemy tylko ustanowi\u0107 wst\u0119pne po\u0142\u0105czenie.<\/li>\n<\/ul>\n<p>\n<b>U\u017cyj tego tagu, aby nieco przyspieszy\u0107 jaki\u015b zewn\u0119trzny skrypt lub styl.<\/b> dzi\u0119ki wst\u0119pnemu ustanowieniu po\u0142\u0105czenia.<\/p>\n<blockquote><p>Zwr\u00f3\u0107 uwag\u0119 na podobne w\u0142a\u015bciwo\u015bci w <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> i <code>&lt;link rel= \"preconnect\"&gt;<\/code>. U\u017cywanie ich razem dla jednej domeny zazwyczaj nie ma sensu: <code>&lt;link rel= \"preconnect\"&gt;<\/code> ju\u017c zawiera <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> i wiele innych. Mo\u017cna to uzasadni\u0107 w dw\u00f3ch przypadkach:<\/p>\n<ul>\n<li><i>Chcesz wspiera\u0107 stare przegl\u0105darki<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> jest wspierana <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">zaczynaj\u0105c od IE10 i Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> przez pewien czas by\u0142 wspierany w Chrome i Firefox, ale dodano go do Safari dopiero w wersji 11.1 i <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">wci\u0105\u017c nie jest wspierany w IE\/Edge<\/a><\/noindex>. Je\u015bli musisz wspiera\u0107 te przegl\u0105darki, u\u017cyj <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> jako alternatywy dla <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Chcesz przyspieszy\u0107 po\u0142\u0105czenie z wi\u0119cej ni\u017c 4-6 domenami<\/i>. Tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> nie jest zalecany do u\u017cywania z wi\u0119cej ni\u017c 4-6 domenami, poniewa\u017c ustanowienie i utrzymanie po\u0142\u0105czenia to kosztowna operacja. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> zu\u017cywa mniej zasob\u00f3w, wi\u0119c w razie potrzeby u\u017cywaj go.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Szczeg\u00f3\u0142y<\/h3>\n<p>\n<b>Opcjonalny tag<\/b>. Przegl\u0105darka nie jest zobowi\u0105zana do przestrzegania tej instrukcji, wi\u0119c mo\u017ce nie wykona\u0107 rozwi\u0105zywania DNS, na przyk\u0142ad, je\u015bli na stronie jest du\u017co takich tag\u00f3w lub w jakim\u015b innym przypadku.<\/p>\n<p><b>Czym jest DNS<\/b>. Ka\u017cdemu serwerowi w internecie odpowiada unikalny adres IP, kt\u00f3ry wygl\u0105da jak <code>216.58.215.78<\/code>. W pasku adresu przegl\u0105darki zazwyczaj wprowadza si\u0119 nazw\u0119 witryny (na przyk\u0142ad, <code>google.com<\/code>), a serwery DNS (Domain Name System) przypisuj\u0105 j\u0105 do adresu IP serwera (<code>216.58.215.78<\/code>).<\/p>\n<p>Aby okre\u015bli\u0107 adres IP, przegl\u0105darka musi wykona\u0107 zapytanie do serwera DNS. Zajmuje to 20-120 ms przy \u0142\u0105czeniu si\u0119 z now\u0105 zewn\u0119trzn\u0105 domen\u0105.<\/p>\n<p><b>DNS jest buforowany, cho\u0107 niezbyt niezawodnie<\/b>. Niekt\u00f3re systemy operacyjne i przegl\u0105darki buforuj\u0105 zapytania DNS: oszcz\u0119dzi to czas podczas kolejnych zapyta\u0144, ale nie mo\u017cna polega\u0107 na buforowaniu. W systemie Linux zazwyczaj w og\u00f3le nie dzia\u0142a. Chrome ma bufor DNS, ale \u017cyje tylko przez minut\u0119. Windows buforuje odpowiedzi DNS przez pi\u0119\u0107 dni.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"prerender\"><\/a><\/noindex><\/p>\n<h1>prerender<\/h1>\n<p>\n<code>&lt;link rel= \"prerender\"&gt;<\/code> prosi przegl\u0105dark\u0119 o za\u0142adowanie adresu URL i wy\u015bwietlenie go na niewidocznej karcie. Kiedy u\u017cytkownik kliknie na link, strona powinna wy\u015bwietli\u0107 si\u0119 natychmiast. To przydatne, je\u015bli jeste\u015b pewien, \u017ce u\u017cytkownik odwiedzi okre\u015blon\u0105 stron\u0119 i chcesz przyspieszy\u0107 jej wy\u015bwietlanie.<\/p>\n<p>Mimo wyj\u0105tkowej efektywno\u015bci tego tagu (lub z jej powodu), w 2019 roku <code>&lt;link rel= \"prerender\"&gt;<\/code> jest s\u0142abo wspierany przez g\u0142\u00f3wne przegl\u0105darki. Wi\u0119cej szczeg\u00f3\u0142\u00f3w w <noindex><a rel=\"nofollow\" href=\"#1\">poni\u017cej<\/a><\/noindex>.<\/p>\n<h3>Sk\u0142adnia<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prerender\" href=\"https:\/\/my-app.com\/pricing\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> wskazuje na adres URL, dla kt\u00f3rego chcesz uruchomi\u0107 renderowanie w tle.<\/p>\n<h3>Kiedy u\u017cywa\u0107<\/h3>\n<p>\n<b>Gdy jeste\u015b naprawd\u0119 pewny, \u017ce u\u017cytkownik przejdzie na okre\u015blon\u0105 stron\u0119<\/b>. Je\u015bli masz \"tunel\", przez kt\u00f3ry 70% odwiedzaj\u0105cych stron\u0119 A przechodzi na stron\u0119 B, to <code>&lt;link rel= \"prerender\"&gt;<\/code> na stronie A bardzo szybko wy\u015bwietli stron\u0119 B.<\/p>\n<p><b>Nie nadu\u017cywaj.<\/b>. Wst\u0119pne renderowanie jest bardzo kosztowne pod wzgl\u0119dem ruchu i pami\u0119ci. Nie u\u017cywaj <code>&lt;link rel= \"prerender\"&gt;<\/code> wi\u0119cej ni\u017c dla jednej strony.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Szczeg\u00f3\u0142y<\/h3>\n<p>\n<b>Opcjonalny tag<\/b>. Przegl\u0105darka nie jest zobowi\u0105zana do przestrzegania tej instrukcji i mo\u017ce j\u0105 zignorowa\u0107, na przyk\u0142ad przy wolnym po\u0142\u0105czeniu lub niewystarczaj\u0105cej ilo\u015bci dost\u0119pnej pami\u0119ci.<\/p>\n<p>Aby oszcz\u0119dzi\u0107 pami\u0119\u0107, <b>Chrome nie wykonuje pe\u0142nego renderowania,<\/b>, a <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">tylko wst\u0119pne \u0142adowanie NoState.<\/a><\/noindex>. Oznacza to, \u017ce Chrome \u0142aduje stron\u0119 i wszystkie jej zasoby, ale nie renderuje jej ani nie wykonuje JavaScriptu.<\/p>\n<p>Firefox i Safari w og\u00f3le nie obs\u0142uguj\u0105 tego tagu. Nie narusza to specyfikacji, poniewa\u017c przegl\u0105darki nie s\u0105 zobowi\u0105zane do wykonywania tej instrukcji; ale i tak jest to przykre. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">B\u0142\u0105d implementacji<\/a><\/noindex> w Firefox by\u0142 otwarty przez siedem lat. S\u0105 doniesienia, \u017ce Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">r\u00f3wnie\u017c nie obs\u0142uguje tego tagu.<\/a><\/noindex>.<\/p>\n<h1>Podsumowanie<\/h1>\n<p>\nU\u017cyj:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 gdy b\u0119dziesz potrzebowa\u0107 zasobu za kilka sekund,\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 gdy b\u0119dziesz potrzebowa\u0107 zasobu na nast\u0119pnej stronie,\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 gdy wiesz, \u017ce wkr\u00f3tce b\u0119dziesz potrzebowa\u0107 zasobu, ale nie znasz jeszcze jego pe\u0142nego adresu URL,\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 analogicznie, gdy wiesz, \u017ce wkr\u00f3tce b\u0119dziesz potrzebowa\u0107 zasobu, ale nie znasz jeszcze jego pe\u0142nego adresu URL (dla starych przegl\u0105darek),\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 gdy masz pewno\u015b\u0107, \u017ce u\u017cytkownicy przejd\u0105 na okre\u015blon\u0105 stron\u0119 i chcesz przyspieszy\u0107 jej wy\u015bwietlanie.<\/li>\n<\/ul>\n<p>\u0179r\u00f3d\u0142o: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/445264\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445\u00a0\u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u041f\u0440\u0435\u0444\u0442\u0435\u0447\u0438\u043d\u0433 CSS, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u043d\u0433 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438. \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442! \u0417\u0432\u0443\u0447\u0438\u0442 \u043a\u0440\u0443\u0442\u043e. \u0415\u0449\u0451 \u043a\u0440\u0443\u0447\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u041f\u044f\u0442\u044c \u0442\u0435\u0433\u043e\u0432 &lt;link rel&gt; \u0434\u0430\u044e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: &lt;link rel=&#187;prefetch&#187; href=&#187;\/style.css&#187; as=&#187;style&#187; \/&gt; [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-30281","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/pl\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"pl_PL\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47Preload, prefetch \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/pl\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-31T18:34:39+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-31T18:34:39+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Preload, prefetch i inne tagi | ProHoster","description":"Istnieje wiele sposob\u00f3w na zwi\u0119kszenie wydajno\u015bci sieci. Jednym z nich jest wst\u0119pne \u0142adowanie tre\u015bci, kt\u00f3ra b\u0119dzie potrzebna p\u00f3\u017aniej.","canonical_url":"https:\/\/prohoster.info\/pl\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"pl_PL","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47Preload, prefetch \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 | ProHoster","og:description":"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.","og:url":"https:\/\/prohoster.info\/pl\/blog\/preload-prefetch-i-drugie-tegi","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T18:34:39+00:00","article:modified_time":"2019-10-31T18:34:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"30281","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-21 00:29:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 03:37:28","updated":"2026-01-21 00:29:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}