A teljesítménymutatók fejlődnek. A Core Web Vitalst 2020-ban vezették be. Leváltotta a régebbi mutatókat (FCP, FID). Öt év múlva új mutatók váltják le a Core Web Vitalst.
A jövő mutatói mérni fogják: az AI betöltését (mennyi idő, amíg az AI funkciók válaszolnak), a valós idejű reakciót (mennyi idő, amíg a streamelt válaszok megjelennek), az érzékelt teljesítményt (milyennek érződik az oldal, nem csak a technikai mutatók).
A kérdés most: hogyan készüljünk fel a jövő mutatóira, ha nem tudjuk, mik lesznek. A válasz: mérd azt, ami az üzleted szempontjából számít. A Core Web Vitals az általános felhasználói élményt méri. Az egyéni mutatók az üzletspecifikus eredményeket. Úgy készülj a jövőre, hogy rugalmasságot építesz a mérési rendszerekbe.
A mutatók fejlődésének követése
A Core Web Vitals a jelenlegi szabvány. De nem végleges.
Idővonal:
- 2020: bevezetik a Core Web Vitalst (LCP, CLS, FID)
- 2022: a FID-et az INP váltja (a reakcióidő-mutató finomodik)
- 2024: viták a következő mutatókról (interakciós várakozási idő, streamelt válasz ideje)
- Jövő: új mutatók jelennek meg
Minta: ahogy a technológia változik, a mutatók is változnak. Amikor az oldalak interaktívvá váltak, az interaktivitási mutatók (INP) fontossá váltak. Ahogy az AI-integráció általánossá válik, az AI válaszideje fontos mutatóvá válhat.
Tanulság: az elvekre fókuszálj (a felhasználó gyorsnak, reagálónak és stabilnak érzékeli az oldalt), ne magukra a mutatókra. Az elvek stabilak akkor is, ha a mutatók változnak.
AI és valós idejű teljesítmény
Az AI funkciók egyre általánosabbak. A weboldal chatbotja 2 másodperc alatt válaszol. A felhasználó gyorsabbat vár.
Új mutató: az AI válaszideje (a felhasználó kérdésétől az AI válaszának első tokenjéig eltelt idő).
Példa: ügyfélszolgálati chatbot a támogatási oldalon. A felhasználó kérdez. A chatbot 2 másodperc alatt adja vissza az első választokent. A felhasználó érzése: a chatbot lassú, nem reagál.
Optimalizálás: streamelt válasz. Az első token 500 ezredmásodperc alatt jön vissza, a többi válasz streamelve érkezik. A felhasználó azonnalinak érzékeli a választ, akkor is, ha a teljes válasz 2 másodpercig tart.
Jövőbeli mutató: az első tokenig eltelt idő mérése (TTF), nem a teljes válaszidőé. Az 500 ezredmásodperc alatti TTF jó.
Valós példa: SaaS beágyazott AI-asszisztenssel.
Jelenlegi felhasználói élmény:
- A felhasználó rákattint az asszisztens ikonjára
- Az asszisztens 1,5 másodperc alatt jelenik meg
- A felhasználó vár, lassúnak érzékeli
- A csevegés lassúnak érződik
Jövőbeli optimalizálás:
- A felhasználó rákattint az asszisztens ikonjára
- Az ikon azonnal animálódik (azonnali visszajelzés, 100 ezredmásodperc)
- Megnyílik a csevegőablak (200 ezredmásodperc)
- Megjelenik az első AI-válasz (500 ezredmásodperc)
- A többi AI-válasz streamelve érkezik (1-2 másodperc)
A felhasználó érzése: azonnali válasz (az animáció és az ablaknyitás azonnal látszik).
Edge computing és elosztott teljesítmény
Az edge computing közelebb hozza a számítást a felhasználókhoz. A szervert New Yorkból Los Angeles-i peremhelyre költöztették. A TTFB látványosan javul.
Jövő: a számítás a peremen történik. A HTML generálása a peremen történik. A JavaScript futtatása a peremen történik. Az adatbázis-lekérdezések a peremre kerülnek szétosztva.
Hatás a mutatókra: a TTFB elhanyagolhatóvá válik (a hálózati késleltetés nullához közelít). Az LCP a megjelenítéstől függ, nem a szerver válaszától.
Jövőbeli optimalizálási fókusz: a megjelenítési teljesítmény, nem a szerver választeljesítménye.
Példa: jövőbeli, edge-alapú főoldal.
Jelenlegi állapot:
- TTFB: 200 ezredmásodperc (a szerver New Yorkban, a felhasználó Los Angelesben)
- LCP: 2 másodperc (LCP = TTFB + megjelenítési idő)
Jövőbeli állapot (edge computing):
- TTFB: 20 ezredmásodperc (a szerver a Los Angeles-i peremen)
- LCP: 1,5 másodperc (a megjelenítési idő a szűk keresztmetszet, nem a szerver válasza)
Optimalizálás: a megjelenítési teljesítmény javítása (CSS, JavaScript) fontosabbá válik, mint a szerver válaszának javítása.
Az érzékelt teljesítmény és a szubjektív mutatók
Objektív mutatók: az LCP 2 másodperc (mérhető, objektív).
Szubjektív mutatók: az oldal reagálónak érződik (szubjektív, érzékelt).
A kutatások szerint: az az oldal, amely reagálónak érződik, lehet, hogy ugyanazok a technikai mutatói, mint egy lassúnak érződőnek. A különbség az animáció, a vizuális visszajelzés és az érzékelt betöltés.
Jövőbeli mutató: az érzékelt reakcióidő. A felhasználó érzékelését mérd, ne csak a technikai mutatót.
Példa: két oldal azonos LCP-vel (2 másodperc).
Első oldal: azonnal üres oldalra tölt, majd a tartalom a 2. másodpercnél jelenik meg. A felhasználó lassúnak érzékeli.
Második oldal: azonnal vázképernyőt mutat (200 ezredmásodperc), majd fokozatosan kitölti a tartalmat a 2. másodpercig. A felhasználó gyorsabbnak érzékeli (a vázképernyő a gyorsabb betöltés illúzióját kelti).
Technikai mutatók (LCP): mindkettőnél azonos (2 másodperc).
Felhasználói érzékelés: a második oldal gyorsabbnak érződik.
Jövőbeli mutató: felhasználói érzékelési pontszám (a szubjektív élmény mérése a technikai mutatók mellett).
Streamelés és fokozatos megjelenítés
Mai megközelítés: az egész oldalt megjeleníti, és elküldi a kliensnek. A kliens megjeleníti az oldalt. Az oldal interaktív.
Streamelt megközelítés: az oldal részeit elküldi, ahogy elkészülnek. A kliens fokozatosan fogadja és jeleníti meg a részeket. Az oldal részben interaktív, mielőtt teljesen betöltődne.
Hatás: az az oldal, amely 2 másodperc alatt töltődik be teljesen, streameléssel 0,5 másodperc alatt interaktív lehet.
Jövőbeli mutató: az interaktivitásig eltelt idő (TTI). Mennyi idő, amíg a felhasználó használni tudja az oldalt.
Példa: termékoldal ajánlatokkal.
Mai megközelítés:
- A HTML betöltődik (0,5 másodperc)
- A CSS betöltődik (0,3 másodperc)
- A JavaScript betöltődik (0,5 másodperc)
- API-hívás az ajánlatokért (1 másodperc)
- Az oldal 2,3 másodpercnél interaktív
Streamelt megközelítés:
- A HTML streamelődik (0,1 másodperc), az oldal szerkezete látszik
- A CSS streamelődik (0,2 másodperc), az oldal stílusos
- A JavaScript streamelődik (0,3 másodperc), az oldal interaktív
- Az API-hívás az ajánlatokért a háttérben folytatódik
- Az oldal 0,5 másodpercnél interaktív
- Az ajánlatok 1 másodpercnél és utána jelennek meg
A felhasználó 0,5 másodpercnél már használhatja az oldalt (kosárba tehet, gombokra kattinthat). A teljes tartalom 1 másodpercnél és utána jelenik meg.
Jövőbeli mutató (TTI): 0,5 másodperc (a 2,3 másodpercről). Hatalmas javulás a felhasználói érzékelésben.
Gyakran ismételt kérdések
Kezdjük el most mérni az AI válaszidejét?
Igen, ha az oldalad AI funkciókat használ. Mérd az első tokenig eltelt időt. Kövesd naponta. Állíts be célokat (az 500 ezredmásodperc alatti jó). Készülj fel a jövőre, amikor ez szabványos mutató lesz. Még ha egyelőre nem hivatalos mutató is, az, hogy azt méred, ami a felhasználóid számára számít, felkészít a jövőre. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Hogyan készüljünk fel a jövő teljesítménymutatóira, amelyeket még nem ismerünk?
Építs rugalmas mérési rendszert. Mérd a Core Web Vitalst (jelenlegi szabvány). Mérj egyéni mutatókat is (ami az üzleted szempontjából számít). Amikor megjelennek a jövő mutatói, hozzáadhatod őket a meglévők mellé. A rugalmasság a kulcs.
Érdemes edge computingba fektetni a teljesítmény miatt?
Igen, ha globális felhasználóid vannak. Az edge computing látványosan csökkenti a TTFB-t (megszűnik a hálózati késleltetés). Megéri a befektetést. Ha a felhasználóid egyetlen földrajzi térségben koncentrálódnak, a CDN elég. A globális közönségnek az edge computing hasznos.
Hogyan mérjük az érzékelt teljesítményt?
Kérdezd meg a felhasználókat. Kérdezd: gyorsnak, reagálónak, stabilnak érződik az oldal. Vesd össze a felmérés eredményeit a technikai mutatókkal. Kiderülhet, hogy a felhasználók gyorsabbnak érzékelik az oldalt akkor is, ha a technikai mutatók azonosak. A visszajelzést használd a dizájn alakításához (vázképernyők, animációk, vizuális visszajelzés hozzáadása).
Az interaktivitásig eltelt idő (TTI) az új szabványos mutató?
Lehet. A TTI az interaktív oldalaknál többet mond az LCP-nél (a felhasználó cselekedhet, mielőtt az oldal teljesen betöltődne). De jelenleg a Core Web Vitals (LCP, CLS, INP) a szabvány. A TTI feltörekvő, de még nem hivatalos. Figyeld mindkettőt.
Hogyan maradjunk naprakészek az új teljesítménymutatókról és szabványokról?
Kövesd a hivatalos forrásokat: a Google teljesítményfrissítéseit, a Web.dev blogját, a W3C szabványügyi csoportjait. Kövesd az iparágat: webfejlesztői szakmai magazinokat, teljesítménytesztelő eszközök blogjait, fejlesztői konferenciák előadásait. Az új mutatók ezeken a csatornákon jelennek meg. Maradj tájékozott. Térj át korán, amikor az új szabvány releváns lesz az oldaladra.