DokumentyObrazyMediaNarzędzia PDF

Minifikuj HTML Online

Zmniejsz rozmiar swojego pliku HTML. Minifikuj lub formatuj natychmiast.

Processed in your browser

Zoptymalizowany HTML, szybsze strony

Redukcja 10–20%

Usuwa białe znaki, komentarze i opcjonalne tagi, zmniejszając wagę strony.

Prywatność

HTML jest przetwarzany w Twojej przeglądarce. Nigdy nie jest przesyłany na żaden serwer.

Dwukierunkowy

Minifikuj dla produkcji lub formatuj zminifikowany HTML, aby go czytać i edytować.

Natychmiastowy

Wyniki w milisekundy. Bez oczekiwania ani kolejek przetwarzania.

Trzy kroki, żadnych komplikacji

1

Wklej lub prześlij plik HTML

Wklej kod HTML bezpośrednio lub przeciągnij plik .html. Bez limitu rozmiaru.

2

Wybierz: minifikuj lub formatuj

Minifikuj, aby zmniejszyć wagę strony, lub sformatuj zminifikowany HTML, aby wygodnie go czytać.

3

Skopiuj lub pobierz wynik

Zoptymalizowany HTML pojawia się natychmiast. Skopiuj do schowka lub pobierz jako plik.

Masz pytania?

Minifikacja HTML usuwa: zbędne białe znaki i znaki nowej linii, komentarze HTML (<!-- -->), opcjonalne znaczniki zamykające (np. </li>, </td> zgodnie ze standardem HTML5), atrybuty z wartościami domyślnymi i może skracać wartości atrybutów logicznych. Wynikowy dokument jest funkcjonalnie równoważny dla przeglądarki.

Typowy HTML strony jest redukowany o 10–20% przez minifikację. Choć wpływ jest mniejszy niż minifikacja CSS lub JS (HTML jest zazwyczaj mniejszy), w połączeniu z kompresją gzip/Brotli może znacząco skrócić Time to First Byte (TTFB), zwłaszcza dla stron z rozbudowanym HTML generowanym przez szablony CMS.

W większości przypadków nie, ale są wyjątki: JavaScript używający białych znaków do rozdzielania tokenów (rzadkie w nowoczesnym kodzie) lub CSS opierający się na znakach nowej linii. Narzędzia do minifikacji takie jak HTMLMinifier-terser są domyślnie konserwatywne i zachowują wbudowany JavaScript i CSS. Zawsze testuj wynik w środowisku testowym.

Obie są potrzebne i komplementarne. Minifikacja zmniejsza rozmiar przed transferem (wpływa na pamięć podręczną CDN i przechowywany plik). Kompresja (gzip, Brotli) zmniejsza rozmiar podczas transferu HTTP. Serwer powinien być skonfigurowany do serwowania skompresowanego HTML. Przy obu technikach HTML może być nawet o 80–85% mniejszy niż oryginalny nieskompresowany plik.

Poza minifikacją: usuń zakomentowany HTML, który nie jest już używany, unikaj nadmiernego zagnieżdżania elementów div (div soup), używaj semantycznych elementów HTML, które są krótsze (article, nav, main zamiast div class='...'), usuń atrybuty style inline (przenieś wszystko do zewnętrznego CSS) i dla aplikacji SPA rozważ renderowanie po stronie serwera (SSR) lub generowanie stron statycznych (SSG), które produkuje czystszy HTML.

Wydajność HTML: parsowanie, TTFB i optymalizacja dokumentu

Rozmiar dokumentu HTML wpływa na Time to First Byte (TTFB) i czas inicjalnego parsowania przeglądarki. Choć typowy HTML strony jest mniejszy niż jej zasoby CSS i JS, strony generowane przez systemy CMS takie jak WordPress lub Drupal mogą mieć bardzo rozbudowany HTML z komentarzami debugowania, zbędnymi klasami i niepotrzebnym znacznikami, który łatwo przekracza 100 KB na stronę.

Minifikacja po stronie serwera a minifikacja podczas budowania reprezentują dwa różne podejścia: minifikacja podczas budowania generuje już zoptymalizowane pliki statyczne (idealne dla stron statycznych, JAMstack, SSG), podczas gdy minifikacja po stronie serwera (za pomocą oprogramowania pośredniczącego takiego jak htmlmin dla Python/Flask lub wtyczek Nginx) optymalizuje dynamicznie generowany HTML przy każdym żądaniu. Dla stron o dużym ruchu minifikacja podczas budowania jest bardziej wydajna, gdyż unika narzutu obliczeniowego przy każdym żądaniu.

HTMLMinifier (Douglas Crockford, 2010) był historyczną referencją dla minifikacji HTML. Jego następca, HTMLMinifier-terser (aktywnie rozwijany), obsługuje HTML5, wbudowany SVG i MathML. Testy wydajności pokazują, że może redukować HTML prawdziwych stron o 8–25% w zależności od rozbudowania szablonu. Dla nowoczesnych frameworków wtyczki takie jak vite-plugin-html lub wbudowana wtyczka minifikacji Next.js integrują tę optymalizację automatycznie w potok budowania.