Minifikálás
A minifikálás a forráskódból eltávolítja a felesleges karaktereket, például a szóközöket, megjegyzéseket és a hosszú változóneveket, anélkül, hogy a funkcionalitás változna, csökkentve a fájlméretet a gyorsabb betöltés érdekében.
Amikor a fejlesztők kódot írnak, szóközöket, behúzásokat, beszédes változóneveket és megjegyzéseket használnak, hogy olvasható legyen. A böngészőknek ezekre nincs szükségük. A minifikálás eltávolítja ezeket az emberbarát elemeket a CSS-, JavaScript- és HTML-fájlokból, kisebb fájlokat eredményezve, amelyek gyorsabban töltődnek be és dolgozódnak fel.
Egy 500 KB-os JavaScript-fájl minifikálás után 150 KB-ra csökkenhet, ez 70%-os csökkenés. A CSS-minifikálás eltávolítja a megjegyzéseket, a szóközöket és a felesleges deklarációkat. Összevonhatja a rövidített tulajdonságokat, egyesítheti az azonos szelektorokat és eltávolíthatja a nem használt gyártói előtagokat.
A gyakorlatban
- Egy webalkalmazás JavaScript bundle-je minifikálás után 1,2 MB-ról 340 KB-ra, gzip tömörítés után pedig 95 KB-ra csökkent, 3G-n 1 másodperc alatt betöltődve
- Egy WordPress oldal telepített egy minifikáló bővítményt, és pusztán a CSS- és JS-minifikálástól 15 ponttal javította a PageSpeed Insights pontszámát
- Egy SaaS dashboard CSS-e minifikálatlanul 280 KB volt, minifikálás és a nem használt stílusok eltávolítása után 18 KB-ra csökkent, megszüntetve a renderelést blokkoló késleltetéseket
- Egy fejlesztő véletlenül minifikálatlan kódot telepített produkciós környezetbe, ami megduplázta az oldalbetöltési időket, a CI/CD folyamatukat frissítették, hogy ez ne fordulhasson elő újra
Nem biztos benne, hogy ez hogyan vonatkozik Önre?
Egy vezető mérnök bejárja az Ön webhelyét, keresési jelenlétét és azt, ahogyan a megkeresések eljutnak Önhöz, majd leírja az elsőként javítandó három dolgot. A dokumentumot mindenképpen megtartja.