Barion Pixel
Segédlet

Mi az a minifikáció?

2021. július 21. | Bognár Péter

# # # # # # # #

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.

CSS kód minifikáció előtt, 429 sor, 7,85 Kb
CSS kód minifikáció után, 1 sor, 5,06 Kb

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:

HTML Minifier

CSS Minifier

Javascript Minifier

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. 

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet SEO a Google-ön kívül?

SEO a Google-ön kívül?

2021. július 29.

A SEO (keresőoptimalizálás, Search Engine Optimization) kikerülhetetlen része a webdesignnak, egyszerűen muszáj gondolni rá, hogy az oldalunk kódja megfelelően kedvében járjon a keresőalgoritmusnak meg az ő pici robotjainak. Ha viszont SEO-ról beszélünk, nem is kérdés, hogy melyik is az a keresőmotor, amire mindenki gondol – hát persze, hogy a Google az, akitől kizárólag várhatjuk sorsunk […]

Tovább a cikkre