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. Według badania Google z 2016 roku 53% wizyt na stronach mobilnych kończy się porzuceniem, jeśli ładowanie trwa dłużej niż 3 sekundy. Każdy zbędny bajt to dodatkowy wielbłąd w karawanie - im lżejszy ładunek, tym szybciej dotrze do celu. Poznasz trzy sposoby odchudzania strony: minifikację, kompresję i lazy loading.

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 minifikacją - 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} */

Obie wersje działają identycznie, bo przeglądarka nie potrzebuje wcięć ani komentarzy. Znika tylko to, co pomaga człowiekowi, dlatego pracujesz zawsze na czytelnej wersji, a zminifikowaną generuje narzędzie przy publikacji.

Narzędzia do minifikacji:

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

Kompresja przesyłu

Minifikację łatwo pomylić z kompresją. Minifikacja zmienia sam plik, a kompresja dzieje się podczas przesyłania: serwer pakuje pliki tekstowe (HTML, CSS, JS) algorytmem gzip lub Brotli, a przeglądarka rozpakowuje je sama. Użyty algorytm zobaczysz w panelu Network, w nagłówku odpowiedzi Content-Encoding. Obie techniki się uzupełniają - najlepszy efekt daje zminifikowany plik wysłany w kompresji.

Kompresja obrazów

Obrazy to zwykle 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; według Google stratny WebP jest o 25-34% mniejszy od porównywalnego JPEG, a bezstratny o 26% mniejszy od PNG
• AVIF - najnowszy z popularnych formatów, zwykle jeszcze mniejszy niż WebP
• SVG - grafiki wektorowe, ikony (skalowalny)

Od najlżejszego do najcięższego zdjęcia ułożą się więc zwykle tak: AVIF, WebP, JPEG. Starsze przeglądarki nie znają jednak nowych formatów, dlatego potrzebujesz planu awaryjnego.

Element picture - nowoczesne podejście:

Element <picture> pozwala podać kilka wersji tego samego obrazu i zostawić wybór przeglądarce:

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>

Przeglądarka czyta elementy <source> od góry i bierze pierwszy format, który rozumie. Jeśli nie zna żadnego, użyje <img> - to on jest wymaganym fallbackiem i to na nim zostają alt, width i height. Najlżejszy format stawiaj zawsze na górze.

Lazy loading - leniwe ładowanie

Lazy loading opóźnia ładowanie obrazów, które nie są widoczne na ekranie. Dzięki 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">

loading="lazy" każe przeglądarce poczekać, aż obraz zbliży się do widocznego obszaru, a loading="eager" (wartość domyślna) ładuje go od razu. Głównego obrazu na górze strony nie opóźniaj - to zwykle największy element pierwszego ekranu, a czas jego pojawienia się mierzy wskaźnik LCP (Largest Contentful Paint).

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">

Z atrybutów przeglądarka wylicza proporcje obrazu i rezerwuje na niego miejsce, zanim plik dotrze, więc tekst pod spodem nie podskakuje. Wymiary nie blokują responsywności: dodaj w CSS max-width: 100% i height: auto, a obraz nadal będzie się skalował. LCP i CLS to wskaźniki Core Web Vitals, które zmierzysz Lighthouse'em z pierwszej lekcji tego modułu.

Moja kolejność: najpierw wymiary i lazy loading, bo to dwa atrybuty bez żadnych kosztów, potem nowoczesne formaty w <picture>, a minifikację zostaw narzędziom. W następnej lekcji zobaczysz, że czcionki też ważą - i nauczysz się ładować je z głową.

Praktyka

Otwórz panel Network, przewiń stronę z edytora poniżej i obserwuj, kiedy pobierają się obrazy z loading="lazy":

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Optymalizacja wydajnosci</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Optymalizacja wydajnosci stron</h1>
11
12    <section>
13        <h2>Lazy loading obrazow</h2>
14        <p>Przewin strone w dol - obrazy zaladuja sie dopiero,
15           gdy beda widoczne na ekranie.</p>
16
17        <img src="https://placehold.co/600x300/d4af37/1a1a2e?text=Piramida+1"
18             alt="Piramida Cheopsa" width="600" height="300"
19             loading="eager">
20        <p class="caption">Obraz 1: loading="eager" (laduje od razu)</p>
21    </section>
22
23    <section>
24        <h2>Obrazy z lazy loading</h2>
25
26        <img src="https://placehold.co/600x300/8b6914/f5f1e3?text=Piramida+2"
27             alt="Piramida Chefrena" width="600" height="300"
28             loading="lazy">
29        <p class="caption">Obraz 2: loading="lazy" (laduje przy przewijaniu)</p>
30
31        <img src="https://placehold.co/600x300/3d2914/d4af37?text=Sfinks"
32             alt="Wielki Sfinks" width="600" height="300"
33             loading="lazy">
34        <p class="caption">Obraz 3: loading="lazy"</p>
35    </section>
36
37    <section>
38        <h2>Element picture - rozne formaty</h2>
39        <picture>
40            <source srcset="https://placehold.co/600x300/1a1a2e/d4af37?text=WebP+Format"
41                    type="image/webp">
42            <img src="https://placehold.co/600x300/1a1a2e/d4af37?text=JPEG+Fallback"
43                 alt="Dolina Krolow" width="600" height="300"
44                 loading="lazy">
45        </picture>
46        <p class="caption">Element &lt;picture&gt; z formatem WebP i fallbackiem JPEG</p>
47    </section>
48</body>
49</html>

Pamiętaj: szybka strona to lekka karawana - bez zbędnych bajtów dociera do celu, zanim podróżny zdąży się zniecierpliwić.