Az Oldalteljesítmény eszköz egyetlen gombnyomással átfogó képet ad weboldala sebességéről. Nem kell perceket várnia külső eszközökre — azonnal láthatja a betöltési időket, a Core Web Vitals mutatókat és az erőforrások eloszlását.
A weboldal sebessége kulcsfontosságú mind a felhasználói élmény, mind a keresőoptimalizálás (SEO) szempontjából. Az Oldalteljesítmény eszköz segít a szűk keresztmetszetek azonosításában azáltal, hogy lebontja az oldal súlyát típusok szerint (JS, CSS, képek), és méri a legfontosabb mérföldköveket, mint a DOM betöltése és a teljes betöltési idő. Akár egy lassan betöltődő szkriptet keres, akár az oldalméretet próbálja csökkenteni, ez a modul pontos adatokkal szolgál közvetlenül a böngészőből.
Mérje meg a legfontosabb Google mutatókat, mint a First Contentful Paint (FCP) és a betöltési idő. A színkódolt pontszámok (zöld, sárga, piros) segítenek azonnal felmérni, hogy az oldal megfelel-e a modern teljesítményelvárásoknak.
Lássa pontosan, mi teszi ki az oldala méretét. Egy vizuális kördiagram és lista mutatja a JavaScript, CSS, képek, betűtípusok és dokumentumok méretét KB-ban és százalékban kifejezve.
Kövesse nyomon a HTTP-kérések teljes számát. A túl sok kérés lassíthatja az oldalt, még akkor is, ha az összsúly kicsi. Ez az eszköz segít eldönteni, mikor van szükség a fájlok összevonására vagy spritok használatára.
Kapjon pontos adatokat a DOM-interaktivitásról és a teljes oldalbetöltésről ezredmásodperc pontossággal. Ez segít megérteni a különbséget aközött, amikor az oldal már használható, és amikor minden háttérfolyamat befejeződött.
Az adatok közvetlenül a böngésző Navigation Timing API-jából származnak, így azt a valós teljesítményt tükrözik, amit a felhasználók tapasztalnak a jelenlegi hálózati körülmények között.
Az összesített pontszám egy gyors viszonyítási alapot ad. Futtassa az eszközt az optimalizálás előtt és után, hogy mérni tudja a javulás mértékét.
Nyisson meg bármely oldalt, és kapjon azonnali képet a teljesítményéről. Gyors (zöld), közepes (sárga) vagy lassú (piros)? Az irányítópult kevesebb mint egy másodperc alatt választ ad — nem kell várnia a Lighthouse futására.
Ha az oldal lassú, az erőforrás-lebontás megmutatja, miért. 1,2 MB JavaScript? Ott a szűk keresztmetszet. 800 KB optimalizálatlan kép? Ez a megoldandó feladat. A vizuális diagram nyilvánvalóvá teszi a legfőbb felelősöket.
Futtassa le az Oldalteljesítmény mérést az optimalizálás előtt, és jegyezze fel a mutatókat. Végezze el a módosításokat, töltse be újra az oldalt, és mérjen újra. Hasonlítsa össze az FCP-t, a betöltési időt és a teljes súlyt az eredmények igazolásához.
Futtassa le az eszközt a saját oldalán és a versenytársakén is. Hasonlítsa össze a betöltési időket, súlyokat és erőforrás-elosztást. A versenytársak kevesebb JavaScriptet használnak? Jobban optimalizálták a képeiket?
A fejlesztés során rendszeresen mérje le a kulcsfontosságú oldalakat. Ha a pontszám leesik vagy az oldalsúly hirtelen megugrik, az egy visszalépés — szűrje ki még az élesítés előtt.
Kattintson az Oldalteljesítmény ikonra a DevSuite Pro dokkján. Az eszköz azonnal elkezdi gyűjteni az adatokat a jelenleg betöltött oldalról.
Várjon egy pillanatot, amíg az irányítópult betöltődik. Látni fog egy nagy teljesítmény-jelzőt és a főbb mutatókat (FCP, Load Time) feltűnő helyen.
Görgessen le az erőforrás-lebontáshoz. Nézze meg, hogy melyik kategória (például a képek vagy a JS) foglalja el a legtöbb helyet, és érdemes-e rajtuk optimalizálni.
Végezzen módosításokat a kódon, frissítse az oldalt, és futtassa újra az eszközt. Hasonlítsa össze az új értékeket a korábbiakkal a fejlődés igazolásához.
Használja a kérésszámot és a betöltési idővonalat annak eldöntésére, hogy a szerver válaszideje, a fájlok mérete vagy a kérések mennyisége okozza-e a lassulást.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
