Egyik ügyfelünk weboldala tipikus példája volt annak, amit minden tapasztalt webes szakember ismer:
- 10 éve vásárolt WordPress sablon,
- telepakolva jQuery pluginekkel (régi, külső kódok, amik régen divatosak voltak, de ma már feleslegesek),
- több száz kihasználatlan CSS osztály (ezek a kinézetet leíró kódrészletek, de nagy részük sosem volt használva),
- és közel 1 megabájtnyi CSS és JavaScript kód minden oldalbetöltésnél.
A végeredmény? Lassú oldal, nehezen karbantartható kód, és folyamatos frusztráció.
Az első lépés: rendrakás
Először is megnéztük, mire van ténylegesen szükség.
- A jQuery pluginek nagy részét senki nem használta → mentek a kukába.
- A megmaradt funkciókat vanilla JS-ben írtuk újra (ez a “sima, nyers JavaScript”, amihez nem kell külső könyvtár).
- Így a teljes jQuery-t ki lehetett dobni, és az oldal könnyebb lett.
CSS diéta
A sablonban rengeteg felesleges stílus volt.
- PurgeCSS nevű eszközzel kiszűrtük a nem használt kódokat (ez figyeli, hogy a honlapon ténylegesen melyik formázás van használatban, és a többit törli).
- A maradékot minify-oltuk, vagyis összetömörítettük, hogy kevesebb helyet foglaljon.
Statikussá alakítás - gyorsaság és biztonság egyben
A WordPress eredetileg úgy működik, hogy minden egyes oldalbetöltéskor a szerver lefuttat egy PHP szkriptet, lekérdezéseket végez az adatbázisban, és ezekből rakja össze az oldal HTML-jét. Ez jó megoldás volt régen, de mára több gond is adódik belőle:
- minden betöltésnél sok felesleges művelet történik, ami lassít,
- minden egyes lekérdezés potenciális támadási felületet jelent (pl. SQL injection, brute force belépési kísérletek, plugin sebezhetőségek). Mi a Simply Static nevű eszközt használtuk, amivel a WordPress oldal tartalmát statikus HTML-fájlokként exportáltuk. Ez azt jelenti, hogy a látogatók már nem egy élő, háttérben futó adatbázishoz és PHP-motorhoz férnek hozzá, hanem előre legenerált, kész oldalakat kapnak.
Mi változott ezzel?
- Nincs futó PHP és adatbázis: a szerver nem számol semmit, csak kiszolgálja a kész fájlokat. Ez nagyságrendekkel gyorsabb.
- Kevesebb hibalehetőség: ha nincs futó kód, nincs mit “feltörni”. A hackerek hiába keresnek bejelentkezési oldalt vagy sebezhető plugint, egyszerű HTML fájlokat találnak.
- Nincs plugin kockázat: a régi WordPress egyik legnagyobb gyenge pontja a pluginokban rejlő biztonsági rés. Statikus módban ezek egyszerűen megszűnnek létezni a frontend számára.
- DDoS támadás ellen is jobb: mivel az oldal csak kész fájlokat szolgál ki, egy nagyobb forgalom sem rogyasztja le olyan könnyen, mint egy élő adatbázisra épülő rendszert.
Az admin megmaradt
Fontos: az ügyfélnek nem tűnt el a WordPress admin felülete. Továbbra is ugyanott, ugyanúgy tud új blogcikket, termékleírást vagy hírt írni. A különbség annyi, hogy a módosítás után a Simply Static újragenerálja a statikus fájlokat, és azok kerülnek ki a látogatóknak.
Miért jó ez az ügyfélnek?
- Villámgyors oldal → a felhasználók azonnal látják, amit keresnek, nincs várakozás.
- Biztonságosabb üzemeltetés → a támadások 90%-a WordPress bejelentkezési oldal, PHP vagy plugin sebezhetőség ellen irányul. Ezek itt megszűnnek.
- Alacsonyabb fenntartási költség → nincs szükség drága, nagy teljesítményű tárhelyre, mert a statikus fájlokat akár egy CDN is kiszolgálja.
Képek optimalizálása
A képfájlokat WebP formátumba konvertáltuk. Ez a modern képformátum jóval kisebb méretet ad, mint a JPG vagy PNG, minőségromlás nélkül.
A számok magukért beszélnek
Az oldal ma már pillanatok alatt betölt, nem terheli a szervert, és a Google PageSpeed értékei is a zöld zónában vannak.
| Mérés | Előtte | Utána |
|---|---|---|
| PageSpeed Mobil | 55 | 96 |
| PageSpeed Desktop | 72 | 100 |
| JavaScript méret (kB) | 500 | 12 |
| CSS méret (kB) | 450 | 79 |
| Képek mérete (%) | 100 | 30 |
Megjegyzés: PageSpeed-nél a magasabb jobb; fájlméreteknél az alacsonyabb jobb.
Tanulság: egy régi WordPress sablon is kaphat új életet. Ha a felesleget kipucoljuk, a kódot modernizáljuk és statikussá tesszük, akkor a WordPress admin kényelme megmarad, de a frontend egy villámgyors, modern weboldal lesz.
Ha kíváncsi vagy, hogyan lehetne a te weboldaladból is gyorsabb, biztonságosabb és felhasználóbarátabb, keress minket bátran! Szívesen megvizsgáljuk az oldaladat, és megmutatjuk, milyen lépésekkel tudna igazán modern weboldallá válni.