Hogyan tesztelheti webhelyét a Google világítótorony segítségével?

A Google új eszköze a teljesítmény, a SEO, a biztonság, a bevált gyakorlatok és az akadálymentesség javításának tesztelése és ajánlása.


A Google nemrégiben indította el Világítótorony, egy nyílt forrású eszköz a webhely kézi és automatikus ellenőrzéséhez.

Milyen mutatókat teszteli a Google világítótorony?

Vannak több mint 75 mutató teszteli és megadja az általános pontozást. Az alábbiakban felsorolt ​​néhány közül lehet érdeklődni, mint egy webhelytulajdonos, SEO elemző és webmesterek.

  • Teljesítmény – interaktív idő, késés, sebességindex, erőforrás-optimalizálás, TTFB, eszköz kézbesítés, szkriptek végrehajtási ideje, DOM mérete stb..
  • SEO – Mobilbarát, meta, mászó, kanonikus, szerkezeti stb.
  • Legjobb gyakorlatok – Képoptimalizálás, JS könyvtárak, böngészőhibák naplózása, elérhető a HTTPS-en keresztül, ismert JS sebezhetőségek stb.
  • Megközelíthetőség  – Oldal elemek, nyelv, ARIA attribútumok stb.
  • PWA (Progresszív webes alkalmazás) – átirányítja a HTTP-t a HTTPS-re, a válaszkód rendben van, gyors betöltése 3G-re, splash képernyő, nézetablak stb..

Fantasztikus eszköze, amelyet többféle módon is felhasználhat.

Így van – oly sok módon. Ha Ön fejlesztő, akkor felhasználhatja a Node.js-lel egy teszt programszerű futtatására. A piacon már kevés olyan eszköz található, amelyet a világítótorony működtet, és amely folyamatos helyszíni teljesítményfigyelést kínál.

Nézzük meg, hogyan futtatja világítótorony tesztet a webhelyén.

Kezdje a legegyszerűbbtől.

Mérje meg a web.dev webhelyet

A Google néhány hónappal ezelőtt kiadta a web.dev webhelyet, és jó népszerűségnek örvend. Az online tesztelés egyszerű.

Menj Intézkedés oldalon, és írja be az URL-t az ellenőrzés elvégzéséhez. Néhány másodpercig tart, és látnia kell a részletes jelentést az általános pontozással.

Az eredmények azt is megmutatják, hogy a sikeres metrikák teszte olyan jól elvégzett-e az átadott ellenőrzéseknél, és ezekkel a munkákkal figyelmet kell szentelni.

Ne töltsön túl sok időt a 100 eléréséért. Még a Google webhelyei sem számítanak rá.

Fontolja meg őket iránymutatásként, és próbáljon mindent javítani.

Megjegyzés: a web.dev teszttel emulál egy mobil eszközt, és írás közben nem látom azt a lehetőséget, hogy teszteljék az asztali számítógépet.

Króm

Tudja, hogy a világítótorony elérhető a Chrome böngészőjében? És a nagy hír az, hogy dönthet úgy, hogy teszteli a Mobil vagy az Asztal segítségével. A fejlesztői eszközökben érhető el.

  • Nyissa meg a Chrome böngészőt
  • Nyissa meg webhelyét tesztelés céljából
  • Nyissa meg a Fejlesztői eszközöket (Windows használata esetén nyomja meg az F12 billentyűt), vagy kattintson a jobb gombbal az oldalra, majd kattintson az Ellenőrzés gombra
  • Lépjen az ellenőrzések lapra

Mint láthatja fentebb, lehetősége van kiválasztani, hogy mit teszteljen. Ez nagyszerű, mivel összpontosíthat a céljára, és gyorsabban megkaphatja az ellenőrzési eredményeket.

Az eredmények megjelenése és érzése Chome és a web.dev szinte hasonló.

De ha alaposan megnézed, van itt egy extra mutatócsoport – Progressive Web App. Tehát újabb ok a Chrome használatával történő ellenőrzésre.

node.js

A világítótorony csomópont modulként kapható. Telepítheti a kiszolgálóra, és programozottan vagy parancssorban is felhasználhatja. Nézzük meg gyorsan, hogyan telepítsük a Világítótornyot egy teszt futtatásához.

Világítótorony telepítése az Ubuntu 18.x-re

A következőket teszteltem DigitalOcean szerver. A világítótorony megköveteli a Node LTS 8.9 vagy újabb verziót, és feltételezem, hogy telepítette már. Ha nem, olvassa el a Node.js telepítési útmutatóját.

Ön is megköveteli króm böngésző telepíteni kell a kiszolgálóra. Itt olvastam a telepítési útmutatót.

A világítótorony telepítése egyszerű, ahogy a többi modul is.

  • Bejelentkezés a szerverre
  • Futtassa a következő parancsot a telepítéshez

npm install -g világítótorony

A -g parancsot használom, így globális modulként telepíthető.

[Email protected]: ~ # npm install -g világítótorony
/ Usr / bin / világítótorony -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ Usr / bin / króm-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [Email protected] postinstall / usr / lib / node_modules / világítótorony / node_modules / ax-core
> node build / utils / postinstall.js

+ [Email protected]
hozzáadott 179 csomagot 119 közreműködőtől 10,094s alatt
[Email protected]: ~ #

A telepítés után futtassa a világítótorony parancsot annak ellenőrzése érdekében, hogy megfelelően telepítette-e.

[Email protected]: ~ # világítótorony
Kérjük, adjon meg egy URL-t

A rendelkezésre álló opciók megadásához –help
[Email protected]: ~ #

Jó, a világítótorony készen áll az ellenőrzés lefolytatására. Próbáljuk meg néhány tesztbeállítást.

Teszt futtatása fej nélküli böngészővel

világítótorony URL – króm-zászlók ="–fejetlen"

Adjon meg egy abszolút URL-t, beleértve a http-et vagy a https-t.

Volt:

[Email protected]: ~ $ világítótorony https://geekflare.com –chrome-flags ="–fejetlen"
ChromeLauncher Várakozás a böngészőre. + 0 ms
ChromeLauncher Várakozás a böngészőre … + 1ms
ChromeLauncher Várakozás a böngészőre ….. + 511ms
ChromeLauncher Várakozás a böngészőre ….. ✓ + 2ms
állapot Csatlakozás a böngészőhöz + 176 ms
status Alaphelyzet visszaállítása körülbelül: üres + 24ms
állapot benchmarking gép + 30ms
állapot Inicializálás… + 508 ms
állapot oldal betöltése & vár onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Nyilvánvaló, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FONTSIZE, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
status Oldaltérkép: Szkriptek + 2s
status Oldaltérkép: CSSUsage + 0ms
status Oldaltérkép letöltése: Viewport + 0ms
status Oldaltérkép: ViewportDimensions + 0ms
status Oldaltérkép: ThemeColor + 0ms
status Oldaltérkép: Manifest + 0ms
status Oldaltérkép: RuntimeExmissions + 0ms
status Oldaltérkép: ChromeConsoleMessages + 0ms
status Oldaltérkép: ImageUsage + 0ms
status Oldaltérkép: Hozzáférhetőség + 0ms
állapot Oldaltérkép: LinkElements + 0ms
status Oldaltérkép: AnchorsWithNoRelNoopener + 1ms
status Oldaltérkép: AppCacheManifest + 0ms
status Oldaltérkép: Doctype + 0ms
status Oldaltérkép: DOMStats + 0ms
status Oldaltérkép: JSLibraries + 0ms
status Oldaltérkép: OptimizedImages + 0ms
status Oldaltérkép: PasswordInputsWithPreventedPaste + 0ms
állapot Oldaltérkép: ResponseCompression + 0ms
status Oldaltérkép: TagsBlockingFirstPaint + 0ms
status Oldaltérkép: MetaDescription + 0ms
status Oldaltérkép: FontSize + 0ms
status Oldaltérkép: CrawlableLinks + 0ms
status Oldaltérkép: MetaRobots + 0ms
status Oldaltérkép: Hreflang + 0ms
status Oldaltérkép: EmbeddedContent + 0ms
status Oldaltérkép: Canonical + 0ms
status Oldaltérkép: RobotsTxt + 0ms
status Nyomkövetés beolvasása + 1ms
állapot A devtoLog beolvasása & hálózati rekordok + 110ms
állapot visszakeresése: Szkriptek + 27 ms
állapot visszakeresése: CSSUsage + 53ms
állapot visszakeresése: Viewport + 192ms
állapot visszakeresése: ViewportDimensions + 5ms
állapot visszakeresése: ThemeColor + 13ms
állapot visszakeresése: Nyilvánvaló + 2ms
állapot visszakeresése: RuntimeExmissions + 295ms
állapot visszakeresése: ChromeConsoleMessages + 1ms
állapot visszakeresése: ImageUsage + 2ms
állapot visszakeresése: akadálymentesség + 22ms
állapot visszakeresése: LinkElements + 526ms
állapot visszakeresése: AnchorsWithNoRelNoopener + 10ms
állapot visszakeresése: AppCacheManifest + 6ms
állapot visszakeresése: Doctype + 20ms
állapot visszakeresése: DOMStats + 4ms
állapot visszakeresése: JSLibraries + 50ms
állapot visszakeresése: OptimizedImages + 25ms
állapot lekérdezése: JelszóbevitelWithPreventedPaste + 234ms
állapot visszakeresése: ResponseCompression + 3ms
állapot visszakeresése: TagsBlockingFirstPaint + 7ms
állapot visszakeresése: MetaDescription + 6ms
állapot visszakeresése: FontSize + 7ms
állapot visszakeresése: CrawlableLinks + 245ms
állapot visszakeresése: MetaRobots + 6ms
állapot visszakeresése: Hreflang + 2ms
állapot visszakeresése: EmbeddedContent + 2ms
állapot visszakeresése: Canonical + 3ms
állapot visszakeresése: RobotsTxt + 6ms
status Alaphelyzet visszaállítása kb .: üres + 19ms-rel
állapot oldal betöltése & vár a feltöltésre ServiceWorker, Offline, StartUrl + 24ms
status Oldaltérkép: ServiceWorker + 59ms
status Oldaltérkép: Offline + 0ms
status Oldaltérkép: StartUrl + 1ms
állapot A devtoLog beolvasása & hálózati rekordok + 0ms
állapot visszakeresése: ServiceWorker + 2ms
állapot visszakeresése: Offline + 1ms
állapot visszakeresése: StartUrl + 1ms
status Alaphelyzet visszaállítása körülbelül: üres + 5ms
állapot oldal betöltése & vár a feltöltés HTTPRedirect, HTMLWithoutJavaScript + 48ms
status Oldaltérkép: HTTPRedirect + 260 ms
status Oldaltérkép: HTMLWithoutJavaScript + 0ms
állapot A devtoLog beolvasása & hálózati rekordok + 0ms
állapot visszakeresése: HTTPRedirect + 7ms
állapot visszakeresése: HTMLWithoutJavaScript + 12ms
állapot Bontás a böngészőből … + 7ms
állapot Ellenőrzések elemzése és lefolytatása … + 6ms
állapot kiértékelése: HTTPS + 3ms-t használ
állapot kiértékelése: A HTTP forgalmat átirányítja a HTTPS + 24ms-re
állapot kiértékelése: A szolgáltatót regisztrálja, aki kezeli az oldalt és a start_url + 1ms oldalt
állapot kiértékelése: Az aktuális oldal 200-mal válaszol, ha offline + 0ms
állapot kiértékelése: Van “ címke `szélességgel ‘vagy` kiindulási skála’ + 1ms-el
állapot kiértékelése: Tartalmaz bizonyos tartalmakat, ha a JavaScript nem érhető el + 1ms
állapot értékelése: Első tartalmi festék + 6ms
állapot értékelése: Első értelmes festék + 54ms
állapot kiértékelése: Az oldalak betöltése elég gyors a mobilhálózatokban + 10 ms
állapot értékelése: Sebességindex + 33ms
állapot értékelése: Képernyőkép Miniatűrök + 529ms
állapot értékelése: Végleges képernyőképe + 287 ms
állapot értékelése: Becsült bemeneti késés + 2ms
állapot kiértékelése: Nincs konzolba bejelentkezett böngészőhiba + 16 ms
állapot kiértékelése: A szerver válaszideje alacsony (TTFB) + 1ms
állapot értékelése: Első CPU tétlenség + 1 ms
állapot értékelése: Ideje interaktívnak + 30ms
állapot kiértékelése: Felhasználói időzítési jelek és mérések + 0ms
állapot kiértékelése: minimalizálja a kritikus kérések mélységét + 2ms
állapot kiértékelése: Kerülje el a több oldal átirányítását + 3ms
állapot kiértékelése: A webalkalmazás-jegyzék megfelel a telepíthetőségi követelményeknek + 2ms
állapot kiértékelése: Beállítva egy egyedi splash képernyőre + 1ms
állapot kiértékelése: Beállítja a címsor témájának színét + 0ms
állapot kiértékelése: A tartalom mérete megfelelő a nézetablakhoz + 1ms
állapot kiértékelése: Megjeleníti a képeket a megfelelő oldalaránnyal + 0ms
állapot kiértékelése: elkerüli az elavult API-kat + 1ms
állapot kiértékelése: minimalizálja a főszál munkáját + 0ms
állapot értékelése: JavaScript végrehajtási idő + 11ms
állapot kiértékelése: A kulcskérések előzetes betöltése + 3ms
állapot kiértékelése: Csatlakozzon előzetesen a szükséges origókhoz + 2ms
állapot kiértékelése: Az összes szöveg látható marad a webfont betöltésekor + 2ms
állapot kiértékelése: Hálózati kérések + 1ms
állapot értékelése: Metrika + 2ms
állapot kiértékelése: a start_url 200-mal válaszol, ha offline + 1ms
állapot kiértékelése: A webhely több böngészőben működik + 1ms
állapot értékelése: Az oldalátmenetek nem érzik magukat úgy, hogy blokkolják a hálózatot + 0ms
állapot kiértékelése: Minden oldal URL-je + 0ms
állapot értékelése: `[aria – *]` attribútumok megegyeznek a szerepükkel + 1ms
állapot kiértékelése: A [szerepkör] mindegyikének szüksége van `[aria – *]` attribútumokra + 1ms
állapot kiértékelése: A “[szerep]” elemmel rendelkező gyerekeknek, amelyek speciális gyermekeket igényelnek, [szerepük] vannak + 0ms-nál
állapot kiértékelése: A [szerepet] a szükséges szülő elem + 1ms tartalmazza
állapot kiértékelése: `[szerep]` értékek érvényesek + 1ms
állapot értékelése: `[aria – *]` attribútumok érvényes értékei + 0ms
állapot kiértékelése: `[aria – *]` attribútumok érvényesek és nem írtak el hibát + 1ms
állapot kiértékelése: A “ elemek tartalmaznak “ elemet `[kind ="feliratok"] `+ 1ms
állapot kiértékelése: A gombok elérhetõ neve + 1ms
állapot kiértékelése: Az oldal címsort, hivatkozást átugorva vagy egy tájékozódási pontot tartalmaz + 1ms
állapot értékelése: A háttér és az előtér színének megfelelő kontrasztaránya + 1ms
állapot kiértékelése: A “ csak a “ és “ csoportokat, “ vagy “ elemeket tartalmazza. + 1 ms
állapot kiértékelése: A meghatározási lista elemei “ elemekbe + 0ms-ba vannak csomagolva
állapot kiértékelése: A dokumentumnak “ elem van + 1ms
állapot kiértékelése: Az oldalon a `[id]` attribútumok egyedi + 1 ms-osak
állapot értékelése: A “ vagy “ elemek címe + 1ms
állapot kiértékelése: A “ elemnek `[lang]` attribútuma van + 0ms
állapot kiértékelése: A “ elemnek érvényes értéke van a `[lang]` attribútumhoz + 1ms
állapot kiértékelése: A kép elemeknek `[alt]` attribútuma van + 1ms
állapot értékelése: A “ elemek “ alt ‘`szövege + 1ms
állapot kiértékelése: Az űrlapelemekhez társított címkék + 0ms
állapot értékelése: Prezentációs `

az elemek nem használják a “, “ vagy a `[összefoglaló]` attribútumot. + 1 ms
állapot kiértékelése: A linkeknek jól látható neve + 1ms
állapot kiértékelése: A listák csak `
  • `elemek és szkript támogató elemek (` `és` `). + 1 ms
    állapot értékelése: Tételek felsorolása (`
  • “) a”
      “vagy”
        `szülő elemek + 1ms
        állapot kiértékelése: A dokumentum nem használja “ + 0ms-t
        állapot értékelése: `[user-scalable ="nem"] nem kerül felhasználásra az “ elemben, és a `[maximális skála]` attribútum nem kevesebb, mint 5. + 1ms
        állapot értékelése: A “ elemek “ alt ‘`szövege + 1ms
        állapot kiértékelése: Egy elemnek sem a `[tabindex]` értéke nem nagyobb, mint 0 + 1ms
        állapot értékelése: cellák egy `
  • A `[fejlécek]` attribútumot használó elem csak az ugyanazon tábla többi cellájára utal. + 1 ms
    állapot kiértékelése: “ elemek és elemek a `[role ="columnheader"/"rowheader"] `rendelkeznek adat cellákkal, amelyeket leírnak. + 0 ms
    állapot kiértékelése: `[lang]` attribútumok érvényes értéke + 1ms
    állapot kiértékelése: A “ elemek tartalmaznak “ elemet `[kind ="feliratok"] `+ 1ms
    állapot kiértékelése: A “ elemek tartalmaznak “ elemet `[kind ="leírás"] `+ 1ms
    állapot kiértékelése: `[accesskey]` értékek egyedi + 1ms
    állapot kiértékelése: Az egyéni vezérlőkhez társított címkék + 0ms
    állapot kiértékelése: Az egyéni vezérlők ARIA szerepekkel + 1ms-rel rendelkeznek
    állapot kiértékelése: A felhasználói fókusz véletlenszerűen nem esik csapdába egy + 0ms régióban
    állapot kiértékelése: Az interaktív kezelőszervek a billentyűzetre összpontosíthatók + 0ms
    állapot kiértékelése: A címsorok nem hagyják el a + 0ms szintet
    állapot értékelése: Az interaktív elemek jelzik a céljukat és az állapotot + 1ms
    állapot kiértékelése: Az oldal logikus lapok sorrendje + 0ms
    állapot kiértékelése: A felhasználó összpontosítja az oldalhoz hozzáadott új tartalomra + 1ms
    állapot kiértékelése: A képernyőn kívüli tartalom rejtett a segítő technológiától + 0ms
    állapot kiértékelése: A HTML5 tájékozódási pontok javítják a navigációt + 0ms-on
    állapot kiértékelése: Az oldal vizuális rendezése a DOM sorrendjét + 0ms követi
    állapot kiértékelése: Hatékony gyorsítótár-irányelvet használ statikus eszközöknél + 1ms
    állapot kiértékelése: Kerüli a hatalmas hálózati terheléseket + 3ms
    állapot kiértékelése: A képernyőn megjelenő képek elhalasztása + 1ms
    állapot kiértékelése: Szüntesse meg a render-blokkoló erőforrásokat + 12ms
    állapot kiértékelése: Csökkentse a CSS + 28ms értéket
    állapot értékelése: Minimalizálja a Java + 64ms szót
    állapot kiértékelése: Halasztja a fel nem használt CSS + 69ms-t
    állapot kiértékelése: A képeket továbbadhatja a következő nem formátumban + 12ms
    állapot kiértékelése: A képek hatékony kódolása + 11ms
    állapot kiértékelése: Engedélyezze a szöveg tömörítését + 6ms
    állapot értékelése: Megfelelő méretű képek + 6 ms
    állapot kiértékelése: Használjon videoformátumot animált tartalomhoz + 7ms
    állapot kiértékelése: Kerüli az Application Cache + 11ms használatát
    állapot kiértékelése: Az oldal HTML doktípusa + 0ms
    állapot kiértékelése: Kerülje a túl nagy DOM méretet + 1ms
    állapot kiértékelése: A származási helyekre mutató linkek biztonságosak + 2ms
    állapot kiértékelése: Kerülje a földrajzi helyre engedély engedélyének kérését az oldal betöltésekor + 1ms
    állapot kiértékelése: Kerüli a `document.write ()` + 0ms
    állapot kiértékelése: Kerülje az ismert biztonsági résekkel rendelkező + 0ms biztonsági résű JavaScript-könyvtárakat
    állapot értékelése: Detektált JavaScript könyvtárak + 9ms
    állapot kiértékelése: Kerüli az értesítési engedély kérését az oldal betöltésekor + 1ms
    állapot kiértékelése: Lehetővé teszi a felhasználók számára, hogy beillesszenek a jelszó mezőkbe + 0ms
    állapot kiértékelése: HTTP / 2-t használ saját forrásaihoz + 0ms
    állapot kiértékelése: Passzív hallgatókat használ a görgetési teljesítmény javításához + 1ms
    állapot kiértékelése: A dokumentumnak egy metaleírása + 0ms
    állapot kiértékelése: Az oldal sikeres HTTP állapotkódja + 1ms
    állapot kiértékelése: A dokumentum olvasható betűméreteket + 5ms használ
    állapot kiértékelése: A linkek leíró szöveggel + 1ms-rel rendelkeznek
    állapot értékelése: Az oldalt nem blokkolja a + 1ms indexelése
    állapot kiértékelése: a robots.txt érvényes + 2ms
    állapot kiértékelése: A dokumentum érvényes `hreflang` + 1ms értékkel rendelkezik
    állapot kiértékelése: A dokumentum elkerüli a pluginok + 1ms értékét
    állapot kiértékelése: A dokumentum érvényes `rel = canonical` + 0ms értékkel rendelkezik
    állapot értékelése: Az oldal mobilbarát + 1ms
    állapot kiértékelése: A strukturált adatok érvényesek + 0ms
    status Eredmények generálása … + 0ms
    ChromeLauncher Killing Chrome példány 7098 + 59ms
    A nyomtató html kimenete a /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms címre írva
    CLI Protip: Futtassa a világítótornyot a `–view` gombbal, hogy azonnal megnyissa a HTML jelentést a böngészőjében + 1ms

    A második utolsó sorban láthatja, hogy kinyomtatta az elérési utat, ahol megtalálhatom a jelentést. Alapértelmezés szerint HTML formátumban készít jelentést, amelyet megnézhet letöltésével a számítógépére, vagy egy webkiszolgálón keresztül szolgálhatja ki..

    De mi van, ha jelentést kell készítenie a JSON formátum?

    Az alábbiak szerint végezhető el.

    világítótorony URL – króm-zászlók ="–fejetlen" –output json – output-path URL.json

    A Világítótorony CLI használatával teljes mértékben ellenőrizheti, hogy a kívánt módon használja-e. Erősen ajánlom, hogy nézd meg a GitHub tárház hogy többet megtudjon a CLI használatáról vagy a programozásról.

    Következtetés

    A Google világítótorony ígéretes eszköznek számít a folyamatosság tesztelésében a webhely teljesítményének és használhatóságának javítása érdekében. Ha WordPress-t használ, és szeretne gyorsabban betölteni webhelyét, akkor nézd meg Rakéta.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map