Page Speed w praktyce

• admin
• cache, CLS, FID, LCP, minifikacja CSS/JS, page speed, szybkie ładowanie strony, WebP
• 0 Comments
• 22043 Views

Wprowadzenie

Wydajność strony internetowej to nie tylko kwestia UX, ale i SEO. Google od dawna bierze pod uwagę Core Web Vitals (LCP, FID, CLS) w rankingach. W jednym z naszych projektów klient skarżył się, że:

• strona ładowała się wolno,
• PageSpeed Insights pokazywał czerwone wyniki,
• użytkownicy szybko opuszczali witrynę.

Problem

Test w Google PageSpeed Insights pokazał:

• LCP (Largest Contentful Paint): 5,8s → treść główna widoczna bardzo późno,
• CLS (Cumulative Layout Shift): wysoki → elementy przesuwały się przy ładowaniu,
• FID (First Input Delay): słaby → dużo JS blokowało interakcję.

Główne przyczyny:

• Ogromne obrazy bez kompresji,
• Brak lazy loadingu,
• Nie-minifikowany CSS/JS,
• Brak cache dla statycznych zasobów.

Rozwiązania krok po kroku

1. Optymalizacja obrazów

Zamieniliśmy JPG/PNG na WebP i dodaliśmy srcset, aby przeglądarka pobierała odpowiednią wersję.

<img 
  src="img/banner.webp" 
  srcset="img/banner-small.webp 480w, img/banner-large.webp 1200w"
  sizes="(max-width: 600px) 480px, 1200px"
  alt="Baner" 
  loading="lazy">

2. Lazy loading

Dodanie loading="lazy" oraz IntersectionObserver do komponentów JS.

<img src="photo.webp" alt="Zdjęcie" loading="lazy">

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
images.forEach(img => observer.observe(img));

3. Minifikacja CSS i JS

Przed wdrożeniem przepuściliśmy pliki przez narzędzia:

• terser dla JS,
• cssnano dla CSS.

Przykład dla JS (npm):

npx terser script.js -o script.min.js --compress --mangle

4. Cache i kompresja po stronie serwera

Dodaliśmy nagłówki:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

Ciekawostki (Fun facts)

• Po optymalizacji główna strona zamiast 5,5 MB ważyła tylko 1,2 MB.
• Największy obrazek (baner) zszedł z 2,4 MB → 180 KB w WebP.
• Jeden z testerów żartował, że strona ładuje się szybciej niż otwiera czajnik do zagotowania wody ☕.

Efekt końcowy

Po wdrożeniu:

• LCP spadł z 5,8s → 1,9s (zielona strefa),
• CLS poprawiony z 0,25 → 0,04,
• FID: z 300ms → 90ms,
• PageSpeed Insights zyskał 92/100 na mobile i 98/100 na desktopie.

Dzięki temu:

• Google poprawił widoczność strony w wynikach,
• użytkownicy spędzają więcej czasu na stronie,
• bounce rate spadł o 40%.

admin

administrator