Minifikacja-CSS-i-JS
Prędkość strony

Minifikacja CSS i JavaScript – co to jest? Jak ją wykonać?

Czy robiłeś/robiłaś test strony w Google Lighthouse? Jeśli nie, to polecam! A jeśli tak, to bardzo możliwe, że jednym z rekomendacji testera dotyczących Twojej strony WWW była minifikacja CSS i JavaScript. Co to jest? Jak ją wykonać i czy rzeczywiście jest potrzebna – piszę o tym w artykule.

minifikacja CSS i JavaScript  - test Google Lighthouse
Rekomendacja minifikacji CSS w teście Google Lighthouse

CSS i JavaScript – co to?

Abyś zrozumiał, o co chodzi w tej minifikacji CSS i JavaScript, najpierw sprawdźmy, czy wiesz, co to jest CSS i JavaScript.

  • CSS – Cascade Style Sheets – czyli po polsku kaskadowe arkusze stylów. Jest to język służący do wskazania przeglądarce, jak mają wyświetlać się poszczególne elementy stron WWW napisanych w HTML. Dzięki CSS nie ma konieczności każdorazowo umieszczania w pliku HTML kolorów i rodzaju fontu, rozmiaru paddingów i innych tego typu rzeczy. Wszystkie one znajdują się w arkuszu CSS.
  • JavaScript – najprościej mówiąc, jest to język programowania, który stosowany jest głównie podczas tworzenia stron internetowych, ewentualnie aplikacji. Dzięki skryptom JavaScript możesz ułatwić użytkownikom WWW interakcję ze stroną lub mocno wpłynąć na efekt wizualny niektórych elementów. Język ten umożliwia także walidację informacji wprowadzanych w formularzach. Co ważne, JS ma ograniczony dostęp do komputera użytkownika.

Na czym polega minifikacja CSS i JavaScript?

Proces minifikacji CSS i JavaScript polega na zmniejszeniu rozmiaru plików napisanych w tych językach. W wyniku minifikacji usunięte zostają wszystkie niepotrzebne, białe znaki takie jak spacje i tabulatory oraz komentarze do plików. Brzmi prosto, ale ręczna minifikacja CSS i JavaScript bywa żmudna. Z plików wyrzucane jest wszystko, co nie jest czystym kodem. Po zakończonym procesie minifikacji, pliki otrzymują dodatkowe rozszerzenia min.

Minifikacja – wygląd kodu w pliku

Możesz w tym momencie powiedzieć: “Ok, prawie rozumiem. Ale pokaż mi co właściwie zmienia się po minifikacji kodu.” Jeśli tak powiesz, odpowiem, że zrobię to z przyjemnością i pokaże to na przykładzie. Zmienia się m.in. wygląd kodu w pliku.

Kod przed minifikacją pliku CSS

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

Kod po minfikacji pliku CSS

ol{list-style:decimal}li>ul,li>ol{margin-bottom:0;margin-left:1.5em}dt{font-weight:bold}dd{margin:0 1.5em 1.5em}img{height:auto;max-width:100%}table{margin:0 0 1.5em;width:100%}

Czy warto minifikować CSS i JavaScript na stronie?

Zdecydowanie tak. Oprócz poprawy indeksacji i szybkości strony jest jeszcze jeden bardzo ważny powód – ekonomiczny. Jeśli jesteś właścicielem skalowalnych aplikacji lub stron WWW, minifikacja CSS i JavaScript zaoszczędzi pieniądze, które wydałbyś na transfer danych. W przypadku dużych portali, oszczędności mogą sięgać kilku tysięcy złotych.

Korzyści z minifikacji

Pozbycie się niepotrzebnych znaków białych z plików CSS i JavaScript daje niezaprzeczalne efekty. Zauważalnymi korzyściami minifikacji CSS i JavaScript są:

  • mniejsza objętość dotyczących ich plików,
  • szybsze ładowanie się strony internetowej,
  • zmniejszenie transfery danych, a co za tym idzie – zmniejszenie kosztów, właściciela aplikacji i portali internetowych,
  • pozycjonowanie na wyższych pozycjach,
  • widoczna poprawa aspektów UX.
CSS i JS można zminifkować za pomocą minifier.org
Minifikacja CSS i JS w Minifier.org

Narzędzia, które pomogą Ci minifikować CSS i JavaScript

Jak najprościej sprawdzić, czy CSS i JavaScript wymagają minifikacji?

Wystarczy, że skorzystasz z narzędzia Google Lighthouse, o którym wspomniałem we wstępie. Przetestuje Twoją stronę internetową, wskaże błędy i zasugeruje konkretne zmiany. Między innym sprawdzi, czy CSS i JavaScript wymagają minifikacji.

Może zainteresować Cię również wpis o tym, jak sprawdzić prędkość swojej strony

Content Marketing | Pozycjonowanie WWW | Cześć ! od kilku lat zajmuję się pisanie tekstów na strony WWW i blogi. W tym czasie mocno rozwinąłem swoje umiejętności w zakresie pozycjonowania stron internetowych. Ten blog to moje laboratorium doświadczalne, ale także biblioteka treści związanych ze sztuką, jaką jest SEO. Zapraszam do czytania!

0 0 Zagłosuj
Ocena artykułu:
Subskrybuj
Powiadom o
guest
0 komentarzy
Feedbacks
Zobacz wszystkie komentarze