A cyberbullying egy angol kifejezés, amit leginkább „kiberzaklatásként” lehetne lefordítani, habár nincs igazán magyar megfelelője. A magyarázatot tovább nehezíti, hogy még az angol nyelvben sincs konkrét, hivatalosan elfogadott definíció a „bullying” kif...
Google Core Web Vitals: 5 módszer az alapvető webes vitals-mutatók javítására
„Bárcsak suhinthatnék egyet a varázspálcámmal, hogy szupergyors webhelyem legyen” Ez a gondolat bizonyára benned is felmerült már. A webhelysebesség és a felhasználói élmény optimalizálása komoly munka, és nagyon hamar nagyon technikaivá is válhat. A legtöbb webhelytulajdonosnak vagy –kezelőnek hamar egy webprogramozóhoz kell fordulnia az intézkedésekért.
A google új Core Web Vitals (azaz „alapvető webes vitals”) mutatói még több rálátást és tanácsot nyújtanak webhelyeddel kapcsolatban. Nézzünk meg tehát öt dolgot, amivel javíthatsz ezeken a Core Web Vitals mutatókon.
Mielőtt belekezdenénk…
Fontos megjegyezni, hogy nincs olyan dolog, ami garantáltan képes lenne megoldani egy adott problémát. Webhelyed optimalizálása egy tág feladatkör, amiben sok apróbb javítás hoz majd nagy, látható eredményeket. Tehát habár az alábbiakban öt dologról olvashatsz, amiket megtehetsz webhelyedért, ez messze nem egy meghatározó lista. Még a google is azt mondta, hogy számos elem együttesen a pontszámokat, szóval nehéz konkrétan rámutatni valamire, és kijelenteni, hogy ezzel majd több pontot érsz el.
A Google annyiban segít, hogy rálátást kínál mindarra, amik lassíthatják webhelyedet vagy leronthatják a felhasználói élményt. Sok eszköz még javítási javaslatokat is biztosít ezekre.
Ebben a cikkben többet is megtudhatsz a Google Core Web Vitals frissítéséről, amely 2021-től lép érvénybe.
Öt módszer a Core Web Vitals javítására
Az évek során rengetegszer hallhattuk már, hogy milyen fontos is a webhelysebesség és a felhasználói élmény. Azonban habár rengeteg anyag érhető el arról, hogy hogyan optimalizáld webhelyedet, nehéz mindezt gyakorlatban is alkalmazni. Az elmúlt néhány hónap során a Google újra előtérbe helyezte a webhelysebességet, első sorban a jövő évi oldalélmény-frissítés formájában. Hogy segítsen felkészülni erre, a keresőóriás több elemzőeszközzel is előállt, illetve számos dokumentációt is publikált.
A legtöbb problémával kapcsolatos tippek nem igazán változtak. A lényeg továbbra is az, hogy fő tartalmaidat olyan gyorsan jelenítsd meg felhasználóidnak, amennyire csak lehetséges. Futtasd le a PageSpeed Insights tesztet, illetve nézd meg a Google Search Console felületén található új „Alapvető webes vitals-mutatók” jelentést is. Ezek már így is rengeteg tippet kínálnak majd a különböző javításokra.
Íme öt további dolog, amikkel javíthasz Core Web Vitals mutatóidon.
Optimalizáld képeidet
Kezdjük a listát máris egy örökérvényű feladattal: a képek optimalizálásával. Az egyik legfontosabb dolog, amit webhelyedért tehetsz nem más, mint képeid optimalizálása. Igen, ezt már kismilliószor hallhattad, de még egyszer el kell, hogy hangozzon: foglalkozz vele! Az a nagy, optimalizálatlan kép a főoldaladon vagy landing oldalon sokat árthat. A nagyméretű képek általában a legnagyobb vizuális tartalomválaszok (LCP) minden webhelyen. Kínálj megfelelő fogadtatást látogatóidnak azzal, hogy gondoskodsz gyors betöltéséről.
A képek optimalizálása egy részletesebb téma, de lényegében arra kell odafigyelned, hogy megfelelően tömörítsd képeidet. Ehhez számos ingyenes eszközt használhatsz – a lényeg, hogy ne tárolj és kínálj feleslegesen nagyméretű képeket webhelyeden, hiszen a legtöbb kijelzőn nem is lehet megjeleníteni őket teljes méretükben.
Továbbá érdemes olyan modern formátumokat is átvenni, mint a WebP. Az újabb formátumok kisebb fájlméretekben kínálnak jó minőségű tömörítést. A WebP-t egyre több eszköz és platform támogatja, és már a MacOS, az iOS és a Safari 14 is képesek megjeleníteni (akárcsak az új Microsoft Edge böngésző is).
A cms (tartalomkezelő rendszer) szintén segíthet a képek betöltésében. Augusztustól kezdve a wordpress 5.5 támogatni fogja a képek lusta betöltését (lazy loading). Ez lényegében azt jelenti, hogy csak azok a képek töltődnek be, amelyek a képernyőn is megjelennek, és a többi csak akkor, amikor a felhasználó elvégez egy műveletet az oldalon. Így a böngésző csak akkor tölti be a nagyobb képeket, amikor szükség van azokra.
Örökzöld webhelysebesség-tipp még a CDN (tartalomelosztó hálózat) használata is, de tudtad, hogy kifejezetten képekhez is használhatsz CDN-t? Egy képes CDN több beleszólást kínál abba, hogy hogyan szeretnéd felszolgálni és megjeleníteni képeidet. Egy CDN-en keresztül megjelenített kép olyan utasításokat kap az url-jébe, amelyek meghatározzák a böngészőnek, hogy hogyan bánjon vele.
Határozd meg képeid és hasonló elemeid helyét a stabilabb betöltés érdekében
Az egyik új alapvető webes vitals-mutató az „elrendezés összmozgása” (CLS). Egy jó példa erre az, amikor egy mobilos oldal készen betöltöttnek tűnik, de amikor megnyomsz egy gombot, a tartalmak átrendeződnek, és egy lassan betöltő hirdetés meg jelenik a gomb helyén. Ez gyakran megtörténik, és ez az egyik legzavaróbb tényező is a felhasználók szemében. Habár a CLS optimalizálása nem feltétlenül gyorsítja fel az oldalakat, kétségkívül gyorsabbnak tűnnek majd tőle.
Az elrendezés összmozgását az olyan képek okozzák, amelyek dimenziói nincsenek meghatározva a css-ben. A CLS-t továbbá előidézhetik a dimenziók nélküli hirdetések és beágyazott elemek, illetve a dinamikusan elhelyezett tartalmak is. Ha nem rendelkeznek dimenziókkal, ezek az elemek oda-vissza ugrálhatnak a betöltés alatt, amitől az oldal instabilnak tűnhet. Ez előfordulhat akkor is, ha új tartalmak kerülnek beillesztésre a meglévő tartalmak fölé. Ezt kerüld el, hacsak nem egy konkrét felhasználói interakció eredménye.
A CLS-t megakadályozhatod többek között azzal is, hogy meghatározod képeid szélességét és magasságát a css-ben. A böngészők így előre kijelölik és „lefoglalják” az olyan képek helyét, amelyek bizonyára később jelennek majd meg, mint a szöveges tartalmak. Az oldal rángatózása ezzel megszűnik, mert a böngésző tudni fogja, hogy hová milyen elemek kerülnek majd.
Tehát győződj meg róla, hogy megadd képeid megfelelő szélességi és magassági paramétereit. Mindezt persze megteheted reszponzív képeiddel is, csak figyelj oda, hogy ugyan azt az oldalarányt használd minden mérethez.
Gyorsítsd szerveredet a gyorsabb betöltések érdekében
Minél gyorsabban válaszol szervered a lekérésekre, annál jobb. A szerver gyorsítása közvetlenül javítja a webhelysebességi mutatókat. Az összetettebb webhelyeken a szerver általában a lekérések kezelésével, illetve a fájlok és szkriptek felszolgálásával foglalatoskodik, ezért érdemes ezeket optimalizálni.
A szerver optimalizálása számos részből áll. Először is szerezz jobb webtárhelyet. Ne ezen spórolj. Válassz olyat, ami jó teljesítményt kínál ésszerű áron. Ez után ott van még a szerver beállítása is – használj egy friss PHP verziót – és hogy milyen hardvereket használj. Talán ezek is újításra szorulnak majd. Továbbá utána kell nézned, hogy hogyan működnek adatbázisaid, és hogy hol javíthatnál rajtuk.
Ellenőrizhetnéd azt is, hogy hogyan szolgálja fel a szerver a fájlokat a felhasználóknak. Ezt a folyamatot többféleképpen is fel tudod javítani, például a „link rel=preload”, vagy HTTP/2 használatával. Mindebben (és további optimalizálásokban) egy jó CDN sokat segíthet.
Ellenőrizd CSS-edet, hogy gyorsabban betöltsd a hajtás feletti elemeket
Amikor egy böngésző betölt egy oldalt, akkor át kell futnia a html-t, le kell képeznie azt, át kell futnia a CSS-t, aztán azt is leképezni, aztán ugyan ezt a JavaScripttel, és így tovább. Minél több fájlra van szükséged a webhely betöltésére, és minél nagyobbak ezek a fájlok, annál lassabban töltődnek majd be. Gyakran, amikor a böngésző elfoglalt valamivel, nem tud a háttérben betölteni dolgokat. Bizonyos elemek gátolják ezt a folyamatot. Ezek a leképezést blokkoló JavaScriptek és CSS kódok mindent befolyásolhatnak.
Mivel a CSS később töltődik be, gyakran több időbe telik, hogy valami megjelenjen a képernyőn. Ha kiveszed desingod legfontosabb részeit – amelyek a hajtás felett jelennek meg – a fő CSS-ből, és közvetlenül a forráskódba illeszted be őket, akkor sokkal gyorsabban megjelenítheted őket a képernyőn. Ez szintén nem konkrétan gyorsabbá teszi webhelyedet, de gyorsabban fog megjelenni tőle, ami nagy előny a felhasználói élmény szempontjából.
Javítsd a harmadik felektől származó szkriptek betöltését
Számos webhelyen külső tényezők is felelnek a lassúságért. Ha webhelyed például hirdetési szkripteket is használ, akkor sorsod lényegében a hirdetésszolgáltató kezében van. Csak reménykedhetsz benne, hogy hirdetéseik elég jó teljesítményűek. Ha azonban reklámjaik lassan töltődnek be, akkor talán jobb ötlet új hirdetésszolgáltatóra váltani.
Ha úgy véled, hogy a külső felek szkriptjei lassítják webhelyedet, akkor mindenképpen érdemes utánanézni ennek. Tedd fel magadnak a kérdést: „Vajon tényleg szükségem van erre a hirdetésre?”, vagy „Mit érnek nekem ezek a szkriptek?”. Lehet, hogy vannak olyan alternatívák is ezek helyett, amelyek valamivel optimalizáltabbak és kevésbé terhelik meg szerveredet.
Ha lehetséges, megpróbálkozhatod saját tárhelyeden elhelyezni a szkriptet. Így valamivel több beleszólásod lesz a betöltési folyamatba. Ha ez nem lehetséges, akkor nézd meg, hogy van-e lehetőség gyorsabb előtöltésre.
Legalább annyit tegyél meg, hogy ne egyszerre töltesd be szkriptjeidet, vagy várj ezzel az utolsó pillanatig. Így a böngésző elő tudja állítani az oldalt, mielőtt megkapná és lefuttatná a külső szkripteket. Használj aszinkront, ha fontos szkripteket szeretnél futtatni – például egy analitikai szkriptet. A kevésbé fontosakat késleltetheted.
A Core Web Vitals mutatók fellendítése: Minden apró javítás számít
A közelgő oldalélmény-frissítéssel a Google újra előtérbe helyezte a webhelysebességet és a felhasználói élményt. Mi mindig is átfogóan tekintettünk a seo-ra: számos mozgó része van, amikkel mind foglalkoznod kell, hogy a lehető legjobb webhelyet készíthesd el magadnak. Habár a fent említett tippek segíthetnek javítani pontszámaidon, elsődlegesen azért alkalmazd őket, hogy jobb élményeket kínálj látogatóid számára!
Írta: Mocsonoky Csaba | A cikk forrása eredetileg angol nyelven jelent meg a Yoast.com-on: https://yoast.com/boost-core-web-vitals/
