Siteor Blog

Knowledge about CMS, websites and best practices.

Tips for website editors, product updates and best practices for building modern websites with Siteor CMS.

Wróć do listy

Audyt PageSpeed - jak zmniejszyć LCP z 18 do 8 sekund

2026-05-25 ·Zespół Intum
Audyt PageSpeed - jak zmniejszyć LCP z 18 do 8 sekund

Strona ładuje się 18 sekund na mobile. Google to widzi, obniża pozycje w wynikach wyszukiwania i podnosi koszt kliknięcia w Google Ads. Pokażę jak zdiagnozować problem i zmniejszyć LCP (Largest Contentful Paint) o połowę - na przykładzie prawdziwego audytu.

Co to jest LCP i dlaczego ma znaczenie

LCP mierzy czas załadowania największego widocznego elementu na ekranie - najczęściej hero image, nagłówek lub duży blok tekstu. Google traktuje LCP jako jeden z trzech Core Web Vitals:

  • Dobry: poniżej 2.5s
  • Do poprawy: 2.5-4s
  • Słaby: powyżej 4s

LCP wpływa na:

  • Pozycje w Google - Core Web Vitals to sygnały rankingowe
  • Quality Score w Google Ads - landing page experience bierze pod uwagę szybkość. Niski QS = wyższy CPC
  • Konwersje - każda dodatkowa sekunda ładowania obniża konwersje o 7-12%

Krok 1: Diagnoza przez PageSpeed Insights

Wejdź na PageSpeed Insights i wpisz URL strony. Wybierz Mobile (tam wyniki są gorsze i bardziej krytyczne).

Kluczowe metryki do sprawdzenia:

  • Performance Score - poniżej 50 to alarm
  • LCP - główny problem wydajności
  • FCP (First Contentful Paint) - kiedy coś się pojawia na ekranie
  • TBT (Total Blocking Time) - jak długo strona jest zablokowana przez JS

Krok 2: Eliminacja render-blocking CSS

Przeglądarka nie może wyrenderować strony dopóki nie pobierze i nie przetworzy wszystkich plików CSS w <head>. Każdy dodatkowy plik CSS to dodatkowe milisekundy blokady.

Typowe problemy:

  • Wiele plików CSS ładowanych synchronicznie (np. 5-11 arkuszy w <head>)
  • Fonty Google ładowane jako <link rel="stylesheet"> (blokujące)
  • Nieużywane CSS (np. Fancybox na stronie bez galerii)

Fonty Google - ładowanie nieblokujące:

<!-- Blokujące (źle) -->
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

<!-- Nieblokujące (dobrze) -->
<link href="https://fonts.googleapis.com/css2?family=Inter"
      rel="stylesheet" media="print" onload="this.media='all'">

Trik z media="print" sprawia, że przeglądarka pobiera font w tle, nie blokując renderowania. onload przełącza na all gdy font jest gotowy.

Krok 3: Opóźnianie ciężkich skryptów (GTM, widżety)

Google Tag Manager często ładuje dodatkowe skrypty: UserGuiding (1 MB!), widżety czatu (300 KB), analytics. Te skrypty rywalizują o pasmo z hero image.

Opóźnij GTM o 3 sekundy:

setTimeout(function(){
  var j = document.createElement('script');
  j.async = true;
  j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX';
  document.head.appendChild(j);
}, 3000);

Po 3 sekundach strona jest już wyrenderowana, a GTM ładuje się w tle. Użytkownicy nie odczują różnicy, ale LCP drastycznie spadnie.

Krok 4: Preload hero image

Przeglądarka nie wie o hero image dopóki nie przeczyta całego CSS i HTML. <link rel="preload"> każe jej zacząć pobierać obraz natychmiast:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" as="image" type="image/webp"
      href="https://cdn.example.com/hero.webp">

Na samym obrazku dodaj fetchpriority="high":

<img src="hero.webp" fetchpriority="high"
     loading="eager" decoding="async" alt="...">

Krok 5: Zamień legacy jQuery plugins na vanilla JS

Starsze strony często ładują jQuery plugins synchronicznie w <head>. Każdy taki skrypt to 10-50ms blokady.

Zamiast ładować 17 KB jquery-cookie.js, zamień na czysty JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  if (!document.cookie.includes('first_url=')) {
    document.cookie = 'first_url=' +
      encodeURIComponent(location.href) + ';path=/';
  }
});

Wyniki

Po zastosowaniu tych zmian na prawdziwej stronie:

MetrykaPrzedPoZmiana
LCP18.2s8.7s-52%
FCP4.6s3.3s-28%
Speed Index6.0s5.4s-10%
Render-blocking540 KB0wyeliminowane

Każda z tych zmian zajęła kilka minut. Żadna nie wymagała przebudowy strony - tylko edycja layoutu CMS.

Narzędzia

  • PageSpeed Insights - darmowy audyt od Google, Core Web Vitals + rekomendacje
  • WebPageTest - zaawansowane waterfall, filmstrip, porównanie before/after
  • Chrome DevTools > Lighthouse - audyt lokalny, bez limitu zapytań
  • Chrome DevTools > Performance - nagranie timeline ładowania, identyfikacja bottlenecków

Checklist optymalizacji LCP

  • Sprawdź PageSpeed Insights (mobile)
  • Zidentyfikuj element LCP (hero image? nagłówek? blok tekstu?)
  • Dodaj <link rel="preload"> na LCP image
  • Dodaj fetchpriority="high" na LCP image
  • Fonty Google: media="print" onload zamiast synchronicznego ładowania
  • Usuń nieużywane CSS z <head> (fancybox, carousel itp.)
  • GTM: opóźnij o 2-3 sekundy
  • Usuń synchroniczne skrypty z <head> (defer lub vanilla JS)
  • Sprawdź czy loading="lazy" jest na obrazkach poniżej ekranu
  • Powtórz test po zmianach

Najczęściej zadawane pytania

Czym jest Siteor CMS?+

Siteor CMS to moduł do zarządzania stronami internetowymi w platformie Intum. Pozwala tworzyć i edytować strony przez panel administracyjny lub REST API. Obsługuje wielojęzyczność, SEO (sitemap, robots.txt, hreflang, Open Graph), szablony Liquid, blog z artykułami i integracje z bazami wiedzy.

Czym jest plik llms.txt?+

Plik llms.txt to nowy standard (llmstxt.org) opisujący zawartość strony internetowej dla botów AI takich jak ChatGPT, Claude czy Perplexity. Siteor CMS generuje go automatycznie dla każdego site'a na podstawie stron i artykułów.

Czy Siteor CMS obsługuje wiele języków?+

Tak. Siteor CMS ma wbudowaną wielojęzyczność: strony master/slave z dziedziczeniem treści, osobne domeny per język z automatycznym hreflang, redirect 301 między wersjami językowymi i filtrowanie sitemapy po locale domeny. Obsługiwane języki: pl, en, fr, de, es, cs, sk, uk.

Czy CMS generuje sitemap.xml automatycznie?+

Tak. Sitemap.xml, robots.txt i llms.txt generują się automatycznie z szablonów Liquid. Sitemap zawiera strony, artykuły blogowe i wpisy bazy wiedzy. Szablony można nadpisać przez ustawienia site'a bez zmian w kodzie.

Jak działa Open Graph w Siteor CMS?+

Tagi Open Graph i Twitter Card generują się automatycznie na podstawie pól SEO strony lub artykułu. Wystarczy że layout zawiera zmienną Liquid seo_head w sekcji head. Artykuły blogowe dostają typ article z własnym tytułem, opisem i obrazkiem.