Szöveg / HTML arány

SEO-szempontból

A kereső minden letöltésre erőforrást költ. Ha 900 KB HTML-ből 20 KB a szöveg, a maradékot feleslegesen töltötte le. Nagy oldalaknál ez a crawl-büdzsét viszi el.

AI-értelmezhetőség

Egy nyelvi modell tokenekben dolgozik. A beágyazott CSS és a JSON-halmazok is tokent esznek. Minél több a kód, annál kevesebb hely marad a lényegre. Ez a leggyakoribb ok, amiért egy jól megírt szolgáltatásoldal mégsem jelenik meg az AI-válaszokban.

Üzletileg

A felesleges kód lassabb oldalt jelent. A lassabb oldal kevesebb konverziót hoz mobilon. A kódtisztítás egyszerre javítja a sebességet, a tokenhatékonyságot és a karbantarthatóságot.

• Minden HTML-alapú oldalra vonatkozik, ahol a tartalom szöveg: blog, szolgáltatásoldal, termékoldal, dokumentáció.
• Webshopoknál kiemelten: a terméklisták sok markupot és kevés szöveget tartalmaznak, ez természetes.
• Nem vonatkozik egyoldalas alkalmazásokra, belépés mögötti felületekre, API-válaszokra.
• Kivétel a képgaléria, a portfólió és a landing oldal. Ott a vizuális elem a tartalom, az alacsony arány nem hiba.
• Staging és fejlesztői környezet esetén érdemes kihagyni a mérést, mert a build nélküli kód torzít.

1. Nyisd meg az oldalt, és kérd le a nyers forrást: Ctrl+U vagy curl -s https://pelda.hu/ -o oldal.html. A devtools Elements panelje nem jó, mert az a renderelt DOM-ot mutatja.
2. Nézd meg a fájl méretét: wc -c oldal.html. Ez a teljes HTML.
3. Számold ki a tagek nélküli szöveg méretét a technikai példában látható szkripttel.
4. Oszd el a kettőt. A kapott szám a szöveg / HTML arány.
5. Ellenőrizd a devtools Network fülén a fő dokumentum sorát. Ott látod a valódi átvitt méretet tömörítés után is.

Jó jel

• Az arány 5 százalék felett van.
• A HTML-ben alig van <style> és <script> blokk.
• A fő szöveg a forrás első harmadában megjelenik.

Rossz jel

• Az arány 2 százalék alatt marad.
• Több tízezer karakternyi inline stílus van a <head>-ben.
• A <body> majdnem üres, mindent JavaScript tölt be.
• Base64-ben beágyazott képek duzzasztják a fájlt.

WordPress

1. Nézd meg, melyik plugin tol be inline CSS-t. A sminkgyűjtő bővítmények a fő gyanúsítottak.
2. Kapcsold ki a nem használt page builder modulokat.
3. Használj kritikus CSS-t a <head>-ben, a többit külső fájlba tedd.
4. Tiltsd le a fel nem használt blokk-stíluslapokat.
5. Kapcsold be a tömörítést, lásd tömörítés (gzip, brotli).

Shopify

1. A témában keresd a {% style %} blokkokat, és vidd át őket a theme.css fájlba.
2. Töröld a már nem használt appok maradék snippetjeit a theme.liquid fájlból.
3. A terméklistákon csökkentsd a rejtett variáns-markupot.

Unas

1. A sablonszerkesztőben nézd át az egyedi HTML-blokkokat, gyakran ottragad a régi stílus.
2. A külső beépülő kódokat tedd a lap aljára.
3. Bővítsd a kategórialeírásokat valódi szöveggel.

Shoprenter

1. Az adminban a Megjelenés résznél ellenőrizd az egyedi CSS-t.
2. A termékoldali sablonokból vedd ki a nem használt blokkokat.
3. A kategóriaszövegeket írd meg, ne hagyd üresen.

Egyedi fejlesztés

1. Vidd külső fájlba a stílust és a szkriptet, a böngésző így cache-elni tudja.
2. Kerüld a base64-es képbeágyazást a HTML-ben.
3. Ha szerveroldali renderelést használsz, ellenőrizd a hidratációs adatcsomag méretét.
4. Ha a HTML rendben van, de az arány alacsony, a tartalommal van baj. Nézd meg a fő tartalom arányát is.

• Szövegtöltelék az arány kedvéért: rejtett vagy semmitmondó bekezdéseket raknak be, ami vékony tartalomként üt vissza.
• A renderelt DOM mérése: a devtools Elements panelje mást mutat, mint a robotnak kiszolgált nyers HTML.
• Minden CSS beágyazása a head-be: a kritikus CSS pár kilobájt, nem 200.
• Base64 képek a HTML-ben: felduzzasztják a fájlt, és cache-elni sem lehet őket.
• Az arány célértékként kezelése: nincs hivatalos küszöb, a szám csak jelzés.
• Kikapcsolt tömörítés: a szöveges tartalom gzip nélkül sokszorosára nő az átvitelben.
• Régi appok maradék kódja: évekkel ezelőtt törölt bővítmények scriptjei maradnak a sablonban.

Az arány kiszámolása parancssorból, külső eszköz nélkül:

curl -s https://pelda.hu/ -o oldal.html
python3 - <<'PY'
import re
h = open('oldal.html', encoding='utf-8', errors='ignore').read()
t = re.sub(r'<(script|style)[^>]*>.*?</\1>', ' ', h, flags=re.S|re.I)
t = re.sub(r'<[^>]+>', ' ', t)
t = ' '.join(t.split())
print('HTML:', len(h), 'szoveg:', len(t), 'arany:', round(len(t)/len(h)*100, 1), '%')
PY

A tipikus rossz minta: rengeteg inline stílus, alig szöveg.

<div style="display:flex;padding:24px;margin:0 auto;max-width:1180px;background:#fff">
  <span style="font-size:14px;line-height:1.6;color:#333;letter-spacing:.2px">Rólunk</span>
</div>

Ugyanez osztályokkal, külső stíluslappal. A szöveg ugyanannyi, a kód töredéke.

<div class="wrap"><span class="lead">Rólunk</span></div>