Kódoptimalizálás a teljesítmény növeléséért

Kód újrahasznosítás. meglévő weboldalon

A Kód újrahasznosítás. akkor hasznos, ha egy weboldalon ugyanaz a működés, stílus vagy szerkezeti elem több helyen ismétlődik, és emiatt a rendszer lassabb, nehezebben javítható vagy átláthatatlan. A cél nem az, hogy mindent újra kelljen írni. Inkább az, hogy a meglévő kódból a felesleges ismétlések eltűnjenek, a közös részek külön kezelhetők legyenek, és az oldal kevesebb munkát adjon a böngészőnek.

Én azt látom, hogy sok magánügyfél csak akkor figyel fel erre, amikor a weboldal már érezhetően lassú. A gombok késve reagálnak. Egy aloldal nehezen tölt be. Egy apró módosítás után másik három helyen is hiba jelenik meg. Ilyenkor gyakran nem egy látványos új funkció hiányzik, hanem rendezettebb belső szerkezet. Egy tapasztalt fejlesztő ilyenkor átnézi a HTML, CSS és JavaScript részeket, és megkeresi azokat az ismétlődő blokkokat, amelyekből közös elem, sablon vagy újrahasználható megoldás készíthető.

Ez főleg kisebb és közepes oldalaknál fontos. Sok weboldal évek alatt nő meg. Először csak egy landing oldal készül, később jön több szolgáltatási oldal, kapcsolati űrlap, galéria, árlista, blog vagy ügyfélkapu. Minden bővítésnél bekerül pár új sor. Ez nem baj. De ha senki nem tartja rendben a kódot, a weboldal lassan szétesik belülről. Kívül még működik, de a fejlesztés egyre drágább és lassabb lesz.

Kód újrahasznosítása és sebesség

A kód újrahasznosítása nem csak fejlesztői kényelmi kérdés. A sebességre is hat. Ha ugyanaz a stílus, függvény vagy szerkezeti rész sokszor szerepel külön helyen, a fájlok nagyobbak lehetnek, a karbantartás nehezebb, és a hibák száma is nő. A látogató ebből annyit érzékel, hogy az oldal nem elég gyors vagy nem elég stabil.

Szerintem a legnagyobb érték itt a rend. Egy weboldal akkor lesz könnyebben gyorsítható, ha a szakember látja, mi miért van ott. Egy kusza fájlban nehéz eldönteni, melyik kódrész fontos, melyik ismétlés, és melyik maradt ott egy régi módosítás után. A rendezés után könnyebb tömöríteni a fájlokat, beállítani a gyorsítótárazást, leválasztani a felesleges részeket, vagy csak gyorsabban javítani egy hibát.

Volt olyan eset, amikor egy ügyfél egy egyszerű gyorsítási feladatot kért. Azt hitte, elég lesz pár képet tömöríteni. Az átnézésnél kiderült, hogy több aloldalon ugyanaz a megjelenési blokk külön-külön volt lemásolva, kisebb eltérésekkel. Egy gomb stílusa négy helyen, egy űrlapkezelés három helyen, egy régi animáció két változatban. Miután ezek közös részekbe kerültek, az oldal nem csak gyorsabb lett, hanem a későbbi módosítás is egyszerűbbé vált.

Újrahasznosítható kód árak

Az ár attól függ, mennyire kusza a meglévő oldal, milyen technológiával készült, és van-e hozzáférés a forrásfájlokhoz. Egy egyszerű CSS rendezés olcsóbb. Egy összetettebb JavaScript átszervezés már több időt kér. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert a szakember csak töröl vagy átmásol részeket, de nem érti meg a teljes működést.

Tapasztalatom szerint akkor lehet jól árazni, ha az ügyfél elküldi a weboldal linkjét, a hozzáférési módot, és röviden leírja, mi zavarja. Lassú betöltés, nehéz módosítás, sok hiba, régi kód, vagy bizonytalan működés. Ezek más-más munkát jelentenek. Egy magán fejlesztő általában először felmérést kér, mert látatlanban könnyű rossz árat mondani.

Fejlesztő választása kód újrahasznosításhoz

A fejlesztő választásánál nem az a legfontosabb, hogy valaki sok technológiai szót használjon. Fontosabb, hogy érthetően el tudja mondani, mit fog átnézni, mit nem fog bántani, és hogyan ellenőrzi a végeredményt. Egy jó szakember nem ígéri meg azonnal, hogy minden kétszer gyorsabb lesz. Előbb meg akarja nézni a jelenlegi állapotot.

Érdemes olyan magánszakembert keresni, aki kérdez. Milyen rendszerben készült az oldal. Van-e biztonsági mentés. Melyik részeket nem szabad megváltoztatni. Van-e tesztkörnyezet. Ki fogja később kezelni az oldalt. Ezek nem felesleges kérdések. Ezek védik az ügyfelet attól, hogy egy gyors javítás után fontos funkció romoljon el.

A Qjob.hu felületén ilyen online feladathoz érdemes röviden leírni a problémát, csatolni a mérések eredményét, és megadni, milyen hozzáférés adható. Ezután ezen az oldalon könnyebb olyan szabadúszót találni, aki nem általános tanácsot ad, hanem konkrétan a meglévő kódot tudja átnézni. Itt a portfólió mellett a korábbi ügyfélvélemények is sokat számítanak.

Online munkamenet és átadás

Az ilyen munka távolról is jól végezhető, ha a kommunikáció pontos. A szakembernek általában kell a weboldal címe, a jelenlegi panasz leírása, esetenként admin vagy tárhely hozzáférés, és jó esetben egy mentés. Nem mindig kell teljes hozzáférést adni az elején. Sokszor egy első vizsgálat link és mérési adatok alapján is elindulhat.

A folyamat többnyire felméréssel kezdődik. Ezután jön a duplikált és nehezen karbantartható részek azonosítása. Majd a fejlesztő javaslatot ad, mit érdemes közösíteni, mit kell meghagyni, és mit veszélyes bolygatni. A módosítás után tesztelni kell az érintett oldalakat. Nem elég az, hogy a kezdőlap betölt. Meg kell nézni az űrlapokat, menüket, gombokat, képeket, mobilnézetet és a fontos aloldalakat is.

A végeredmény átadása akkor korrekt, ha az ügyfél megkapja a módosított fájlokat vagy a leírást arról, mi változott. Nem kell hosszú műszaki dokumentáció minden kis munkához. De egy rövid összefoglaló hasznos. Később, ha másik fejlesztő dolgozik az oldalon, látni fogja, miért lett átrendezve a kód.

Gyakori hibák kódrendezés előtt

Sokan ott hibáznak, hogy csak a tünetet akarják eltüntetni. Lassú az oldal, ezért telepítenek még egy bővítményt. Nem működik egy gomb, ezért beillesztenek még egy kis kódot. Ezzel néha rövid távon javul valami, de hosszabb távon még több lesz az átfedés és a bizonytalanság.

A másik hiba a mentés hiánya. Kód újrahasznosítás előtt mindig kell biztonsági mentés. Ez nem bizalmatlanság a szakemberrel szemben. Ez alapfeltétel. Egy apró módosítás is okozhat nem várt hibát, ha a weboldal régi sablonra, régi bővítményre vagy kézzel beillesztett megoldásokra épül.

Van olyan ügyfél is, aki túl gyors eredményt vár. A kódrendezés nem mindig látványos a képernyőn. A gomb ugyanúgy néz ki, az űrlap ugyanott marad, a színek sem változnak. De belül tisztább lesz a rendszer. Ez később olcsóbb módosítást, kevesebb hibát és jobb teljesítményt hozhat. Szerintem ezt érdemes előre tisztázni, mert különben az ügyfél úgy érzi, nem történt elég munka.

Minőségi kód újrahasznosítása

A minőségi kód újrahasznosítása nem egyszerű másolás. Inkább átgondolt átszervezés. A fejlesztő megnézi, melyik rész ismétlődik valóban, melyik hasonlít csak látszólag, és hol kell külön kezelni az eltéréseket. Ez fontos, mert ha mindent erőszakkal közös elembe raknak, a rendszer merev lesz. Akkor egy későbbi apró változtatás megint nehézzé válik.

Jó jel, ha a szakember mérés előtt és után is ellenőrzi az oldalt. Nem minden gyorsulás jön közvetlenül az újrahasznosított kódból. De a tisztább szerkezet segít abban, hogy a többi optimalizálás jobban működjön. Kevesebb felesleges fájl, érthetőbb függvények, kevesebb ismételt stílus, rendezettebb sablonok. Ezek együtt adnak stabilabb alapot.

Magánügyfélként nem kell pontosan ismerni a fejlesztői fogalmakat. Elég tudni, milyen eredményt szeretne. Gyorsabb oldal, könnyebb módosítás, kevesebb hiba, átláthatóbb működés. A jó szabadúszó ezt le tudja fordítani konkrét munkára, és nem terheli az ügyfelet felesleges szakmai részletekkel. De a lényeget elmagyarázza.

A végén az a jó eredmény, amikor a weboldal nem csak gyorsabbnak tűnik, hanem kezelhetőbb is lesz. Nem minden látogató fogja megnevezni, mi változott. Csak kevesebbet vár, kevesebb hibával találkozik, és könnyebben használja az oldalt. A tulajdonos pedig legközelebb nem egy zavaros rendszerhez nyúl hozzá, hanem egy rendezettebb alaphoz.