Jak zwiększyć PageSpeed Score do 98/100

PageSpeed Score to jeden z najważniejszych wskaźników jakości strony WWW. Wpływa na SEO, user experience i conversion rate. W tym tutorialu pokażę 10 technik, które pomogły mi osiągnąć 98/100 w projektach klientów.

Spis treści

1. Ustal baseline (punkt wyjścia)
2. Optymalizacja obrazów (WebP, lazy loading)
3. Fonty webowe (preload, font-display)
4. CSS (critical CSS, minifikacja)
5. JavaScript (code splitting, defer)
6. CDN i caching
7. Server-side optimization
8. Core Web Vitals
9. Continuous monitoring
10. Checklist przed deployment

1. Ustal baseline (punkt wyjścia)

Zanim zaczniesz optymalizację, zmierz aktualne performance strony:

Google PageSpeed Insights: pagespeed.web.dev
Lighthouse (Chrome DevTools): F12 → Lighthouse tab → Generate report
WebPageTest: webpagetest.org (bardziej szczegółowe)

Przykład baseline: Mobile 62/100, Desktop 85/100
Cel: Mobile 90+, Desktop 95+

2. Optymalizacja obrazów

Obrazy to często 50-70% wielkości strony. Kluczowe optymalizacje:

2.1. Format WebP

WebP oferuje ~30% mniejszy rozmiar niż JPEG przy tej samej jakości.

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Opis" />
</picture>

Automatyczna konwersja (Sharp):

npm install sharp

// convert-images.js
const sharp = require('sharp');
const fs = require('fs');

fs.readdirSync('./images').forEach(file => {
  if (file.endsWith('.jpg') || file.endsWith('.png')) {
    sharp(`./images/${file}`)
      .webp({ quality: 85 })
      .toFile(`./images/${file.replace(/\.(jpg|png)$/, '.webp')}`);
  }
});

2.2. Lazy loading

<img src="image.jpg" alt="Opis" loading="lazy" />

2.3. Responsive images

<img
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="image-800.webp"
  alt="Opis"
/>

3. Fonty webowe

Google Fonts z optymalizacją:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
/>

Klucz: display=swap — tekst pokazuje się od razu (fallback font), potem zamienia na custom font.

4. CSS Optimization

4.1. Minifikacja

npm install clean-css-cli
npx cleancss -o styles.min.css styles.css

4.2. Critical CSS (inline above fold)

Wyciągnij CSS potrzebny dla "above the fold" i wstaw inline do <head>:

<style>
  /* Critical CSS for above fold */
  body { margin: 0; font-family: Inter, sans-serif; }
  .hero { min-height: 100vh; display: grid; place-items: center; }
</style>
<link rel="stylesheet" href="styles.min.css" media="print" onload="this.media='all'" />

5. JavaScript Optimization

5.1. Defer non-critical JS

<script src="script.min.js" defer></script>

5.2. Code splitting (webpack/vite)

// Dynamic import
const HeavyComponent = () => import('./HeavyComponent');

// Używaj tylko gdy potrzebne
button.addEventListener('click', async () => {
  const module = await HeavyComponent();
  module.init();
});

6. CDN i Caching

Vercel / Netlify: Auto CDN (100+ POPs worldwide)

Cloudflare: Darmowy CDN + cache dla static assets

Cache headers (Vercel):

// vercel.json
{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

8. Core Web Vitals

Trzy najważniejsze metryki:

LCP (Largest Contentful Paint): < 2.5s — Kiedy główny content jest widoczny
FID (First Input Delay): < 100ms — Jak szybko strona reaguje na interakcję
CLS (Cumulative Layout Shift): < 0.1 — Ile elementów "przeskakuje"

Jak poprawić LCP:

Optymalizuj obrazy (WebP, lazy loading poza fold)
Preload kluczowych assetów: <link rel="preload" as="image" href="hero.webp" />
Używaj CDN

Jak poprawić CLS:

Zawsze ustawiaj width i height dla obrazów
Rezerwuj miejsce dla dynamicznej zawartości (ads, embeds)
Unikaj wstawiania treści nad fold po załadowaniu

9. Continuous Monitoring

Automatyczne sprawdzanie performance po każdym deploy:

Lighthouse CI: Integracja z GitHub Actions / GitLab CI
Vercel Analytics: Real Experience Score (faktyczne dane użytkowników)
Google Search Console: Core Web Vitals report

10. Checklist przed deployment

✅ Obrazy skonwertowane do WebP
✅ Lazy loading dla obrazów poniżej fold
✅ Fonty z display=swap
✅ CSS i JS zminifikowane
✅ Defer dla non-critical JS
✅ CDN skonfigurowany
✅ Cache headers ustawione
✅ PageSpeed Score > 90 (mobile + desktop)
✅ Core Web Vitals w zielonym zakresie

Podsumowanie

Osiągnięcie PageSpeed Score 98/100 to proces iteracyjny. Zacznij od obrazów i JS (biggest wins), potem poprawiaj detale (fonts, CSS). Mierz regularnie i monitoruj Core Web Vitals w produkcji.

Pytania? Napisz w komentarzach lub skontaktuj się — chętnie pomogę!

Podobał Ci się artykuł?

Zapisz się do newslettera — raz w miesiącu dostaniesz podobne treści + ekskluzywne case studies.

Zapisz się do newslettera