<\/span><\/h2>\nNajpro\u015bciej uruchomi\u0107 Early Hints na CDN – to on wy\u015ble 103 zanim origin sko\u0144czy generowa\u0107 HTML. W Cloudflare funkcja jest dost\u0119pna na poziomie domeny – w\u0142\u0105cz j\u0105 w sekcji optymalizacji wydajno\u015bci i zostaw tryb domy\u015blny, kt\u00f3ry automatycznie buduje 103 z nag\u0142\u00f3wk\u00f3w Link<\/code> oraz z analizy HTML. To dobry start bez zmian w aplikacji.<\/p>\nJe\u015bli chcesz kontrolowa\u0107 wskaz\u00f3wki, dodawaj Link<\/code> po stronie originu – CDN skopiuje je do 103. Mo\u017cesz te\u017c tworzy\u0107 regu\u0142y na \u015bcie\u017cki – dla \/<\/code>, \/product\/*<\/code> czy \/blog\/*<\/code> przygotuj r\u00f3\u017cne zestawy zasob\u00f3w, kt\u00f3re maj\u0105 by\u0107 pobierane najwcze\u015bniej.<\/p>\nW \u015brodowiskach bez CDN masz dwie \u015bcie\u017cki. Pierwsza – native support w serwerze lub frameworku. Nowoczesne platformy potrafi\u0105 wys\u0142a\u0107 103 z poziomu aplikacji – w Node mo\u017cesz emitowa\u0107 Early Hints przed w\u0142a\u015bciw\u0105 odpowiedzi\u0105, a podobne wsparcie pojawia si\u0119 w wybranych frameworkach. Druga – reverse proxy przed aplikacj\u0105. Serwery po\u015brednie mog\u0105 generowa\u0107 103 na podstawie regu\u0142 lub wstrzykiwanych nag\u0142\u00f3wk\u00f3w Link<\/code>.<\/p>\nPami\u0119taj o protokole – Early Hints najlepiej dzia\u0142aj\u0105 na HTTP\/2 i HTTP\/3. Je\u015bli ruch wpada przez HTTP\/1.1, cz\u0119\u015b\u0107 klient\u00f3w 103 zignoruje, a cz\u0119\u015b\u0107 nie zyska wystarczaj\u0105co na r\u00f3wnoleg\u0142o\u015bci. W praktyce i tak warto je w\u0142\u0105czy\u0107 – nowoczesne przegl\u0105darki obs\u0142uguj\u0105 mechanizm, a brak wsparcia po stronie klienta po prostu niczego nie psuje.<\/p>\n
<\/span>Co preloadowa\u0107, \u017ceby nie przepali\u0107 bud\u017cetu<\/span><\/h2>\nZasada jest prosta – preloaduj tylko to, co realnie przyspiesza pierwsze renderowanie. Zbyt d\u0142uga lista w 103 spowoduje kontencj\u0119 i odwrotny efekt. Zacznij od trzech kategorii:<\/p>\n
1) Krytyczny CSS<\/strong>
\n– G\u0142\u00f3wna kaskada, bez kt\u00f3rej nie ma layoutu.
\n– U\u017cyj as=style<\/code> i upewnij si\u0119, \u017ce nazwa pliku jest stabilna – w przeciwnym razie przegl\u0105darka nie skorzysta z cache.
\n– Je\u015bli dzielisz CSS na modu\u0142y, preloaduj tylko pakiet krytyczny – reszt\u0119 \u0142aduj p\u00f3\u017aniej.<\/p>\n2) Czcionki u\u017cyte w above the fold<\/strong>
\n– Pliki w formatach WOFF2 – s\u0105 mniejsze i szybciej si\u0119 dekoduj\u0105.
\n– Zawsze dodaj as=font<\/code> i crossorigin<\/code> – inaczej przegl\u0105darka mo\u017ce pobra\u0107 font dwa razy.
\n– Unikaj preloading wielu wariant\u00f3w – zwykle wystarczy regular i bold dla pierwszego widoku.<\/p>\n3) Obraz LCP<\/strong>
\n– Preload ma najwi\u0119kszy sens, gdy LCP to hero image lub g\u0142\u00f3wny baner.
\n– Dodaj as=image<\/code> i parametry odpowiadaj\u0105ce faktycznemu rozmiarowi – zminimalizujesz ryzyko pobrania niepotrzebnie du\u017cych plik\u00f3w.
\n– Je\u015bli masz warianty responsywne, upewnij si\u0119, \u017ce przegl\u0105darka wybierze w\u0142a\u015bciwy zas\u00f3b – wskazuj dok\u0142adnie ten, kt\u00f3ry jest najcz\u0119\u015bciej renderowany na danym szablonie.<\/p>\nUzupe\u0142niaj\u0105co rozwa\u017c preconnect<\/code> do kluczowych domen – np. CDN obraz\u00f3w lub hosta czcionek. To skraca TLS handshake i DNS, ale nie nadu\u017cywaj tej techniki – ka\u017cdy preconnect zu\u017cywa gniazda i mo\u017ce pogorszy\u0107 kolejk\u0119 \u017c\u0105da\u0144.<\/p>\nCzego nie preloadowa\u0107<\/em> – skrypt\u00f3w analitycznych, wid\u017cet\u00f3w spo\u0142eczno\u015bciowych i zasob\u00f3w, kt\u00f3re nie bior\u0105 udzia\u0142u w pierwszym malowaniu. Je\u015bli musisz preloadowa\u0107 JS, r\u00f3b to ostro\u017cnie i tylko dla krytycznych, ma\u0142ych plik\u00f3w inicjalizuj\u0105cych.<\/p>\n<\/span>Weryfikacja zysku – metryki, narz\u0119dzia i kontrola jako\u015bci<\/span><\/h2>\n1) Zbierz baz\u0119 przed wdro\u017ceniem<\/strong>
\n– Minimum 7 dni danych z ruchu produkcyjnego – LCP w percentylu 75, TTFB, CLS i FID\/INP.
\n– Podziel wyniki na typ po\u0142\u0105czenia i urz\u0105dzenia – mobilne vs desktop.
\n– Zanotuj, kt\u00f3re szablony stron i URL-e generuj\u0105 najwi\u0119cej ods\u0142on – tam skupisz optymalizacj\u0119.<\/p>\n2) W\u0142\u0105cz Early Hints na ograniczonym zakresie<\/strong>
\n– Najpierw \/<\/code> i szablony o najwi\u0119kszym ruchu.
\n– Preloaduj tylko krytyczne zasoby – 2\u20134 wpisy Link<\/code> to zwykle bezpieczny poziom.
\n– Monitoruj b\u0142\u0119dy – czy nie pojawia si\u0119 podw\u00f3jne pobieranie font\u00f3w, czy nie ro\u015bnie Total Blocking Time przez kolizj\u0119 z innymi optymalizacjami.<\/p>\n3) Por\u00f3wnaj przed i po<\/strong>
\n– Por\u00f3wnanie tydzie\u0144 do tygodnia na tej samej puli URL-i.
\n– Oczekiwany efekt – spadek LCP o 50\u2013200 ms na dobrze dobranych zasobach, wi\u0119cej przy d\u0142ugim TTFB.
\n– Je\u015bli zysku nie ma – ogranicz list\u0119 preload\u00f3w, usu\u0144 preconnect<\/code>, przetestuj r\u00f3\u017cne rozmiary obrazu LCP lub zaktualizuj priorytety \u0142adowania.<\/p>\nJak sprawdzi\u0107, \u017ce 103 naprawd\u0119 wychodzi do u\u017cytkownika?<\/strong>
\n– DevTools – w zak\u0142adce Network zobaczysz wczesn\u0105 odpowied\u017a 103 dla dokumentu oraz rozpocz\u0119te pobieranie zasob\u00f3w przed 200.
\n– cURL – nag\u0142\u00f3wki 103 s\u0105 widoczne przy zapytaniach z w\u0142\u0105czonym HTTP\/2.
\n– Logi i RUM – zanotuj odsetek \u017c\u0105da\u0144 z Early Hints oraz korelacj\u0119 z LCP. Je\u015bli masz mo\u017cliwo\u015b\u0107, wysy\u0142aj w RUM flag\u0119 \u201eEH hit\u201d i por\u00f3wnuj mediany.<\/p>\nWa\u017cne zasady jako\u015bci<\/strong>
\n– Nie dubluj preload\u00f3w – je\u015bli zas\u00f3b jest ju\u017c inlinowany lub wymuszony w HTML, usu\u0144 zb\u0119dne wpisy.
\n– Dodawaj crossorigin<\/code> do font\u00f3w i zasob\u00f3w z innych domen – inaczej przegl\u0105darka mo\u017ce utworzy\u0107 dwa wpisy w cache.
\n– Aktualizuj list\u0119 przy zmianach bundla – hash w nazwie pliku wymaga dostosowania nag\u0142\u00f3wk\u00f3w Link<\/code>.
\n– Nie preloaduj zasob\u00f3w warunkowych – je\u015bli obraz LCP r\u00f3\u017cni si\u0119 na wielu typach stron, rozdziel regu\u0142y w zale\u017cno\u015bci od szablonu.<\/p>\n<\/span>Najcz\u0119stsze pu\u0142apki i jak ich unikn\u0105\u0107<\/span><\/h2>\nZa d\u0142ugi zestaw hint\u00f3w – ogranicz do najwa\u017cniejszego CSS, jednego fontu i obrazu LCP. Dodatkowe zasoby do\u0142\u00f3\u017c dopiero, gdy zobaczysz brak regresji w LCP.<\/p>\n
Konflikt z optymalizacjami – niekt\u00f3re narz\u0119dzia \u0142\u0105cz\u0105 pliki i zmieniaj\u0105 kolejno\u015b\u0107 \u0142adowania. Ustal priorytety – najpierw weryfikuj Early Hints, potem dopasuj minifikacj\u0119 i lazy loading.<\/p>\n
Cache po stronie CDN – 103 powinien by\u0107 generowany dla ka\u017cdej odpowiedzi dokumentu – nie buforuj dynamicznych nag\u0142\u00f3wk\u00f3w Link<\/code> w spos\u00f3b, kt\u00f3ry pomija warianty dla r\u00f3\u017cnych szablon\u00f3w.<\/p>\nBrak efektu na wolnych \u0142\u0105czach – je\u015bli g\u0142\u00f3wnym w\u0105skim gard\u0142em jest przepustowo\u015b\u0107, postaw na kompresj\u0119 obraz\u00f3w i rozmiary plik\u00f3w – Early Hints skracaj\u0105 \u201ebezczynno\u015b\u0107\u201d, ale nie zast\u0105pi\u0105 optymalizacji payloadu.<\/p>\n
<\/span>Podsumowuj\u0105c<\/span><\/h2>\nEarly Hints 103 to szybkie zwyci\u0119stwo – przegl\u0105darka zaczyna prac\u0119, zanim backend sko\u0144czy, a LCP spada bez zmian w widoku. W\u0142\u0105cz funkcj\u0119 na kraw\u0119dzi, preloaduj tylko CSS krytyczny, wybrane fonty i obraz LCP, a zysk weryfikuj w danych polowych. Trzymaj list\u0119 Link<\/code> kr\u00f3tk\u0105, dodawaj crossorigin<\/code> do font\u00f3w i mierz wp\u0142yw per szablon – tak wykorzystasz potencja\u0142 103 bez ryzyka regresji.<\/p>\n","protected":false},"author":6,"featured_media":10957,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[121,118],"manual_kb_tag":[952,5888,5895,5884,5889,5890,4661,5885,5891,5893,5892,5887,5886,5894,76],"class_list":["post-15338","manual_kb","type-manual_kb","status-publish","format-standard","has-post-thumbnail","hentry","manualknowledgebasecat-inne","manualknowledgebasecat-pozostale","manual_kb_tag-cdn","manual_kb_tag-cloudflare-early-hints","manual_kb_tag-devtools","manual_kb_tag-early-hints-103","manual_kb_tag-http-2","manual_kb_tag-http-3","manual_kb_tag-largest-contentful-paint","manual_kb_tag-lcp","manual_kb_tag-naglowek-link","manual_kb_tag-optymalizacja-front-end","manual_kb_tag-performance-web","manual_kb_tag-preconnect","manual_kb_tag-preload","manual_kb_tag-rum","manual_kb_tag-wordpress"],"_links":{"self":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/15338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":1,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/15338\/revisions"}],"predecessor-version":[{"id":15339,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/15338\/revisions\/15339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media?parent=15338"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manualknowledgebasecat?post=15338"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb_tag?post=15338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}