Minifikacja kodu JS, CSS, HTML jak minimalizować wagę plików?

https://widzialni.pl/wp-content/ pozbyć się rzeczy nadmiarowych czy po prostu zbędnych. Taką samą tendencję obserwujemy w świecie wirtualnym. Jeszcze kilka lat temu strony przeładowane animacjami i grafikami były na porządku dziennym. W latach 90. nadmiar rzeczy wciąż był wszechobecny – nie tylko na stronach, ale nawet papierowych wizytówkach przeładowanych kolorami (by pokazać, że kogoś stać na kolorowy wydruk :)). W kierunku minimalizmu pędzi też świat SEO i optymalizacji stron internetowych poprzez minifikowanie czy minimalizowanie plików na stronach.

Co to jest minifikacja kodu?

Minifikacja kodu jest procesem, w wyniku którego – poprzez usunięcie niepotrzebnych / nadmiarowych znaków – ulega zmniejszeniu kod źródłowy. Eliminacja tych danych nie powoduje zmiany funkcjonalności kodu (sposobu jego działania).

Brzmi skomplikowanie?

via GIPHY

Przedstawię to na przykładzie ze świata rzeczywistego.

Na czym polega minimalizacja kodu? Dla laików

Wyobraźmy sobie sytuację, w której występuje matka (Teresa) oraz córka (Małgorzata). Jest letni, upalny dzień, a Teresa, z racji swojego już podeszłego wieku, ma problemy z poruszaniem się. W pewnym momencie odczuwa mocne pragnienie, dlatego też zwraca się do swojej córki:

Małgosiu, moja droga, bardzo Cię proszę, czy mogłabyś przynieść mi z kuchni szklankę zimnej wody?

Usłyszawszy to Małgorzata przyniosła swojej mamie szklankę wody.

via GIPHY

Należy zwrócić uwagę, że Pani Teresa bardzo uprzejmie poprosiła swoją córkę. Jednak pragmatycznie patrząc, mogła to zrobić prościej.
Na przykład:

Małgosiu, proszę przynieś mi szklankę zimnej wody z kuchni.

Jeszcze prościej:

Małgosiu, przenieś szklankę zimnej wody z kuchni.

Jeszcze prościej:

Małgosiu, przynieś mi szklankę zimnej wody.

A nawet tak:

Przynieś mi szklankę zimnej wody!

via GIPHY

W powyższych przykładach zdań nawet nie trzeba liczyć znaków – na pierwszy rzut oka widać, że każde następne jest krótsze. W ten właśnie sposób Pani Teresa mogła zminifikować swoją prośbę (polecenie) wystosowaną do Małgorzaty, bazując na swoich relacjach z córką. Mniej więcej na tym samym polega minifkacja kodu – przedstawieniu tych samych instrukcji w mniejszej liczbie znaków.
W celu minimalizacji kodu zazwyczaj:

• usuwa się „zbędne” znaki niedrukowane (białe) takie jak entery, spacje, etc.,
• usuwa się komentarze z kodu (są to często notatki programistów opisujące jak dany kod działa :)),
• skraca się / zmienia nazwy poszczególnych funkcji lub zmiennych (w przedstawionym przykładzie Teresa mogłaby zamienić Małgosiu na Gosiu, albo – jak w ostatnim przykładzie – zastosować podmiot domyślny).

W efekcie powstaje plik z kodem (JS, CSS, HTML), który zajmuje mniej miejsca, a spełnia te same funkcje, o ile proces zostanie zakończony sukcesem.

Czy minimalizacja kodu jest bezpieczna?

Uznawanie znanego stwierdzenia: Jeżeli coś może się nie udać, to się nie uda. za prawdziwe w 100% jest objawem skrajnego pesymizmu. Jednak zdroworozsądkowo warto pamiętać o zasadzie Przezorny zawsze ubezpieczony i wychodzić z założenia, że zawsze może pójść coś nie tak, chociaż nie musi.
Dlaczego o tym wspominam? Ponieważ o konieczności robienia kopii zapasowych warto mówić przy każdej okazji i lepiej o tym powiedzieć raz za dużo, niż raz za mało.
Zwłaszcza, że po minifikacji pliku przy pomocy dowolnego narzędzia może się okazać, że nie spełnia on już tych samych funkcji. Chociażby dlatego, że kod sam w sobie zawierał błędy, które były nieistotne przed minifikacją lub w trakcie minimalizowania pliku zostały źle skrócone nazwy funkcji lub zmiennych.

via GIPHY

Zawsze przed taką operacją warto zrobić kopię i zatrzymać oryginalny plik, nawet jak już się go nie wykorzystuje.

Po co minimalizować i minifikować kod?

Czas to pieniądz – to powiedzenie ma zastosowanie w każdej dziedzinie życia. W kontekście pozycjonowania stron czas zawsze był istotny i, z miesiąca na miesiąc, jest coraz ważniejszy.
Niestety w ramach bezpośrednich efektów SEO nie zawsze ma to zastosowanie. Dzieje się tak, ponieważ pozycjonowanie jest procesem długofalowym wymagającym czasu. Jednak w ramach poprawy szybkości działania strony i zmniejszenia czasu jej wczytywania (co wspomaga proces pozycjonowania), czas przekłada się na pieniądz.
W internecie można znaleźć wiele artykułów o wpływie szybkości działania strony na SEO. Także na blogu Widzialnych pisano o aspektach z nią powiązanych takich jak: PageSpeedInsights, Core Web Vitals, HTTP/2, WebP, optymalizacji obrazów czy ogólnie pojętej optymalizacji strony pod Google. Każdy z wyżej wymienionych jest powiązany bezpośrednio lub pośrednio z minifikacją plików.

Przykład audytu PSI sugerującego minifikacje kodu JavaScript

W skrócie: pliki się minimalizuje, po to, by były mniejsze i można je było szybciej przesłać, a co za tym idzie – szybciej zaprezentować użytkownikom, którzy jeszcze szybciej zapełnią swoje koszyki w Twoim e-commersie lub złożą zapytanie :).

Czy minifikacja kodu wpływa tylko na szybkość?

Minimalizowanie plików wpływa pozytywnie nie tylko na poprawę szybkości stron i ich pozycjonowanie. Mniejsza ilość transmitowanych danych pozwala na realne oszczędności (kosztów transferu). Przykładowe obliczenia dot. potencjalnych oszczędności przeprowadził jeszcze w 2018 roku Pan Paweł Mansfeld w artykule https://mansfeld.pl/webdesign/minifikacja-minimalizacja-plikow-js-css/ w sekcji „Naprawdę kilka kilobajtów robi taką różnicę?”. W prezentowanym przykładzie przedstawił jaki koszt transferu przez 30 dni oszczędza portal generujący 64 milionów odsłon dziennie poprzez równowartość minifikacji 10 plików jQuery (popularnej biblioteki do m.in. animacji na stronach internetowych).

via GIPHY

W tym artykule pójdę o krok dalej, niż tylko wspomniana wcześniej prędkość ładowania strony czy zaoszczędzone złotówki. Zobaczmy, jak proces minifikacji plików może wpłynąć na ekologię naszej planety!

Minimalizacja kodu a ekologizm

Uzasadnienie, jak minifikowanie kodu wpływa na środowisko, będę prowadził na założeniach z cytowanego artykułu w oparciu o Jquery 3.3.1, które w wersji nieskompresowanej zajmuje 266kB a w wersji zminimalizowanej (jquery-3.3.1.min.js) 85kB. Przejdźmy do obliczeń.

• Oszczędność na minifikacji jednego pliku: 266kB – 85kB = 181kB.
• Załóżmy, że podobnych plików na stronie jest 10.
• Oszczędność minifikacji 10 plików: 181kB * 10 = 1810kB.
• Zamiana kB na MB: 1810kB = 1,768MB (1MB = 1024kB) – warto zaznaczyć, że różne kalkulatory, a także Google, ma problem z takimi obliczeniami.

Zamiana MB na GB według Google

Zamiana kB na MB według Google

• Przyjmijmy, że analizowana strona generuje 10 000 wyświetleń miesięcznie.
• Z każdą wizytą pliki, w tym skrypty, pobierane są od nowa (z powodu braków optymalizacyjnych)..
• Miesięczny transfer danych wynosi: 1,768MB * 10 000 = 17 680MB = 17,27 GB.

via GIPHY

• Przyjmujemy, że zużycie energii elektrycznej koniecznej do transferu 1 GB danych wynosi 200Wh, czyli 0,2kWh (na podstawie: https://android.com.pl/telekomunikacja/259670-orange-internet-zuzycie-energii/ i deklaracji Orange).
• Zużycie energii elektrycznej przez cały miesiąc: 17,27 GB * 0,2 kWh * GB^-1 = 3,454 kWh.

via GIPHY

• Ilość węgla potrzebną do dostarczenia 1kWh w dalszych obliczeniach przyjmuje się jako 0,44 kg (na podstawie opracowania dr inż. Ryszarda Rabiegi https://zielona-energia.cire.pl/pliki/2/zielona-czarna.pdf).
• Zużycie węgla konieczne do dostarczenia miesięcznego zapotrzebowania na energię: 3,454 kWh * 0,44 kg * kWh^-1 = 1,51976 kg węgla.

via GIPHY

• Przyjmuję emisję CO2 powstałą podczas spalenie 1 kg węgla jako 3,6 kg (także na podstawie opracowania dr inż. Ryszarda Rabiegi).
• Emisja CO2 w ciągu miesiąca: 1,51976 * 3,6 = 5,471136 kg CO2.

Czy to dużo, czy mało? Na pewno w żaden sposób to nie ułatwia nikomu życia, a wręcz przeciwnie – generuje dodatkowe koszty.

via GIPHY

Co więcej, według różnych doniesień, można próbować szacować, że jedno drzewo w ciągu roku pochłania od 6 do 20 kg CO2 (przykłady wpisów opartych o notki prasowe lub artykuły: https://www.tvp.info/45232953/finlandia-zmierzono-ile-co2-pochlania-jedno-drzewo i https://www.viessmann.co.uk/heating-advice/how-much-co2-does-tree-absorb).
Niezależnie, czy do pochłonięcia ilości CO2 emitowanej w ten sposób przez rok potrzeba 12, 4 czy 1 drzewa, jest to całkowicie niepotrzebne. Zobaczmy, jak można temu zaradzić.

Minifikacja kodu JS

Zobaczmy, czym różni się niezminifikowany fragment kodu JS od zminifikowanego.

Kod Javascript przed minifiakcją

Przykład kodu, który można znaleźć pod adresem: https://code.jquery.com/jquery-3.3.1.js.

Kod JS jquery-3.3.1 przed minifikacją

Kod Javascript po minifikacji

Przykład kodu po minimalizacji, który można znaleźć pod adresem: https://code.jquery.com/jquery-3.3.1.min.js.

Jak minifikować kod JS?

Nie warto wymyślać koła na nowo. Jeśli już powstało narzędzie rozwiązujące problem, warto z niego skorzystać. Jednym z „popularniejszych” narzędzi do minifkacji kodu JS jest https://www.minifier.org/, lecz nic nie stoi na przeszkodzie, by skorzystać z https://www.linkcode-generator.de/html_compress/.
Wordpressowym zwolennikom wtyczek można zaproponować rozwiązania takie jak:

• Minify Plugins,
• WP Super Minify,
• Fast Velocity Minify,
• itd.

Jednak należy pamiętać: Co za dużo to nie zdrowo. Nie można przesadzać z liczbą wtyczek.
Bardziej zaawansowani mogą także użyć specjalnego modułu od PageSpeed (https://www.modpagespeed.com/doc/configuration) lub innych narzędzi automatyzujących ten proces po stronie serwera.
PS. Warto zachować oryginalne pliki JS, gdyż są łatwiejsze w edycji niż te zminifikowane.

Minifikacja kodu CSS

Zaobserwujmy, jak różni się niezminifikowany kod CSS od zminifikowanego.

Kod CSS przed minifiakcją

Fragment kodu CSS przed minifikacją

Kod CSS po minifikacji

Fragment kodu CSS po minifikacji

Jak minifikować kod CSS?

Minimalizowanie plików CSS można realizować podobnie do plików JS. Może to być zarówno minifier.org, purifycss.online, dedykowane wtyczki, jak i wysublimowane biblioteki, np. yuicompressor. Najważniejsze, by mieć wcześniej wykonaną kopię 😉
PS. Warto zachować oryginalne pliki CSS, gdyż je się łatwiej edytuje niż zminifikowane.

Minifikacja kodu HTML

Spójrzmy, jakie są różnice między niezminimalizowanym a zminimalizowanym kodem HTML.

Kod HTML przed minifikacją

Przykład kodu HTML pierwszej strony internetowej, która kiedykolwiek powstała (jej wierną kopię można znaleźć pod adresem: http://info.cern.ch/hypertext/WWW/TheProject.html) przed minifikacją.

pierwszej na świecie strony internetowej przed minifikacją

Kod HTML po minifikacji

Kod HTML pierwszej strony internetowej po minifikacji

Jak minifikować kod HTML?

Minimalizacja plików z kodem HTML jest trochę bardziej złożona niż kodu JS czy CSS. Wynika to z tego, że przed minifikacją warto dokonać innych operacji „ręcznych” odchudzających kod oryginalny. Warto się skupić zwłaszcza na tych, które też są pokazywane w audytach szybkości stron. Jest to na tyle obszerny temat,że zasługuje na osobny wpis, więc wymienię tylko kilka operacji, na które warto zwrócić uwagę przed „maszynową” minifikacją.

• Usunięcie komentarzy – zarówno z samego HTML, jak i komentarzy CSS i JS z tagów <style></style> oraz <script></script> osadzonych w kodzie.
• Redukcja drzewa DOM – często elementy HTML są osadzone jeden w drugim (jak rosyjskie Matrioszki) co samo w sobie nie jest złe, ale często użycie 5-6 elementów jeden w drugim, tylko po to, by na końcu wyświetlić jeden nagłówek, mija się z celem i jest niepotrzebnym kodem.
• Redukcja inline – opis wyglądu elementów można dodawać także poprzez: <div style=”tu-sobie-opisujemy-kolorki-rozmiary-i-takie-tam”>. Pomijając, że jest to zabieg przeczący koncepcji separacji struktury od warstwy wizualnej, jest to niepotrzebny opóźniający kod, który, zamiast wielokrotnego powielenia, mógłby zająć jedną – dwie linijki w pliku css.
• Korzystanie z adresów względnych w linkach – aby zajmowały mniej miejsca.
• Wiele innych zależnych od sytuacji, gdyż „TO ZALEŻY”.

PS. Warto zachować oryginalne pliki / szablony HTML, gdyż edytuje się je łatwiej niż zminifikowane.

Gulp Grunt UglifyJS i UglifyCSS

Automatyzacja jest powszechna wszędzie. Im większe potrzeby tym większa potrzeba automatyzacji procesów i większe zapotrzebowanie na narzędzia i wiedzę konieczną do wykorzystania. Tak samo jest w ramach minifikacji kodu. Popularnymi narzędziami automatyzującymi są wymienione w nagłówku: Gulp, Grunt, UglifyJS, UglifyCSS.
Zainteresowanych tym tematem zachęcam do googlowania rozwiązań. Natomiast tych, którzy wcześniej niewiele o tych narzędziach słyszeli, odsyłam do przykładowych tutoriali opisujących ich wykorzystanie w ramach minifikacji kodu:

• https://krzeminski.net/kursy-video/gulp-od-podstaw-kurs-video-dla-poczatkujacych/minifikacja-plikow-javascript-uglify/
• https://krzeminski.net/kursy-video/gulp-od-podstaw-kurs-video-dla-poczatkujacych/optymalizacja-i-minifikacja-plikow-html/

Podsumowanie

Okazuje się, że minimalizm ma uzasadnienie nie tylko w życiu codziennym, ale także w świecie marketingu internetowego. Warto zastanowić się nad tym, jak budować strony, aby nie były przeładowane i szybko się wczytywały. Zwłaszcza, że powyższe zmiany wpłyną nie tylko na SEO, potencjalne konwersje i sprzedaż, ale także na środowisko. Jak wspominałem wcześniej, czas to pieniądz. Minifikujesz pliki sam czy konsultujesz te zmiany ze swoimi technicznymi partnerami?