Jak działa lazy loading w WordPress 2026?

Od WordPressa 5.5 wszystkie obrazy automatycznie dostają atrybut loading="lazy" w HTML. Przeglądarka sama opóźnia pobieranie, aż obraz zbliży się do viewportu użytkownika. Nie potrzebujesz dodatkowej wtyczki ani JavaScriptu – działa natywnie w Chrome, Firefox, Safari i Edge. Wtyczki przydają się tylko do zaawansowanych funkcji jak lazy dla obrazów tła CSS, placeholdery blur-up albo lazy iframe YouTube.

Dlaczego obrazy w moim WordPressie nie ładują się?

Najczęściej wina leży po stronie konfliktu wtyczek optymalizacyjnych – np. dwie wtyczki lazy load działają jednocześnie, albo jakiś błąd JavaScript blokuje Intersection Observer. Sprawdź konsolę przeglądarki (F12 → Console) pod kątem czerwonych błędów. Tymczasowo wyłącz wtyczki cache'ujące (WP Rocket, LiteSpeed, Autoptimize) i zobacz czy problem ustąpi. Uważaj też na Cloudflare Rocket Loader – często powoduje opóźnienia.

LCP wysoki – jak naprawić problem w WordPress?

Najczęstsza przyczyna wysokiego LCP to lazy loading na największym obrazie above-the-fold (hero banner). Usuń atrybut loading="lazy" z pierwszego obrazu strony, dodaj fetchpriority="high" i rozważ preload w sekcji head HTML. Dodatkowo: skonwertuj obrazy do WebP lub AVIF (50% mniejsza waga), użyj CDN typu QUIC.cloud albo Cloudflare, zadbaj o szybki hosting – LiteSpeed Web Server daje TTFB poniżej 200 ms.

Czy native lazy loading wystarczy bez pluginu?

W 90% przypadków tak. WordPress od wersji 5.5 dodaje loading="lazy" automatycznie do wszystkich obrazów z Media Library. Wsparcie przeglądarek wynosi 97%. Wtyczkę rozważ tylko jeśli: potrzebujesz lazy dla obrazów tła CSS (background-image), chcesz placeholderów LQIP (rozmyte miniatury), masz dużo embedów YouTube lub Google Maps do lazy-załadowania, albo używasz starego motywu, który nie wspiera natywnych atrybutów.

WebP czy AVIF w WordPress – co wybrać w 2026?

Oba formaty warto wdrożyć równocześnie. WebP jest bezpieczniejszy – wsparcie 98%, mniejsze pliki od JPEG o 30%. AVIF daje jeszcze 15-20% oszczędności więcej i wsparcie sięga 96% w 2026 roku. Większość wtyczek (Imagify, ShortPixel, LiteSpeed Cache) serwuje oba formaty dynamicznie przez nagłówek Accept – nowsza przeglądarka dostaje AVIF, starsza WebP, najstarsze fallback do JPG. Zero pracy od Ciebie po konfiguracji.

Jak zoptymalizować obrazy bez utraty jakości?

Ustaw kompresję lossy na poziomie 80-85% (w Imagify to Aggressive, w ShortPixel Glossy) – wizualna różnica jest niezauważalna, a waga spada o 60-70%. Konwertuj JPEG i PNG do WebP i AVIF. Nie skaluj obrazów w CSS – załaduj od razu w odpowiednim rozmiarze, użyj srcset dla responsive. Zachowaj oryginały jako backup. PNG z przezroczystością przekonwertuj do WebP lossless, nie JPEG. Ikony i logo zostaw w SVG.

CDN obrazów w WordPress – warto czy nie?

Zdecydowanie tak, jeśli masz ruch międzynarodowy lub dużo obrazów. CDN obrazów (Bunny Image, Cloudflare Images, QUIC.cloud) serwuje pliki z najbliższego serwera – czas ładowania spada z 800 ms do 100 ms dla użytkownika z innego kraju. Dodatkowo konwersja w locie do WebP/AVIF i automatyczne rozmiary responsive. Dla małych lokalnych stron z hostingiem w Polsce CDN jest bonusem, nie koniecznością. Uważaj na konflikty z Cloudflare Rocket Loader i Polish.

Jak zmierzyć Core Web Vitals mojej strony?

Trzy narzędzia, z których korzystaj równocześnie. PageSpeed Insights (pagespeed.web.dev) – wklej URL i zobacz ocenę mobile/desktop wraz z field data z Chrome UX Report. Google Search Console → Core Web Vitals – pokazuje dane z ostatnich 28 dni od prawdziwych użytkowników Chrome, to najważniejsze źródło bo Google używa go w rankingu. Web Vitals Chrome Extension – real-time pomiar LCP, CLS, INP podczas przeglądania własnej strony.

Problemy z lazy loading w WordPress

Lazy loading w WordPress 2026 – native vs plugin

Od wersji 5.5 (sierpień 2020) WordPress dodaje atrybut `loading="lazy"` automatycznie do wszystkich obrazów wstawianych przez edytor. Nie potrzebujesz już JavaScriptu ani wtyczki do podstawowego lazy loadingu – przeglądarka robi to sama. Wszystkie nowoczesne silniki (Chromium, Firefox, Safari od iOS 15.4) to wspierają. Statystyki z CanIUse pokazują pokrycie ~97% w 2026 roku.

Kiedy więc sięgać po wtyczki? Tylko w trzech przypadkach:

Gdy chcesz lazy loading dla obrazów tła CSS (`background-image`) – native tego nie robi
Gdy potrzebujesz placeholderów typu LQIP (Low Quality Image Placeholder) lub blur-up effect
Gdy używasz starszego theme'u, który nie wspiera natywnych atrybutów

Porównanie podejść:

Metoda	Zalety	Wady
Native `loading="lazy"`	Brak JS, 0 KB overhead, wspierany wszędzie	Brak placeholderów, tylko `` i ``</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">Wtyczka (WP Rocket, LiteSpeed)</td><td class="px-4 py-2">Obrazy tła, placeholdery, iframe facade</td><td class="px-4 py-2">10-40 KB JS, konflikty z CDN</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">Własny Intersection Observer</td><td class="px-4 py-2">Pełna kontrola</td><td class="px-4 py-2">Dużo pracy, ryzyko błędów</td></tr></tbody></table></div><p class="mb-4">W większości przypadków native wystarczy. Jeśli serwer masz u <a href="https://cyberfolks.pl/?ref=27128310" class="text-primary hover:underline" target="_blank" rel="noopener sponsored">CyberFolks</a>, LiteSpeed Cache ma lazy loading w cenie hostingu – i działa wyjątkowo dobrze, bo integruje się z LiteSpeed Web Server na poziomie serwera, nie PHP. Zanim zaczniesz kombinować, sprawdź też <a href="/baza-wiedzy/wordpress/problemy-z-cache-w-wordpress" class="text-primary hover:underline">problemy z cache w WordPress</a>, bo bywa że lazy źle działa właśnie przez agresywne cachowanie HTML.</p></div> </section> <section class="mb-10" id="obrazy-nie-ładują-się-wcale-diagnostyka-krok-po-kroku"> <h2 class="text-2xl font-bold mb-4">Obrazy nie ładują się wcale – diagnostyka krok po kroku</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">Biała strona tam, gdzie powinien być obraz – klasyka. Zanim zaczniesz odinstalowywać wtyczki, zrób szybką diagnozę w Chrome DevTools. Otwórz zakładkę Network, odfiltruj po `Img`, przeładuj stronę i patrz co wraca.</p><p class="mb-4"><strong>5 najczęstszych przyczyn:</strong></p><p class="mb-4">1. <strong>Błąd JavaScript blokuje Intersection Observer</strong> – jakiś inny skrypt rzuca wyjątek i zatrzymuje inicjalizację lazy loadera. Sprawdź konsolę (F12 → Console). Czerwone komunikaty? Masz sprawcę.<br>2. <strong>Wtyczka lazy load + native lazy load jednocześnie</strong> – podwójne lazy. Wtyczka czeka aż obraz wejdzie w viewport, a obraz ma `loading="lazy"`, więc przeglądarka i tak go nie pobiera. Deadlock.<br>3. <strong>CDN nie obsługuje `data-src`</strong> – niektóre konfiguracje Cloudflare Image Resizing lub Bunny CDN nie podmieniają atrybutu `data-src` na `src`. Obraz nigdy się nie ładuje.<br>4. <strong>Broken Intersection Observer polyfill</strong> – stare wtyczki ładują polyfill dla IE11, który ma bug w iOS Safari 17+.<br>5. <strong>Ad blocker blokuje skrypt lazy.js</strong> – uBlock Origin zna wiele ścieżek popularnych wtyczek i potrafi je ubić.</p><p class="mb-4">Szybki test: wyłącz tymczasowo wszystkie wtyczki optymalizacyjne (WP Rocket, Autoptimize, LiteSpeed) i zobacz czy obrazy wracają. Jeśli tak, włączaj po jednej i szukaj winowajcy.</p><p class="mb-4">W panelu WordPressa przejdź do Narzędzia → Zdrowie witryny. Jeśli widzisz błędy JS, masz trop. Więcej o diagnozowaniu całościowych problemów z prędkością znajdziesz w artykule <a href="/baza-wiedzy/wordpress/wordpress-wolno-sie-laduje" class="text-primary hover:underline">WordPress wolno się ładuje – co robić</a>.</p></div> </section> <div class="my-10 p-6 md:p-8 rounded-2xl bg-gradient-to-br from-primary-50 to-accent-50 border border-primary-200 relative overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-primary-500/5 rounded-full -translate-y-1/2 translate-x-1/2"></div> <h3 class="text-lg font-bold mb-2">Potrzebujesz profesjonalnej strony WordPress?</h3> <p class="text-neutral-600 mb-4">Tworzymy strony WordPress, które są szybkie, bezpieczne i zoptymalizowane pod SEO. Od 3000 zł.</p> <div class="flex flex-wrap items-center gap-3"> <a href="/wordpress/" class="btn-accent" data-umami-event="click-cta" data-umami-event-location="kb-inline"> Sprawdź ofertę WordPress </a> <a href="tel:+48604939140" class="inline-flex items-center gap-2 bg-white border border-neutral-200 rounded-lg px-4 py-2.5 text-primary-600 font-semibold hover:bg-primary-50 hover:border-primary-300 transition-all"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> 604 939 140 </a> </div> </div> <section class="mb-10" id="obrazy-ładują-się-za-wolno-przy-scrollu"> <h2 class="text-2xl font-bold mb-4">Obrazy ładują się za wolno przy scrollu</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">Scrollujesz w dół i widzisz białe pole przez pół sekundy, dopiero potem pojawia się obraz. Irytujące. Technicznie to niedoskonałość domyślnej implementacji – przeglądarka zaczyna pobierać obraz dopiero gdy znajdzie się on praktycznie na ekranie. Nie ma buforu.</p><p class="mb-4">Co możesz zrobić:</p><ul class="list-disc pl-6 mb-4 space-y-1"><li><strong>Zwiększ threshold</strong> – w większości wtyczek (WP Rocket, LiteSpeed) możesz ustawić, ile pikseli przed wejściem w viewport obraz zacznie się ładować. Domyślnie ~200px, zwiększ do 500-800px.</li><li><strong>Dodaj placeholdery LQIP</strong> – mały, rozmyty obraz (2-4 KB) w miejscu docelowego. Użytkownik widzi coś od razu, nie czeka na białym tle.</li><li><strong>Użyj `decoding="async"`</strong> – pozwala przeglądarce dekodować obraz w tle, zamiast blokować główny wątek.</li><li><strong>Włącz prefetch DNS dla CDN-u obrazów</strong> – `<link rel="dns-prefetch" href="//cdn.twoja-domena.pl">` w `<head>`.</li></ul><p class="mb-4">Przykład HTML, który działa dobrze:</p><pre class="bg-neutral-900 text-neutral-100 rounded-lg p-4 mb-4 overflow-x-auto text-sm"><code class="language-html"><img src="zdjecie.webp" width="1200" height="800" loading="lazy" decoding="async" alt="Opis obrazka"></code></pre><p class="mb-4">Jeśli masz dużo obrazów w galerii (np. produkty w sklepie), rozważ paginację zamiast infinite scrollingu – z lazy loading też, ale bez szalonego DOM-a. Przy okazji zajrzyj do poradnika <a href="/baza-wiedzy/wordpress/wordpress-wolno-sie-laduje" class="text-primary hover:underline">problemy z wydajnością WooCommerce</a>, który omawia podobne wyzwania w kontekście sklepów.</p></div> </section> <section class="mb-10" id="lcp-wysoki-największy-obraz-nie-może-być-lazy"> <h2 class="text-2xl font-bold mb-4">LCP wysoki – największy obraz nie może być lazy</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">To jest grzech numer jeden, który widzę regularnie na audytach. Pierwszy, duży obraz na stronie – hero banner, zdjęcie produktu na górze, główna grafika artykułu – MA być pobierany natychmiast. Nie lazy. Nigdy lazy.</p><p class="mb-4">Dlaczego? Bo LCP (Largest Contentful Paint) mierzy kiedy największy widoczny element zostanie wyrenderowany. Jeśli oznaczysz go `loading="lazy"`, przeglądarka czeka na Intersection Observer, zamiast od razu pobrać. Dodajesz 300-800 ms opóźnienia. Czerwone LCP murowane.</p><p class="mb-4"><strong>Cel Core Web Vitals 2026:</strong></p><div class="overflow-x-auto mb-4"><table class="min-w-full text-sm border border-neutral-200 rounded-lg"><thead class="bg-neutral-50"><tr><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Metryka</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Dobry</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Wymaga poprawy</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Słaby</th></tr></thead><tbody><tr class="border-b border-neutral-100"><td class="px-4 py-2">LCP</td><td class="px-4 py-2">≤ 2.5s</td><td class="px-4 py-2">2.5-4.0s</td><td class="px-4 py-2">> 4.0s</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">CLS</td><td class="px-4 py-2">≤ 0.1</td><td class="px-4 py-2">0.1-0.25</td><td class="px-4 py-2">> 0.25</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">INP</td><td class="px-4 py-2">≤ 200ms</td><td class="px-4 py-2">200-500ms</td><td class="px-4 py-2">> 500ms</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">FCP</td><td class="px-4 py-2">≤ 1.8s</td><td class="px-4 py-2">1.8-3.0s</td><td class="px-4 py-2">> 3.0s</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">TTFB</td><td class="px-4 py-2">≤ 0.8s</td><td class="px-4 py-2">0.8-1.8s</td><td class="px-4 py-2">> 1.8s</td></tr></tbody></table></div><p class="mb-4">Jak to naprawić:</p><ul class="list-disc pl-6 mb-4 space-y-1"><li>Dodaj `fetchpriority="high"` do hero image – mówi przeglądarce "to najważniejsze, pobierz pierwsze"</li><li>Usuń `loading="lazy"` z pierwszego obrazu</li><li>Dodaj preload w `<head>`: `<link rel="preload" as="image" href="hero.webp" fetchpriority="high">`</li><li>W WP Rocket włącz opcję "Exclude first X images from lazy load" (zazwyczaj 1-2)</li></ul><p class="mb-4">Wtyczki jak WP Rocket od wersji 3.13 wykrywają to automatycznie, ale warto zweryfikować. Otwórz PageSpeed Insights i sprawdź sekcję "LCP element" – tam zobaczysz co jest LCP-em i czy ma odpowiednie atrybuty. Więcej o optymalizacji Core Web Vitals znajdziesz w artykule <a href="/pozycjonowanie-seo/" class="text-primary hover:underline">pozycjonowanie SEO a szybkość strony</a>.</p></div> </section> <section class="mb-10" id="cls-layout-shift-przez-obrazy-bez-wymiarów"> <h2 class="text-2xl font-bold mb-4">CLS – layout shift przez obrazy bez wymiarów</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">Drugi grzech: obrazy bez `width` i `height`. Efekt? Strona "skacze" gdy obrazy się ładują. Użytkownik klika przycisk, a ten mu ucieka bo wyżej właśnie załadował się banner. Google nienawidzi CLS – i użytkownicy też.</p><p class="mb-4">Rozwiązanie jest proste, ale wymaga dyscypliny. Każdy `<img>` musi mieć atrybuty `width` i `height` – najlepiej w pikselach, pasujące do rzeczywistego aspect ratio. WordPress od wersji 5.5 dodaje je automatycznie przy wstawianiu z Media Library, ale importowane obrazy, stare wpisy albo ręcznie kodowane szablony często ich nie mają.</p><p class="mb-4">Szybki audyt:</p><ul class="list-disc pl-6 mb-4 space-y-1"><li>Zainstaluj wtyczkę <strong>Image Dimensions</strong> (darmowa) – skanuje wpisy i dodaje brakujące atrybuty</li><li>Alternatywa dla deweloperów: funkcja `wp_get_attachment_image()` zamiast ręcznego HTML</li><li>CSS fix dla starych wpisów: `img { aspect-ratio: attr(width) / attr(height); height: auto; }`</li></ul><p class="mb-4">Placeholder skeleton screens też pomagają. Wtyczki takie jak <strong>Flying Images</strong> generują rozmyty placeholder o dokładnych wymiarach – strona się nie rusza nawet gdy obraz jeszcze nie doszedł.</p><p class="mb-4">Jeśli walczysz z CLS w konkretnym theme'ie, otwórz plik `single.php` lub `page.php` i sprawdź czy `the_post_thumbnail()` ma rozmiar sprecyzowany. Domyślnie WordPress zna wymiary z Media Library, ale niektóre page buildery (Elementor, Divi) potrafią je zgubić. Polecam też rzucić okiem na <a href="/baza-wiedzy/wordpress/czy-warto-uzywac-page-builders-w-wordpress" class="text-primary hover:underline">czy warto używać page builders w WordPress</a>.</p></div> </section> <section class="mb-10" id="webp-i-avif-nowoczesne-formaty-a-lazy-loading"> <h2 class="text-2xl font-bold mb-4">WebP i AVIF – nowoczesne formaty a lazy loading</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">WebP to dziś standard – waży 25-35% mniej niż JPEG przy tej samej jakości wizualnej. AVIF jest jeszcze lepszy (40-50% oszczędności), ale obsługa w narzędziach to nadal trochę ruletka. W 2026 roku oba formaty mają pokrycie >96% w przeglądarkach globalnych.</p><p class="mb-4"><strong>Porównanie konwerterów (stan na 2026):</strong></p><div class="overflow-x-auto mb-4"><table class="min-w-full text-sm border border-neutral-200 rounded-lg"><thead class="bg-neutral-50"><tr><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Wtyczka</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Cena</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Konwersja WebP</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Konwersja AVIF</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">Lazy loading</th><th class="px-4 py-2 text-left font-semibold border-b border-neutral-200">CDN</th></tr></thead><tbody><tr class="border-b border-neutral-100"><td class="px-4 py-2">Imagify</td><td class="px-4 py-2">Free 20 MB/mies, $4.99/mies</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Nie</td><td class="px-4 py-2">Tak</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">ShortPixel</td><td class="px-4 py-2">Free 100 img/mies, $9.99/mies</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Nie</td><td class="px-4 py-2">Tak</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">Smush</td><td class="px-4 py-2">Free unlimited, $7/mies</td><td class="px-4 py-2">Tak (Pro)</td><td class="px-4 py-2">Nie</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Tak (Pro)</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">Converter for Media</td><td class="px-4 py-2">Free</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Nie</td><td class="px-4 py-2">Nie</td></tr><tr class="border-b border-neutral-100"><td class="px-4 py-2">LiteSpeed Cache</td><td class="px-4 py-2">Free (z hostingiem)</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">Tak</td><td class="px-4 py-2">QUIC.cloud</td></tr></tbody></table></div><p class="mb-4">Moja rekomendacja dla większości małych i średnich stron: <strong>LiteSpeed Cache</strong> + hosting <a href="https://cyberfolks.pl/?ref=27128310" class="text-primary hover:underline" target="_blank" rel="noopener sponsored">CyberFolks</a>. Dostajesz konwersję WebP, AVIF, lazy loading i CDN QUIC.cloud w cenie hostingu. Zero dodatkowych kosztów.</p><p class="mb-4">Dla większych projektów (>10000 obrazów) warto zainwestować w ShortPixel Pro – ma lepszą kompresję lossy, zachowuje metadane EXIF jeśli potrzebujesz i integruje się z każdym CDN-em.</p><p class="mb-4"><strong>Na co uważać przy konwersji:</strong></p><ul class="list-disc pl-6 mb-4 space-y-1"><li>Backup oryginałów – niektóre wtyczki nadpisują pliki</li><li>Jakość kompresji 80-85% (Imagify "Aggressive", ShortPixel "Glossy")</li><li>PNG z przezroczystością → WebP lossless, nie JPEG</li><li>Nie konwertuj logo i ikon, zwłaszcza SVG</li></ul><p class="mb-4">Więcej o wyborze: <a href="/baza-wiedzy/wordpress/najlepsze-wtyczki-do-webp" class="text-primary hover:underline">najlepsze wtyczki do konwersji WebP w WordPress</a>.</p></div> </section> <section class="mb-10" id="cdn-a-lazy-loading-konflikty-i-fix"> <h2 class="text-2xl font-bold mb-4">CDN a lazy loading – konflikty i fix</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">CDN przyspiesza stronę – to wiemy. Ale gdy do tego dodasz wtyczkę lazy loading, czasami pojawiają się dziwne efekty. Obrazy mrugają, nie ładują się albo ładują dwa razy.</p><p class="mb-4"><strong>Najczęstsze konflikty:</strong></p><ul class="list-disc pl-6 mb-4 space-y-1"><li><strong>Cloudflare Rocket Loader</strong> – opóźnia wykonanie wszystkich skryptów JS, łącznie z Intersection Observer. Obrazy pojawiają się z 1-2 sekundowym opóźnieniem. Fix: wyłącz Rocket Loader. W Cloudflare Dashboard → Speed → Optimization → Rocket Loader → OFF.</li><li><strong>Cloudflare Polish + local WebP conversion</strong> – Polish konwertuje w locie JPG/PNG do WebP, ale lokalna wtyczka już to zrobiła. Serwer wysyła WebP, Polish próbuje konwertować WebP do WebP i zwraca błąd 502. Fix: wybierz jedno.</li><li><strong>Bunny CDN + relative URLs</strong> – BunnyCDN potrzebuje absolutnych URL-i. Jeśli wtyczka lazy loading używa `data-src="/wp-content/..."` zamiast pełnego URL-a, obraz nie załaduje się z CDN-a.</li><li><strong>Cloudflare Mirage</strong> – ma własny lazy loading. Z wtyczką WP = dwa lazy loadingi = chaos. Wyłącz Mirage jeśli używasz dedykowanej wtyczki.</li></ul><p class="mb-4"><strong>Rekomendacja stacka 2026:</strong></p><p class="mb-4">1. Hosting z LiteSpeed Web Server (np. CyberFolks)<br>2. LiteSpeed Cache + QUIC.cloud CDN<br>3. Cloudflare jako proxy DNS (Polish OFF, Rocket Loader OFF)<br>4. Native lazy loading z `loading="lazy"` + `fetchpriority="high"` na hero</p><p class="mb-4">To prosty, działający setup dla 90% stron. Jeśli chcesz wiedzieć więcej o konfiguracji Cloudflare, zajrzyj do <a href="/baza-wiedzy/wordpress/jak-zainstalowac-cloudflare-w-wordpress" class="text-primary hover:underline">jak zainstalować Cloudflare w WordPress</a>. A jeśli zastanawiasz się nad wyborem samego hostingu, mamy rozdzieloną analizę w <a href="/baza-wiedzy/wordpress/problemy-z-hostingiem-wordpress" class="text-primary hover:underline">problemy z hostingiem WordPress</a>.</p></div> </section> <section class="mb-10" id="smush-vs-imagify-vs-shortpixel-co-wybrać-w-2026"> <h2 class="text-2xl font-bold mb-4">Smush vs Imagify vs ShortPixel – co wybrać w 2026</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">Trzy najpopularniejsze wtyczki do optymalizacji obrazów. Każda ma swoich zwolenników, każda ma też swoje bolączki. Testowałem wszystkie trzy na produkcji przez ostatnie dwa lata i widzę konkretne różnice.</p><p class="mb-4"><strong>Smush (WPMU DEV)</strong><br>- Plusy: darmowa wersja obsługuje nieograniczoną liczbę obrazów (do 5 MB każdy), dobry lazy loading w wersji free, integracja z multisite<br>- Minusy: brak AVIF w wersji darmowej, kompresja lossy tylko w Pro ($7/mies), duża liczba zapytań do zewnętrznego API<br>- Dla kogo: blogi i małe firmowe strony, gdzie liczba obrazów jest spora, ale wymagania są standardowe</p><p class="mb-4"><strong>Imagify (WP Rocket team)</strong><br>- Plusy: świetna kompresja (Aggressive level), WebP + AVIF w jednym planie, integracja z WP Rocket, backup oryginałów<br>- Minusy: darmowa wersja to tylko 20 MB/miesiąc (ok. 200 zdjęć), brak natywnego lazy loadingu – potrzebujesz osobnej wtyczki<br>- Dla kogo: sklepy WooCommerce i strony mocno wizualne, gdzie już płacisz za WP Rocket</p><p class="mb-4"><strong>ShortPixel</strong><br>- Plusy: najlepsza kompresja lossy w testach, WebP + AVIF + Glossy mode, zachowanie EXIF, API do zewnętrznych systemów<br>- Minusy: darmowa wersja to 100 obrazów/miesiąc, interfejs mniej intuicyjny niż Imagify<br>- Dla kogo: fotografowie, portfolio, strony z tysiącami wysokiej jakości zdjęć</p><p class="mb-4">Dla większości klientów polecam <strong>LiteSpeed Cache</strong> – robi wszystko co powyższe (WebP, AVIF, lazy loading) gratis, pod warunkiem że masz hosting LiteSpeed jak <a href="https://cyberfolks.pl/?ref=27128310" class="text-primary hover:underline" target="_blank" rel="noopener sponsored">CyberFolks</a>. Oszczędzasz 200-400 PLN rocznie.</p><p class="mb-4">Przy migracji z jednej wtyczki na drugą pamiętaj – najpierw przywróć oryginały, potem odinstaluj starą, wtedy instaluj nową. Inaczej możesz stracić jakość obrazów na zawsze. Zobacz też <a href="/baza-wiedzy/wordpress/problemy-z-wtyczkami-wordpress" class="text-primary hover:underline">problemy z wtyczkami WordPress</a> pod kątem konfliktów.</p></div> </section> <section class="mb-10" id="lazy-loading-iframes-youtube-google-maps-i-inne"> <h2 class="text-2xl font-bold mb-4">Lazy loading iframes – YouTube, Google Maps i inne</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">YouTube embed wrzucony na stronę potrafi dodać 1.5 MB do transferu, zanim użytkownik w ogóle kliknie play. Google Maps iframe? 2 MB i 30+ zapytań sieciowych. Jeśli masz to na każdej podstronie, Core Web Vitals leżą i proszą o łaskę.</p><p class="mb-4">Rozwiązanie to <strong>facade pattern</strong> – zamiast prawdziwego iframe'a, pokazujesz statyczny obraz (placeholder) i dopiero po kliknięciu ładujesz właściwy embed.</p><p class="mb-4"><strong>Dla YouTube:</strong></p><ul class="list-disc pl-6 mb-4 space-y-1"><li><strong>Lite YouTube Embed</strong> (darmowa wtyczka lub własny kod) – placeholder z miniaturką, załaduje się dopiero po kliknięciu. Oszczędność 1.4 MB per embed.</li><li><strong>WP YouTube Lyte</strong> – dodaje tryb "lazy" do wszystkich embedów na stronie automatycznie</li><li>W WP Rocket i LiteSpeed Cache jest opcja "Replace YouTube iframe with preview image" – działa out of the box</li></ul><p class="mb-4"><strong>Dla Google Maps:</strong></p><ul class="list-disc pl-6 mb-4 space-y-1"><li>Statyczny obraz z Google Static Maps API jako placeholder (bezpłatny do 28k zapytań/mies)</li><li>Wtyczka <strong>WP Google Maps Lite</strong> z opcją lazy</li><li>Custom rozwiązanie: kliknij → dopiero ładujesz iframe</li></ul><p class="mb-4"><strong>Dla iframe ogólnie:</strong></p><p class="mb-4">Native `loading="lazy"` działa też na iframe'ach od Chrome 77. Dodaj atrybut do HTML-a i przeglądarka zajmie się resztą. Dla starszych implementacji sprawdź też <a href="/baza-wiedzy/wordpress/problemy-z-wtyczkami-wordpress" class="text-primary hover:underline">problemy z integracjami zewnętrznymi w WordPress</a>.</p><p class="mb-4">Jeden tip: iframe'y Facebooka (Like Box, embed posta) też warto lazy-załadować. Skrypt FB SDK to kolejne 300 KB, których 90% użytkowników nie potrzebuje.</p></div> </section> <section class="mb-10" id="audyt-core-web-vitals-lighthouse-pagespeed-chrome-ux"> <h2 class="text-2xl font-bold mb-4">Audyt Core Web Vitals – Lighthouse, PageSpeed, Chrome UX</h2> <div class="text-neutral-700 leading-relaxed"><p class="mb-4">Nie da się optymalizować tego, czego nie mierzysz. Wszystkie poprawki, które tu opisałem, muszą być weryfikowane danymi. Inaczej strzelasz w ciemno.</p><p class="mb-4"><strong>Trzy narzędzia, z których korzystam codziennie:</strong></p><p class="mb-4">1. <strong>PageSpeed Insights</strong> (pagespeed.web.dev) – najszybszy audyt, pokazuje field data (z Chrome UX Report) i lab data (z Lighthouse). Używaj field data do oceny, lab data do diagnozy.<br>2. <strong>Chrome DevTools → Lighthouse</strong> – pełny audyt lokalny, bez limitu requestów, symulacja mobile 4G<br>3. <strong>Google Search Console → Core Web Vitals</strong> – najważniejsze, bo to dane z prawdziwych użytkowników Google Chrome z ostatnich 28 dni. Jeśli tu jest czerwono, to Google widzi stronę jako wolną – i tak ocenia ją w rankingach.</p><p class="mb-4"><strong>Workflow audytu:</strong></p><ul class="list-disc pl-6 mb-4 space-y-1"><li>Otwórz PageSpeed Insights, wklej URL, poczekaj</li><li>Sprawdź sekcję "Core Web Vitals Assessment" – field data z CrUX</li><li>Przejdź do "Diagnostics" – zobaczysz jakie obrazy są problemem</li><li>Sprawdź "Avoid enormous network payloads" i "Properly size images"</li><li>Otwórz zakładkę "Treemap" (link na dole) – widzisz co waży najwięcej</li><li>Porównaj z danymi z GSC w zakładce Core Web Vitals → URL examples</li></ul><p class="mb-4"><strong>Checklist po każdej zmianie:</strong></p><ul class="list-disc pl-6 mb-4 space-y-1"><li>[ ] LCP < 2.5s (mobile field data)</li><li>[ ] CLS < 0.1</li><li>[ ] INP < 200ms</li><li>[ ] Wszystkie obrazy mają width/height</li><li>[ ] Hero image ma fetchpriority="high"</li><li>[ ] Obrazy below fold mają loading="lazy"</li><li>[ ] Format WebP lub AVIF</li><li>[ ] Brak konfliktów w Chrome DevTools Console</li></ul><p class="mb-4">Pamiętaj, że field data aktualizują się co 28 dni (rolling window). Nie zobaczysz efektu poprawki z dzisiaj jutro – poczekaj 2-3 tygodnie na solidne dane. Jeśli potrzebujesz szybszego feedbacku, używaj Web Vitals Chrome Extension (real-time pomiar lokalnie).</p><p class="mb-4">## Potrzebujesz pomocy?</p><p class="mb-4">Strona wolno się ładuje mimo optymalizacji? LCP zielone w Lighthouse, ale czerwone w Search Console? Napisz lub zadzwoń – robimy audyty Core Web Vitals regularnie.</p><p class="mb-4"><strong>Zadzwoń:</strong> <a href="tel:+48604939140" class="text-primary hover:underline">+48 604 939 140</a><br><strong>Formularz:</strong> <a href="/kontakt/" class="text-primary hover:underline">/kontakt/</a><br><strong>Usługa:</strong> <a href="/strony-internetowe/" class="text-primary hover:underline">Strony internetowe</a> – kompleksowa optymalizacja</p><p class="mb-4">W 1-2 dni roboczych wskażemy konkretne problemy i przygotujemy wycenę naprawy. Bez ogólników, konkretne numery i priorytety.</p></div> </section> </div> <!-- Tools Mentioned --> <section class="mt-12 p-6 bg-neutral-50 rounded-xl"> <h2 class="text-xl font-bold mb-4">Wspomniane narzędzia</h2> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> WP Rocket </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> LiteSpeed Cache </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Imagify </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> ShortPixel </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Smush </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Converter for Media </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Flying Images </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Lite YouTube Embed </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> WP YouTube Lyte </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Cloudflare </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Bunny CDN </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> QUIC.cloud </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> PageSpeed Insights </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Lighthouse </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Chrome UX Report </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Web Vitals Extension </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> CyberFolks </span> </div> </section> <!-- Lead Magnet CTA --> <div class="my-12 rounded-2xl bg-gradient-to-r from-primary-50 to-accent-50 border border-primary-100 relative overflow-hidden"> <div class="absolute top-0 right-0 w-40 h-40 bg-primary-500/5 rounded-full -translate-y-1/2 translate-x-1/2"></div> <div class="absolute bottom-0 left-0 w-24 h-24 bg-accent-500/5 rounded-full translate-y-1/2 -translate-x-1/2"></div> <div class="relative p-6 md:p-8"> <div class="flex items-start gap-4"> <div class="hidden sm:flex w-12 h-12 bg-primary-600 rounded-xl items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path> </svg> </div> <div class="flex-1"> <h3 class="text-xl font-bold text-neutral-900 mb-2">Potrzebujesz pomocy z WordPress?</h3> <p class="text-neutral-600 mb-5 leading-relaxed">Tworzymy i naprawiamy strony na WordPress. Optymalizacja prędkości, bezpieczeństwo, aktualizacje. 500+ zrealizowanych projektów.</p> <div class="flex flex-wrap items-center gap-3"> <a href="/kontakt/" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-600 text-white rounded-xl font-bold text-sm hover:bg-primary-700 hover:shadow-lg transition-all shadow-md" data-umami-event="click-lead-magnet" data-umami-event-category="wordpress" data-umami-event-location="kb-pre-faq"> Zamów wycenę <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> </svg> </a> <a href="/wordpress/" class="inline-flex items-center gap-1.5 text-primary-600 font-semibold text-sm hover:text-primary-800 transition-colors" data-umami-event="click-lead-magnet-secondary" data-umami-event-category="wordpress"> Nasze usługi WordPress <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> </div> </div> </div> </div> <!-- FAQ Section --> <section class="mt-12"> <h2 class="text-2xl font-bold mb-6">Najczęściej zadawane pytania</h2> <div class="space-y-4"> <details class="group bg-white border border-neutral-200 rounded-lg" open> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Jak działa lazy loading w WordPress 2026?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Od WordPressa 5.5 wszystkie obrazy automatycznie dostają atrybut loading="lazy" w HTML. Przeglądarka sama opóźnia pobieranie, aż obraz zbliży się do viewportu użytkownika. Nie potrzebujesz dodatkowej wtyczki ani JavaScriptu – działa natywnie w Chrome, Firefox, Safari i Edge. Wtyczki przydają się tylko do zaawansowanych funkcji jak lazy dla obrazów tła CSS, placeholdery blur-up albo lazy iframe YouTube. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Dlaczego obrazy w moim WordPressie nie ładują się?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Najczęściej wina leży po stronie konfliktu wtyczek optymalizacyjnych – np. dwie wtyczki lazy load działają jednocześnie, albo jakiś błąd JavaScript blokuje Intersection Observer. Sprawdź konsolę przeglądarki (F12 → Console) pod kątem czerwonych błędów. Tymczasowo wyłącz wtyczki cache'ujące (WP Rocket, LiteSpeed, Autoptimize) i zobacz czy problem ustąpi. Uważaj też na Cloudflare Rocket Loader – często powoduje opóźnienia. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>LCP wysoki – jak naprawić problem w WordPress?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Najczęstsza przyczyna wysokiego LCP to lazy loading na największym obrazie above-the-fold (hero banner). Usuń atrybut loading="lazy" z pierwszego obrazu strony, dodaj fetchpriority="high" i rozważ preload w sekcji head HTML. Dodatkowo: skonwertuj obrazy do WebP lub AVIF (50% mniejsza waga), użyj CDN typu QUIC.cloud albo Cloudflare, zadbaj o szybki hosting – LiteSpeed Web Server daje TTFB poniżej 200 ms. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Czy native lazy loading wystarczy bez pluginu?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> W 90% przypadków tak. WordPress od wersji 5.5 dodaje loading="lazy" automatycznie do wszystkich obrazów z Media Library. Wsparcie przeglądarek wynosi 97%. Wtyczkę rozważ tylko jeśli: potrzebujesz lazy dla obrazów tła CSS (background-image), chcesz placeholderów LQIP (rozmyte miniatury), masz dużo embedów YouTube lub Google Maps do lazy-załadowania, albo używasz starego motywu, który nie wspiera natywnych atrybutów. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>WebP czy AVIF w WordPress – co wybrać w 2026?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Oba formaty warto wdrożyć równocześnie. WebP jest bezpieczniejszy – wsparcie 98%, mniejsze pliki od JPEG o 30%. AVIF daje jeszcze 15-20% oszczędności więcej i wsparcie sięga 96% w 2026 roku. Większość wtyczek (Imagify, ShortPixel, LiteSpeed Cache) serwuje oba formaty dynamicznie przez nagłówek Accept – nowsza przeglądarka dostaje AVIF, starsza WebP, najstarsze fallback do JPG. Zero pracy od Ciebie po konfiguracji. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Jak zoptymalizować obrazy bez utraty jakości?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Ustaw kompresję lossy na poziomie 80-85% (w Imagify to Aggressive, w ShortPixel Glossy) – wizualna różnica jest niezauważalna, a waga spada o 60-70%. Konwertuj JPEG i PNG do WebP i AVIF. Nie skaluj obrazów w CSS – załaduj od razu w odpowiednim rozmiarze, użyj srcset dla responsive. Zachowaj oryginały jako backup. PNG z przezroczystością przekonwertuj do WebP lossless, nie JPEG. Ikony i logo zostaw w SVG. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>CDN obrazów w WordPress – warto czy nie?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Zdecydowanie tak, jeśli masz ruch międzynarodowy lub dużo obrazów. CDN obrazów (Bunny Image, Cloudflare Images, QUIC.cloud) serwuje pliki z najbliższego serwera – czas ładowania spada z 800 ms do 100 ms dla użytkownika z innego kraju. Dodatkowo konwersja w locie do WebP/AVIF i automatyczne rozmiary responsive. Dla małych lokalnych stron z hostingiem w Polsce CDN jest bonusem, nie koniecznością. Uważaj na konflikty z Cloudflare Rocket Loader i Polish. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Jak zmierzyć Core Web Vitals mojej strony?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Trzy narzędzia, z których korzystaj równocześnie. PageSpeed Insights (pagespeed.web.dev) – wklej URL i zobacz ocenę mobile/desktop wraz z field data z Chrome UX Report. Google Search Console → Core Web Vitals – pokazuje dane z ostatnich 28 dni od prawdziwych użytkowników Chrome, to najważniejsze źródło bo Google używa go w rankingu. Web Vitals Chrome Extension – real-time pomiar LCP, CLS, INP podczas przeglądania własnej strony. </div> </details> </div> </section> <!-- Tags --> <div class="mt-8 flex flex-wrap gap-2"> <span class="text-sm text-neutral-500">#lazy loading</span><span class="text-sm text-neutral-500">#WordPress</span><span class="text-sm text-neutral-500">#Core Web Vitals</span><span class="text-sm text-neutral-500">#LCP</span><span class="text-sm text-neutral-500">#CLS</span><span class="text-sm text-neutral-500">#WebP</span><span class="text-sm text-neutral-500">#AVIF</span><span class="text-sm text-neutral-500">#optymalizacja obrazów</span><span class="text-sm text-neutral-500">#PageSpeed</span><span class="text-sm text-neutral-500">#CDN</span><span class="text-sm text-neutral-500">#Cloudflare</span><span class="text-sm text-neutral-500">#LiteSpeed Cache</span> </div> <!-- Author Box --> <div class="author-box mt-12 p-6 bg-gradient-to-r from-neutral-50 to-primary-50 border border-neutral-200 rounded-xl"> <div class="flex flex-col sm:flex-row gap-6 items-start"> <div class="flex-shrink-0"> <img src="/authors/krzysztof-czapnik.jpg" alt="Zdjęcie autora: Krzysztof Czapnik" width="100" height="100" class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg" loading="lazy"> </div> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <span class="text-xs uppercase tracking-wide text-primary-600 font-semibold">O autorze</span> </div> <h3 class="text-xl font-bold text-neutral-900 mb-1">Krzysztof Czapnik</h3> <p class="text-sm text-primary-600 font-medium mb-3">CEO KC Mobile</p> <p class="text-neutral-600 leading-relaxed text-sm mb-4">20+ lat doświadczenia w digital marketingu i tworzeniu stron internetowych. Specjalizuję się w SEO, kampaniach Google Ads oraz budowaniu skutecznych strategii online dla firm z całej Polski.</p> <div class="flex gap-4"> <a href="https://www.linkedin.com/in/krzysztof-czapnik/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm text-neutral-600 hover:text-primary-600 transition-colors" aria-label="Profil LinkedIn: Krzysztof Czapnik"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path> </svg> LinkedIn </a> <a href="mailto:biuro@kcmobile.pl" class="inline-flex items-center gap-2 text-sm text-neutral-600 hover:text-primary-600 transition-colors"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> Kontakt </a> </div> </div> </div> </div> <!-- Service Links --> <section class="mt-10 mb-2"> <p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-4">Potrzebujesz pomocy?</p> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3"> <a href="/agencja-strony-internetowe/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">🌐</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Strony internetowe</span> <span class="text-xs text-neutral-500 leading-snug">Strony WWW od 3000 zł, 500+ realizacji</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a><a href="/wordpress/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">⚡</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">WordPress</span> <span class="text-xs text-neutral-500 leading-snug">Strony WordPress, szybkie i bezpieczne</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a><a href="/sklepy-internetowe/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">🛒</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Sklepy internetowe</span> <span class="text-xs text-neutral-500 leading-snug">Sklepy WooCommerce od 5000 zł</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a><a href="/agencja-seo/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">🔍</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Pozycjonowanie SEO</span> <span class="text-xs text-neutral-500 leading-snug">SEO od 2000 zł/mies., bez długich umów</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a> </div> </section> <!-- CTA Banner - dopasowany do kategorii i intencji artykułu --> <div class="mt-8 section-dark rounded-2xl p-6 md:p-8"> <h3 class="text-lg font-bold text-white mb-2">Potrzebujesz profesjonalnej strony WordPress?</h3> <p class="text-neutral-300 mb-4">Tworzymy strony WordPress, które są szybkie, bezpieczne i zoptymalizowane pod SEO. Od 3000 zł.</p> <div class="flex flex-wrap items-center gap-3"> <a href="/wordpress/" class="btn-accent" data-umami-event="click-cta" data-umami-event-location="kb-bottom"> Sprawdź ofertę WordPress </a> <a href="tel:+48604939140" class="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 text-white font-semibold hover:bg-white/20 transition-all"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> 604 939 140 </a> </div> </div> </div> <!-- Sidebar --> <aside class="lg:col-span-1"> <div class="sticky top-8 space-y-8"> <!-- CTA Card --> <div class="rounded-xl border-2 border-primary-200 p-6 bg-gradient-to-br from-white to-primary-50 shadow-sm"> <h3 class="text-xl font-bold mb-3">Strona wolno się ładuje?</h3> <p class="text-neutral-600 mb-6"> Skontaktuj się z nami – pomożemy rozwiązać Twój problem. </p> <form class="space-y-4" action="/api/contact" method="POST" data-contact-form> <input type="hidden" name="source" value="landing-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac"> <div class="form-group"> <label for="name-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" class="label"> Imię i nazwisko <span class="text-error"></span> </label> <input type="text" id="name-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" name="name" class="input" placeholder="Jan Kowalski" required aria-required="true" autocomplete="name"> </div> <div class="grid sm:grid-cols-2 gap-4"> <div class="form-group"> <label for="email-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" class="label"> Email <span class="text-error"></span> </label> <input type="email" id="email-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" name="email" class="input" placeholder="jan@firma.pl" required aria-required="true" autocomplete="email"> </div> <div class="form-group"> <label for="phone-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" class="label"> Telefon <span class="label-optional">(opcjonalnie)</span> </label> <input type="tel" id="phone-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" name="phone" class="input" placeholder="+48 500 000 000" autocomplete="tel"> </div> </div> <div class="form-group"> <label for="budget-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" class="label"> Orientacyjny budżet <span class="label-optional">(opcjonalnie)</span> </label> <select id="budget-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" name="budget" class="input"> <option value="">Wybierz zakres</option> <option value="do-5000">Do 5 000 zł</option> <option value="5000-15000">5 000 – 15 000 zł</option> <option value="15000-plus">Powyżej 15 000 zł</option> <option value="nie-wiem">Nie wiem jeszcze</option> </select> </div> <div class="form-group"> <label for="message-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" class="label"> Wiadomość <span class="label-optional">(opcjonalnie)</span> </label> <textarea id="message-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac" name="message" rows="2" class="input resize-none" placeholder="Opisz krótko swoje potrzeby..."></textarea> </div> <!-- Honeypot anti-spam --> <div class="absolute -left-[9999px]" aria-hidden="true"> <input type="text" name="website" tabindex="-1" autocomplete="off"> </div> <button type="submit" class="btn-accent w-full" data-submit-btn data-umami-event="form-submit" data-umami-event-source="landing-wordpress-problemy-z-lazy-loading-w-wordpress-jak-rozwiazac"> <span data-btn-text>Odbierz bezpłatną wycenę</span> <span data-btn-loading class="hidden"> <svg class="animate-spin h-5 w-5 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </span> </button> <div data-form-success class="hidden p-4 bg-success/10 border border-success/20 rounded-lg text-center"> <div class="flex items-center justify-center gap-2 text-success font-medium mb-1"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> </svg> Dziękujemy za wiadomość! </div> <p class="text-sm text-neutral-700">Skontaktujemy się w ciągu 24 godzin.</p> </div> <div data-form-error class="hidden p-4 bg-error/10 border border-error/20 rounded-lg text-center"> <p class="text-sm text-error font-medium">Wystąpił błąd. Spróbuj ponownie lub zadzwoń: <a href="tel:+48604939140" class="underline" data-umami-event="click-phone" data-umami-event-location="form-error">604 939 140</a></p> </div> <p class="text-xs text-neutral-600 text-center"> <svg class="w-4 h-4 inline mr-1 text-success" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path> </svg> Twoje dane są bezpieczne. Odpowiadamy w 24h. </p> </form> </div> <!-- Related Entries --> <div class="rounded-xl border border-neutral-100 p-6 shadow-sm"> <h3 class="font-bold mb-4">Powiązane artykuły</h3> <ul class="space-y-3"> <li> <a href="/baza-wiedzy/wordpress/problemy-z-webp-obrazy-w-wordpress-jak-rozwiazac/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Problemy z obrazami WebP w WordPress – konwersja, AVIF, optymalizacja 2026 </a> </li><li> <a href="/baza-wiedzy/wordpress/problemy-z-ssl-w-wordpress-jak-rozwiazac/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Problemy z SSL w WordPress – HTTPS, mixed content, Let's Encrypt 2026 </a> </li><li> <a href="/baza-wiedzy/wordpress/problemy-z-seo-dla-wordpress-w-wordpress-jak-rozwiazac/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Problemy z SEO w WordPress – diagnoza pozycjonowania 2026 </a> </li><li> <a href="/baza-wiedzy/wordpress/problemy-z-aktualizacje-w-wordpress-jak-rozwiazac/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Problemy po aktualizacji WordPress – rollback i naprawa 2026 </a> </li><li> <a href="/baza-wiedzy/wordpress/problemy-z-bazy-danych-w-wordpress-jak-rozwiazac/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Problemy z bazą danych w WordPress – diagnoza i rozwiązania 2026 </a> </li><li> <a href="/baza-wiedzy/wordpress/problemy-z-kopie-zapasowe-w-wordpress-jak-rozwiazac/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Problemy z kopią zapasową WordPress – backup, restore, narzędzia 2026 </a> </li> </ul> </div> <!-- Cross-Silo Links --> <div class="rounded-xl border border-neutral-100 p-6 shadow-sm"> <h3 class="font-bold mb-4">Z innych kategorii</h3> <ul class="space-y-3"> <li> <a href="/baza-wiedzy/ecommerce/problemy-z-zdjecia-produktow-w-sklepie-rozwiazania/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> <span class="text-xs text-neutral-400 uppercase">ecommerce</span> <br>Problemy ze zdjęciami produktów w sklepie – jakość, SEO, optymalizacja 2026 </a> </li><li> <a href="/baza-wiedzy/ecommerce/problemy-z-konwersja-w-sklepie-rozwiazania/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> <span class="text-xs text-neutral-400 uppercase">ecommerce</span> <br>Problemy z konwersją w sklepie internetowym – diagnoza i optymalizacja 2026 </a> </li><li> <a href="/baza-wiedzy/ecommerce/problemy-z-seo-dla-sklepu-w-sklepie-rozwiazania/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> <span class="text-xs text-neutral-400 uppercase">ecommerce</span> <br>Problemy z SEO sklepu internetowego – diagnoza i rozwiązania 2026 </a> </li> </ul> </div> <!-- Contact Info --> <div class="rounded-xl border border-neutral-100 p-6 shadow-sm bg-neutral-50"> <h3 class="font-bold mb-4">Szybki kontakt</h3> <div class="space-y-3 text-sm"> <a href="tel:+48604939140" class="flex items-center gap-3 text-neutral-700 hover:text-primary-600"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> +48 604 939 140 </a> <a href="mailto:biuro@kcmobile.pl" class="flex items-center gap-3 text-neutral-700 hover:text-primary-600"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> biuro@kcmobile.pl </a> </div> </div> </div> </aside> </div> </div> </article> <section class="section"> <div class="container-default"> <div class="section-dark rounded-2xl p-8 md:p-12 text-center"> <h2 class="text-2xl font-bold text-white mb-4">Potrzebujesz pomocy specjalisty?</h2> <p class="text-neutral-300 mb-8 max-w-2xl mx-auto"> Skorzystaj z naszych usług w największych miastach Polski </p> <div class="flex flex-wrap justify-center gap-3"> <a href="/www/strony-internetowe-wroclaw/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Strony internetowe Wrocław </a><a href="/www/strony-internetowe-szczecin/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Strony internetowe Szczecin </a><a href="/www/strony-internetowe-gdansk/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Strony internetowe Gdańsk </a><a href="/www/strony-internetowe-katowice/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Strony internetowe Katowice </a><a href="/www/strony-internetowe-krakow/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Strony internetowe Kraków </a><a href="/www/strony-internetowe-poznan/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Strony internetowe Poznań </a> </div> </div> </div> </section> <section class="py-8 pb-24 lg:pb-8"> <div class="container-default flex flex-wrap justify-center gap-6"> <a href="/baza-wiedzy/wordpress/" class="text-primary-600 hover:underline inline-flex items-center gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path> </svg> Więcej z kategorii WordPress i Strony WWW </a> <a href="/baza-wiedzy/" class="text-neutral-600 hover:text-primary-600"> Wszystkie kategorie </a> </div> </section> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Jak działa lazy loading w WordPress 2026?","acceptedAnswer":{"@type":"Answer","text":"Od WordPressa 5.5 wszystkie obrazy automatycznie dostają atrybut loading=\"lazy\" w HTML. Przeglądarka sama opóźnia pobieranie, aż obraz zbliży się do viewportu użytkownika. Nie potrzebujesz dodatkowej wtyczki ani JavaScriptu – działa natywnie w Chrome, Firefox, Safari i Edge. Wtyczki przydają się tylko do zaawansowanych funkcji jak lazy dla obrazów tła CSS, placeholdery blur-up albo lazy iframe YouTube."}},{"@type":"Question","name":"Dlaczego obrazy w moim WordPressie nie ładują się?","acceptedAnswer":{"@type":"Answer","text":"Najczęściej wina leży po stronie konfliktu wtyczek optymalizacyjnych – np. dwie wtyczki lazy load działają jednocześnie, albo jakiś błąd JavaScript blokuje Intersection Observer. Sprawdź konsolę przeglądarki (F12 → Console) pod kątem czerwonych błędów. Tymczasowo wyłącz wtyczki cache'ujące (WP Rocket, LiteSpeed, Autoptimize) i zobacz czy problem ustąpi. Uważaj też na Cloudflare Rocket Loader – często powoduje opóźnienia."}},{"@type":"Question","name":"LCP wysoki – jak naprawić problem w WordPress?","acceptedAnswer":{"@type":"Answer","text":"Najczęstsza przyczyna wysokiego LCP to lazy loading na największym obrazie above-the-fold (hero banner). Usuń atrybut loading=\"lazy\" z pierwszego obrazu strony, dodaj fetchpriority=\"high\" i rozważ preload w sekcji head HTML. Dodatkowo: skonwertuj obrazy do WebP lub AVIF (50% mniejsza waga), użyj CDN typu QUIC.cloud albo Cloudflare, zadbaj o szybki hosting – LiteSpeed Web Server daje TTFB poniżej 200 ms."}},{"@type":"Question","name":"Czy native lazy loading wystarczy bez pluginu?","acceptedAnswer":{"@type":"Answer","text":"W 90% przypadków tak. WordPress od wersji 5.5 dodaje loading=\"lazy\" automatycznie do wszystkich obrazów z Media Library. Wsparcie przeglądarek wynosi 97%. Wtyczkę rozważ tylko jeśli: potrzebujesz lazy dla obrazów tła CSS (background-image), chcesz placeholderów LQIP (rozmyte miniatury), masz dużo embedów YouTube lub Google Maps do lazy-załadowania, albo używasz starego motywu, który nie wspiera natywnych atrybutów."}},{"@type":"Question","name":"WebP czy AVIF w WordPress – co wybrać w 2026?","acceptedAnswer":{"@type":"Answer","text":"Oba formaty warto wdrożyć równocześnie. WebP jest bezpieczniejszy – wsparcie 98%, mniejsze pliki od JPEG o 30%. AVIF daje jeszcze 15-20% oszczędności więcej i wsparcie sięga 96% w 2026 roku. Większość wtyczek (Imagify, ShortPixel, LiteSpeed Cache) serwuje oba formaty dynamicznie przez nagłówek Accept – nowsza przeglądarka dostaje AVIF, starsza WebP, najstarsze fallback do JPG. Zero pracy od Ciebie po konfiguracji."}},{"@type":"Question","name":"Jak zoptymalizować obrazy bez utraty jakości?","acceptedAnswer":{"@type":"Answer","text":"Ustaw kompresję lossy na poziomie 80-85% (w Imagify to Aggressive, w ShortPixel Glossy) – wizualna różnica jest niezauważalna, a waga spada o 60-70%. Konwertuj JPEG i PNG do WebP i AVIF. Nie skaluj obrazów w CSS – załaduj od razu w odpowiednim rozmiarze, użyj srcset dla responsive. Zachowaj oryginały jako backup. PNG z przezroczystością przekonwertuj do WebP lossless, nie JPEG. Ikony i logo zostaw w SVG."}},{"@type":"Question","name":"CDN obrazów w WordPress – warto czy nie?","acceptedAnswer":{"@type":"Answer","text":"Zdecydowanie tak, jeśli masz ruch międzynarodowy lub dużo obrazów. CDN obrazów (Bunny Image, Cloudflare Images, QUIC.cloud) serwuje pliki z najbliższego serwera – czas ładowania spada z 800 ms do 100 ms dla użytkownika z innego kraju. Dodatkowo konwersja w locie do WebP/AVIF i automatyczne rozmiary responsive. Dla małych lokalnych stron z hostingiem w Polsce CDN jest bonusem, nie koniecznością. Uważaj na konflikty z Cloudflare Rocket Loader i Polish."}},{"@type":"Question","name":"Jak zmierzyć Core Web Vitals mojej strony?","acceptedAnswer":{"@type":"Answer","text":"Trzy narzędzia, z których korzystaj równocześnie. PageSpeed Insights (pagespeed.web.dev) – wklej URL i zobacz ocenę mobile/desktop wraz z field data z Chrome UX Report. Google Search Console → Core Web Vitals – pokazuje dane z ostatnich 28 dni od prawdziwych użytkowników Chrome, to najważniejsze źródło bo Google używa go w rankingu. Web Vitals Chrome Extension – real-time pomiar LCP, CLS, INP podczas przeglądania własnej strony."}}]}</script> <div class="fixed bottom-0 left-0 right-0 z-50 lg:hidden bg-white border-t border-neutral-200 shadow-lg px-4 py-3 safe-area-bottom" id="sticky-cta"> <div class="flex items-center gap-3 max-w-lg mx-auto"> <a href="tel:+48604939140" class="flex items-center justify-center gap-2 flex-1 py-2.5 bg-primary-600 text-white rounded-lg font-semibold text-sm hover:bg-primary-700 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> Zadzwoń </a> <a href="/kontakt/" class="flex items-center justify-center flex-1 py-2.5 bg-accent-500 text-white rounded-lg font-semibold text-sm hover:bg-accent-600 transition-colors"> Bezpłatna wycena </a> </div> </div> <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","@id":"https://kcmobile.pl/baza-wiedzy/wordpress/problemy-z-lazy-loading-w-wordpress-jak-rozwiazac/#article","headline":"Problemy z lazy loading w WordPress – LCP, CLS, obrazy 2026","description":"Obrazy nie ładują się, LCP wysokie, CLS skacze? Kompletny przewodnik: native lazy loading, WebP/AVIF, Core Web Vitals i fix konfliktów z CDN.","image":"https://kcmobile.pl/images/kb/wordpress.webp","url":"https://kcmobile.pl/baza-wiedzy/wordpress/problemy-z-lazy-loading-w-wordpress-jak-rozwiazac/","mainEntityOfPage":{"@type":"WebPage","@id":"https://kcmobile.pl/baza-wiedzy/wordpress/problemy-z-lazy-loading-w-wordpress-jak-rozwiazac/"},"isPartOf":{"@type":"CollectionPage","@id":"https://kcmobile.pl/baza-wiedzy/wordpress/#collection","name":"WordPress i Strony WWW","url":"https://kcmobile.pl/baza-wiedzy/wordpress/","isPartOf":{"@type":"WebPage","@id":"https://kcmobile.pl/strony-internetowe/#page","name":"Strony internetowe"}},"datePublished":"2026-01-20","dateModified":"2026-04-13T14:00:00.000Z","wordCount":2969,"author":{"@id":"https://kcmobile.pl/#author"},"publisher":{"@id":"https://kcmobile.pl/#organization"},"speakable":{"@type":"SpeakableSpecification","cssSelector":[".quick-answer",".article-intro"]},"about":{"@type":"Service","@id":"https://kcmobile.pl/strony-internetowe/#service","name":"Strony internetowe","provider":{"@id":"https://kcmobile.pl/#organization"}},"inLanguage":"pl-PL"}</script> </main> <footer class="bg-dark-deep text-neutral-300"> <!-- Main Footer --> <div class="container-default py-12 lg:py-16"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 lg:gap-10"> <!-- Brand --> <div class="col-span-2 md:col-span-3 lg:col-span-1"> <a href="/" class="flex items-center mb-4 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded"> <img src="/logo-white.svg" alt="KC Mobile" class="h-8 w-auto"> </a> <p class="text-sm text-neutral-400 mb-4 leading-relaxed"> Agencja interaktywna specjalizująca się w tworzeniu stron internetowych, pozycjonowaniu i marketingu online. </p> <!-- Badges --> <div class="flex flex-wrap items-center gap-3 mb-4"> <a href="https://www.google.com/partners/agency?id=4468565598" target="_blank" rel="noopener"><img src="https://www.gstatic.com/partners/badge/images/2025/PartnerBadgeClickable.svg" alt="Google Partner" class="h-12" width="100" height="48" loading="lazy"></a> <div class="flex flex-col gap-1"> <span class="inline-flex items-center gap-1 text-xs text-neutral-300 bg-dark-card px-2 py-1 rounded border border-primary-900/30"> <svg class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> 4.9/5 </span> <span class="inline-flex items-center gap-1 text-xs text-neutral-300 bg-dark-card px-2 py-1 rounded border border-primary-900/30"> <svg class="w-3 h-3 text-success" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> </svg> 500+ projektów </span> </div> </div> <!-- Social Links --> <div class="flex gap-3"> <a href="https://www.facebook.com/AI.KCMobile/" class="w-9 h-9 flex items-center justify-center rounded-lg bg-dark-card border border-primary-900/30 text-neutral-400 hover:bg-primary-600 hover:text-white hover:border-primary-600 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500" aria-label="Facebook" target="_blank" rel="noopener noreferrer"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"></path> </svg> </a> </div> </div> <!-- Services --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Usługi</h4> <ul class="space-y-2"> <li> <a href="/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Strony internetowe </a> </li><li> <a href="/pozycjonowanie-seo/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Pozycjonowanie SEO </a> </li><li> <a href="/social-media/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Social Media </a> </li><li> <a href="/facebook-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Facebook Ads </a> </li><li> <a href="/google-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Google Ads </a> </li><li> <a href="/sklepy-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Sklepy internetowe </a> </li><li> <a href="/wordpress/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> WordPress </a> </li><li> <a href="/automatyzacje/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Automatyzacje </a> </li><li> <a href="/wdrozenia-ai/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Wdrożenia AI </a> </li><li> <a href="/analityka-internetowa/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Analityka internetowa </a> </li> </ul> </div> <!-- Knowledge Base --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Baza wiedzy</h4> <ul class="space-y-2"> <li> <a href="/baza-wiedzy/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Wszystkie artykuły </a> </li><li> <a href="/baza-wiedzy/wordpress/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> WordPress </a> </li><li> <a href="/baza-wiedzy/ecommerce/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> E-commerce </a> </li><li> <a href="/baza-wiedzy/seo/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> SEO </a> </li><li> <a href="/baza-wiedzy/google-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Google Ads </a> </li><li> <a href="/baza-wiedzy/facebook-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Facebook Ads </a> </li><li> <a href="/baza-wiedzy/social-media/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Social Media </a> </li><li> <a href="/baza-wiedzy/marketing/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Marketing </a> </li> </ul> </div> <!-- Industries --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Dla branż</h4> <ul class="space-y-2"> <li> <a href="/dla/firma-hydrauliczna/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla hydraulików </a> </li><li> <a href="/dla/salon-fryzjerski/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla fryzjerów </a> </li><li> <a href="/dla/gabinet-stomatologiczny/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla dentystów </a> </li><li> <a href="/dla/warsztat-samochodowy/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla warsztatów </a> </li><li> <a href="/dla/restauracja/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla restauracji </a> </li><li> <a href="/dla/kancelaria-prawna/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla prawników </a> </li><li> <a href="/dla/biuro-rachunkowe/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla księgowych </a> </li> </ul> </div> <!-- Popular Cities --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Popularne miasta</h4> <ul class="space-y-2"> <li> <a href="/www/strony-internetowe-warszawa/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Warszawa </a> </li><li> <a href="/www/strony-internetowe-krakow/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Kraków </a> </li><li> <a href="/www/strony-internetowe-wroclaw/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Wrocław </a> </li><li> <a href="/www/strony-internetowe-poznan/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Poznań </a> </li><li> <a href="/www/strony-internetowe-gdansk/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Gdańsk </a> </li> </ul> <a href="/www/" class="text-sm text-primary-400 hover:text-primary-300 transition-colors mt-3 inline-block"> Wszystkie miasta → </a> </div> <!-- Contact --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Kontakt</h4> <ul class="space-y-3 text-sm"> <li class="flex items-start gap-2"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> <a href="tel:+48604939140" class="text-neutral-400 hover:text-white transition-colors" data-umami-event="click-phone" data-umami-event-location="footer"> +48 604 939 140 </a> </li> <li class="flex items-start gap-2"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> <a href="mailto:biuro@kcmobile.pl" class="text-neutral-400 hover:text-white transition-colors" data-umami-event="click-email" data-umami-event-location="footer"> biuro@kcmobile.pl </a> </li> <li class="flex items-start gap-2"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span class="text-neutral-400">Pon-Pt 8:00-16:00<br>Sob 8:00-13:00</span> </li> </ul> </div> </div> </div> <!-- Bottom Bar --> <div class="border-t border-primary-900/30"> <div class="container-default py-6"> <div class="flex flex-col md:flex-row justify-between items-center gap-4"> <p class="text-sm text-neutral-500"> © 2026 KC Mobile. Wszelkie prawa zastrzeżone. </p> <div class="flex flex-wrap justify-center gap-4 md:gap-6"> <a href="/o-nas/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> O nas </a><a href="/realizacje/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Realizacje </a><a href="/cennik/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Cennik </a><a href="/artykuly/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Blog </a><a href="/kontakt/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Kontakt </a> <span class="text-primary-900/40">\|</span> <a href="/polityka-prywatnosci/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Polityka prywatności </a><a href="/regulamin/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Regulamin </a> </div> </div> </div> </div> </footer> <!-- Sticky Mobile CTA - visible only on mobile, hidden on desktop --><div class="fixed bottom-0 left-0 right-0 lg:hidden bg-white border-t border-neutral-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] p-3 z-40 flex gap-2" id="sticky-mobile-cta" data-astro-cid-avybc3i7> <a href="#" id="sticky-cta-wycena" class="btn-accent flex-1 text-center text-sm py-2.5" data-umami-event="click-cta" data-umami-event-location="sticky-mobile" data-astro-cid-avybc3i7> Bezpłatna wycena </a> <a href="https://wa.me/48604939140?text=Dzie%C5%84%20dobry%2C%20chcia%C5%82bym%20zapyta%C4%87%20o%20wycen%C4%99." target="_blank" rel="noopener" class="flex items-center justify-center flex-none px-3 py-2.5 bg-[#25D366] text-white rounded-lg text-sm font-semibold hover:bg-[#20BD5A] transition-colors" aria-label="WhatsApp" data-umami-event="click-whatsapp" data-umami-event-location="sticky-mobile" data-astro-cid-avybc3i7> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-avybc3i7> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" data-astro-cid-avybc3i7></path> </svg> </a> <a href="tel:+48604939140" class="flex items-center justify-center flex-none px-3 py-2.5 btn-outline text-sm" aria-label="Zadzwoń: 604 939 140" data-umami-event="click-phone" data-umami-event-location="sticky-mobile" data-astro-cid-avybc3i7> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-avybc3i7> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" data-astro-cid-avybc3i7></path> </svg> </a> </div> <!-- Add bottom padding to body to prevent content being hidden behind sticky CTA --> <a href="https://wa.me/48604939140?text=Dzie%C5%84%20dobry%2C%20chcia%C5%82bym%20zapyta%C4%87%20o%20wycen%C4%99." target="_blank" rel="noopener" class="fixed bottom-6 right-6 z-40 hidden lg:flex items-center gap-2 bg-[#25D366] hover:bg-[#20BD5A] text-white px-5 py-3 rounded-full shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5 group" aria-label="Napisz na WhatsApp" data-umami-event="click-whatsapp" data-umami-event-location="floating-button" id="whatsapp-fab"> <svg class="w-6 h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"></path> </svg> <span class="text-sm font-semibold">Napisz do nas</span> </a> <!-- Exit Intent Popup Overlay --><div id="exit-popup-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true" aria-labelledby="exit-intent-headline"> <div id="exit-popup" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-md bg-white rounded-2xl shadow-2xl p-6 md:p-8 scale-95 opacity-0 transition-all duration-300"> <!-- Close button --> <button id="exit-popup-close" class="absolute top-3 right-3 text-neutral-400 hover:text-neutral-700 transition-colors" aria-label="Zamknij"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Content --> <div class="text-center"> <h2 id="exit-intent-headline" class="text-xl md:text-2xl font-bold text-neutral-900 mb-3">Nie znalazłeś tego, czego szukasz?</h2> <p class="text-neutral-600 mb-6 text-sm md:text-base">Porozmawiajmy o Twoim projekcie. Bezpłatna konsultacja i wycena w ciągu 24h.</p> <!-- Form --> <form id="exit-popup-form" class="space-y-3 text-left"> <input type="hidden" name="source" value="exit-intent"> <input type="hidden" name="name" value="Zapytanie z exit popup"> <div> <label for="exit-email" class="sr-only">E-mail</label> <input type="email" id="exit-email" name="email" required placeholder="Twój adres e-mail" class="w-full px-4 py-3 border border-neutral-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"> </div> <div> <label for="exit-url" class="sr-only">Adres strony</label> <input type="url" id="exit-url" name="url" placeholder="Adres Twojej strony (opcjonalnie)" class="w-full px-4 py-3 border border-neutral-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"> </div> <button type="submit" class="w-full btn-accent py-3 text-sm font-semibold rounded-lg"> Wyślij – to nic nie kosztuje </button> </form> <!-- Success message (hidden by default) --> <div id="exit-popup-success" class="hidden py-6"> <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <h3 class="text-lg font-bold text-neutral-900 mb-1">Dziękujemy!</h3> <p class="text-neutral-600 text-sm">Odezwiemy się w ciągu 24 godzin.</p> </div> <!-- Dismiss link --> <button id="exit-popup-dismiss" type="button" class="mt-4 text-sm text-neutral-400 hover:text-neutral-600 transition-colors"> Nie, dziękuję </button> </div> </div> </div> <script> (function() { var STORAGE_KEY = 'kcm-exit-popup-shown'; var DELAY_MS = 5000; var MOBILE_TIMEOUT_MS = 30000; if (sessionStorage.getItem(STORAGE_KEY)) return; if (document.getElementById('form-success')) return; var overlay = document.getElementById('exit-popup-overlay'); var popup = document.getElementById('exit-popup'); var closeBtn = document.getElementById('exit-popup-close'); var dismissBtn = document.getElementById('exit-popup-dismiss'); var form = document.getElementById('exit-popup-form'); var successMsg = document.getElementById('exit-popup-success'); if (!overlay \|\| !popup) return; var canShow = false; var shown = false; setTimeout(function() { canShow = true; }, DELAY_MS); function showPopup() { if (shown \|\| !canShow) return; if (document.getElementById('form-success')) return; shown = true; sessionStorage.setItem(STORAGE_KEY, '1'); overlay.classList.remove('hidden'); requestAnimationFrame(function() { overlay.classList.add('opacity-100'); overlay.classList.remove('opacity-0'); popup.classList.add('scale-100', 'opacity-100'); popup.classList.remove('scale-95', 'opacity-0'); }); if (typeof umami !== 'undefined') { umami.track('exit-intent-show'); } } function hidePopup() { overlay.classList.remove('opacity-100'); overlay.classList.add('opacity-0'); popup.classList.remove('scale-100', 'opacity-100'); popup.classList.add('scale-95', 'opacity-0'); setTimeout(function() { overlay.classList.add('hidden'); }, 300); } // Desktop: mouse leaves viewport at top document.addEventListener('mouseout', function(e) { if (e.clientY <= 0 && e.relatedTarget === null) { showPopup(); } }); // Mobile: after 30 seconds var isMobile = window.innerWidth < 768; if (isMobile) { setTimeout(showPopup, MOBILE_TIMEOUT_MS); } // Close handlers if (closeBtn) closeBtn.addEventListener('click', hidePopup); if (dismissBtn) dismissBtn.addEventListener('click', hidePopup); overlay.addEventListener('click', function(e) { if (e.target === overlay) hidePopup(); }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && !overlay.classList.contains('hidden')) hidePopup(); }); // Form submission if (form) { form.addEventListener('submit', function(e) { e.preventDefault(); var formData = new FormData(form); var submitBtn = form.querySelector('button[type="submit"]'); if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Wysyłanie...'; } fetch('/api/contact.php', { method: 'POST', body: formData }).then(function(response) { if (response.ok) { form.classList.add('hidden'); if (dismissBtn) dismissBtn.classList.add('hidden'); if (successMsg) successMsg.classList.remove('hidden'); if (typeof umami !== 'undefined') { umami.track('exit-intent-submit'); } setTimeout(hidePopup, 3000); } else { if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Wyślij – to nic nie kosztuje'; } } }).catch(function() { if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Wyślij – to nic nie kosztuje'; } }); }); } })(); </script> </body></html>

Obecność Online

Marketing & Promocja

Kreacja & Rozwój

Problemy z lazy loading w WordPress – LCP, CLS, obrazy 2026

Krótka odpowiedź

Lazy loading w WordPress 2026 – native vs plugin