notification icon
Ne maradj le semmiről! Iratkozz fel értesítéseinkre!

Így készítsd fel webhelyedet a Google 2021-es frissítésére

Vedd fel velünk a kapcsolatot, kattints!
logo_1 logo_2 logo_3 logo_4 logo_5 logo_6 logo_7 logo_8 logo_9 logo_10 logo_11 logo_12 logo_13 logo_14 logo_15 logo_16 logo_17 logo_18 logo_19 logo_20 logo_21 logo_22 logo_23 logo_24 logo_25 logo_26 logo_27 logo_28 logo_29 logo_30 logo_31 logo_32 logo_33 logo_34 logo_35 logo_36 logo_37 logo_38 logo_39 logo_40 logo_41 logo_42 logo_43 logo_44 logo_45 logo_46 logo_47 logo_48 logo_49 logo_50 logo_51
logo_1 logo_2 logo_3 logo_4 logo_5 logo_6 logo_7 logo_8 logo_9 logo_10 logo_11 logo_12 logo_13 logo_14 logo_15 logo_16 logo_17 logo_18 logo_19 logo_20 logo_21 logo_22 logo_23 logo_24 logo_25 logo_26 logo_27 logo_28 logo_29 logo_30 logo_31 logo_32 logo_33 logo_34 logo_35 logo_36 logo_37 logo_38 logo_39 logo_40 logo_41 logo_42 logo_43 logo_44 logo_45 logo_46 logo_47 logo_48 logo_49 logo_50 logo_51
Főoldal > Google Core Web Vitals: 5 módszer az alapvető webes vitals-mutatók javítására

Google Core Web Vitals: 5 módszer az alapvető webes vitals-mutatók javítására


2020/07/25
Máté Balázs, online marketing tanácsadó

„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.

Így készítsd fel webhelyedet a Google 2021-es frissítésére
Facebook logo

KÖVESS MINKET

FACEBOOKON

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

Cikk inline

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/

Google Hatékony honlapüzemeltetés

Ajánlatkérés

Több vásárlót szeretnél? Több vendéget szeretnél? Több ügyfelet szeretnél? Hatékonyabb marketinget szeretnél? Megalkotjuk tökéletes marketing stratégiádat, 2020.12.31-ig történő megrendelés esetén ennek díját elengedjük*.


*egy éves megrendelés esetén


Pihengetünk? mobile
Magyarország leglátogatottabb online marketing blogja

ENNYIEN OLVASTÁK A BLOGOT
2019. JANUÁR 1. ÓTA:
0
Kövess minket
Iratkozz fel!
Naprakész online marketing tippek és esettanulmányok
Marketing szakszótár

SPF

Mi is az a SPF? Az SPF az angol sender policy framework (vagyis kiküldői...

Hiperhivatkozás

A gyakran csak „linkként” ismert hiperhivatkozások lehetővé...

Döntő fél

Mit is jelent a döntő fél kifjezés? A döntő fél az a...

Apróhirdetés

Mi az az apróhirdetés? Az apróhirdetések („aprók”)...

Beküldés

Egy URL beküldése egy keresőmotornak, hogy bekerüljön annak...
Online marketing tanácsadó 1998-óta

Diplomáim megszerzése után nem tudtam eldönteni, hogy a tudományos pályán maradjak, vagy helyezzem marketing iránti érdeklődésemet üzleti alapokra. Legyen hát a kettő együtt, gondoltam. Levelezőn kezdtem neki a marketing doktori elvégzésének, oktattam az egyetemen, közben megalapítottam a Marketing Professzorok online marketing ügynökséget. Az eltelt időszakban több, mint 500 KKV és több tucat nagyvállalat marketing kommunikációjában játszottam szerepet, mint online marketing tanácsadó. A kutatást sem adtam fel, csapatommal egy olyan marketing kommunikációs stratégiát építettünk fel, mely keresőoptimalizálás (SEO), Social Media Marketing és tartalommarketing (publishing) alapokon szinte minden iparágban eredményesen és költséghatékonyan bevethető. Amennyiben eljutottál már oda, hogy tudod, a Ti cégeteknél is egy ilyen hatékony marketing kommunikációs stratégiára van szükséged, kérd ajánlatunkat! Ha még nem érzed az Internet elsöprő erejét, olvasgasd cikkeinket - de tudom, egyszer így is eljön a Te időd!

Online marketing tanácsadó 1998-óta
Online marketing tanácsadás

Az online marketing nem egyezik meg az offline marketinggel. Egészen másak a reakcióidők, a reakciók, az eszközök. Legyen szó kisvállalkozásról vagy egy gyógyszergyár több brandjéről, az eddig bevált sales és marketing nem adaptálható az online világra. Nem elég egy cégbemutatkozó, sőt nem elég egy jól megírt marketing szöveg sem. Az Interneten nem csak a potenciális vevőknek írunk, a keresőmotorokat és az Internetezők szokásait is figyelembe kell vennünk. Ha viszont ezeket eltaláljuk, elkapunk egy fonalat mely akár olyan ingyenes reklámot hozhat cégünknek, amely annyi emberhez jut el, amennyit a hagyományos eszközök segítségével nem is remélhetünk. Mi kell ehhez? Keresőoptimalizálás? Közösségi média marketing? Tartalommarketing? Egy kreatív ötlet és sok-sok tapasztalat, na és mindenek előtt egy jól kidolgozott marketing stratégia! 

Online PR és Publishing

Az online marketing mellett a Publishing és az online PR is része egy komplex marketing stratégiának. Gyógyszergyáraknál dolgozva megtanultam, mi az, ha az embert nem csak a kőkemény és tőkeerős konkurencia akarja megfektetni, feljelenteni, elgáncsolni, hanem a hatóságokkal és a média ellenszelével is harcolni kell. Sok olyan projektben vettem rész, ahol még csak látszódnia sem szabadott annak, hogy mit akarunk eladni, mégis konkrét eladási számokat vártak a multinacionális vállalat központjában az online PR vagy a Publishing hatására. Hibázni nem lehet, mert a konkurencia és a hatóságok szeme ránk szegeződik, a legkisebb félrelépésre is milliós büntetéseket várhatunk. Mégis rekordokat döntöttek az eladás-növekedési számok!

Online marketing előadások, oktatás és kutatás

A Gödöllői Szent István Egyetem Marketing Intézetének oktatójaként nem csak a diákok képzésében, de az elméleti kutatásokban is részt veszek. Doktori (PHD) munkám is online marketing témában készül. Az egyetemi kutató munka és a Marketing Professzorok Kft. mindennapi éles gyakorlati munkája során olyan tapasztalatokat szerezhetek, amelyet kevesen ma Magyarországon. Az élvonalbeli, EU-s forrásokból is támogatott elméleti egyetemi kutatás és az üzleti élet könyörtelen kihívásainak kombinációja hatékony és a konkurencia előtt járó tudást ad. Ezeket nem csak diákjaimnak, hanem nemzetközi marketing konferenciákon kutató társaimnak is igyekszem átadni, de ügyfeleimnél a mindennapi gyakorlatban is sikerrel alkalmazom. Keresőoptimalizálás, Facebook marketing, AdWords kampányok, LinkedIn és sorolhatnám azokat a vállalati tanfolyamokat, amelyeket tartottam az elmúlt években, kihelyezve vállalatoknál.

SEO tanácsadás, saját kutatás alapján

A SEO a komplex online marketing leghatékonyabb eszköze. A keresőoptimalizálás megítélése egy kis időre megrendült a közösségi média marketing felületek kialakulásával, amióta azonban azokon egyre inkább csak fizetett hirdetésekkel lehet nagy eléréseket produkálni, a SEO ismét vezeti a költséghatékony online marketing eszközök listáját. A keresőoptimalizálás azonban nem egy állandó rendszer, a Google algoritmusainak folyamatos változása a korábban jól prosperáló weblapok látogatottságát dönti rommá. Ahhoz, hogy naprakészek legyünk a SEO minden kis trükkjével, folyamatosan figyelnünk kell a nemzetközi irodalmat, valamint saját kísérleteket beállítva ellenőrizzük - vagy megdöntjük az onnan származó állításokat. A megszerzett tudást keresőoptimalizálási tanácsadásunk során alkalmazzuk ügyfeleink weboldalain.