Minifikacja HTML, CSS i JavaScript

Minifikacja a kompresja Brotli i gzip

Minifikacja zmienia zawartość tekstowego pliku, a Brotli lub gzip kompresuje transfer HTTP. Te działania się uzupełniają: najpierw przygotuj zasób, potem włącz kompresję na serwerze i sprawdź cache.

Czy minifikacja przyspiesza stronę?

Może ograniczyć liczbę przesyłanych bajtów, ale nie naprawi wolnego serwera, ciężkich obrazów, render-blocking CSS ani dużego JavaScriptu. Efekt trzeba zmierzyć razem z TTFB, LCP i całkowitym rozmiarem zasobów.

Dobre praktyki

• Minifikuj w pipeline, a nie ręcznie przed każdym wdrożeniem.
• Ustal politykę publikacji source maps: pomagają w diagnostyce, lecz mogą ujawnić oryginalny kod. Prywatne mapy w systemie błędów są jedną z opcji.
• Nie minifikuj bez parsera kodu, którego składni narzędzie heurystyczne nie rozumie.
• Porównaj wynik działania, błędy w konsoli i rozmiar transferu po wdrożeniu.
• Zachowaj wymagane informacje licencyjne i komentarze narzędziowe; nie usuwaj ich bez sprawdzenia licencji i konfiguracji bundlera.

Przykład bez zmiany znaczenia

Minifikator powinien rozumieć składnię: białe znaki w stringach i tekst w pre są treścią. Porównaj oddzielnie rozmiar pliku oraz transfer po Brotli/gzip; procent oszczędności surowego pliku nie jest procentem szybszego wczytania.

function total(price, count) {
  return price * count;
}

function total(price,count){return price*count}