Megújult gtmetrix értelmezése és használata - optimalizálás és gyorsítás

Mire nem tudunk hatással lenni az optimalizálás során?

Sajnos vannak olyan összetevők is, amire nem lehetünk hatással optimalizálás során. Ezekről bővebben IDE KATTINTVA olvashat.

 

A leírás tartalomjegyzéke:

 

Korábbi leírásunk itt olvasható a korábbi nézet szerinti pontozással kapcsolatosan: https://ugyfeladmin.tarhely.eu/knowledgebase/270/Hogyan-gyorsithatom-optimalizalhatom-weboldalamat---gtmetrix-.html

 

2020 november közepén a Gtmetrix megváltoztatta a korábbi PageSpeed/YSLOW könyvtárak szerinti pontozást a Google standard Lighthouse-ra. Az új rendszer bevezetésével új pontozások is érkeztek, melyek a Gtmetrix Grade a Performance Score és a Structure Score névre hallgatnak.

 

Osztályozás-Pontozás

 

A jelentések egyes értékei a Lighthouse rendszer pontozásán alapulnak, de nem egy-az-egyben kerültek átvételre az értékészámítások.

 

Gtmetrix Grade

 

Ez az osztályozás a Performance és Structure Score értékek súlyozásából számolódik ki (ezek váltották a PageSpeed és YSLOW értékeket).

 

értékek Korábbi Mostani
Neve: Performance Score GTmetrix Grade
Értéke: nem syámolódott betűkódos

 

 

Az érték az alábbi két összetevő aránypárjai szerint számolódik:

  • Performance Score – 70%-ban adja a Gtmetrix Grade értékét
  • Structure Score – 30%-ban adja a Gtmetrix Grade értékét

 

Performance Score

 

Ez lényegiben a Lighthouse-ból kinyerhető Performance Score, értelemszerűen a Gtmetrix tesztkörnyezetéből ellenőrizve. A Performance Score azt értékeli, hogy mennyire teljesít jól a weboldal felhasználói szemszögből.

 

Az érték 6 mutatóból épül fel, melyek különböző arányokban adják a pontszámot:

  • Betöltési sebesség/teljesítmény (55 %):
    • First Contentful Paint (FCP) – 15 %
    • Speed Index (SI) – 15 %
    • Largest Contentful Paint (LCP) – 25 %
  • Interaktivitás (40 %)
    • Time to Interactive (TtI) – 15 %
    • Total Blocking Time (TBT) – 25 %
  • Vizuális megjelenés befejeződése (5 %) - "Vizuális Stabilitás :-D
    • Cumulative Layout Shift (CLS) – 5 %

 

A mutatók jelentései

 

First Contentful Paint (FCP) - Az az idő, ami eltelik az oldalbetöltődés megkezdése és az első vizuálisan megjelenő tartalmi elem között.

Speed Index (SI) - a teljesítménymutató azt méri, hogy a képernyőn látható tartalom milyen gyorsan töltődik be.

Largest Contentful Paint (LCP) - Megmutatja, hogy mennyi időbe telik, míg a "legnagyobb tartalmi elem" (képi elem, videó elem, block-elem [tipikus html-elemek mint h1, table, stb)], stb) láthatóvá válik a látogató számára.

Time to Interactive (TtI) - Megmutatja, mennyi idő telik el addig, amíg a felhasználó által használható lesz a weboldal. Az FC-től számolódik ez az idő, egészen addig amíg a weboldal már képes reagálni a felhasználói bevitelekre.

Total Blocking Time (TBT) - Az oldalbetöltődés során, a scriptek általi blokkolt időintervallumot mutatja meg.

Cumulative Layout Shift (CLS) - Számlálja a weboldal felületének váltakozását addig, amíg a weboldal teljesen betöltődik (és egész pontosan ennek a váltakozásnak az idejét).

 

Minden mutató külön pontozás szerint épül fel, s ezek összeadása, súlyozása után adódik ki a végleges Performance Score érték. A Performance Score érték összetevőit, kiszámolódásának mérőit az új statisztikai mérés "Performance"  oldalfüle mutatja meg.

 

 

Gyakori kérdés, hogy hogyan lehet mégis más a metrikai mérés eredménye attól függően, hogy mely eszközzel mérünk (böngésző oldali konzolban, vagy épp a Google PagespeedInsight felületén)?

 

A Lighthouse egy eszköz, de működtetésének háttere teljesen különböző lehet. Értelemszerűen a Gtmetrix és a Google, illetve más szolgáltatók is:

  • más-más régiókból képesek mérést indítani
  • más-más hardware-eken futtatják az elemző-szoftvert
  • más-más hálózati lehetőségeket használnak, kevesebb-több átjárón jutnak el a céloldalig

 

Így nemhogy előfordulhat, de egyenesen törvényszerű az, hogy egy adott weboldalról két különböző mérőoldal különböző metrikai értékeket adjon vissza.

 

A különbségek okairól itt lehet többet megtudni:

https://gtmetrix.com/blog/why-is-my-gtmetrix-performance-score-different-from-pagespeed-insights-webpagetest-and-web-dev/

 

Structure Score

 

Ez az értékelés a Gtmetrix által kialakított saját értékelés, mely a Lighthouse rendszer "Opportunity" és "Diagnostic" mérésein alapszik. A Structure Score értékelés megmondja, hogy mennyire optimalizált a weboldal, technikailag mennyire van jól felépítve.

 

Az értékmérő lényegiben a korábbi PageSpeed és YSLOW értékekkel megegyezően végzi el az értékszámítást, hasonló szempontok szerint térképezi fel a weboldalt a lehető legoptimálisabb felépítés érdekében.

 

A Lighthouse rendszerének audit-pontjain túl további mérési mutatók is helyet kapnak itt:

  • KeepAlive vizsgálata
  • CSS Sprites használat
  • CDN szolgáltató használata
  • CSS @import ellenőrzése

 

A Structure Score érték összetevőit, kiszámolódásának mérőit az új statisztikai mérés "Structure" oldalfüle mutatja meg.

 

 

Mostanában gyakori kérdés az, hogy befolyásolja e a Structure Score a Performance Score értéket?

 

Direkt módon nem befolyásolja. Általánosságban azonban igenis kijelenthető, hogy egy felépítésből adódó probléma javítása növelni fogja a felhasználói élményt is, tehát magasabb lesz a Performance Score és a GTMetrix Grade.

 

Ha a nyitóoldal 16 MB-osról 2 MB-osra csökken, akkor gyorsabb lesz a nyitóoldal betöltődése is, tehát hatással lesz egy technikai optimalizálási módosítás a felhasználói élményre is.

 

Az ajánlás szerint értelmezhetőek a Scores mutatók az alábbiak szerint:

  • Structure "lapfül" és érték: a jobb optimalizálásért elvégzendő feladatok listája
  • Performance "lapfül" és érték: a weboldal aktuális optimalizáltságának mutatója

 

Web Vitals mutatók

 

A Google által meghatározott Web Vitals mutatók az "ügyfélélményre" koncentrálnak, vagyis a látogató gyors kiszolgálását hivatottak mérni, megmutatni.

 

Az alábbi mutatók kerülnek lemérésre:

  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

 

Largest Contentful Paint (LCP) érték

 

Megmutatja, hogy mennyi időbe telik, míg a "legnagyobb tartalmi elem" (képi elem, videó elem, block-elem [tipikus html-elemek mint h1, table, stb)], stb) láthatóvá válik a látogató számára.

 

kép forrása - https://gtmetrix.com/largest-contentful-paint.html

 

Total Blocking Time (TBT) érték

 

Az oldalbetöltődés során, a scriptek általi blokkolt időintervallumot mutatja meg.

 

Az First Contentful Paint (FCP) és a Time to Interactive (ToI) között teljes eltelt időt méri. Egész pontosan az oldalbetöltődés során, a scriptek által blokkolt időintervallumot jelenti, amikor a felhasználó semmit se tud csinálni (kattintások, képernyőérintés, gépelés, stb).

 

 

Cumulative Layout Shift (CLS) érték

 

Számlálja a weboldal felületének váltakozását addig, amíg a weboldal teljesen betöltődik (és egész pontosan ennek a váltakozásnak az idejét).

 

A felhasználó egy megrendelés-megerősítés felületen van éppen. Itt található egy "Megerősítem" és alatt egy "Vissza" gomb. Amikor a felhasználó a "Vissza" gombra kattintana, éppen "megérkezik egy oldalváltozás" a böngészőben, egy extra sor vagy beviteli mező megjelenik, ezzel a két gombot lejjebb csúsztatva (azaz megváltozik a weboldal felülete). Ekkor a felhasználó akaratlanul a "Megerősítem" gombra kattint.

A problémás eset itt is látható: https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm

 

Mi változott még?

 

Teljesen új összesítő felület

 

A "Summary" lapfül alatt teljesen új összesítés látszik, így könnebben áttekinthetőek azok az értékek, melyek együtt kiadják a Gtmetrix Grade osztályozást.

 

 

Megújult Performance lapfül

 

A Performance Scores -ba tartozó mutatók részletezése látható itt.

 

 

Fontos és hasznos része ennek még a "Browser Timings" felület is, mely a böngészőben mért adatokat jeleníti itt meg.

 

Structure lapfül az ismert metrikai értékekkel

 

A Structure lapfülre kerültek az optimalizációnál eddig használt értékek (korábbi PageSpeed és YSLOW adatok), amelyek továbbra is megjelennek de már nem %-osan, hanem színkóddal jelölve.

 

 

Az alábbi színkódokkal jelennek meg a mutatók:

  • High (vörös)
  • Med-High (sötét erikalila)
  • Medium (narancs)
  • Low-Med (világoszöld)
  • Low (zöld)
  • None (sötétzöld)

 

Az egyes értékek rákattintásával megjelenik a kezelendő URL/Kód/Lekérés is.

 

 

Hogyan állíthatom be a korábbi nézetet?

 

Ismeretlen ideig, de még biztosított a korábbi PageSpeed/YSLOW páros szerinti mérés is. Ezt az alábbiak szerint lehet engedélyezni:

1. a gtmetrix.com oldalán létre kell hozni egy ingyenes fiókot

2. belépés után a jobb felső sarokban kell az "Account"-ra kattintani

3. A kifrissülő oldalon meg kell keresni az "Analysis Options"-t, majd ott az "Enable Legacy Reports" opciót aktívra kell állítani.

4. Majd a lap alján a "Save Settings" -re kellene kattintani

5. Ezt követően egy újabb mérés elindítása előtt az "Analyze" gomb alatt található "Analysis Options" -ra klikkelve, a leugró ablakon beállítható, hogy a lekérés a korábbi "Legacy Report" legyen

 

 

Mire nem tudunk hatással lenni az optimalizálás során?

 

Leverage browser caching


Egészen pontosan azon összetevők (jellemzően CSS és JS fájok) esetében nincs ráhatása, melyek nem a tesztelt domain név alatt érhetőek el (mint például: google.com , connect.facebook.net , stb). Értelemszerűen az optimalizálás során csak a saját szerveren (saját tárhelyen) elérhető összetevőkre tud hatással lenni. Más szerverekről érkező tartalmak esetében nincs mód manipulálásra.

 

 

Inline small JavaScript


Olyan egyszerű, kisebb tartalmu különálló javascript fájlok, melyeket a felület inkább a kódba beírva ajánlana használni. A változtatással megszűnne az adott fájl lekérése (hisz a kód be lenne írva a megjelenő oldalfájlba, nem külön URL-ről lenne az hivatkozva). Ez egy olyan változtatás melyet fejlesztő tud megvalósítani, alapvetően kihatásdal lehet (a helyes) működésre.

 

Add Expires headers


Egészen pontosan azon összetevők esetében nincs ráhatása, melyek nem a tesztelt domain név alatt érhetőek el (mint például: google.com , connect.facebook.net , stb). Értelemszerűen az optimalizálás során csak a saját szerveren (saját tárhelyen) elérhető összetevőkre tud hatással lenni. Más szerverekről érkező tartalmak esetében nincs mód manipulálásra.

 

Make fewer HTTP requests


A HTML, CSS és Javascript fájlok egyszeri tömörítését követően még mindig panaszkodhat a felület arra, hogy túl sok ilyen tartalom kerül meghívásra az oldal betöltődésekor. A bővítmények által kínált tömörítésen túl már csak fejlesztői segítséggel lehet összevonni a fájlokat (sőt, bővítmény kihagyása esetén csak fejlesztővel is elvégezhető ez a művelet).

 

 

Use a Content Delivery Network (CDN)


A mutatók között külön pontozásra kerülnek a "sokáig nem változó tartalmak" kiszolgálásai. Az úgynevezett CDN-szolgáltatások (ilyen pl. a Cloudflare is) arra (is) valóak, hogy a sose/ritkán változó tartalmak egy külön ezekre fenntartott szerverhálózaton legyenek tárolva, s onnan cache-ből kiszolgálva.
Ugyan pont a Cloudflare-nek van magyarországi szerverparkja is (tehát hátrány nem származna ebből a beállításból), mégis csak igazán nagy portáloldalaknál, webshop-oknál ajánljuk ezt a beállítást.

 

Reduce the number of DOM elements


"...a DOM nem más, mint az oldal – általánosabb fogalmazva minden fastruktúra, pl. HTML és XML – szerkezetének programozási felülete." (forrás: webprogramozas.inf.elte.hu )
Ez az érték a weboldal felépítéséből adódik és "jön", erre külön ráhatásunk nincs, fejlesztőknek is rendszerint teljes újraprogramozással, vagy a használt kész rendszer váltásával van lehetősége ezt az értéket redukálni.

 

 

Reduce DNS lookups


Lényegiben a felület arra hívja fel a figyelmet, hogy az ellenőrzött weboldal hány darab különböző domain/aldomain névről hív még be tartalmat, s ez mekkora méretű lekéréseket jelent. A távoli lekérések darabszámára és méretére rendszerint csak funkcióvesztéssel (pl: egykattintásos Facebook-felhasználóval való bejelentkezés eltávolítása) tud hatással lenni a weboldal készítője.

  • 3 felhasználó találta hasznosnak ezt
Hasznosnak találta ezt a választ?

Kapcsolódó cikkek

Adatbázis tárolómotor átállítása MyISAM_ról InnoDB-re

Több helyen olvasható, hogy ajánlott egyes táblákat MyISAM tárolómotorról InnoDB-re állítani a...

Hogyan előzzem meg weboldalam hackelését, hogyan javítsam ki feltört oldalamat?

A weboldalak típusai rendszerint két részre oszthatóak felépítés szempontjából: népszerű...

Imagemagick használható-e a szerveren?

Az imagemagick lehetőség nem minden szerverünkön érthető el.A /usr/bin/convert az elérési úton...

Captcha védelem, azaz biztonsági kód a honlapra

Google reCaptcha elhelyezése WordPress oldalon! Hogyan? Kattints ide és megmutatjuk!   Mi az...

Hogyan gyorsíthatom, optimalizálhatom weboldalamat? - gtmetrix

Mire nem tudunk hatással lenni az optimalizálás során? Sajnos vannak olyan összetevők is, amire...