Mi az a minifikáció?
2021. július 21. Blog, Segédlet
A gyors weboldalak előnyeiről már annyit írtam, hogy szinte félek ismételni magamat, de a téma kifogyhatatlan, a webdesign és a weboldalak karbantartásának az egyik legnagyobb technikai kihívása az oldal minél gyorsabb betöltésének a biztosítása.
Ahogy azt már rengetegszer leírtam, a gyors betöltés mindenkit boldoggá tesz: örül neki a felhasználó (és nem zárja be unottan a böngészőablakot, mielőtt bejönne a teljes tartalom), örül a keresőalgoritmus, és felpontozza az oldalt, örül a megbízó, mert szépen gurul az oldal, és minden napfényes.
Már több tippet is megosztottunk veletek itt a blogon arról, hogyan lehet felgyorsítani az oldalunkat, de a minifikációról még csak kevés szó esett. Mi is ez tulajdonképpen?
A minification mögött megbúvó alapvető gondolat a régi bölcsesség, miszerint sok kicsi sokra megy. Akármennyit is optimalizálsz, van egy dolog, amit sehogyan nem lehet kispórolni egy honlapból, ez pedig a kód, azaz a HTML, a CSS és a legtöbb estben a JavaScript. A minifikáció ötlete valójában annyira egyszerű, hogy az már-már gyermekded: a kódot jelentő fájlokat (amik lényegében sima txt-k puccos kiterjesztésekkel) úgy kell lekicsinyítenie, hogy azok a böngésző számára továbbra is olvashatóak maradjanak, ne kelljen semmilyen külön eszköz a csomagolásukhoz, de kevesebb helyet foglaljanak, mint normál állapotukban. Ezt úgy lehet a legjobban elérni, ha kiveszünk minden olyan elemet a kódból, ami csak az emberi szem számára van odarakva, azaz a szóközt és a soremelést.
Ez persze szentségtörésnek tűnhet azután, hogy mennyi időt tölt az ember azzal, hogy megtanulja, hogy hogyan is néz ki a szép kód, mit kell beljebb húzni és mennyivel, hová és mennyit kell kommentelni, de a cél szentesíti az eszközt, és bizony a minifikált kódok meglepően sok kilobájtot tudnak megspórolni – ráadásul a weboldal azon részében, amihez legelőször nyúl a böngésző, és aminek a lehető leggyorsabban kell betöltődnie, hogy egyáltalán bármi történjen.
Természetesen rengeteg minifikációs plugint találhatsz a kedvenc kódszerkesztődhöz, legyen az a Brackets, a Notepad++ vagy bármi, ez a képesség ma már kikerülhetetlen. Ha mégis manuálisan szeretnéd elvégezni a munkát, kézzel is kitörölhetsz egyenként minden entert, de jobban jársz, ha a számos online minifikátor egyikét használod, mint pl. ezeket:
Ezek után, gondolom, magától értetődő, hogy a WordPresshez (ahol aztán valóban rengeteg elemet kell betölteni a rendszernek minden egyes oldalhoz) szintén számtalan minifikációs plugint találhatsz pillanatok alatt, bár ezek általában komplexebb gyorsítómegoldások részét képezik, cache-sel, Lazy Loaddal és hasonló finomságokkal összekombinálva.