A Google komoly hat\u00e1ssal van a weboldalakra, azok megjelen\u00e9s\u00e9re, hiszen a keres\u0151optimaliz\u00e1l\u00e1s sok weboldal sz\u00e1m\u00e1ra el\u0151l \u00e1ll a priorit\u00e1si list\u00e1n: ha j\u00f3 helyen akarnak szerepelni, a weboldalukkal igazodniuk kell a Google elv\u00e1r\u00e1saihoz. <\/p>\n\n\n\n
Hab\u00e1r a weboldalak felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nye m\u00e1r eddig is hat\u00e1ssal volt egy weboldal rangsorol\u00e1s\u00e1ra, ez most egy m\u00e9rhet\u0151 elemmel is b\u0151v\u00fcl, miut\u00e1n a core web vitals, vagyis magyarul a webes vitals-mutat\u00f3k – illetve az abb\u00f3l k\u00e9pzett oldal\u00e9lm\u00e9ny – rangsorol\u00e1si t\u00e9nyez\u0151v\u00e9 l\u00e9pett el\u0151. Vagyis mostant\u00f3l objekt\u00edv m\u00e9r\u0151sz\u00e1mok mutatj\u00e1k, hogy a Google szerint mennyire j\u00f3 a weboldal-\u00e9lm\u00e9nyed.<\/p>\n\n\n\n A webes vitals-mutat\u00f3k jelzik egy weboldal interaktivit\u00e1s\u00e1nak gyorsas\u00e1g\u00e1t, reszponzivit\u00e1s\u00e1t, stb. Ha egy weboldal nem felel meg a Google sztenderdjeinek, akkor az negat\u00edv hat\u00e1ssal lesz a helyez\u00e9s\u00e9re. <\/p>\n\n\n\n A core web vitals mutat\u00f3k fogalma egy\u00e9bk\u00e9nt m\u00e9g azok sz\u00e1m\u00e1ra is \u00faj lehet, akik az\u00e9rt \u00e9rint\u0151legesen odafigyeltek a weboldaluk teljes\u00edtm\u00e9ny\u00e9re, sebess\u00e9g\u00e9re. Teh\u00e1t k\u00fcl\u00f6nb\u00f6z\u0151 eszk\u00f6z\u00f6kkel m\u00e9rt\u00e9k \u00e9s elemezt\u00e9k a sebess\u00e9get, a weboldal m\u00e9ret\u00e9t, is igyekeztek is azt optimaliz\u00e1lni.<\/p>\n\n\n\n Ugyanakkor az, hogy egy weboldal j\u00f3 teljes\u00edtm\u00e9nyt mutat valamely sebess\u00e9g-teszten, p\u00e9ld\u00e1ul a GTmetrixen, egy\u00e1ltal\u00e1n nem jelenti azt, hogy j\u00f3 webes vitals-mutat\u00f3kkal fog rendelkezni<\/strong>, s\u0151t nem felt\u00e9tlen\u00fcl fog megfelelni a mobilra el\u0151\u00edrt sztenderdeknek. <\/p>\n\n\n\n A webes vitals-mutat\u00f3k val\u00f3s, felhaszn\u00e1l\u00f3-k\u00f6zpont\u00fa m\u00e9r\u0151sz\u00e1mok, melyek megpr\u00f3b\u00e1lj\u00e1k adatk\u00e9nt megjelen\u00edteni a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, legal\u00e1bbis annak sebess\u00e9gre vonatkoz\u00f3 r\u00e9sz\u00e9t. M\u00e9ri a bet\u00f6lt\u00e9si id\u0151t, az interaktivit\u00e1st \u00e9s a tartalom stabilit\u00e1s\u00e1t bet\u00f6lt\u00e9s k\u00f6zben. Ugyanakkor ezek a core web vitals mutat\u00f3k nincsenek k\u0151be v\u00e9sve, ami azt jelenti, hogy \u00e9vr\u0151l \u00e9vre v\u00e1ltozhatnak att\u00f3l f\u00fcgg\u0151en, hogy mit v\u00e1r a felhaszn\u00e1l\u00f3 egy j\u00f3 weboldalt\u00f3l.<\/p>\n\n\n\n Ezen grafika alapj\u00e1n tal\u00e1n k\u00f6nnyebben \u00e9rthet\u0151, mir\u0151l is sz\u00f3l:<\/p>\n\n\n Mint l\u00e1that\u00f3, az oldal\u00e9lm\u00e9ny rangsorol\u00e1si t\u00e9nyez\u0151be a webes vitals-jelz\u00e9sen t\u00fal beletartozik a mobilbar\u00e1ts\u00e1g, A Google mindenesetre a webes vitals-mutat\u00f3kkal r\u00e1k\u00e9nyszer\u00edti a weboldal-tulajdonosokat arra, hogy valamelyik eszk\u00f6z\u00e9t haszn\u00e1lj\u00e1k, ha a weboldaluk teljes\u00edtm\u00e9ny\u00e9t, sebess\u00e9g\u00e9t szeretn\u00e9k optimaliz\u00e1lni.<\/p>\n\n\n\n <\/p>\n\n\n\n A Google 2021. augusztus 4-\u00e9n jelentette be<\/a>, hogy elt\u00e1vol\u00edtja az oldal\u00e9lm\u00e9nyb\u0151l a biztons\u00e1gos b\u00f6ng\u00e9sz\u00e9s jelz\u00e9st. Ha feljebb megn\u00e9zed a Google \u00e1br\u00e1j\u00e1t, akkor l\u00e1tod, hogy \u00f6sszesen 7 jelz\u00e9st tartalmaz, k\u00f6zte a „Safe Browsing”-ot. A most k\u00f6zz\u00e9tett \u00e1br\u00e1n ez m\u00e1r hi\u00e1nyzik:<\/p>\n\n\n\n A Google a l\u00e9p\u00e9st azzal magyar\u00e1zta, hogy r\u00e1j\u00f6ttek, a biztons\u00e1gos b\u00f6ng\u00e9sz\u00e9s kapcs\u00e1n felmer\u00fcl\u0151 probl\u00e9m\u00e1kra nincs mindig r\u00e1hat\u00e1sa a weboldaltulajdonosoknak<\/em>. A weboldalak ugyanis id\u0151nk\u00e9nt k\u00fcls\u0151 felek k\u00e1ros tev\u00e9kenys\u00e9geinek esnek \u00e1ldozatul. A Google ett\u0151l m\u00e9g persze jelezni fogja a Search Console-ban, ha ilyen probl\u00e9ma felmer\u00fcl, csak \u00e9pp nem jelenik meg az oldal\u00e9lm\u00e9ny jelent\u00e9sben, illetve nem befoly\u00e1solja a rangsorol\u00e1sod. <\/p>\n\n\n\n A l\u00e9p\u00e9s teh\u00e1t mindenk\u00e9ppen pozit\u00edv a weboldaltulajdonosok sz\u00e1m\u00e1ra, hiszen eggyel kevesebb probl\u00e9ma miatt kell agg\u00f3dniuk. Ugyanakkor \u00fagy n\u00e9z ki, hogy az egyik megl\u00e9v\u0151 sz\u00e1m helyett a k\u00f6zelj\u00f6v\u0151ben egy \u00faj webes vitals mutat\u00f3 is megjelenhet, melyr\u0151l itt \u00edrtunk b\u0151vebben<\/a><\/strong>.<\/p>\n\n\n\n A Google egy \u00faj, teljesebb, a gyors interaktivit\u00e1st kifejez\u0151 mutat\u00f3t is hozz\u00e1 szeretne adni a webes vitals mutat\u00f3khoz, mik\u00f6zben az els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9st, vagyis a First Input Delayt (FID) feltehet\u0151en elt\u00e1vol\u00edtan\u00e1 – \u00edrtuk m\u00e9g 2022-ben. Mint egy m\u00e1jusi Google I\/O-n kider\u00fclt: az INP-r\u0151l (Interaction to Next Paint) lenne sz\u00f3<\/a>, mely a felhaszn\u00e1l\u00f3i interakci\u00f3kra adott \u00e1tfog\u00f3 reakci\u00f3k\u00e9szs\u00e9get, reszponzivit\u00e1st m\u00e9ri.<\/p>\n\n\n\n 2023. m\u00e1jus 10-\u00e9n azt\u00e1n a Google bejelentette szint\u00e9n egy Google I\/O-n, hogy k\u00eds\u00e9rleti szakaszb\u00f3l „f\u00fcgg\u0151” \u00e1llapot\u00fa webes vitals mutat\u00f3v\u00e1 l\u00e9pett el\u0151 az INP.<\/strong><\/p>\n\n\n\n Azt is hozz\u00e1f\u0171zt\u00e9k magyar\u00e1zatk\u00e9nt, hogy ez a v\u00e1ltoz\u00e1s azt jelzi, hogy az INP ugyan k\u00e9szen \u00e1ll a FID lev\u00e1lt\u00e1s\u00e1ra, de egyel\u0151re m\u00e9g nem \u00e9lesedik. Adnak ugyanis egy kis id\u0151t az alkalmazkod\u00e1sra, \u00e9s majd csak 2024 m\u00e1rcius\u00e1ban lesz az INP-b\u0151l webes vitals mutat\u00f3<\/strong>. Ugyanakkor a Search Console-ban m\u00e9g az id\u00e9n megjelenik, \u00edgy lehet ismerkedni vele.<\/p>\n\n\n\n De mi\u00e9rt is van erre sz\u00fcks\u00e9g? Ennek kapcs\u00e1n \u00e9rdemes egy pillant\u00e1st vetni egy kor\u00e1bbi HTTPArchive Almanac cikkre<\/a>, mely a CMS-ek haszn\u00e1lat\u00e1val foglalkozott. Ennek szerz\u0151je r\u00e1mutatott, hogy gyakorlatilag valamennyi tartalomkezel\u0151 rendszer kiv\u00e1l\u00f3 pontsz\u00e1mot \u00e9r el a FID eset\u00e9ben, a Google \u00e9ppen ez\u00e9rt dolgozik az \u00faj m\u00e9r\u0151sz\u00e1mon, mellyel lecser\u00e9lheti a m\u00e1ra \u00e9rtelmetlenn\u00e9 v\u00e1lt FID-t.<\/p>\n\n\n\n Amit \u00e9rdemes tudni ezzel kapcsolatban, hogy a HTTPArchive minden \u00e9vben k\u00f6zz\u00e9tesz n\u00e9h\u00e1ny cikket a web \u00e1llapot\u00e1r\u00f3l. A vonatkoz\u00f3 cikk 16. fejezete a tartalomkezel\u0151 rendszerekr\u0151l (CMS) sz\u00f3lt, \u00e9s a cikket a Google t\u00f6bb szakembere is vizsg\u00e1lta. Ennek egy fontos pontja \u00e9rintette az els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s nev\u0171 m\u00e9r\u0151sz\u00e1mot, mint olyan mutat\u00f3t, mely m\u00e1r elvesztette az \u00e9rtelm\u00e9t.<\/p>\n\n\n\n A FID azt az id\u0151t mutatja, am\u00edg egy interakt\u00edv elem reszponz\u00edvv\u00e1 v\u00e1lik. Azt ugyanakkor nem mutatja, hogy a weboldal milyen gyorsan tud reag\u00e1lni a felhaszn\u00e1l\u00f3 kattint\u00e1s\u00e1ra. <\/p>\n\n\n\n Azt pedig tal\u00e1n tapasztalatb\u00f3l is tudjuk, hogy a n\u00e9pszer\u0171 CMS-ek sz\u00e1m\u00e1ra, mint p\u00e9ld\u00e1ul a WordPress vagy a Drupal<\/a>, nem szokott gondot okozni a v\u00e1lasz sebess\u00e9ge, vagyis nem kell m\u00e1sodpercekig v\u00e1rakozni egy gombra.<\/p>\n\n\n\n A CMS-ek, k\u00fcl\u00f6n\u00f6sen a WordPress, egyel\u0151re ugyan nem teljes\u00edtenek olyan j\u00f3l a webes vitals mutat\u00f3kat tekintve, ugyanakkor nem a FID az a m\u00e9r\u0151sz\u00e1m, ahol el szoktak v\u00e9rezni: a cikk szerint a legt\u00f6bb CMS kiv\u00e9telesen j\u00f3l teljes\u00edt ezt a mutat\u00f3t tekintve. Desktopon gyakorlatilag mindegyik 100 sz\u00e1zal\u00e9kot \u00e9r el, m\u00edg mobilon 90 sz\u00e1zal\u00e9k felett j\u00e1rnak, kiv\u00e9ve egy-kett\u0151 CMS, k\u00f6z\u00f6tt\u00fck a Jooml\u00e1t, mely 85 sz\u00e1zal\u00e9kot szerzett.<\/p>\n\n\n\n Viszont, ha mindenki j\u00f3l hoz egy mutat\u00f3t, akkor az azt is jelenti, hogy nincs sok \u00e9rtelme a l\u00e9t\u00e9nek, hiszen a c\u00e9lk\u00e9nt kit\u0171z\u00f6tt \u00e9rt\u00e9ket m\u00e1r mindenki el\u00e9rte.<\/p>\n\n\n\n A Google ez\u00e9rt ink\u00e1bb a reszponzivit\u00e1sra \u00e9s a v\u00e1laszk\u00e9s\u00e9sre pr\u00f3b\u00e1lt meg m\u00e9r\u0151sz\u00e1mot kre\u00e1lni. A Chrome csapata egy olyan cikket tett k\u00f6zz\u00e9<\/a>, melyben a jobb reszponzivit\u00e1st jelz\u0151 m\u00e9r\u0151sz\u00e1m kapcs\u00e1n fejtett\u00e9k ki gondolataikat. A m\u00e1r eml\u00edtett 2022. m\u00e1jusi Google I\/O-n azt\u00e1n mindezt \u00e9l\u0151sz\u00f3ban is elmondt\u00e1k<\/a>. <\/p>\n\n\n\n Michal Mocny itt elmondta, hogy az INP egy eg\u00e9sz-oldalas \u00e9letciklus-mutat\u00f3, csak\u00fagy, mint a CLS. Ez azt jelenti, hogy nem csak az els\u0151 interakci\u00f3t m\u00e9ri, hanem az \u00f6sszeset. Vagyis nem egyszer\u0171en bet\u00f6lt\u00e9si reakci\u00f3k\u00e9szs\u00e9gr\u0151l van sz\u00f3, hanem a fut\u00e1s sor\u00e1n tapasztalhat\u00f3 reszponzivit\u00e1sr\u00f3l.<\/p>\n\n\n\n A legfontosabb az \u00faj mutat\u00f3val kapcsolatban tal\u00e1n az, hogy nem egyetlen interakci\u00f3t m\u00e9r, hanem egyedi interakci\u00f3k csoportj\u00e1t, melyek r\u00e9szei a felhaszn\u00e1l\u00f3i cselekv\u00e9snek a weboldalon.<\/p>\n\n\n\n Egy 2021 j\u00fanius\u00e1ban megjelent Web.dev cikkb\u0151l<\/a> kider\u00fcl, hogy melyek a c\u00e9ljai az \u00faj m\u00e9r\u0151sz\u00e1mnak:<\/p>\n\n\n\n Ezzel teh\u00e1t egy sz\u00e9lesebb jelent\u00e9ssel b\u00edr\u00f3 m\u00e9r\u0151sz\u00e1m j\u00f6het l\u00e9tre a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyre vonatkoz\u00f3an. <\/p>\n\n\n\n A Chrome fejleszt\u0151i k\u00e9t megk\u00f6zel\u00edt\u00e9sen gondolkodtak az interakci\u00f3-k\u00e9s\u00e9s m\u00e9r\u00e9s\u00e9n\u00e9l. Az egyik a maxim\u00e1lis esem\u00e9ny-id\u0151tartam, a m\u00e1sik a teljes esem\u00e9ny-id\u0151tartam. Az els\u0151 azt jelenti, hogy egy interakci\u00f3 t\u00f6bb esem\u00e9nyb\u0151l \u00e1ll, melyek elt\u00e9r\u0151 id\u0151tartam\u00faak, \u00e9s a m\u00e9r\u0151sz\u00e1m a csoportban el\u0151fordul\u00f3 leghosszabb id\u0151tartamot m\u00e9rn\u00e9. A teljes esem\u00e9ny-id\u0151tartam pedig azt az id\u0151t jelent, mely alatt valamennyi csoportba tartoz\u00f3 esem\u00e9ny lezajlik.<\/p>\n\n\n\n Az INP az a m\u00e9r\u0151sz\u00e1m lett, mely az oldal teljes interakci\u00f3s k\u00e9s\u00e9s\u00e9t fejezi ki az\u00e1ltal, hogy kiv\u00e1lasztja a leghosszabb interakci\u00f3t, mely egy felhaszn\u00e1l\u00f3i l\u00e1togat\u00e1s sor\u00e1n el\u0151fordul. Ha egy weboldalon 50-n\u00e9l kevesebb az interakci\u00f3, akkor az INP az az interakci\u00f3 lesz, melynek a legrosszabb a k\u00e9sleltet\u00e9se. Az INP-r\u0151l r\u00e9szletesen itt olvashatsz<\/a>. <\/p>\n\n\n\n Leegyszer\u0171s\u00edtve: az INP akkor lesz gyenge, ha valaki kattint a weboldaladon egy elemre, majd sokat kell v\u00e1rnia, hogy a kattint\u00e1snak valami eredm\u00e9nye legyen<\/strong>. Ilyen lehet az, amikor egy term\u00e9ket beraksz a kos\u00e1rba egy web\u00e1ruh\u00e1zban, vagy amikor egy navig\u00e1ci\u00f3s men\u00fct megnyitsz, vagy egy bejelentkez\u00e9si \u0171rlapot hiteles\u00edt a szerver. N\u00e9h\u00e1ny interakci\u00f3 persze hosszabb id\u0151t vesz ig\u00e9nybe, ugyanakkor az \u00f6sszetett interakci\u00f3kn\u00e1l is fontos, hogy gyorsan mutassanak valamilyen vizu\u00e1lis visszajelz\u00e9st<\/strong>, mely alapj\u00e1n a felhaszn\u00e1l\u00f3 azt \u00e9rz\u00e9keli, hogy valami t\u00f6rt\u00e9nik.<\/p>\n\n\n\n Ha ugyanis a felhaszn\u00e1l\u00f3 kattint egy interakt\u00edv elemre, de nem t\u00f6rt\u00e9nik semmi, akkor az gyenge felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt jelez. Amikor egy hossz\u00fa feladat miatt a felhaszn\u00e1l\u00f3 t\u00f6bbsz\u00f6r is kattint egy elemre, mert semmilyen visszajelz\u00e9st nem kap, csak jelent\u0151s k\u00e9s\u00e9ssel, akkor ott t\u00f6nkrement a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny, a rendszer k\u00e9sve reag\u00e1l, \u00e9s mondjuk a t\u00f6bbsz\u00f6ri kattint\u00e1s miatt a felhaszn\u00e1l\u00f3 lesi, hogy mik\u00f6zben nem csin\u00e1l semmit egy adott gomb reag\u00e1l (p\u00e9ld\u00e1ul lecsuk vagy kinyit egy men\u00fct). <\/p>\n\n\n\n Az INP-t milliszekundumokban m\u00e9ri a Google:<\/p>\n\n\n\n Annak \u00e9rdek\u00e9ben, hogy fel tudj k\u00e9sz\u00fclni a FID-r\u0151l INP-re t\u00f6rt\u00e9n\u0151 v\u00e1lt\u00e1sra, a Google 2023 j\u00fanius\u00e1ban elind\u00edtotta az INP-jelent\u00e9st a Search Console-ban.<\/p>\n\n\n\n A jelent\u00e9st a Webes vitals mutat\u00f3k r\u00e9szn\u00e9l tal\u00e1lod (ha a bal oldali men\u00fcben leg\u00f6rgetsz), majd kattint\u00e1s ut\u00e1n az oldal alj\u00e1n l\u00e1thatod az \u00e9rt\u00e9keket, de ha ide kattintasz<\/a>, \u00e9s megadod a tulajdont, akkor szint\u00e9n ide jutsz. A Google egy\u00e9bk\u00e9nt itt jelzi is, hogy „2024 m\u00e1rcius\u00e1ban az INP a Core Web Vitals r\u00e9szek\u00e9nt a FID hely\u00e9be l\u00e9p. Tov\u00e1bbi inform\u00e1ci\u00f3 arr\u00f3l, hogy hogyan teljes\u00edt webhelye az \u00faj INP-probl\u00e9m\u00e1k t\u00e1bl\u00e1zata szolg\u00e1ltat\u00e1ssal.”<\/em> <\/p>\n\n\n\n Ha nincs semmi gond a weboldaladdal, akkor egy \u00fcres fel\u00fclettel fogsz tal\u00e1lkozni a t\u00e1bl\u00e1zat helyett, azzal a sz\u00f6veggel, hogy <\/p>\n\n\n\n „Nem \u00e9szlelhet\u0151 INP-probl\u00e9ma Ha viszont probl\u00e9m\u00e1k vannak, akkor a t\u00e1bl\u00e1zat le\u00edrja, hogy h\u00e1ny URL eset\u00e9ben rossz a teljes\u00edtm\u00e9ny, esetleg, hogy „jav\u00edt\u00e1s sz\u00fcks\u00e9ges”<\/em>. 500 ms felett rossz teljes\u00edtm\u00e9nyr\u0151l besz\u00e9l a Google, 200-500 k\u00f6z\u00f6tt jav\u00edt\u00e1s sz\u00fcks\u00e9ges, m\u00edg 200 ms alatt van rendben az oldal. <\/p>\n\n\n\n Ha nem vagy 200 ms alatt az oldalaiddal, akkor van m\u00e9g n\u00e9h\u00e1ny h\u00f3napod arra, hogy 2024 m\u00e1rcius\u00e1ig rendezd a helyzetet. Ugyanakkor j\u00f6v\u0151 \u00e9v tavasz\u00e1n sem kell p\u00e1nikolni, ha esetleg vannak nem t\u00f6k\u00e9letes INP-szempontb\u00f3l az oldalad, ugyanis az INP, s\u0151t a webes vitals mutat\u00f3k eset\u00e9ben is csak egy csek\u00e9ly jelent\u0151s\u00e9g\u0171 – m\u00e1r ha egy\u00e1ltal\u00e1n – rangsorol\u00e1si t\u00e9nyez\u0151r\u0151l van sz\u00f3. Ugyanakkor a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra hat\u00e9konyabb\u00e1 teheted az INP optimaliz\u00e1l\u00e1sa \u00e1ltal a weboldalad.<\/p>\n\n\n\n A FID teh\u00e1t kiker\u00fclt a webes vitals mutat\u00f3k k\u00f6z\u00fcl, \u00e9s j\u00f6tt egy \u00faj mutat\u00f3, az INP, melyre optimaliz\u00e1lni kell a weboldalakat a jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny \u00e9s a jobb helyez\u00e9s \u00e9rdek\u00e9ben.<\/p>\n\n\n\n De hogyan optimaliz\u00e1lhatsz? Meg kell keresni azokat a funkci\u00f3kat, melyek kritikus fontoss\u00e1g\u00faak ahhoz, hogy a felhaszn\u00e1l\u00f3 mondjuk egy web\u00e1ruh\u00e1zban elkezdhesse a v\u00e1s\u00e1rl\u00e1st, \u00e9s azokat, amelyekre ehhez nincs sz\u00fcks\u00e9ge. Itt is alapvet\u0151en akkor van probl\u00e9ma, ha a szktriptek lassan t\u00f6lt\u0151dnek be, t\u00fal sok\u00e1ig tart az er\u0151forr\u00e1sok lek\u00e9r\u00e9se, vagy a CSS \u00e9s a HTML feldolgoz\u00e1sa annak \u00e9rdek\u00e9ben, hogy a weboldal megfelel\u0151en megjelenhessen. <\/p>\n\n\n\n Interakci\u00f3s k\u00e9s\u00e9sr\u0151l teh\u00e1t akkor van sz\u00f3, amikor a b\u00f6ng\u00e9sz\u0151nek er\u0151sen ig\u00e9nybe kell vennie a CPU-t annak \u00e9rdek\u00e9ben, hogy friss\u00edthesse a weboldalt. Ez k\u00e9t dolog miatt k\u00f6vetkezik be:<\/p>\n\n\n\n A h\u00e1tt\u00e9rfolyamatok akkor futnak nagyobb sz\u00e1mban, amikor elkezd\u0151dik az oldal bet\u00f6lt\u00e9se, de persze k\u00e9s\u0151bb is jelen vannak, \u00e9s sokszor a weboldalba \u00e1gyazott k\u00fcls\u0151 k\u00f3dok eredm\u00e9nye egy akad\u00e1lyoz\u00f3 h\u00e1tt\u00e9rfolyamat. A leggyakoribb feldolgoz\u00e1si t\u00edpus a JavaScript k\u00f3d, de az \u00f6sszetett vizu\u00e1lis friss\u00edt\u00e9sek is hossz\u00fa ideig tarthatnak.<\/p>\n\n\n\n Ha nem optimaliz\u00e1lhat\u00f3 a folyamat, akkor egy folyamatjelz\u0151t \u00e9rdemes haszn\u00e1lni, mely vizu\u00e1lis visszajelz\u00e9st ad a feladat befejez\u00e9s\u00e9ig.<\/p>\n\n\n\n A teljes\u00edtm\u00e9ny elemz\u00e9s\u00e9re a Chrome fejleszt\u0151i eszk\u00f6zt \u00e9rdemes haszn\u00e1lni, mely megmutatja, hogy mely feladatok tartanak hossz\u00fa ideig, melyeket kell optimaliz\u00e1lni. Seg\u00edts\u00e9g\u00e9vel megtal\u00e1lhatod, hogy a lassul\u00e1s\u00e9rt k\u00fcls\u0151 vagy bels\u0151 k\u00f3d a felel\u0151s. Abba is belem\u00e9lyedhetsz, hogy mik\u00e9nt lehet a folyamatot felgyors\u00edtani.<\/p>\n\n\n\n A h\u00e1tt\u00e9rfolyamatok elemz\u00e9s\u00e9n\u00e9l \u00e9rdemes ellen\u0151rizni a Total Blocking Time mutat\u00f3t, mellyel beazonos\u00edthatod a h\u00e1tt\u00e9rfolyamatokat. A TBT azt k\u00f6veti nyomon, hogy milyen gyakran van olyan h\u00e1tt\u00e9r-feladat a CPU sz\u00e1m\u00e1ra, ami megakad\u00e1lyozza m\u00e1s k\u00f3dok fut\u00e1s\u00e1t. Ez az\u00e9rt gond, mert ha egy felhaszn\u00e1l\u00f3 akkor l\u00e9p interakci\u00f3ba egy oldallal, amikor ott egy feladat \u00e9ppen folyamatban van, akkor a b\u00f6ng\u00e9sz\u0151 el\u0151bb ezt a feladatot fejezi be, miel\u0151tt a felhaszn\u00e1l\u00f3 k\u00e9r\u00e9s\u00e9t kezeln\u00e9. <\/p>\n\n\n\n A Google Lighthouse seg\u00edts\u00e9g\u00e9vel megn\u00e9zheted ezt a mutat\u00f3t, \u00e9s seg\u00edts\u00e9get kaphatsz az optimaliz\u00e1l\u00e1shoz is.<\/p>\n\n\n\n Ha a lassul\u00e1s\u00e9rt nem k\u00fcls\u0151 k\u00f3d a felel\u0151s, akkor a fejleszt\u0151kkel kell egyeztetned az optimaliz\u00e1l\u00e1s \u00e9rdek\u00e9ben. Az optimaliz\u00e1l\u00e1sr\u00f3l itt tal\u00e1lsz tov\u00e1bbi r\u00e9szleteket<\/a>.<\/p>\n\n\n\n Kor\u00e1bban ezt a k\u00e9rd\u00e9st m\u00e1r \u00e9rintett\u00fck a Search Console haszn\u00e1lat\u00e1r\u00f3l sz\u00f3l\u00f3 anyagunkban, de itt is kit\u00e9r\u00fcnk r\u00e1. Teh\u00e1t mik is azok a core web vitals mutat\u00f3k?<\/p>\n\n\n\n H\u00e1rom mutat\u00f3t k\u00fcl\u00f6nb\u00f6ztet meg a Google: LCP, FID, CLS. <\/p>\n\n\n\n Ezek k\u00f6z\u00fcl egy\u00e9bk\u00e9nt az els\u0151 kett\u0151 m\u00e1r a sebess\u00e9g jelent\u00e9sben is megjelent, csak a CLS lehet \u00fajdons\u00e1g. A Google magyar\u00e1zata szerint:<\/p>\n\n\n\n R\u00f6viden megfogalmazva az LCP a bet\u00f6lt\u00e9s, a FID az interaktivit\u00e1s, m\u00edg a CLS a vizu\u00e1lis stabilit\u00e1s \u00e9rt\u00e9keit mutatja meg<\/strong>. Hogy mi az ide\u00e1lis \u00e9rt\u00e9k, az itt l\u00e1that\u00f3:<\/p>\n\n\n A Google tan\u00e1csa szerint a legt\u00f6bb weboldalon seg\u00edt, ha<\/p>\n\n\n\n Amennyiben jav\u00edt\u00e1s t\u00f6rt\u00e9nik az oldalon, akkor azt jelezni lehet a Google-nak a Search Console-on kereszt\u00fcl, \u00edgy \u00fajra\u00e9rt\u00e9keli az oldalt.<\/p>\n\n\n\n A mutat\u00f3k a legegyszer\u0171bben a PageSpeed Insigths seg\u00edts\u00e9g\u00e9vel m\u00e9rhet\u0151k, de a webes vitals-mutat\u00f3k megtal\u00e1lhat\u00f3k a Search Console-ban vagy a Lighthouse-ban<\/a> is (t\u00f6bbek k\u00f6z\u00f6tt). Ez a t\u00e1bl\u00e1zat jobban eligaz\u00edt az eszk\u00f6z\u00f6k k\u00f6z\u00f6tt:<\/p>\n\n\n \u00c9ppen ez\u00e9rt az alapvet\u0151 webes vitals-mutat\u00f3kat, mint az oldal\u00e9lm\u00e9ny r\u00e9szek\u00e9nt megjelen\u0151 elemet a Search Console haszn\u00e1lat\u00e1r\u00f3l sz\u00f3l\u00f3 anyagunkban<\/a> m\u00e1r \u00e1ttekintett\u00fck, hiszen a Search Console m\u00e1r pontosan m\u00e9ri, hogy a core web vitals mutat\u00f3kat tekintve mik\u00e9nt teljes\u00edt az oldalunk, \u00e9s mit kell jav\u00edtani.<\/p>\n\n\n\n A Search Console-on k\u00edv\u00fcl azonban m\u00e1s eszk\u00f6z\u00f6kkel is m\u00e9rheted a webes vitals-mutat\u00f3k \u00e1ll\u00e1s\u00e1t, de tal\u00e1n \u00e9rdemes kiemelni, hogy nemr\u00e9g megjelent egy Chrome b\u0151v\u00edtm\u00e9ny<\/a> is, melyet bekapcsolva minden oldalnak l\u00e1thatjuk a webes vitals-\u00e9rt\u00e9keit. <\/p>\n\n\n\n Most, hogy m\u00e1r tudod, hogyan m\u00e9rd az egyes mutat\u00f3kat, n\u00e9zz\u00fck, hogy mik\u00e9nt lehet ezeket jav\u00edtani a weboldalad eset\u00e9ben!<\/p>\n\n\n\n Friss\u00edtve, 2021.10.15.:<\/em><\/p>\n\n\n\n Hab\u00e1r a bejegyz\u00e9s egy kor\u00e1bbi r\u00e9sz\u00e9ben m\u00e1r megismerkedt\u00fcnk a Google LCP-defin\u00edci\u00f3j\u00e1val, \u00e9rdemes azonban egy kicsit alaposabban k\u00f6r\u00fclj\u00e1rni a legnagyobb vizu\u00e1lis tartalomv\u00e1lasz k\u00e9rd\u00e9sk\u00f6r\u00e9t.<\/p>\n\n\n\n Mint azt m\u00e1r l\u00e1ttuk, az LCP annak m\u00e9r\u0151sz\u00e1ma, hogy egy oldal f\u0151 tartalma mennyi id\u0151 alatt t\u00f6lt\u0151dik be \u00e9s \u00e1ll k\u00e9szen a felhaszn\u00e1l\u00f3i interakci\u00f3ra.<\/p>\n\n\n\n Amit itt m\u00e9r\u00fcnk, az a legnagyobb k\u00e9p vagy a legnagyobb tartalmi blokk megjelen\u00e9se a felhaszn\u00e1l\u00f3 kijelz\u0151j\u00e9n. B\u00e1rmi, ami a kijelz\u0151ben megjelen\u0151 tartalmon k\u00edv\u00fcl tal\u00e1lhat\u00f3, nem sz\u00e1m\u00edt bele az LCP-be.<\/p>\n\n\n\n A leggyakrabban megjelen\u0151 elemek a k\u00e9pek, vide\u00f3k, h\u00e1tt\u00e9rk\u00e9pek, vagy nagyobb sz\u00f6vegr\u00e9szek. Az optimaliz\u00e1l\u00e1s teh\u00e1t viszonylag egyszer\u0171: meg kell keresni a legnagyobb elemet a weboldalon, \u00e9s azt kisebbre venni vagy elt\u00e1vol\u00edtani b\u00e1rmi olyan dolgot, melyek akad\u00e1lyozza annak gyors megjelen\u00edt\u00e9s\u00e9t.<\/p>\n\n\n\n Mivel a Google ma m\u00e1r a legt\u00f6bb oldaln\u00e1l a mobil-indexet haszn\u00e1lja, \u00edgy els\u0151 k\u00f6rben a mobilos megjelen\u00e9st \u00e9rdemes figyelembe venni az optimaliz\u00e1l\u00e1sn\u00e1l, majd csak ut\u00e1na az asztali g\u00e9pes megjelen\u00e9st.<\/p>\n\n\n\n A Google a jav\u00edt\u00e1s\u00e1ra t\u00f6bb javaslatot is ad. Els\u0151k\u00e9nt \u00e9rdemes a szerverrel<\/strong> foglalkozni. Ha komoly lassul\u00e1st tapasztalsz, akkor lehet, hogy hasznos lenne egy jobb hosting-szolg\u00e1ltat\u00e1ssal pr\u00f3b\u00e1lkozni<\/a>, p\u00e9ld\u00e1ul megosztott hostingr\u00f3l dedik\u00e1lt hostingra \u00e1t\u00e1llni. Ugyanakkor lehet az is, hogy csak rossz be\u00e1ll\u00edt\u00e1s okozza a szerver lass\u00fas\u00e1g\u00e1t. Egy tipikus probl\u00e9ma a mem\u00f3ria kioszt\u00e1sa a PHP r\u00e9sz\u00e9re, vagy ak\u00e1r egy friss\u00edt\u00e9sre szorul\u00f3 PHP-verzi\u00f3, esetleg CMS.<\/p>\n\n\n\n Emellett \u00e9rdemes \u00e1ttekinteni a weboldalad folyamatait, \u00e9s ami nem sz\u00fcks\u00e9ges, azt le\u00e1ll\u00edtani, a t\u00f6bbit pedig optimaliz\u00e1lni. P\u00e9ld\u00e1ul egy WordPress alap\u00fa oldal eset\u00e9ben cs\u00f6kkentheted a folyamatok sz\u00e1m\u00e1t a felesleges pluginek elt\u00e1vol\u00edt\u00e1s\u00e1val.<\/p>\n\n\n\n A m\u00e1sodik tan\u00e1cs, amit a Google ad, az a CDN (Content Delivery Network) haszn\u00e1lata. Olyan szolg\u00e1ltat\u00e1sokn\u00e1l is k\u00f6r\u00fcln\u00e9zhetsz, mint amit a Google Cloud vagy a Cloudflare k\u00edn\u00e1l, hiszen a seg\u00edts\u00e9g\u00fckkel jav\u00edthatod a weboldalad sebess\u00e9g\u00e9t, k\u00fcl\u00f6n\u00f6sen, ha sokan keresik fel az oldalad a vil\u00e1g sz\u00e1mos orsz\u00e1g\u00e1b\u00f3l.<\/p>\n\n\n\n Szint\u00e9n jav\u00edthat a helyzeten a gyors\u00edt\u00f3t\u00e1raz\u00e1s, mert \u00edgy a gyors\u00edt\u00f3t\u00e1razott HTML-tartalmakat nem kell minden egyes alkalommal bet\u00f6lteni minden felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, aki megl\u00e1togatja az oldalad. Ha WordPresst haszn\u00e1lsz, akkor olyan pluginok seg\u00edtenek ebben, mint a W3 Total Cache vagy a WP Fastest Cache, melyek automatikus gyors\u00edt\u00f3t\u00e1razz\u00e1k a tartalmaidat.<\/p>\n\n\n\n Ezeken t\u00fal m\u00e9g sz\u00e1mos technika van a gyors\u00edt\u00e1sra: el\u0151t\u00f6lt\u00e9sek alkalmaz\u00e1sa vagy a HTML, a CSS \u00e9s a JavaScript \u00f6sszeh\u00faz\u00e1sa. A Google egy\u00e9bk\u00e9nt azt javasolja, hogy az olyan CSS-n\u00e9l, melyre nincs sz\u00fcks\u00e9g a kezd\u0151 megjelen\u00e9sn\u00e9l, haszn\u00e1ljunk loadCSS-t, hogy a f\u00e1jlok aszinkron m\u00f3don t\u00f6lt\u0151djenek be. De ugyan\u00edgy a sz\u00f6vegek, k\u00e9pek, vide\u00f3k m\u00e9ret\u00e9nek cs\u00f6kkent\u00e9se is seg\u00edt.<\/p>\n\n\n\n Amit a k\u00e9pek kapcs\u00e1n \u00e9rdemes tudni, ha az LCP sz\u00e1m\u00edt\u00e1s\u00e1r\u00f3l van sz\u00f3, hogy a weboldalakra gyakran eredeti m\u00e9ret\u00fckben ker\u00fclnek fel a k\u00e9pek, \u00e9s azt\u00e1n HTML vagy CSS haszn\u00e1lat\u00e1val m\u00e9retez\u0151dik akkor\u00e1ra, hogy j\u00f3l jelenjen meg egy kisebb kijelz\u0151n. A Google azonban a k\u00e9pm\u00e9ret sz\u00e1m\u00edt\u00e1s\u00e1n\u00e1l a kisebb m\u00e9retet haszn\u00e1lja. Ez azt jelenti, hogy j\u00f3 LCP-t lehet el\u00e9rni akkor is, ha egy k\u00e9p „val\u00f3di”, teh\u00e1t eredeti m\u00e9rete nagy, majd azt\u00e1n HTML \u00e9s CSS seg\u00edts\u00e9g\u00e9vel m\u00e9retez\u0151dik lefel\u00e9, ugyanakkor a legbiztosabb megold\u00e1s az, ha a „val\u00f3di” \u00e9s a „l\u00e1that\u00f3” k\u00e9pm\u00e9ret megegyezik.<\/p>\n\n\n\n Szint\u00e9n fontos, hogy a m\u00e1s domainekr\u0151l bet\u00f6lt\u00f6tt k\u00e9pek \u00e1ltal\u00e1ban nem r\u00e9szei az LCP sz\u00e1m\u00edt\u00e1s\u00e1nak. <\/p>\n\n\n\n A m\u00e9r\u00e9s\u00e9n\u00e9l egy\u00e9bk\u00e9nt megk\u00fcl\u00f6nb\u00f6ztet\u00fcnk \u00fagynevezett „field” eszk\u00f6z\u00f6ket \u00e9s „lab” eszk\u00f6z\u00f6ket. Az el\u0151bbiek az oldal val\u00f3s m\u00e9r\u00e9s\u00e9t jelentik, m\u00edg ut\u00f3bbiak egy virtu\u00e1lis pontsz\u00e1mot adnak egy szimul\u00e1lt felt\u00e9rk\u00e9pez\u00e9s r\u00e9v\u00e9n.<\/p>\n\n\n\n A „field” eszk\u00f6z\u00f6k k\u00f6z\u00e9 tartozik:<\/p>\n\n\n\n Ut\u00f3bb egy Google-fi\u00f3kot \u00e9s egy Google Cloud Projectet ig\u00e9nyel. <\/p>\n\n\n\n A „lab” eszk\u00f6z\u00f6k<\/p>\n\n\n\n Ezek a szimul\u00e1lt pontsz\u00e1mok, melyekhez a Google a k\u00f6vetkez\u0151ket aj\u00e1nlja:<\/p>\n\n\n\n Ezek k\u00f6z\u00fcl az els\u0151 kett\u0151 a Google saj\u00e1t eszk\u00f6ze, m\u00edg a harmadik egy k\u00fcls\u0151 eszk\u00f6z.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2021.10.27.:<\/em><\/p>\n\n\n\n Az els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s, vagyis a First Input Delay (FID) a felhaszn\u00e1l\u00f3 els\u0151 interakci\u00f3j\u00e1t\u00f3l (mint egy gombra vagy linkre kattint\u00e1s) eltel\u0151 id\u0151t m\u00e9ri addig, am\u00edg a b\u00f6ng\u00e9sz\u0151 v\u00e1laszol, majd teljes\u00edti a k\u00e9r\u00e9st.<\/p>\n\n\n\n Enn\u00e9l is egyszer\u0171bben fogalmazva a FID azt mutatja meg, hogy a felhaszn\u00e1l\u00f3nak mennyit kell v\u00e1rnia a felhaszn\u00e1l\u00f3i fel\u00fclet v\u00e1lasz\u00e1ra az els\u0151 kattint\u00e1sa ut\u00e1n.<\/p>\n\n\n\n A v\u00e1laszk\u00e9s\u00e9s els\u0151dleges oka az, hogy a b\u00f6ng\u00e9sz\u0151 valamilyen folyamattal van elfoglalva, \u00edgy nem tud v\u00e1laszolni azonnal a felhaszn\u00e1l\u00f3nak. A gyakorlatban ez \u00e1ltal\u00e1ban egy Javascripthez kapcsol\u00f3d\u00f3 feladat, melynek v\u00e9grehajt\u00e1sa sok id\u0151t vesz ig\u00e9nybe.<\/p>\n\n\n\n A FID-t csak val\u00f3s felhaszn\u00e1l\u00f3i interakci\u00f3k sor\u00e1n m\u00e9rhetj\u00fck, „lab” m\u00e9r\u00e9sekkel nem \u00e1llap\u00edthat\u00f3 meg.<\/p>\n\n\n\n Ugyanakkor van egy m\u00e1sik m\u00e9r\u0151sz\u00e1m, a TBT, vagyis Total Blocking Time, mely azt m\u00e9ri, hogy mennyi ideig \u00e1ll a b\u00f6ng\u00e9sz\u0151, \u00edgy egy nagyon hasonl\u00f3 eredm\u00e9nyt ad ki, mint a FID.<\/p>\n\n\n\n Mint azt fentebb m\u00e1r \u00edrtuk, b\u00e1rmilyen hossz\u00fa ideig tart\u00f3 feladat, mely akad\u00e1lyozza a b\u00f6ng\u00e9sz\u0151 f\u0151 folyamat\u00e1t, \u00e9s megel\u0151zi az \u00faj feladat v\u00e9grehajt\u00e1s\u00e1t, gyeng\u00edti a FID-t.<\/p>\n\n\n\n A leggyakrabban a k\u00e9s\u00e9s, illetve a f\u0151 folyamat blokkol\u00f3 fut\u00e1sa az oldal bet\u00f6lt\u00e9se sor\u00e1n jelentkezik, amikor a tartalom m\u00e1r megjelent, ugyanakkor m\u00e9g nem t\u00f6lt\u0151d\u00f6tt be teljesen az oldal.<\/p>\n\n\n\n A megold\u00e1s teh\u00e1t az, ha a f\u0151 sz\u00e1l t\u00fal hossz\u00fa feladatait elt\u00e1vol\u00edtod. Hossz\u00fa feladatnak sz\u00e1m\u00edt minden olyan feladat, mely a f\u0151 sz\u00e1lat t\u00f6bb mint 50 ms id\u0151tartamra blokkolja. Ilyen k\u00e9s\u00e9s eset\u00e9ben, ha a felhaszn\u00e1l\u00f3 kattint, akkor m\u00e1r lass\u00fa v\u00e1laszt fog \u00e9rz\u00e9kelni.<\/p>\n\n\n\n A t\u00fal hossz\u00fa feladatokat azonban meg lehet tal\u00e1lni, ak\u00e1r a Lighthouse vagy m\u00e1s eszk\u00f6z\u00f6k seg\u00edts\u00e9g\u00e9vel. El\u0151sz\u00f6r meg kell tal\u00e1lni azt az oldalt, mely a probl\u00e9m\u00e1t okozza. Lehet, hogy a sablonnal van hiba, de az is lehet, hogy a k\u00e9s\u00e9s csak a weboldal valamely oldal\u00e1n jelentkezik. <\/p>\n\n\n\n A FID jav\u00edt\u00e1s\u00e1ban seg\u00edthet:<\/p>\n\n\n\n A Lighthouse egy teljes\u00edtm\u00e9ny ellen\u0151rz\u00e9s sor\u00e1n aj\u00e1nl\u00e1sokat tesz arra, hogy mik\u00e9nt lehet cs\u00f6kkenteni a f\u0151 sz\u00e1ln\u00e1l jelentkez\u0151 t\u00fal hossz\u00fa feladatokat. A Lighthouse-t k\u00f6nnyen el\u00e9rheted a Chrome-ban (vagy m\u00e1s Chrome-alap\u00fa b\u00f6ng\u00e9sz\u0151ben), ha jobb gombbal az oldalra kattintasz, majd a men\u00fcb\u0151l alul kiv\u00e1lasztod a „Vizsg\u00e1lat” men\u00fcpontot. <\/p>\n\n\n Majd a fels\u0151 men\u00fcsor utols\u00f3 men\u00fcpontj\u00e1ra, a Lighthouse-ra kattintva megkapod a jelent\u00e9sk\u00e9sz\u00edt\u00e9s lehet\u0151s\u00e9g\u00e9t.<\/p>\n\n\n\n Ha elk\u00e9sz\u00edtetted a jelent\u00e9st, akkor ott k\u00fcl\u00f6n a TBT-re is kiv\u00e1laszthatod az eredm\u00e9nyeket, majd ez alapj\u00e1n lehet jav\u00edtani a teljes\u00edtm\u00e9nyt, de tal\u00e1lsz a jelent\u00e9sben egy olyan r\u00e9szt is, melynek az a neve, hogy „Avoid long main-thread tasks”:<\/p>\n\n\n\n Itt l\u00e1tod azokat a feladatokat, melyek v\u00e9grehajt\u00e1s\u00e1nak ideje meghaladja az 50 ms-t. <\/p>\n\n\n\n Egy m\u00e1sik dolog, amit \u00e9rdemes megn\u00e9zni a Lighthouse-ban az az „eredeti nyom” megtekint\u00e9se, mely megmutatja az oldal bet\u00f6lt\u00e9s\u00e9nek folyamat\u00e1t. Ha itt bekattintod fent a Web Vitalst, akkor l\u00e1tod, hogy mely feladatok vesznek ig\u00e9nybe 50 ms-n\u00e1l hosszabb id\u0151t.<\/p>\n\n\n Az els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s els\u0151sorban a JavaScript \u00e9s a k\u00fcls\u0151 szkriptek haszn\u00e1lat\u00e1nak optimaliz\u00e1l\u00e1s\u00e1n m\u00falik. Ut\u00f3bbi egy\u00e9bk\u00e9nt els\u0151sorban k\u00fcl\u00f6nb\u00f6z\u0151 weboldalanalitikai eszk\u00f6z\u00f6ket jelent, de b\u00e1rmely k\u00f3d lehet, mely egy m\u00e1sik weboldalhoz kapcsol\u00f3d\u00f3 szkriptet futtat le.<\/p>\n\n\n\n Mint azt m\u00e1r az el\u0151z\u0151 fejezetben eml\u00edtett\u00fck, a JavaScript minimaliz\u00e1lhat\u00f3, vagyis elt\u00e1vol\u00edthat\u00f3k a felesleges karakterek, a nem haszn\u00e1lt k\u00f3dok, \u00e9s azok, melyekre nincs sz\u00fcks\u00e9g a weboldal elindul\u00e1s\u00e1hoz a bet\u00f6lt\u00e9sn\u00e9l. A Google egy\u00e9bk\u00e9nt a UglifyJS<\/a>-t javasolja a JavaScript cs\u00f6kkent\u00e9s\u00e9re.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2021.11.05.:<\/em><\/p>\n\n\n\n A Cumulative Layout Shift, vagy magyarul az elrendez\u00e9s \u00f6sszmozg\u00e1sa azt a weboldalmozg\u00e1st m\u00e9ri, mely bet\u00f6lt\u00e9sn\u00e9l \u00e9s a vele val\u00f3 interakci\u00f3n\u00e1l jelentkezik. Mozg\u00e1sr\u00f3l akkor van sz\u00f3 a weboldalon, ha egy tartalom b\u00e1rmikor is l\u00e1that\u00f3an poz\u00edci\u00f3t v\u00e1lt. <\/p>\n\n\n\n A CLS-t m\u00e9rheted a kor\u00e1bban m\u00e1r s\u0171r\u0171n emlegetett Lighthouse vagy a Search Console seg\u00edts\u00e9g\u00e9vel.<\/p>\n\n\n\n A Google term\u00e9szetesen meghat\u00e1rozta, hogy mi a j\u00f3 \u00e9s mi rossz \u00e9rt\u00e9k a CLS-n\u00e9l. J\u00f3 CLS-r\u0151l akkor besz\u00e9l\u00fcnk, ha 0,10 alatt van az \u00e9rt\u00e9ke. 0,10 \u00e9s 0,25 k\u00f6z\u00f6tt m\u00e1r sz\u00fcks\u00e9ges a jav\u00edt\u00e1s, m\u00edg rossz \u00e9rt\u00e9kr\u0151l 0,25 felett besz\u00e9lhet\u00fcnk.<\/p>\n\n\n\n A tartalom mozg\u00e1sa bek\u00f6vetkezhet ak\u00e1r egy bet\u0171t\u00edpus v\u00e1lt\u00e1s, vagy egy lassan bet\u00f6lt\u0151d\u0151 k\u00e9p miatt. Van n\u00e9h\u00e1ny tipikus probl\u00e9ma, ami a CLS l\u00e1tv\u00e1nyos roml\u00e1s\u00e1t eredm\u00e9nyezi:<\/p>\n\n\n\n Mindezek a probl\u00e9m\u00e1k viszonylag k\u00f6nnyen \u00e9s gyorsan felt\u00e1rhat\u00f3k \u00e9s jav\u00edthat\u00f3k. El\u00e9g a Lighthouse teljes\u00edtm\u00e9nyjelent\u00e9s\u00e9t megn\u00e9zni, mely javaslatokat is tartalmaz a jav\u00edt\u00e1sra. Kor\u00e1bban m\u00e1r megmutattuk, hogy hol tal\u00e1lod Chrome-alap\u00fa b\u00f6ng\u00e9sz\u0151ben a Lighthouse-t, \u00e9s hogyan kaphatsz jelent\u00e9st.<\/p>\n\n\n\n Ha a CLS-t akarod jav\u00edtani, akkor az „Avoid large layout Shifts” sorra \u00e9rdemes figyelni. Ha erre r\u00e1kattintasz, akkor l\u00e1thatod, hogy mely elemek okoznak elrendez\u00e9s-mozg\u00e1st a weboldalon. L\u00e1tod mellett\u00fck az \u00e9rt\u00e9ket is, \u00edgy azt is l\u00e1thatod, hogy mi az, ami miatt val\u00f3ban agg\u00f3dni kell, \u00e9s mi az, amivel \u00e9rdemes foglalkozni.<\/p>\n\n\n\n Az elrendez\u00e9s \u00f6sszmozg\u00e1s\u00e1nak jav\u00edt\u00e1s\u00e1hoz jelezned kell a b\u00f6ng\u00e9sz\u0151 sz\u00e1m\u00e1ra, hogy mekkora ter\u00fclet sz\u00fcks\u00e9ges a bet\u00f6ltend\u0151 elemek sz\u00e1m\u00e1ra. Ehhez a k\u00e9pek \u00e9s a vide\u00f3k sz\u00e1m\u00e1ra m\u00e9reteket kell rendelni, illetve lehet\u0151s\u00e9g van ezt a CSS-ben is megoldani. B\u00e1rmelyik utat is v\u00e1lasztod, az a c\u00e9l, hogy elker\u00fcld a felesleges mozg\u00e1sokat a weboldal bet\u00f6lt\u00e9sekor.<\/p>\n\n\n\n Azokat az elemeket is \u00e9rdemes jel\u00f6lni, melyek csak akkor fognak bet\u00f6lt\u0151dni, ha a felhaszn\u00e1l\u00f3 interakci\u00f3ba l\u00e9p az oldallal. Ha a l\u00e1togat\u00f3k tudj\u00e1k, hogy mely elemek fognak bet\u00f6lt\u0151dni, az megakad\u00e1lyozza azt, hogy elmozdul\u00f3 elemekre akarjanak r\u00e1kattintani.<\/p>\n\n\n\n Egy m\u00e1sik fontos dolog is kider\u00fclt az oldal\u00e9lm\u00e9ny kapcs\u00e1n, ez pedig az, hogy nem egy real time algoritmusr\u00f3l van sz\u00f3, mint egy\u00e9bk\u00e9nt a Google sok m\u00e1s algoritmusa eset\u00e9ben. Ezt meger\u0151s\u00edtette John Mueller is, illetve azt lehetett is tudni, hogy a f\u0151 webes vitals-mutat\u00f3k feldolgoz\u00e1sa 28 napos k\u00e9s\u00e9ssel m\u0171k\u00f6dik. Ut\u00f3bbi a Core Web Vitals & Page Experience FAQ-b\u00f3l der\u00fcl ki. E szerint „a mutat\u00f3k sz\u00e1m\u00edt\u00e1sa a 75. percentilis alapj\u00e1n t\u00f6rt\u00e9nik, egy 28 napos id\u0151tartam alatt”. A 75 percentilis alapj\u00e1n ugyanis m\u00e1r tudja a Google, hogy 4-b\u0151l 3 webhelyl\u00e1togat\u00e1sn\u00e1l el\u00e9rte az oldal a megfelel\u0151 teljes\u00edtm\u00e9nyszintet, vagy ann\u00e1l jobbat.<\/p>\n\n\n\n John Mueller a 28 napos k\u00e9s\u00e9st meger\u0151s\u00edtette egy 2021 \u00e1prilis\u00e1ban tartott SEO hangouton<\/a> is, ahol azt a k\u00e9rd\u00e9st tett\u00e9k fel neki, hogy az oldal\u00e9lm\u00e9ny algoritmus egy real time algoritmus lesz vagy pedig olyan, mint a f\u0151 algoritmusok, melyeket id\u0151r\u0151l id\u0151re friss\u00edtenek. Mueller jelezte, hogy nem egy val\u00f3s idej\u0171 algoritmusr\u00f3l van sz\u00f3 az oldal\u00e9lm\u00e9ny algoritmus eset\u00e9ben, „ink\u00e1bb egy lass\u00fa dologr\u00f3l”.<\/p>\n\n\n\n Mint magyar\u00e1zta, van egy \u00e1ltal\u00e1nos k\u00e9s\u00e9s az adatokn\u00e1l, teh\u00e1t v\u00e1rniuk kell egy ideig arra, hogy elegend\u0151 mennyis\u00e9g\u0171 adatot gy\u0171jtsenek be a weboldalakr\u00f3l, hogy azokat feldolgozhass\u00e1k. Teh\u00e1t itt nem a sebess\u00e9g a l\u00e9nyeg, hanem az, hogy \u00e1tl\u00e1ss\u00e1k a teljes k\u00e9pet. A friss\u00edt\u00e9si id\u0151pontot illet\u0151en sincs egy meghat\u00e1rozott id\u0151pont, vagyis nem minden h\u00f3nap elsej\u00e9n ker\u00fclnek friss\u00edt\u00e9sre az adatok – tette hozz\u00e1.<\/p>\n\n\n\n A webes vitals mutat\u00f3k olyan sz\u00e1mok, melyekn\u00e9l, ha egyszer el\u00e9rt\u00e9l egy elfogadhat\u00f3 szintet, akkor felesleges tov\u00e1bb jav\u00edtani rajtuk, mert nem fognak m\u00e9g jobb rangsorol\u00e1st eredm\u00e9nyezni. Philip Walton a Google r\u00e9sz\u00e9r\u0151l ezt \u00fagy fejezte ki<\/a>, hogy hab\u00e1r azt nem mondhatjuk, hogy teljes m\u00e9rt\u00e9kben egy bin\u00e1ris t\u00e9nyez\u0151r\u0151l lenne sz\u00f3 a webes vital mutat\u00f3kn\u00e1l, de majdnem. <\/p>\n\n\n\n Ez pedig azt jelenti, hogy ha el\u00e9rted a maxim\u00e1lis rangsorol\u00e1si l\u00f6k\u00e9st a j\u00f3 webes vitals mutat\u00f3k r\u00e9v\u00e9n, akkor ezen nem lehet tov\u00e1bb jav\u00edtani azzal, hogy m\u00e9g jobb sz\u00e1mokat \u00e9rsz el. <\/p>\n\n\n\n John Mueller ezt \u00fagy fogalmazta meg, hogy ha egyszer el\u00e9red a megfelel\u0151 tartom\u00e1ny, akkor \u00e1tugrottad a l\u00e9cet, \u00e9s hi\u00e1ba nyersz mikrooptimaliz\u00e1ci\u00f3val \u00fajabb milliszekundumokat, az nem fog tov\u00e1bbi javul\u00e1st eredm\u00e9nyezni a helyez\u00e9sedben. Lehet persze, hogy ennek is van hat\u00e1sa a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyre, de ez m\u00e1r nem fog t\u00fckr\u00f6z\u0151dni a tal\u00e1lati oldalakon. <\/p>\n\n\n\n Philip Walton egy\u00e9bk\u00e9nt azt is hozz\u00e1tette, hogy a rangsorol\u00e1s jav\u00edt\u00e1s\u00e1hoz nincs felt\u00e9tlen\u00fcl sz\u00fcks\u00e9g arra, hogy mindh\u00e1rom core web vitals mutat\u00f3n\u00e1l j\u00f3 pontsz\u00e1mot \u00e9rj el. Ahogy annak sem lesz eredm\u00e9nye, ha mondjuk az LCP k\u00e9t m\u00e1sodperc helyett egy m\u00e1sodperc lesz. <\/p>\n\n\n\n Ugyanakkor, ha van egy lass\u00fa oldalad, gyenge web vitals-mutat\u00f3kkal, \u00e9s itt siker\u00fcl mondjuk 10 m\u00e1sodpercre jav\u00edtani az LCP-t, akkor az javul\u00e1st fog eredm\u00e9nyezni a rangsorol\u00e1sodban. John Mueller ehhez m\u00e9g hozz\u00e1tette, hogy ha viszont gyenge a tartalmad, akkor hi\u00e1ba jav\u00edtasz a web vitals mutat\u00f3kon, nem fogod t\u00falsz\u00e1rnyalni a jobb tartalm\u00fa weboldalakat.<\/p>\n\n\n\n Nemr\u00e9g egy fontos dologra h\u00edvta fel a figyelmet John Mueller, amit sokan nem l\u00e1tnak vil\u00e1gosan a webes vitals mutat\u00f3k, illetve az oldal\u00e9lm\u00e9ny rangsorol\u00e1si t\u00e9nyez\u0151v\u00e9 v\u00e1l\u00e1sa kapcs\u00e1n M\u00e9gpedig azt, hogy b\u00e1r a Googlebot f\u00e9s\u00fcli \u00e1t a webet \u00e9s sz\u00e1ll\u00edtja a legt\u00f6bb jelz\u00e9st a Google sz\u00e1m\u00e1ra, mely alapj\u00e1n azt\u00e1n rangsorolj\u00e1k a weboldalakat, a webes vitals mutat\u00f3k\u00e9rt nem a Googlebot felel, illetve nem a felt\u00e9rkpez\u00e9s sor\u00e1n ker\u00fclnek az adatok a Google-hez.<\/p>\n\n\n\n A webes vitals mutat\u00f3k ugyanis a Chrome b\u00f6ng\u00e9sz\u0151 CRuX (Chrome user experience report) adatjelent\u00e9s\u00e9b\u0151l<\/a> sz\u00e1rmaznak.<\/p>\n\n\n\n Ez pedig azt jelenti, hogy a Google a Chrome val\u00f3s haszn\u00e1lati adatait veszi figyelembe egy-egy weboldal webes vitals mutat\u00f3nak meghat\u00e1roz\u00e1s\u00e1ra. Ez mag\u00e1ban foglalja az \u00fagynevezett LCP, FID \u00e9s CLS pontsz\u00e1mokat. Teh\u00e1t, amikor egy Chrome-ot haszn\u00e1l\u00f3 l\u00e1togat\u00f3 \u00e9rkezik a weboldaladra, akkor az \u0151 b\u00f6ng\u00e9sz\u0151je szolg\u00e1ltat adatokat a weboldalad felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny\u00e9r\u0151l a Google sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Amikor a Google el\u0151sz\u00f6r jelentette be, hogy az oldal\u00e9lm\u00e9ny \u00e9s benne az alapvet\u0151 webes vitals-mutat\u00f3k rangsorol\u00e1si t\u00e9nyez\u0151v\u00e9 v\u00e1lik, azt m\u00e9g nem kommunik\u00e1lta – vagy legal\u00e1bbis nem el\u00e9g figyelemfelkelt\u0151en -, hogy ha AMP-t haszn\u00e1lsz, vagyis az AMP-oldalaidra \u00e9rkeznek a tal\u00e1lati oldalakr\u00f3l a felhaszn\u00e1l\u00f3k, \u00e9s mobil-first indexel\u00e9st alkalmaz m\u00e1r a Google (ami 2020 v\u00e9g\u00e9re minden weboldaln\u00e1l megval\u00f3sul), akkor ezeknek az AMP-s oldalaknak az „\u00e9lm\u00e9ny\u00e9t” veszi figyelembe a rangsorol\u00e1sn\u00e1l. Nem pedig a mobilos vagy asztali g\u00e9pes oldalad oldal\u00e9lm\u00e9ny\u00e9t.<\/p>\n\n\n\n John Mueller ezt egy Google webmaster vide\u00f3ban tette vil\u00e1goss\u00e1<\/a>.<\/p>\n\n\n\n R\u00f6viden, itt azt magyar\u00e1zza el, hogy a Google azt az oldalt veszi figyelembe az oldal\u00e9lm\u00e9ny m\u00e9r\u00e9s\u00e9n\u00e9l, melyre a felhaszn\u00e1l\u00f3k meg\u00e9rkeznek a tal\u00e1lati oldalon t\u00f6rt\u00e9n\u0151 kattint\u00e1s ut\u00e1n. M\u00e1rpedig, ha AMP-t haszn\u00e1lsz, akkor egy AMP oldalra \u00e9rkeznek mobilon, \u00edgy ezen AMP oldal alapj\u00e1n hat\u00e1rozza meg az alapvet\u0151 webes vitals-mutat\u00f3kat, illetve a t\u00f6bbi t\u00e9nyez\u0151t, melyek meghat\u00e1rozz\u00e1k az oldal\u00e9lm\u00e9nyt.<\/p>\n\n\n\n Azt pedig tudjuk, hogy az AMP verzi\u00f3k a Google szerint igen j\u00f3 \u00e9rt\u00e9keket mutatnak az oldal\u00e9lm\u00e9nyt tekintve. Teh\u00e1t, ha nem haszn\u00e1lsz m\u00e9g AMP-t<\/a>, akkor lehet, hogy \u00e9rdemes lesz.<\/p>\n\n\n\n Ha azt l\u00e1tod, hogy a weboldalad nem teljes\u00edt j\u00f3l a Google tesztj\u00e9n, akkor – ha fontos sz\u00e1modra a helyez\u00e9sed – jav\u00edtani kell a weboldaladon. Ugyanakkor ez nem minden esetben lesz egyszer\u0171, vagy egy\u00e1ltal\u00e1n megoldhat\u00f3. Akad n\u00e9h\u00e1ny olyan szitu\u00e1ci\u00f3, amikor a webes vitals-mutat\u00f3knak val\u00f3 megfelel\u00e9s komoly fejt\u00f6r\u00e9sre adhat okot a weboldaltulajdonosok sz\u00e1m\u00e1ra.<\/p>\n\n\n\n A legink\u00e1bb term\u00e9szetesen az alacsony k\u00f6lts\u00e9gvet\u00e9ssel m\u0171k\u00f6d\u0151 weboldalakat fogja \u00e9rinteni<\/strong>, hiszen egy weboldal teljes\u00edtm\u00e9ny\u00e9t megfelel\u0151en optimaliz\u00e1lni id\u0151 \u00e9s p\u00e9nz. Tekinthet\u0151 persze befektet\u00e9snek, hiszen jav\u00edt a weboldal helyez\u00e9s\u00e9n a keres\u0151ben, ugyanakkor nem mindenkinek van erre p\u00e9nze. <\/p>\n\n\n\n Egy weboldal teljes\u00edtm\u00e9ny\u00e9re el\u00e9g sok elem van befoly\u00e1ssal, a k\u00f3d tisztas\u00e1g\u00e1t\u00f3l elkezdve a k\u00e9pek optimaliz\u00e1l\u00e1s\u00e1ig, vagy a felesleges funkci\u00f3k elt\u00e1vol\u00edt\u00e1s\u00e1ig. Ha val\u00f3ban j\u00f3 eredm\u00e9nyt akarunk el\u00e9rni, akkor el\u00e9g komolyan bele kell \u00e1sni magunkat a dologba, ami nem kis munka. Egy \u00e9vekkel ezel\u0151tt k\u00e9sz\u00fclt vagy kifejezetten lass\u00fa weboldal eset\u00e9ben szinte biztos, hogy egy teljes redesignra lesz sz\u00fcks\u00e9g.<\/p>\n\n\n\n Emellett az alacsony k\u00f6lts\u00e9gvet\u00e9ssel \u00fczemel\u0151 weboldalakat a hosting k\u00e9rd\u00e9se is \u00e9rinti, hiszen az olcs\u00f3, megosztott hosting megold\u00e1sok nem ny\u00fajtj\u00e1k azt a teljes\u00edtm\u00e9nyt, amit a Google elv\u00e1r. A jobb hosting-szolg\u00e1ltat\u00e1s viszont megint csak t\u00f6bb p\u00e9nzbe fog ker\u00fclni.<\/p>\n\n\n\n Szint\u00e9n gondban lesznek az olyan hagyom\u00e1nyos CMS-eket haszn\u00e1l\u00f3 weboldalak<\/strong>, melyek WordPressre, Drupalra, stb. \u00e9p\u00fclnek. Az adatb\u00e1zisokat haszn\u00e1l\u00f3 tartalomkezel\u0151kn\u00e9l a lek\u00e9rdez\u00e9sek \u00e9s egy\u00e9b kulcsfontoss\u00e1g\u00fa funkci\u00f3k v\u00e9grehajt\u00e1sa lass\u00edtj\u00e1k a weboldalt. <\/p>\n\n\n\n Seg\u00edt persze ezen a gyors\u00edt\u00f3t\u00e1raz\u00e1s, ez azonban nem felt\u00e9tlen\u00fcl lesz el\u00e9g, sz\u00fcks\u00e9g lehet CDN haszn\u00e1lat\u00e1ra \u00e9s egy magasabb szint\u0171 webhosting-szolg\u00e1ltat\u00e1sra, mely k\u00e9pes m\u00e1r elfogadhat\u00f3 teljes\u00edtm\u00e9nyt ny\u00fajtani.<\/p>\n\n\n\n Ezekn\u00e9l a CMS-ekn\u00e9l gondot fognak okozni a t\u00e9m\u00e1k \u00e9s a pluginek is. A WordPress tele van olyan t\u00e9m\u00e1kkal, melyek er\u0151sen lerontj\u00e1k egy weboldal teljes\u00edtm\u00e9ny\u00e9t, \u00e9s erre a fejleszt\u0151knek sincs befoly\u00e1suk. A megold\u00e1st a t\u00e9ma lecser\u00e9l\u00e9se jelenti, illetve egyes pluginek kikapcsol\u00e1sa, ami viszont sok weboldal sz\u00e1m\u00e1ra nem felt\u00e9tlen\u00fcl opci\u00f3. <\/p>\n\n\n\n De egy\u00e9bk\u00e9nt minden olyan helyzet probl\u00e9m\u00e1t fog okozni, ahol a weboldalfejleszt\u0151knek nincs teljes hozz\u00e1f\u00e9r\u00e9s\u00fck a weboldal minden elem\u00e9hez, vagy nincs befoly\u00e1suk a hosting-szolg\u00e1ltat\u00e1s min\u0151s\u00e9g\u00e9re. Ez pedig azt jelenti, hogy a webes vitals-mutat\u00f3k alapvet\u0151en azoknak a weboldalaknak kedveznek, akik a legt\u00f6bb er\u0151forr\u00e1ssal (p\u00e9nzzel) rendelkeznek<\/strong>. <\/p>\n\n\n\n Azt persze nem tudjuk pontosan – legal\u00e1bbis egyel\u0151re -, hogy a Google-n\u00e9l a webes vitals-mutat\u00f3k milyen s\u00fallyal befoly\u00e1solj\u00e1k majd a weboldal helyez\u00e9s\u00e9t, hogy ak\u00e1r egy jobb tartalommal rendelkez\u0151 oldalt egy jobb teljes\u00edtm\u00e9ny\u0171 oldal meg tud-e el\u0151zni, puszt\u00e1n a jobb teljes\u00edtm\u00e9nye, illetve oldal\u00e9lm\u00e9nye miatt.<\/p>\n\n\n\n Nyilv\u00e1n az a Google-nek sem \u00e9rdeke, hogy a sebess\u00e9g fontosabb legyen, mint a tartalmi min\u0151s\u00e9g, de az mindenesetre az\u00e9rt lesz\u00f6gezhet\u0151, hogy nem teszik k\u00f6nnyebb\u00e9 a kisebb c\u00e9gek \u00e9s weboldalak indul\u00e1s\u00e1t a rendk\u00edv\u00fcl szigor\u00fa teljes\u00edtm\u00e9ny-k\u00f6vetelm\u00e9nyek<\/strong>.<\/p>\n\n\n\n A webes vitals-mutat\u00f3k rangsorol\u00e1si t\u00e9nyez\u0151v\u00e9 v\u00e1l\u00e1sa minden weboldalt befoly\u00e1sol, melynek fontos a keres\u0151optimaliz\u00e1l\u00e1s. Egyeseket kev\u00e9sb\u00e9 fog \u00e9rinteni a hat\u00e1sa, m\u00e1sokat jobban. \u00c9s hab\u00e1r a j\u00f3 weboldal-teljes\u00edtm\u00e9ny t\u00e9nyleg fontos a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny szempontj\u00e1b\u00f3l, az \u00faj m\u00e9r\u0151sz\u00e1moknak val\u00f3 megfelel\u00e9s nem egyszer\u0171, \u00e9s megkock\u00e1ztathat\u00f3 a kijelent\u00e9s, hogy tal\u00e1n t\u00fal sokat is k\u00edv\u00e1n a weboldalakr\u00f3l. <\/p>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/04\/weboldal.png\")
<\/figure>\n\n\n\nMik azok a webes vitals-mutat\u00f3k?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/07\/uj-rangsorolasi-tenyezo-webes-vitals-mutatora-epitve.png\")
a biztons\u00e1gos b\u00f6ng\u00e9sz\u00e9s,<\/del> a HTTPS haszn\u00e1lata, \u00e9s a zavar\u00f3 hirdet\u00e9sek elker\u00fcl\u00e9se. A Google magyar\u00e1zata szerint az oldal\u00e9lm\u00e9ny jelz\u00e9s azt m\u00e9ri, hogy a felhaszn\u00e1l\u00f3k milyennek \u00e9rzik a weboldallal t\u00f6rt\u00e9n\u0151 interakci\u00f3t. A benne foglalt elemeknek az optimaliz\u00e1l\u00e1s\u00e1val egy kellemesebb \u00e9lm\u00e9ny biztos\u00edthat\u00f3 a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra minden b\u00f6ng\u00e9sz\u0151ben \u00e9s fel\u00fcleten, illetve seg\u00edt abban, hogy a weboldal jobban megfeleljen a felhaszn\u00e1l\u00f3i elv\u00e1r\u00e1soknak mobilon is.<\/p>\n\n\n\n
\n\n\n\nA Google kidobta az oldal\u00e9lm\u00e9nyb\u0151l a biztons\u00e1gos b\u00f6ng\u00e9sz\u00e9s jelz\u00e9st<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/08\/google-oldalelmeny-uj.png\")
\n\n\n\nAz INP-vel cser\u00e9li le a FID-t a Google: 2024 m\u00e1rcius\u00e1ban \u00e9lesedik az \u00faj webes vitals mutat\u00f3<\/h2>\n\n\n\n
De l\u00e1ssuk r\u00e9szletesebben, mit is jelez a reszponzivit\u00e1s mutat\u00f3!<\/h4>\n\n\n\n
\n
\n
![\"\"](\"https:\/\/blog.webshark.hu\/wp-content\/uploads\/2022\/06\/FS4QwTiX0AIMMMg.png\")
<\/a><\/figure><\/div>\n\n\n
\n\n\n\nM\u00e1r a Search Console-ban is el\u00e9rhet\u0151 az INP-jelent\u00e9s (FRISS\u00cdT\u00c9S, 2023.06.26.)<\/h3>\n\n\n\n
A webhely k\u00e9szen \u00e1ll a 2024 m\u00e1rcius\u00e1ban \u00e9rkez\u0151 v\u00e1ltoz\u00e1sokra.<\/em>„<\/p>\n\n\n\nHogyan optimaliz\u00e1ld az INP-t?<\/h3>\n\n\n\n
\n
\n\n\n\nHogyan m\u00e9rd a core web vitals mutat\u00f3kat?<\/h2>\n\n\n\n
\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/09\/webes-vitals-ertekek.png\")
\n
Mivel m\u00e9rd a core web vitals mutat\u00f3kat?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/07\/alapveto-webes-vitals-mutatok-merese.png\")
Hogyan jav\u00edtsd az egyes webes vitals-mutat\u00f3kat?<\/h2>\n\n\n\n
Mi az a legnagyobb vizu\u00e1lis tartalomv\u00e1lasz (LCP)? \u00c9s hogyan jav\u00edts rajta?<\/h3>\n\n\n\n
\n
\n
Mi az a First Input Delay (FID)? \u00c9s hogyan jav\u00edtsd?<\/h3>\n\n\n\n
Mi az oka a rossz FID-nek? Hogyan optimaliz\u00e1lhat\u00f3?<\/h4>\n\n\n\n
\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/vizsgalat-lighthouse-1.png\")
<\/figure><\/div>\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/lighthouse-jelenteskeszites.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/long-main-thread-tasks.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/hosszu-feladatok.png\")
<\/figure><\/div>\n\n\nMi az a Cumulative Layout Shift (CLS)? \u00c9s hogyan jav\u00edtsd a CLS-t?<\/h3>\n\n\n\n
Mi okoz gyenge CLS-t?<\/h4>\n\n\n\n
\n
Hogyan vizsg\u00e1ld meg?<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/11\/cls-lightouse.png\")
<\/figure>\n\n\n\nMi a megold\u00e1s?<\/h4>\n\n\n\n
Az oldal\u00e9lm\u00e9ny nem real time algoritmus<\/h2>\n\n\n\n
A jobb webes vitals-mutat\u00f3k nem felt\u00e9tlen\u00fcl hoznak jobb helyez\u00e9st<\/h2>\n\n\n\n
Az oldal\u00e9lm\u00e9nyt nem a Googlebot vizsg\u00e1lja<\/h2>\n\n\n\n
Ha vannak AMP-oldalaid, akkor azoknak az oldal\u00e9lm\u00e9ny\u00e9t veszi figyelembe a Google<\/h2>\n\n\n\n
Kik fogj\u00e1k a legink\u00e1bb meg\u00e9rezni a webes vitals-mutat\u00f3kat?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/osszehasonlitas-2.png\")
<\/figure><\/div>\n\n\n