Optymalizacja wydajności stron internetowych

Wydajność strony internetowej bezpośrednio wpływa na pozycję w wynikach wyszukiwania, współczynnik odrzuceń i konwersje. Google od 2021 roku oficjalnie uwzględnia Core Web Vitals w algorytmie rankingowym. W desi9n.pl przeprowadzamy audyty wydajności i wdrażamy rekomendacje dla nowych i istniejących projektów.

Core Web Vitals — co mierzą?

Core Web Vitals to trzy wskaźniki mierzące rzeczywiste doświadczenie użytkownika:

• LCP (Largest Contentful Paint) — czas renderowania największego widocznego elementu na stronie (cel: poniżej 2,5 s). Najczęstszą przyczyną słabego LCP są nieoptymalne obrazy i blokujące zasoby CSS/JS.
• CLS (Cumulative Layout Shift) — miara wizualnej stabilności strony, czyli jak bardzo elementy "skaczą" podczas ładowania (cel: poniżej 0,1). Przyczyną są brakujące wymiary obrazów i dynamicznie wstrzykiwane banery.
• INP (Interaction to Next Paint) — czas odpowiedzi strony na interakcje użytkownika: kliknięcia, tapnięcia, wpisywanie (cel: poniżej 200 ms). Zastąpił FID od marca 2024.

Narzędzia, których używamy

• Google Lighthouse — audyt wydajności, dostępności, SEO i najlepszych praktyk bezpośrednio w przeglądarce lub CI/CD
• PageSpeed Insights — dane rzeczywistych użytkowników (CrUX) + dane laboratoryjne Lighthouse
• WebPageTest — szczegółowe wykresy wodospadowe, testy z różnych lokalizacji, filmiki porównawcze
• Chrome DevTools Performance — profilowanie długich tasków JavaScript i wąskich gardeł renderowania
• axe — testy dostępności (WCAG), które często pokrywają się z wydajnością wizualną

Co poprawiamy

Obrazy

• Konwersja do WebP/AVIF — mniejszy rozmiar przy tej samej jakości
• Dodanie atrybutów width i height eliminujących CLS
• Lazy loading dla obrazów poniżej fold + fetchpriority="high" dla LCP hero
• Responsywny srcset i sizes — właściwy rozmiar dla każdego urządzenia

JavaScript i CSS

• Minifikacja i tree-shaking (Webpack, Vite)
• Code splitting i lazy loading modułów
• Usuwanie nieużywanego CSS (PurgeCSS)
• Deferowanie nieblokujących skryptów

Fonty

• Subsetting — ograniczenie zestawu znaków do faktycznie używanych
• Preload kritycznego fonta z rel="preload"
• font-display: swap eliminujące FOIT (flash of invisible text)

Serwer i sieć

• HTTP/2 i HTTP/3 — multipleksowanie żądań
• HSTS preload — bezpieczne przekierowanie HTTPS bez dodatkowego żądania
• Cache-Control z długimi TTL dla zasobów statycznych (hash w nazwie pliku)
• Kompresja Brotli/Gzip dla HTML, CSS i JavaScript
• CDN dla zasobów statycznych

Wydajność a SEO

Poprawa Core Web Vitals to nie tylko lepsza ocena w Google — to realne korzyści dla użytkowników i biznesu:

• Szybsza strona to niższy współczynnik odrzuceń (bounce rate)
• Stabilny layout (CLS 0) buduje zaufanie i eliminuje przypadkowe kliknięcia
• Dobry LCP poprawia "perceived performance" — stronę postrzega się jako szybszą
• Google rankuje strony z dobrymi CWV wyżej w mobilnych wynikach wyszukiwania

Nasze doświadczenie

Optymalizacja wydajności jest integralną częścią każdego projektu tworzonego w desi9n.pl. Używamy Webpack z PurgeCSS, ImageResizer (WebP), lazy loading z opisami srcset/sizes, preload i prefetch. Efekt to wyniki Lighthouse powyżej 90 punktów dla wydajności na projektach, które oddajemy klientom.

Co oferujemy

• Audyt wydajności: Lighthouse, PageSpeed Insights, WebPageTest
• Raport z priorytetyzowanymi rekomendacjami
• Wdrożenie optymalizacji: obrazy, JS, CSS, fonty, serwer
• Integracja optymalizacji z procesem CI/CD (Lighthouse w pipeline)
• Stały monitoring Core Web Vitals i raportowanie regresji