Optymalizacja wydajności - szybkość karawany

W Starożytnym Egipcie szybkość dostawy materiałów decydowała o tempie budowy piramidy. W web developmencie szybkość ładowania strony decyduje o tym, czy użytkownik zostanie na stronie, czy odejdzie. Badania pokazują, że 53% użytkowników opuszcza stronę, jeśli ładuje się dłużej niż 3 sekundy.

Minifikacja - kompresja hieroglifów

Minifikacja to proces usuwania zbędnych znaków z kodu (spacje, komentarze, nowe linie) bez zmiany jego działania:

1/* PRZED minifikacja - czytelna wersja */
2body {
3  font-family: Georgia, serif;
4  max-width: 800px;
5  margin: 0 auto;
6  padding: 20px;
7  /* Tło w kolorze piasku */
8  background: #f5f1e3;
9}
10
11/* PO minifikacji - zoptymalizowana wersja */
12/* body{font-family:Georgia,serif;max-width:800px;margin:0 auto;padding:20px;background:#f5f1e3} */

Narzędzia do minifikacji:

• cssnano - minifikacja CSS
• Terser - minifikacja JavaScript
• html-minifier - minifikacja HTML
• Bundlery jak Webpack lub Vite robia to automatycznie

Kompresja obrazów

Obrazy to najcięższe zasoby na stronie. Optymalizacja obrazów to kluczowy krok:

Formaty obrazów:

• JPEG - zdjęcia, gradientowe tła (kompresja stratna)
• PNG - grafiki z przezroczystością, ikony (bezstratna)
• WebP - nowoczesny format, 25-35% mniejszy niż JPEG/PNG
• AVIF - najnowszy format, jeszcze mniejszy niż WebP
• SVG - grafiki wektorowe, ikony (skalowalny)

Element picture - nowoczesne podejście:

1<picture>
2  <!-- Przeglądarka wybierze najlepszy format -->
3  <source srcset="piramida.avif" type="image/avif">
4  <source srcset="piramida.webp" type="image/webp">
5  <img src="piramida.jpg" alt="Wielka Piramida w Gizie"
6       width="800" height="600">
7</picture>

Lazy loading - leniwe ładowanie

Lazy loading opóźnia ładowanie obrazów, które nie są widoczne na ekranie. Dzieki temu strona ładuje się szybciej:

1<!-- Obrazy poniżej ekranu ładują się dopiero przy przewijaniu -->
2<img src="sfinks.jpg" alt="Wielki Sfinks" loading="lazy"
3     width="800" height="600">
4
5<!-- Pierwszy obraz na stronie - NIE używaj lazy loading -->
6<img src="hero.jpg" alt="Piramidy o zachodzie" loading="eager"
7     width="1200" height="600">

Atrybuty width i height

Zawsze podawaj wymiary obrazów - zapobiega to "przeskakiwaniu" strony podczas ładowania (CLS - Cumulative Layout Shift):

1<!-- DOBRZE - przeglądarka rezerwuje miejsce -->
2<img src="piramida.jpg" alt="Piramida" width="800" height="600">
3
4<!-- ŹLE - strona "skacze" podczas ładowania -->
5<img src="piramida.jpg" alt="Piramida">