Minifikacja (minimalizacja) JS, CSS, HTML

Jedną z najbardziej popularnych technik optymalizacji stron, sklepów i portali internetowych jest minimalizacja lub (chyba niepoprawnie) minifikacja plików z kodem JavaScript, CSS a także HTML.

Można odnieść wrażenie, że minimalizacja zasobów JS i CSS to szczegół a te kilka zaoszczędzonych kilobajtów nie przełoży się na szybkość działania strony…

Czym jest minimalizacja kodu?

Minimalizacja to usunięcie nadmiarowych znaków w kodzie. 

Powyższa definicja to przykład błędnej definicji z powodu ignotum per ignotum. Dlatego trzeba wyjaśnić czym jest nadmiarowy znak…

Minimalizacja jest możliwa do zastosowania w kodzie, którego kod jest interpretowany przez komputer. Niektóre znaki w kodzie komputerowym nie mają znaczenia dla interpretacji a są dodane tylko dlatego aby kod było łatwiej czytać i rozwijać programiście. Można do nich zaliczyć komentarze, oraz często spacje, znak nowej linii i tabulatory.

Usuniecie tych nadmiarowych znaków wiąże się z mniejszą czytelnością kodu natomiast dla komputera to żadna różnica. Dlatego jeżeli kod jest przeznaczony do celów umieszczenia na serwerze, minimalizacja spowoduje oszczędność miejsca. Zarówno na dysku komputera (które tutaj ma akurat marginalne znaczenie) ale też w transmisji danych za pomocą dowolnego medium – i ten punkt jest szalenie istotny.

Kod nie zminimalizowany:

.szary-pasek-promocja
    {
     background-color:#333;
     color:#ddd;
     border: 1px solid #666;
    }

.parallax-promocja-big
    {
     background-color:#000; 
     color:#333;

     border: 1px solid #aaa;
    }

Kod zminimalizowany:

.szary-pasek-promocja{ background-color:#333; color:#ddd; border: 1px solid #666;}.parallax-promocja-big{background-color:#000;color:#333;border: 1px solid #aaa;}

Oczywiście im dłuższy kod tym różnice są bardziej spektakularne.

Naprawdę kilka kilobajtów robi taką różnicę?

Wszystko zależy od skali… Jeżeli nasza strona jest prosta, zawiera kilka plików i nikt na nią nie wchodzi poza nami samymi 😉 to… racja. Te kilka kilobajtów nie robi różnicy i jedyne co tracimy to dumny wynik 100/100 w GTMetrix.

Sprawa ma się inaczej jeżeli skryptów jest wiele, mają po kilkaset linii i jest to dość duży i popularny portal. W tego typu sytuacji może dochodzić już do setek kilobajtów oszczędności na jedną wizytę. Załóżmy że jakiś portal generuje ruch na poziomie 64 milionów wyświetleń dziennie np. taki pierwszy z brzegu… P0rnhu6 😉

jQuery 3.3.1 w wersji nieskompresowanej zajmuje 266KB. Skompresowany plik jquery-3.3.1.min.js to już zaledwie 85KB. Wychodzi nam 181KB oszczędności. Załóżmy, że takich skryptów różnorakich mamy 10. Czyli: 10*181KB – 1810KB = 1,768 MB  (ponieważ 1MB = 1024KB a nie 1000 jak w wielu durnych kalkulatorach online można przeliczyć).

Skoro programiści nie minimalizują plików to też pewnie nie znają nagłówków Expires i z każdą wizytą na stronie z kolejnym filmikiem pliki pobierają się od nowa.

1,768MB * 64 000 000 = 113 152 000 MB czyli 110500 GB!

Transfer 110500GB pomnożony przez 30 dni powinien zatem wygenerować rachunek dla właścicieli tego portalu w wysokości $ 119 385.46.

Przy jednej wizycie różnica faktycznie różnica jest niezauważalna, natomiast przy dużych portalach brak samej minimalizacji kodu może spowodować konkretne koszty 🙂

Jak minimalizować pliki?

Aby zminimalizować gotowe pliki CSS i JS można użyć wiele gotowych narzędzi np. https://www.minifier.org/ Można też użyć tych wygenerowanych przy audytach w GTMetrix lub PageSpeed Insights. Edytory i narzędzia dla Front-Endowców posiadają tego typu mechanizmy w standardzie. Dlatego pliki do umieszczenia na serwerze można automatycznie skompilować.

Proces minimalizowania można też automatyzować po stronie serwera za pomocą modułu pagespeed.

Konwencje nazewnictwa plików

Przyjęło się, że przed rozszerzeniem pliku dodajemy „.min” aby zaznaczyć fakt że zawartość plików jest zminimalizowana.

Zalety minimalizacji plików

• szybsze wczytywanie się stron internetowych zarówno przy pierwszej jak i kolejnych wizytach nawet w przypadku nie funkcjonowania pamięci podręcznej,
• mniejszy transfer danych a tym samym mniejsze koszty dla właścicielu utrzymujących skalowalne aplikacje i portale internetowe,
• wyższy wskaźnik jakości we wszelkiego rodzaju automatycznych analizatorach optymalizacji wydajnościowej i SEO,
• w skrajnych przypadkach: lepsze pozycje w wyszukiwarce i inne pochodne szybszego działania stron sklepów i portali internetowych

Podsumowanie

Nie wiem jak wy ale ja te niecałe pół miliona złotych na miesiąc wolałbym zachować dla siebie… Dlatego przyjęło się że minimalizacja plików JS, CSS, HTML to dobra praktyka i jeden z wielu wyznaczników jakości stron internetowych.

Źródła:

https://developers.google.com/speed/docs/insights/MinifyResources