Home Blog Optymalizacja plików – minifikacja HTML, CSS i z JS.

Optymalizacja plików – minifikacja HTML, CSS i z JS.

Agnieszka Rączka

Czas czytania : 5 min

06 września 2021

SEO

Z tego artykułu dowiesz się:

czym jest minifikacja
dlaczego warto ją stosować
na co zwrócić uwagę, dokonując minifikacji.

Czym jest minifikacja?

W ostatnich latach coraz bardziej popularny staje się minimalizm, czyli trend, który stawia na otaczanie się małą ilością przedmiotów. Sprowadza się on do zmiany priorytetów w taki sposób, aby pozbyć się rzeczy zbędnych, będących sztucznie napędzanymi potrzebami dyktowanymi przez kulturę konsumpcjonizmu. Minimalizm można także zaobserwować w świecie wirtualnym – jednym z jego owoców jest minifikacja kodu. Minifikacja jest ważnym krokiem w tworzeniu strony przyjaznej dla urządzeń mobilnych. istnieją dwa jej główne cele: zmniejszenie rozmiaru pliku i usunięcie niepotrzebnych białych znaków. Osiągnięcie pierwszego celu skraca czas ładowania strony na urządzeniach mobilnych ze względu na opłaty za transmisję danych i ograniczoną przepustowość. Zrealizowanie drugiego poprawia czytelność poprzez usunięcie zbędnych pustych przestrzeni, które często pojawiają się między wierszami.

Minifikacja plików CSS i JS to proces, który ma na celu zmniejszenie kodu źródłowego poprzez usunięcie niepotrzebnych znaków. Minifikacja plików HTML, CSS i JS w celu optymalizacji wydajności strony stała się ważnym zagadnieniem dla właścicieli stron internetowych, ponieważ w kolejnych aktualizacjach Google coraz mocniej stawia na weryfikację aspektów związanych prędkością i dostępnością strony, czyli – pośrednio “czystością” i jakością kodu. Zatem optymalizowanie kodu poprzez jego zmniejszanie jest szczególnie rekomendowane dla osób, którym zależy na SEO i wysokich wynikach organicznych w wyszukiwarce Google.

Najważniejsze zalety minifikacji

Zminifikowany kod jest oczyszczony ze zbędnej zawartości, co wymusza zachowanie na serwerze jedynie wartościowych fragmentów oraz ograniczenie do minimum dodatkowych (często nieużywanych) elementów. Na przykład pluginów, które zainstalowały się razem z szablonem. Dodatkowo zyskamy na bezpieczeństwie, ponieważ wtyczki – nieaktualizowane – mogą stać się źródłem wirusów i ataków hakerskich.

Kolejnym argumentem, o którym warto wspomnieć, jest efekt odciążenia strony i jej przyspieszenia poprzez zastosowanie minifikacji. Mniejsze pliki = krótszy czas ładowania zasobów i wyższy pagespeed. Do sprawdzania ostatniego warto używać narzędzia PageSpeed Insights, które weryfikuje wdrożenie minifikacji dla poszczególnych rodzajów plików.

Zminifikowany kod jest również trudniejszy do odczytania przez człowieka, co znacznie utrudnia pracę hakerom lub innym osobom, które mogłyby chcieć manipulować kodem Twojej strony. W tym miejscu należy jednak wspomnieć o małym minusie dotyczącym niskiej czytelności minifikowanych kodów: obejściem tego jest zachowanie obydwu wersji plików. Większej – dla deweloperów – w wersji .html, z zachowaniem komentarzy oraz białych znaków ułatwiających czytanie, a także drugiej – wgranej na serwer, zminifikowanej wersji .min.html. To niewielkie utrudnienie nie przekreśla jednak przewagi pozytywów płynących z oczyszczenia kodu strony internetowej.

Wszystkie powyższe zalety przekuwają się także pozytywnie na pozycjonowanie.

Minifikacja HTML

Przez bardzo długi czas uważano, że pliki HTML raczej nie wymagają optymalizowania ze względu na fakt, że z reguły nie ma tutaj długich nazw wymagających skracania. Zatem głównym obszarem prac w plikach .html mogło wydawać się usuwanie białych znaków. Jednak whitespace – w połączeniu z komentarzami w kodzie – bywają całościowe obciążające dla plików.

Dlatego warto popracować nad ich eliminacją. Z pomocą dla HTML przychodzi na przykład Minify Code

Minifikacja kodu CSS

Pliki .css, czyli arkusze stylów używanych i określonych dla strony, są najczęściej formatowane tak, aby były przejrzyste wizualnie. To jednak generuje bardzo dużą ilość białych znaków.

.baner {
   margin: 15px 10p 10px 30px;
   padding: 0.75em 1em;
   width: 180px;
   border-width: 1px;
   border-color: #000;
   background-color: #e1e0df;
}

Po zminifikowaniu pokazany wcześniej kod wygląda następująco:

.styl{margin:15px 10p 10px 30px;padding:.75em 1em;width:180px;border-width:1px;border-color:#000;background-color:#e1e0df}

W tym wypadku redukcja białych znaków zaoszczędziła kilka linii, ale dla rozbudowanych plików stron internetowych, zmniejszenie kodu źródłowego poprzez minifikację przyniesie pozytywne efekty. Nawet niewielkie strony mają zwykle bardzo rozbudowane pliki z deklaracjami CSS. Łatwo można wyobrazić sobie zatem ilość przestrzeni, jaką możemy zaoszczędzić poprzez odpowiednie zmiany w kaskadowych arkuszach stylów.

Do optymalizacji CSS polecamy szybki łatwy w użyciu darmowy kompresor: csscompressor.net. Dobrze sprawdzi się także https://cssminifier.com.

Minifikacja kodu JS

Podobnie jest w przypadku kodu JavaScript – czyli plików js. Najczęściej są to długie kody, złożone z bardzo dużej liczby znaków (także białych), zatem ich kompresja wpłynie pozytywnie na parametry jakościowe strony.

W pracy nad zoptymalizowaniem kodu JS strony z pewnością pomoże prosty JavaScript Minifier. Warto także przetestować Closure Compiler, który wskazuje również inne pomocne optymalizacje. Na koniec pracy można sprawdzić gotowy kod pod kątem błędów. Alternatywą dla poprzednich jest jscompress.com, które oprócz klasycznej funkcji wklejenia minifikowanego contento, pozwala przesyłać wiele plików JavaScript jednocześnie. Ułatwia łączenie przygotowanych fragmentów kodu JavaScript w jeden plik. Dzięki temu możemy uzyskać lepszą prędkość ładowania się naszej strony internetowej.

Minifikacja – wdrożenie nie tylko dla programistów

Choć mogłoby wydawać się, że do poprawnego wdrożenia minifikacji niezbędna będzie rozległa wiedza programistyczna lub pomoc osoby zaawansowanej technicznie, nic bardziej mylnego. Oczywiście, w razie możliwości warto skorzystać z doświadczenia, jednakże obecnie mamy sporo narzędzi, które pomogą przeprowadzić minifikację automatycznie. Dzięki temu bez problemu nawet osoba nie posiadająca zaawansowanej wiedzy na temat CSS czy HTML powinna poradzić sobie ze zminimalizowaniem zbędnego kodu na swojej stronie.

Poniżej lista przykładowych narzędzi dostępnych online, które pozwalają na modyfikację więcej niż jednego rodzaju plików:

– refresh-sf.com. Jest to strona, która umożliwia minimalizowanie kodu JavaScript, CSS i HTML poprzez wklejenie zawartości.

– htmlcompressor.com pozwala na kompresję HTML, JS i CSS W razie potrzeby Html Compressor obsługuje nawet kombinacje typów kodu, na przykład CSS + PHP oraz JavaScript + PHP. Co ważne – wskazuje również ewentualne popełnione w trakcie błędy.

– minifycode.com, którego dużą zaletą jest – oprócz prostej budowy i możliwości kompresowania HTML, JS i CSS, istotna opcja dekompresji. Dzięki temu w razie potrzeby kod może być zmodyfikowany tak, aby był możliwie łatwy do odczytania.

Oczywiście w sieci znajdziemy z łatwością bardzo dużo innych programów. Warto skorzystać z ich dostępności i zoptymalizować swoją witrynę pod kątem ilości skryptów, który wykorzystuje. Zmniejszenie kodu źródłowego odciąży działania serwera oraz – w efekcie – oszczędzi wyszukiwarce sporo czasu na ładowanie skryptów.

Minifikacja – czy warto?

Podczas zastanawiania się czy warto pracować nad minifikacją zawartości witryny, należy zadać sobie przede wszystkim pytanie, na ile może to oszczędzić czas ładowania i zoptymalizować całość pod pozycjonowanie w wyszukiwarce oraz wspomóc użyteczność. Nie należy spodziewać się, że kompresja kodu wypełni ewentualne luki optymalizacyjne, ale z pewnością przyniesie pozytywne skutki w końcowym dopracowaniu technicznym witryny.