Ten tekst przeczytasz w 1 minutę

Brak komentarzy

Minifikacja kodu CSS i JS – co to jest?

minifikacja kodu

Minifikacja kodu – co to jest?

Minifikacja, to proces, który ma na celu zmniejszenie kodu źródłowego poprzez skasowanie niepotrzebnych znaków.

Po wykonaniu minifikacji, usuwane są z kodu wszystkie:

New call-to-action
New call-to-action
  • zbędne białe znaki (spacje, entery itp.),
  • komentarze (bloki tekstu objęte /* */ oraz treści znajdujące się w pojedynczych wierszach poprzedzone //),
  • czasami ulegają skróceniu nazwy zmiennych / funkcji.

W wyniku minifikacji udaje się zmniejszyć rozmiar kodu o kilkadziesiąt procent. Zminifikowany kod jest wykonywany w ten sam sposób, jak przed minifikacją, ale z powodu mniejszego rozmiaru strona jest szybciej pobierana i interpretator przeglądarki operuje na mniejszych ilościach danych. W wyniku zabiegu minifikacji, strony szybciej się pobierają i renderują użytkownikom. Proces minifikacji dotyczy przeważnie kodu JS (skryptów JavaScript) i CSS (arkuszy styli) znajdujących się w osobnych plikach.

Ale uwaga!

Wykonanie minifikacji powoduje zmianę kodu źródłowego i może utrudniać jego późniejsze modyfikacje. Zawsze należy skopiować plik przed dokonaniem minifikacji. Nanoszenie poprawek należy wykonywać na skopiowanych plikach, po naniesieniu poprawek należy ponownie zminifikować kod. Najlepszą praktyką jest trzymanie źródłowych plików w odpowiednich katalogach na serwerze obok zminifikowanych plików. W przypadku samodzielnej minifikacji można korzystać z narzędzi online, które działają szybko i są bezpłatne.

New call-to-action
New call-to-action

Przykładowy wygląd kodu strony przed minifikacją

A tak wygląda przykładowy kod strony po minifikacji

Prawda, że prościej? 🙂 Dla robota Google na pewno! Szybkość działania strony wpływa na pozycjonowanie stron internetowych w wyszukiwarkach – odpowiednia minifikacja kodu jest więc działaniem poprawiającym SEO danego serwisu.

New call-to-action
Zarejestruj się w Akademii Verseo

Bądź pierwszym który napisze komentarz.

Zaloguj się, lub wypełnij poniższe pola, aby dodać komentarz.

Wymagany, ale nie będzie opublikowany