Ako otestovať svoje stránky s majákom Google?

Novým nástrojom spoločnosti Google je testovanie a poskytnutie odporúčania na zlepšenie výkonu, SEO, zabezpečenia, osvedčených postupov a prístupnosti.


Spoločnosť Google bola nedávno spustená maják, nástroj s otvoreným zdrojom, ktorý umožňuje manuálne a automatické auditovanie vašich webových stránok.

Aké metriky testuje Maják Google?

Existujú viac ako 75 metrík testuje a dáva vám celkové hodnotenie. Niektoré z nasledujúcich populárnych, ktoré by vás mohli zaujímať ako vlastníci stránok, analytici SEO, webmasteri.

  • výkon – čas do interaktivity, latencia, index rýchlosti, optimalizácia zdrojov, TTFB, dodanie aktív, čas vykonania skriptov, veľkosť DOM atď..
  • SEO – Mobilný, meta, plazivý, kanonický, štruktúra atď.
  • Osvedčené postupy – Optimalizácia obrazu, knižnice JS, protokolovanie chýb prehliadača, prístupné cez HTTPS, známe zraniteľné miesta JS atď
  • prístupnosť  – Prvky stránky, jazyk, atribúty ARIA atď.
  • PWA (Progresívna webová aplikácia) – presmerovanie HTTP na HTTPS, kód odpovede ok, rýchle načítanie na 3G, úvodnú obrazovku, výrez atď..

Je to fantastický nástroj a môžete ho použiť niekoľkými spôsobmi.

To je pravda – toľko spôsobov. Ak ste vývojár, môžete ho použiť s Node.js na programové spustenie testu. Na trhu už existuje niekoľko nástrojov poháňaných Lighthouse, ktoré ponúkajú nepretržité monitorovanie výkonu stránok.

Dozvieme sa, ako na svojom webe spustíte test majákov.

Začnite od najjednoduchšieho.

Zmerajte podľa web.dev

Google vydal web.dev pred niekoľkými mesiacmi a získal dobrú popularitu. Testovanie online je jednoduché.

Ísť do opatrenia a zadajte adresu URL na vykonanie auditu. Bude to trvať niekoľko sekúnd a mali by ste vidieť podrobné správy s celkovým skóre.

Výsledky tiež ukazujú, že test metriky úspechu je tak dobre vykonaný pre absolvované audity a práca na nich vyžaduje pozornosť.

Nestrácajte príliš veľa času získaním 100. Dokonca ani stránky spoločnosti Google to nezískavajú.

Považujte ich za pokyny a snažte sa čo najviac vylepšovať.

Poznámka: web.dev emuluje test pomocou mobilného zariadenia a pri písaní nevidím možnosť testovať pomocou počítača.

chróm

Viete, že Lighthouse je k dispozícii vo vašom prehliadači Chrome? Skvelá správa je, že si môžete zvoliť testovanie pomocou mobilných zariadení alebo stolných počítačov. Je k dispozícii v nástrojoch pre vývojárov.

  • Otvorte prehliadač Chrome
  • Prístup na svoje stránky na testovanie
  • Otvorte vývojárske nástroje (ak používate systém Windows, stlačte kláves F12) alebo kliknite pravým tlačidlom myši na stránku a kliknite na položku Skontrolovať
  • Prejdite na kartu audity

Ako vidíte vyššie, máte na výber, čo chcete testovať. Je to skvelé, pretože sa môžete sústrediť na svoj cieľ a dosiahnuť rýchlejšie výsledky auditu.

Výsledky vyzerajú a cítia sa v prehliadači Chome a web.dev je takmer podobný.

Ak sa však pozriete pozorne, existuje tu jedna skupina metrík navyše – Progresívna webová aplikácia. Ďalší dôvod na audit pomocou prehliadača Chrome.

Node.js

Maják je k dispozícii ako modul uzla. Môžete si ho nainštalovať na server a použiť ho programovo alebo príkazovým riadkom. Poďme rýchlo vyskúšať, ako nainštalovať Lighthouse na vykonanie nejakého testu.

Inštalácia majáka na Ubuntu 18.x

Nasledujúce som testoval DigitalOcean serverov. Maják vyžaduje uzol LTS 8.9 alebo novší a predpokladám, že už máte nainštalovaný. Ak nie, pozrite si tohto inštalačného sprievodcu Node.js.

Budete tiež potrebovať prehliadač chrómu nainštalovať na server. Pokryl som tu inštalačný návod.

Inštalácia Lighthouse je jednoduchá, rovnako ako iné moduly.

  • Prihláste sa na svoj server
  • Spustite nasledujúci príkaz na inštaláciu

npm inštalácia -g maják

Používam tu -g, takže sa inštaluje ako globálny modul.

[Email protected]: ~ # npm inštalácia -g maják
/ Usr / bin / maják -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ Usr / bin / chróm-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [Email protected] postinstall / usr / lib / node_modules / lighthouse / node_modules / ax-core
> node build / utils / postinstall.js

+ [Email protected]
pridalo 179 balíkov od 119 prispievateľov v 10 094 s
[Email protected]: ~ #

Po inštalácii spustite príkaz majáka, aby ste sa uistili, že je nainštalovaný správne.

[Email protected]: ~ # maják
Zadajte adresu URL

Zadajte –help pre dostupné možnosti
[Email protected]: ~ #

Maják je pripravený na vykonanie auditu. Vyskúšajte niekoľko možností testovania.

Spustenie testu pomocou prehľadávača bez hlavy

adresa URL majáka –chrome-flags ="–bezhlavý"

Musíte zadať absolútnu adresu URL vrátane http alebo https.

ex:

[Email protected]: ~ $ maják https://geekflare.com –chrome-flags ="–bezhlavý"
ChromeLauncher Čaká na prehliadač. + 0 ms
ChromeLauncher Čaká na prehliadač … + 1ms
ChromeLauncher Čaká na prehliadač ….. + 511ms
ChromeLauncher Čaká na prehliadač ….. ✓ + 2ms
stav Pripojenie k prehliadaču + 176 ms
Stav Obnovenie stavu pomocou asi: prázdny + 24 ms
stav Zrovnávací stroj + 30ms
stav Inicializácia … + 508 ms
stav Načítava sa stránka & čakanie na onload skripty, CSSUsage, Výrez, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, dostupnosť, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, DOCTYPE, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
Stav Načítanie na stránke: Skripty + 2 s
Stav Načítanie na stránke: CSSUsage + 0ms
Stav Načítanie na stránke: Výrez + 0 ms
Stav Načítanie na stránke: ViewportDimensions + 0ms
Stav Načítanie na stránke: ThemeColor + 0ms
Stav Načítanie na stránke: Manifest + 0ms
Stav Načítanie na stránke: RuntimeExceptions + 0ms
stav Načítanie na stránke: ChromeConsoleMessages + 0ms
Stav Načítanie na stránke: ImageUsage + 0ms
Stav Načítanie na stránke: Prístupnosť + 0 ms
Stav Načítanie na stránke: LinkElements + 0ms
Stav Načítanie na stránke: AnchorsWithNoRelNoopener + 1ms
Stav Načítanie na stránke: AppCacheManifest + 0ms
Stav Načítanie na stránke: Doctype + 0ms
stav Načítanie na stránke: DOMStats + 0ms
Stav Načítanie na stránke: JSLibrary + 0ms
Stav Načítanie na stránke: OptimizedImages + 0ms
Stav Načítanie na stránke: PasswordInputsWithPreventedPaste + 0ms
Stav Načítanie na stránke: ResponseCompression + 0ms
Stav Načítanie na stránke: ZnačkyBlockingFirstPaint + 0ms
Stav Načítanie na stránke: MetaDescription + 0ms
Stav Načítanie na stránke: FontSize + 0ms
stav Načítanie na stránke: CrawlbleLinks + 0ms
Stav Načítanie na stránke: MetaRobots + 0ms
Stav Načítanie na stránke: Hreflang + 0ms
Stav Načítanie na stránke: EmbeddedContent + 0ms
Stav Načítanie na stránke: Canonical + 0ms
Stav Načítanie na stránke: RobotsTxt + 0ms
status Načítava sa sledovanie + 1 ms
status Načítanie devtoolsLog & sieťové záznamy + 110 ms
Stav Načítanie: Skripty + 27 ms
Načítava sa stav: CSSUsage + 53ms
Stav Načítava sa: Výrez + 192 ms
Stav Retrieving: ViewportDimensions + 5ms
Stav Načítanie: ThemeColor + 13ms
Stav Načítanie: Manifest + 2ms
Stav Retrieving: RuntimeExceptions + 295ms
Stav Načítava sa: ChromeConsoleMessages + 1ms
Načítanie stavu: ImageUsage + 2ms
Stav Načítanie: Prístupnosť + 22 ms
Stav Načítanie: LinkElements + 526ms
Stav Načítanie: AnchorsWithNoRelNoopener + 10ms
Stav Načítanie: AppCacheManifest + 6ms
Stav Načítanie: Doctype + 20ms
Stav Načítava sa: DOMStats + 4ms
načítanie stavu: knižnice JS + 50ms
Stav Načítava sa: OptimizedImages + 25ms
Stav Načítanie: PasswordInputsWithPreventedPaste + 234ms
Stav Načítanie: ResponseCompression + 3ms
Stav Načítanie: ZnačkyBlockingFirstPaint + 7ms
Stav Načítanie: MetaDescription + 6ms
Stav Načítanie: Veľkosť písma + 7 ms
Stav Načítava sa: CrawlbleLinks + 245ms
Stav Načítanie: MetaRobots + 6 ms
Stav Načítanie: Hreflang + 2ms
Stav Načítanie: EmbeddedContent + 2ms
Stav Načítavanie: Canonical + 3ms
Stav Načítanie: RobotsTxt + 6ms
Stav Obnovenie stavu pomocou asi: prázdny + 19 ms
stav Načítava sa stránka & čaká sa na spustenie ServiceWorker, offline, StartUrl + 24ms
Stav Načítanie na stránke: ServiceWorker + 59ms
Stav Načítanie na stránke: Offline + 0ms
Stav Načítanie na stránke: StartUrl + 1ms
status Načítanie devtoolsLog & sieťové záznamy + 0ms
Stav Načítanie: ServiceWorker + 2ms
Stav Načítava sa: Offline + 1 ms
Stav Načítanie: StartUrl + 1ms
Stav Obnovenie stavu pomocou: prázdny + 5 ms
stav Načítava sa stránka & čaká sa na onload HTTPRedirect, HTMLWithoutJavaScript + 48ms
stav Načítanie na stránke: HTTPRedirect + 260ms
stav Načítanie na stránke: HTMLWithoutJavaScript + 0ms
status Načítanie devtoolsLog & sieťové záznamy + 0ms
Stav Načítava sa: HTTPRedirect + 7 ms
Stav Načítanie: HTMLWithoutJavaScript + 12 ms
stav Odpojenie od prehliadača … + 7 ms
status Analýza a vykonávanie auditov … + 6ms
Vyhodnocovanie stavu: Používa HTTPS + 3ms
Stav Vyhodnocovanie: Presmeruje prenos HTTP na HTTPS + 24 ms
Stav Vyhodnocovanie: Registruje servisného pracovníka, ktorý riadi stránku a start_url + 1ms
Stav Vyhodnocovanie: Aktuálna stránka odpovie 200, keď je offline + 0 ms
stav Vyhodnocovanie: Má “ tag s `width ‘alebo` initial-scale` + 1ms
stav Vyhodnocovanie: Obsahuje nejaký obsah, keď nie je dostupný JavaScript + 1ms
Stav Vyhodnocovanie: Prvá obsahová farba + 6 ms
Stav Vyhodnotenie: Prvý zmysluplný náter + 54 ms
Stav Vyhodnocovanie: Načítanie stránky je v mobilných sieťach dostatočne rýchle a 10 ms
Stav Vyhodnocovanie: Index rýchlosti + 33 ms
hodnotenie stavu: Screenshot Miniatúry + 529 ms
hodnotenie stavu: Final Screenshot + 287ms
Stav Vyhodnocovanie: Odhadovaná vstupná latencia + 2 ms
stav Vyhodnocovanie: Do konzoly neboli prihlásené žiadne chyby prehliadača + 16 ms
hodnotenie stavu: Reakčné časy servera sú nízke (TTFB) + 1ms
hodnotenie stavu: prvé CPU nečinné + 1ms
hodnotenie stavu: Čas do interaktívneho + 30ms
stav Vyhodnocovanie: Časové značky používateľa a opatrenia + 0 ms
hodnotenie stavu: Minimalizujte hĺbku kritických požiadaviek + 2 ms
hodnotenie stavu: Vyhnite sa presmerovaniu viacerých stránok + 3 ms
Stav Vyhodnocovanie: Zoznam webových aplikácií spĺňa požiadavky na inštaláciu + 2 ms
Stav Vyhodnocovanie: Konfigurovaný pre vlastnú úvodnú obrazovku + 1ms
vyhodnotenie stavu: Nastaví farbu témy na paneli s adresou + 0 ms
Stav Vyhodnocovanie: Obsah má veľkosť výrezu správne 1ms
vyhodnotenie stavu: Zobrazuje obrázky so správnym pomerom strán + 0 ms
Stav Vyhodnocovanie: Vynechá zastarané API + 1ms
Stav Vyhodnocovanie: Minimalizuje prácu hlavného vlákna + 0 ms
Stav Vyhodnocovanie: Čas vykonania JavaScriptu + 11 ms
Stav Vyhodnotenie: Predbežne načítať žiadosti o kľúč + 3ms
Stav Vyhodnocovanie: Pred pripojením k požadovanému pôvodu + 2 ms
Stav Vyhodnocovanie: Celý text zostáva viditeľný počas načítania webfontu + 2 ms
hodnotenie stavu: Žiadosti o sieť + 1ms
hodnotenie stavu: Metriky + 2 ms
hodnotenie stavu: start_url odpovie 200 v režime offline + 1 ms
hodnotenie stavu: Stránky fungujú v rôznych prehliadačoch + 1 ms
hodnotenie stavu: Prechody stránok sa necítia, ako by blokovali v sieti + 0 ms
Stav Vyhodnocovanie: Každá stránka má URL + 0 ms
status Vyhodnocovanie: atribúty `[aria – *]` zodpovedajú ich úlohám + 1ms
status Vyhodnocovanie: `[rola]` s vyžaduje všetky atribúty `[ária – *]` + 1ms
Stav Vyhodnocovanie: Prvky s `[rola]`, ktoré vyžadujú konkrétne deti, sú prítomné + 0ms
stav Vyhodnocovanie: `[role]` s sú obsiahnuté v ich požadovanom nadradenom prvku + 1ms
status Vyhodnocovanie: Hodnoty `[role ]` sú platné + 1ms
stav Vyhodnocovanie: atribúty `[aria – *]` majú platné hodnoty + 0ms
status Vyhodnocovanie: atribúty `[aria – *]` sú platné a nie sú chybne napísané + 1ms
stav Vyhodnocovanie: “ elementy obsahujú “ element s `[druh ="titulky"] `+ 1 ms
Stav Vyhodnocovanie: Tlačidlá majú prístupný názov + 1ms
hodnotenie stavu: Stránka obsahuje nadpis, preskočený odkaz alebo orientačný región + 1 ms
Hodnotenie stavu: Farby pozadia a popredia majú dostatočný kontrastný pomer + 1 ms
status Vyhodnocovanie: “ ‘obsahujú iba správne usporiadané elementy “ a “ skupiny, “ alebo “. + 1 ms
Stav Vyhodnocovanie: Položky zoznamu definícií sú zabalené do “ elements + 0ms
stav Vyhodnocovanie: Dokument má “ element + 1ms
Stav Vyhodnocovanie: Atribúty `[id ]` na stránke sú jedinečné + 1ms
status Vyhodnocovanie: “ alebo “ prvky majú nadpis + 1ms
status Vyhodnocovanie: “ element má atribút `[lang]` + 0ms
status Vyhodnocovanie: “ element má platnú hodnotu pre svoj atribút [lang] `+ 1ms
stav Vyhodnocovanie: Prvky obrázka majú atribúty `[alt]` + 1ms
stav Vyhodnocovanie: “ prvky majú `[alt]` text + 1ms
Stav Vyhodnocovanie: Prvky formulára majú priradené štítky + 0ms
stav Vyhodnocovanie: Prezentácia `

`prvky sa vyhýbajú použitiu atribútov` `,` `alebo` [zhrnutie ]`. + 1 ms
Stav Vyhodnocovanie: Odkazy majú rozpoznateľný názov + 1ms
stav Vyhodnocovanie: Zoznamy obsahujú iba `
  • `prvky a prvky podporujúce skript (` `a` `). + 1 ms
    stav Vyhodnocovanie: Zoznam položiek (`
  • `) sú obsiahnuté v`
      `alebo`
        `nadradené prvky + 1ms
        stav Vyhodnocovanie: Dokument nepoužíva “ + 0ms
        stav Vyhodnocovanie: `[škálovateľné používateľom ="žiadny"] `nie je použité v elemente` `a atribút` [maximálna mierka] `nie je menší ako 5. + 1ms
        stav Vyhodnocovanie: “ prvky majú `[alt]` text + 1ms
        Stav Vyhodnocovanie: Žiadny prvok nemá hodnotu `[tabindex]` väčšiu ako 0 + 1ms
        stav Vyhodnocovanie: Bunky v `
  • `element, ktorý používa atribút` [hlavičky ]` odkazuje iba na iné bunky tej istej tabuľky. + 1 ms
    stav Vyhodnocovanie: “ elementy a elementy s `[role ="columnheader"/"rowheader"] majú dátové bunky, ktoré opisujú. + 0 ms
    status Vyhodnocovanie: atribúty `[lang]` majú platnú hodnotu + 1ms
    stav Vyhodnocovanie: “ elementy obsahujú “ element s `[druh ="titulky"] `+ 1 ms
    stav Vyhodnocovanie: “ elementy obsahujú “ element s `[druh ="popis"] `+ 1 ms
    Stav Vyhodnocovanie: Hodnoty `[accesskey ]` sú jedinečné + 1ms
    hodnotenie stavu: Vlastné ovládacie prvky majú priradené štítky + 0 ms
    Vyhodnocovanie stavu: Vlastné ovládacie prvky majú roly ARIA + 1ms
    hodnotenie stavu: Zaostrenie používateľa nie je náhodne zachytené v oblasti + 0 ms
    Hodnotenie stavu: Interaktívne ovládacie prvky sú ovládateľné klávesnicou + 0 ms
    Stav Vyhodnocovanie: Nadpisy nepreskočia úrovne + 0 ms
    hodnotenie stavu: Interaktívne prvky označujú ich účel a stav + 1ms
    Stav Vyhodnocovanie: Stránka má logické poradie kariet + 0 ms
    hodnotenie stavu: Zameranie používateľa je zamerané na nový obsah pridaný na stránku + 1 ms
    Stav Vyhodnotenie: Obsah mimo obrazovky je skrytý pred podpornou technológiou + 0 ms
    Stav Vyhodnocovanie: Prvky orientačného bodu HTML5 sa používajú na zlepšenie navigácie + 0 ms
    Stav Vyhodnocovanie: Vizuálne poradie na stránke nasleduje poradie DOM + 0 ms
    Vyhodnocovanie stavu: Používa efektívnu politiku vyrovnávacej pamäte pre statické diela + 1 ms
    Vyhodnocovanie stavu: Vyhýba sa obrovskému sieťovému zaťaženiu + 3 ms
    hodnotenie stavu: Odloženie obrázkov mimo obrazovky + 1 ms
    Stav Vyhodnocovanie: Eliminujte zdroje blokujúce vykreslenie + 12 ms
    hodnotenie stavu: Minimalizujte CSS + 28 ms
    stav Vyhodnocovanie: Minimalizujte JavaScript + 64 ms
    hodnotenie stavu: Odložiť nevyužité CSS + 69 ms
    hodnotenie stavu: Poskytujte obrázky vo formátoch nasledujúcej generácie + 12 ms
    hodnotenie stavu: Efektívne kódovanie obrázkov + 11 ms
    Stav Vyhodnocovanie: Povolí kompresiu textu + 6 ms
    hodnotenie stavu: Obrázky správnej veľkosti + 6 ms
    hodnotenie stavu: Na animovaný obsah používajte video formáty + 7 ms
    Stav Vyhodnocovanie: Vynechá vyrovnávaciu pamäť aplikácie + 11 ms
    Stav Vyhodnocovanie: Stránka má HTML doctype + 0ms
    Stav Vyhodnocovanie: Vyhýba sa nadmernej veľkosti DOM + 1 ms
    hodnotenie stavu: Odkazy na cieľové miesta kríženia sú bezpečné + 2 ms
    Stav Vyhodnocovanie: Vyhýba sa požiadavke na povolenie geolokácie pri načítaní stránky + 1 ms
    Stav Vyhodnocovanie: Vyhýba sa `document.write ()` + 0ms
    Stav Vyhodnocovanie: Vyhýba sa front-end knižniciam JavaScript so známymi bezpečnostnými zraniteľnosťami + 0ms
    stav Vyhodnocovanie: Zistené knižnice JavaScript + 9 ms
    stav Vyhodnocovanie: Vyhýba sa požiadavke na povolenie oznámenia pri načítaní stránky + 1 ms
    Stav Vyhodnocovanie: Umožňuje používateľom vkladať do polí pre heslá + 0ms
    Stav Vyhodnocovanie: HTTP / 2 používa pre svoje vlastné zdroje + 0ms
    Vyhodnocovanie stavu: Používa pasívnych poslucháčov na zlepšenie posúvania + 1 ms
    Stav Vyhodnocovanie: Dokument má meta popis + 0ms
    hodnotenie stavu: Stránka má úspešný stavový kód HTTP + 1ms
    Stav Vyhodnocovanie: Dokument používa čitateľné veľkosti písma + 5 ms
    stav Vyhodnocovanie: Odkazy majú popisný text + 1ms
    Stav Vyhodnocovanie: Stránka nie je blokovaná v indexovaní +1 ms
    Stav Vyhodnocovanie: robots.txt je platný + 2ms
    stav Vyhodnocovanie: Dokument má platné `hreflang` + 1ms
    hodnotenie stavu: Dokument sa vyhýba doplnkom + 1ms
    stav Vyhodnocovanie: Dokument má platný `rel = canonical` + 0ms
    hodnotenie stavu: Stránka je vhodná pre mobily + 1 ms
    Stav Vyhodnocovanie: Štruktúrované údaje sú platné + 0 ms
    Stav Generuje výsledky … + 0ms
    ChromeLauncher Zabíjanie inštancie prehliadača Chrome 7098 + 59 ms
    Výstup html tlačiarne napísaný na adresu /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    Protokol CLI: Spustite maják pomocou príkazu `–view` a okamžite otvorte prehľad HTML vo vašom prehliadači + 1ms

    V druhom poslednom riadku vidíte, že vytlačilo cestu, kde nájdem správu. V predvolenom nastavení vygeneruje správu vo formáte HTML, ktorú si môžete prezrieť buď stiahnutím do svojho počítača, alebo pomocou nejakého webového servera.

    Ale čo ak musíte vygenerovať správu v systéme Windows JSON formát?

    Je to možné takto.

    adresa URL majáka –chrome-flags ="–bezhlavý" –output json –output-path URL.json

    Používaním rozhrania Lighthouse CLI máte úplnú kontrolu nad tým, ako chcete. Dôrazne odporúčam vyskúšať Úložisko GitHub dozvedieť sa viac o používaní CLI alebo programovo.

    záver

    Maják Google vyzerá ako sľubný nástroj na vykonanie testu kontinuity s cieľom zlepšiť výkon a použiteľnosť stránok. Ak používate program WordPress a chcete zrýchliť načítavanie svojich stránok, vyskúšajte stránku raketa.

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