Kako preizkusite svoje spletno mesto z Googlovim svetilnikom?

Google je novo orodje za testiranje in priporočilo za izboljšanje učinkovitosti, SEO, varnosti, najboljših praks in dostopnosti.


Google se je nedavno predstavil Svetilnik, odprtokodno orodje za ročno in samodejno revizijo vašega spletnega mesta.

Katere meritve preizkuša Google Svetilnik?

Obstajajo več kot 75 metrik preizkuša in vam daje skupno oceno. Nekaj ​​naslednjih priljubljenih, ki bi vas utegnile zanimati kot lastnik spletnega mesta, SEO analitik, spletni skrbniki.

  • Izvedba – čas do interaktivnosti, zamude, indeks hitrosti, optimizacija virov, TTFB, dobava sredstev, čas izvajanja skriptov, velikost DOM itd..
  • SEO – prijazen do mobilnih naprav, meta, pajkanje, kanonik, struktura itd.
  • Najboljše prakse – optimizacija slike, knjižnice JS, beleženje napak v brskalniku, dostopna prek HTTPS, znane ranljivosti JS itd.
  • Dostopnost  – Elementi strani, jezik, atributi ARIA itd.
  • PWA (Progresivna spletna aplikacija) – preusmeritev HTTP na HTTPS, koda odziva v redu, hitro nalaganje na 3G, brizg zaslona, ​​vidno polje itd..

Njegovo fantastično orodje in lahko uporabljate na več načinov.

Tako je – toliko načinov. Če ste razvijalec, ga lahko uporabite z Node.js za programsko izvajanje testov. Na trgu je že malo orodij, ki jih poganja svetilnik, ki ponujajo stalno spremljanje uspešnosti lokacije.

Ugotovimo, kako izvajate svetilniški test na svojem spletnem mestu.

Začnite od najlažjega.

Izmerite po web.dev

Google je nekaj mesecev nazaj izdal web.dev in pridobil dobro priljubljenost. Testiranje prek spleta je enostavno.

Pojdi do Izmerite strani in vnesite URL za izvajanje revizije. Trajalo bo nekaj sekund, pri čemer bi morali videti podrobno poročanje s skupno točko.

Rezultati kažejo tudi test meritev uspešnosti, ki je bil tako dobro opravljen za opravljene revizije in je treba delati na teh potrebnih pozornosti.

Ne porabite preveč časa za pridobitev 100. Tudi Googlova spletna mesta tega ne ocenijo.

Upoštevajte jih kot smernice in poskusite izboljšati, kolikor lahko.

Opomba: web.dev posnema test s pomočjo mobilne naprave in med pisanjem ne vidim možnosti za preizkušanje z namizjem.

Chrome

Ali veste, da je svetilnik na voljo v vašem brskalniku Chrome? Odlična novica je, da se lahko odločite za preizkus z mobilnim ali namiznim računalnikom. Na voljo je v orodjih za razvijalce.

  • Odprite brskalnik Chrome
  • Obiščite svoje spletno mesto in preizkusite
  • Odprite orodja za razvijalce (če uporabljate Windows) pritisnite F12 ali z desno miškino tipko kliknite stran in kliknite Pregledaj
  • Pojdite na zavihek revizije

Kot lahko vidite zgoraj, imate možnost izbrati, kaj želite preizkusiti. To je odlično, saj se lahko osredotočite na svoj cilj in hitreje dobite rezultate revizije.

Izgledi Chome in web.dev so skoraj podobni.

Če pa natančno pogledate, je tukaj še ena skupina meritev – Progresivna spletna aplikacija. Torej še en razlog za revizijo v Chromu.

Node.js

Svetilnik je na voljo kot modul vozlišča. Lahko ga namestite na strežnik in ga uporabite programsko ali ukazno vrstico. Hitro poglejmo, kako namestiti Lighthouse in opraviti nekaj preizkusa.

Namestitev svetilnika na Ubuntu 18.x

Naslednje sem preizkusil naprej DigitalOcean strežnik. Svetilnik potrebuje vozlišče LTS 8.9 ali novejšega in predvidevam, da ga že imate nameščen. Če ni, glejte ta priročnik za namestitev Node.js.

Zahtevali boste tudi brskalnik krom namestiti na strežnik. Tu sem zajel navodila za namestitev.

Namestitev svetilnika je enostavna, kot pri drugih modulih.

  • Prijavite se v strežnik
  • Za namestitev zaženite naslednji ukaz

npm namestite -g svetilnik

Tu uporabljam -g, da se namesti kot globalni modul.

[zaščitena e-pošta]: ~ # npm namestite -g svetilnik
/ usr / bin / svetilnik -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ usr / bin / chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [zaščitena e-pošta] postinstall / usr / lib / node_modules / svetilnik / node_modules / ax-core
> node build / utils / postinstall.js

+ [zaščitena e-pošta]
dodanih 179 paketov od 119 prispevkov v 10.094
[zaščitena e-pošta]: ~ #

Ko je nameščen, zaženite ukaz svetilnika in se prepričajte, da je pravilno nameščen.

[zaščitena e-pošta]: ~ # svetilnik
Navedite URL

Navedite – pomoč za razpoložljive možnosti
[zaščitena e-pošta]: ~ #

Dober svetilnik je pripravljen za izvedbo revizije. Poskusimo nekaj preizkusnih možnosti.

Če želite izvesti test s pomočjo brezglavega brskalnika

URL svetilnika –chrome-flags ="–brez glave"

Navesti morate absolutni URL, vključno s http ali https.

Primer:

[zaščitena e-pošta]: ~ $ svetilnik https://geekflare.com –chrome-flags ="–brez glave"
ChromeLauncher čaka na brskalnik. + 0ms
ChromeLauncher Čakanje na brskalnik … + 1ms
ChromeLauncher čaka na brskalnik ….. + 511 ms
ChromeLauncher Čakanje na brskalnik ….. ✓ + 2ms
stanje Povezava z brskalnikom + 176 ms
stanje Ponastavitev stanja s približno: prazno + 24 ms
status Benchmarking stroj + 30ms
inicializacija stanja… + 508ms
stanje Nalaganje strani & čaka onload skripte, CSSUsage, Vidno območje, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, dostopnost, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, DOCTYPE, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FONTSIZE, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
status Pridobivanje na strani: skripti + 2s
status Pridobivanje strani: CSSUsage + 0ms
status Pridobivanje na strani: Pogled + 0ms
stanje Pridobivanje strani: ViewportDimensions + 0ms
stanje Pridobivanje strani: ThemeColor + 0ms
status Pridobivanje strani: Manifest + 0ms
status Pridobivanje strani: RuntimeExceptions + 0ms
status Pridobivanje strani: ChromeConsoleMessages + 0ms
status Pridobivanje strani: Uporaba slike + 0ms
status Pridobivanje strani: Dostopnost + 0ms
status Pridobivanje strani: LinkElements + 0ms
status Pridobivanje strani: AnchorsWithNoRelNoopener + 1ms
status Pridobivanje strani: AppCacheManifest + 0ms
status Pridobivanje strani: Doctype + 0ms
status Pridobivanje strani: DOMStats + 0ms
status Pridobivanje na strani: JSLibraries + 0ms
status Pridobivanje strani: OptimizedImages + 0ms
status Pridobivanje strani: PasswordInputsWithPreventedPaste + 0ms
status Pridobivanje strani: ResponseCompression + 0ms
status Pridobivanje strani: OznakeBlockingFirstPaint + 0ms
status Pridobivanje strani: MetaDescription + 0ms
stanje Pridobivanje strani: velikost pisave + 0ms
status Pridobivanje strani: CrawlableLinks + 0ms
status Pridobivanje strani: MetaRobots + 0ms
status Pridobivanje strani: Hreflang + 0ms
status Pridobivanje strani: EmbeddedContent + 0ms
status Pridobivanje strani: Canonical + 0ms
status Pridobivanje strani: RobotsTxt + 0ms
status Pridobivanje sledi + 1ms
status Pridobivanje devtoolsLog & omrežni zapisi + 110ms
stanje Pridobivanje: skripti + 27 ms
status Nalaganje: CSSUsage + 53ms
status Pridobivanje: Viewport + 192ms
status Pridobivanje: ViewportDimensions + 5ms
status Pridobivanje: ThemeColor + 13ms
status Pridobivanje: Manifest + 2ms
stanje Pridobivanje: RuntimeExceptions + 295ms
status Pridobivanje: ChromeConsoleMessages + 1ms
status Pridobivanje: ImageUsage + 2ms
status Pridobivanje: dostopnost + 22 ms
status Pridobivanje: LinkElements + 526ms
status Pridobivanje: sidraWithNoRelNoopener + 10ms
status Pridobivanje: AppCacheManifest + 6ms
status Pridobivanje: Doctype + 20ms
status Pridobivanje: DOMStats + 4ms
status Pridobivanje: JSLibraries + 50ms
status Pridobivanje: OptimizedImages + 25ms
status Pridobivanje: PasswordInputsWithPreventedPaste + 234ms
status Pridobivanje: ResponseCompression + 3ms
status Pridobivanje: OznakeBlockingFirstPaint + 7ms
status Pridobivanje: MetaDescription + 6ms
status Pridobivanje: velikost pisave + 7 ms
status Pridobivanje: CrawlableLinks + 245ms
status Pridobivanje: MetaRobots + 6ms
status Pridobivanje: Hreflang + 2ms
status Pridobivanje: EmbeddedContent + 2ms
status Pridobivanje: Canonical + 3ms
status Pridobivanje: RobotsTxt + 6ms
stanje Ponastavitev stanja s približno: prazno + 19 ms
stanje Nalaganje strani & čaka na onload ServiceWorker, brez povezave, StartUrl + 24ms
status Pridobivanje strani: ServiceWorker + 59 ms
status Pridobivanje strani: Brez povezave + 0ms
status Pridobivanje strani: StartUrl + 1ms
status Pridobivanje devtoolsLog & omrežni zapisi + 0ms
status Pridobivanje: ServiceWorker + 2ms
status Pridobivanje: brez povezave + 1ms
status Pridobivanje: StartUrl + 1ms
stanje Ponastavitev stanja s približno: prazno + 5 ms
stanje Nalaganje strani & čaka na nalaganje HTTPRedirect, HTMLWithoutJavaScript + 48ms
stanje Pridobivanje strani: HTTPRedirect + 260ms
status Pridobivanje na strani: HTMLWithoutJavaScript + 0ms
status Pridobivanje devtoolsLog & omrežni zapisi + 0ms
status Pridobivanje: HTTPRedirect + 7ms
status Pridobivanje: HTMLWithoutJavaScript + 12ms
stanje Prekinitev povezave z brskalnikom … + 7 ms
stanje Analiza in izvajanje revizij … + 6 ms
stanje vrednotenje: uporablja HTTPS + 3ms
ocenjevanje stanja: Preusmeri promet HTTP na HTTPS + 24ms
ocenjevanje stanja: Registrira serviserja, ki nadzoruje stran in start_url + 1ms
ocenjevanje stanja: trenutna stran se odzove s številko 200, ko je offline + 0ms
ocenjevanje stanja: ima oznako “ s `širino ‘ali’ začetno lestvico ‘+ 1ms
stanje Ocenjevanje: Vsebuje nekaj vsebine, ko JavaScript ni na voljo + 1ms
stanje Ocenjevanje: prva vsebinska barva + 6ms
stanje Ocenjevanje: Prva smiselna barva + 54ms
stanje Ocenjevanje: Nalaganje strani je dovolj hitro v mobilnih omrežjih + 10 ms
ocenjevanje stanja: Indeks hitrosti + 33 ms
stanje Ocenjevanje: sličice posnetka zaslona + 529 ms
ocenjevanje stanja: Končni posnetek zaslona + 287 ms
stanje Ocenjevanje: ocenjena zakasnitev vnosa + 2ms
stanje Ocenjevanje: Na konzoli ni prijavljenih nobenih napak brskalnika + 16 ms
ocenjevanje stanja: Odzivni časi strežnika so nizki (TTFB) + 1 ms
ocenjevanje stanja: Prvi prazni procesor + 1ms
ocenjevanje stanja: Čas za interakcijo + 30 ms
stanje Ocenjevanje: Uporabniške časovne ocene in mere + 0ms
stanje Ocenjevanje: Zmanjšaj kritične zahteve Globina + 2ms
ocenjevanje stanja: Izogibajte se večkratnim preusmeritvam strani + 3ms
ocenjevanje stanja: manifest spletne aplikacije ustreza zahtevam namestitve + 2ms
stanje vrednotenje: konfigurirano za zaslon po meri po meri + 1ms
stanje Ocenjevanje: Nastavi barvo teme naslovne vrstice + 0ms
ocenjevanje stanja: Vsebina je pravilno prikazana za vidno polje + 1 ms
stanje vrednotenje: prikaže slike s pravilnim razmerjem stranic + 0ms
ocenjevanje stanja: Izogibajte se zastarelim API-jem + 1ms
stanje Ocenjevanje: Zmanjša delo v glavni niti + 0ms
stanje Ocenjevanje: čas izvajanja JavaScript + 11ms
ocenjevanje stanja: Vnaprej naloži ključne zahteve + 3ms
stanje Ocenjevanje: predhodno se povežite z zahtevanim izvorom + 2ms
stanje Ocenjevanje: Vse besedilo ostane vidno med nalaganjem spletnega brskalnika + 2 ms
ocenjevanje stanja: omrežne zahteve + 1ms
ocenjevanje stanja: Meritve + 2ms
ocenjevanje stanja: start_url se odzove z 200, ko je offline + 1ms
ocenjevanje stanja: Spletna stran deluje v brskalniku + 1ms
stanje Ocenjevanje: Prehodi strani ne kažejo, da blokirajo v omrežju + 0ms
ocenjevanje stanja: Vsaka stran ima URL + 0ms
ocenjevanje stanja: Atributi `[aria – *]` se ujemajo s svojimi vlogami + 1ms
ocenjevanje stanja: `[vloga]` ima vse zahtevane atribute [aria – *] `+ 1ms
ocenjevanje stanja: Elementi z `[role]`, ki zahtevajo posebne otroke `[role]` s, so prisotni + 0ms
ocenjevanje stanja: `[role]` s vsebujejo zahtevani nadrejeni element + 1ms
ocenjevanje stanja: Vrednosti `[role]` so veljavne + 1ms
ocenjevanje stanja: Atributi `[aria – *]` imajo veljavne vrednosti + 0ms
stanje Ocenjevanje: Atributi `[aria – *]` so veljavni in niso napačno črkovani + 1ms
ocenjevanje stanja: “ elementi vsebujejo “ element z `[vrsta ="napise"] `+ 1ms
ocenjevanje stanja: Gumbi imajo dostopno ime + 1ms
stanje Ocenjevanje: Stran vsebuje naslov, preskočno povezavo ali območje mejnika + 1ms
stanje Ocenjevanje: Barve ozadja in ospredja imajo dovolj kontrastnega razmerja + 1ms
ocenjevanje stanja: “ vsebujejo samo pravilno urejene skupine “ in “, “ ali “. + 1ms
ocenjevanje stanja: Elementi seznama definicije so zaviti v “ elemente + 0ms
ocenjevanje stanja: Dokument ima element “ + 1ms
ocenjevanje stanja: Atributi `[id]` na strani so edinstveni + 1ms
ocenjevanje stanja: elementi “ ali “ imajo naslov + 1ms
ocenjevanje stanja: “ element ima atribut `[lang]` + 0ms
stanje vrednotenje: “ element ima veljavno vrednost za svoj atribut `[lang]` + 1ms
ocenjevanje stanja: Elementi slike imajo atribute `[alt]` + 1ms
stanje vrednotenje: “ elementi imajo `[alt]` besedilo + 1ms
ocenjevanje stanja: Elementi obrazca imajo povezane oznake + 0ms
ocenjevanje stanja: predstavitveno `

`elementi se izogibajo uporabi atributa` `,` `ali` [povzetek] `. + 1ms
ocenjevanje stanja: Povezave imajo razpoznavno ime + 1ms
ocenjevanje stanja: Seznami vsebujejo samo `
  • `elementi in podporni elementi skripta (` `in` `). + 1ms
    ocenjevanje stanja: Seznam seznamov (`
  • `) so vsebovani znotraj`
      `ali`
        `nadrejeni elementi + 1ms
        ocenjevanje stanja: Dokument ne uporablja “ + 0ms
        stanje vrednotenje: `[uporabnik-prilagodljiv ="št"] `se ne uporablja v elementu` `in atribut” [največja lestvica] “ni manjši od 5 + 1 ms
        stanje vrednotenje: “ elementi imajo `[alt]` besedilo + 1ms
        ocenjevanje stanja: noben element nima vrednosti “[tabindex]”, ki je večja od 0 + 1ms
        ocenjevanje stanja: Celice v ‘
  • `element, ki uporablja atribut” [headers] “, se nanaša samo na druge celice iste tabele. + 1ms
    ocenjevanje stanja: “ elementi in elementi z `[role ="stolpec"/"veslač"] `imajo podatkovne celice, ki jih opisujejo. + 0ms
    ocenjevanje stanja: Atributi `[lang]` imajo veljavno vrednost + 1ms
    ocenjevanje stanja: “ elementi vsebujejo “ element z `[vrsta ="napise"] `+ 1ms
    ocenjevanje stanja: “ elementi vsebujejo “ element z `[vrsta ="opis"] `+ 1ms
    ocenjevanje stanja: Vrednosti `[accesskey]` so edinstvene + 1ms
    ocenjevanje stanja: Nadzor po meri ima pridružene nalepke + 0ms
    ocenjevanje stanja: Nadzor po meri ima vloge ARIA + 1ms
    stanje Ocenjevanje: Uporabniška osredotočenost ni naključno ujeta v regiji + 0ms
    ocenjevanje stanja: Interaktivni nadzori so osredotočeni na tipkovnici + 0ms
    stanje Ocenjevanje: Naslovi ne preskočijo ravni + 0ms
    ocenjevanje stanja: Interaktivni elementi kažejo svoj namen in stanje + 1ms
    ocenjevanje stanja: Stran ima logični vrstni red zavihkov + 0ms
    ocenjevanje stanja: Uporabnikov fokus je usmerjen na novo vsebino, dodano na stran + 1ms
    ocenjevanje stanja: Vsebina zunaj zaslona je skrita pred pomožno tehnologijo + 0ms
    ocenjevanje stanja: Elementi mejnika HTML5 se uporabljajo za izboljšanje navigacije + 0ms
    ocenjevanje stanja: Vizualni vrstni red na strani sledi vrstnemu redu DOM + 0ms
    ocenjevanje stanja: Uporablja učinkovito politiko predpomnjenja za statična sredstva + 1ms
    ocenjevanje stanja: Izogibajte se ogromnim uporabnim obremenitvam omrežja + 3ms
    stanje Ocenjevanje: Odložite slike zunaj zaslona + 1ms
    ocenjevanje stanja: Odpravite vire, ki blokirajo upodabljanje + 12 ms
    ocenjevanje stanja: Zmanjšajte CSS + 28 ms
    ocenjevanje stanja: Minify JavaScript + 64ms
    ocenjevanje stanja: Odložite neuporabljen CSS + 69 ms
    ocenjevanje stanja: Prikažite slike v naslednjih generacijah + 12 ms
    ocenjevanje stanja: Učinkovito kodiranje slik + 11 ms
    stanje vrednotenje: omogoči stiskanje besedila + 6 ms
    ocenjevanje stanja: Slike pravilno velikosti + 6 ms
    ocenjevanje stanja: uporabite video formate za animirano vsebino + 7 ms
    ocenjevanje stanja: Izogibajte se predpomnilniku aplikacij + 11 ms
    ocenjevanje stanja: Stran ima HTML doctype + 0ms
    ocenjevanje stanja: Izogibajte se pretirani velikosti DOM + 1ms
    stanje Ocenjevanje: Povezave do ciljno usmerjenih strani so varne + 2ms
    ocenjevanje stanja: Izogibajte se zahtevanju dovoljenja za geolokacijo pri nalaganju strani + 1ms
    ocenjevanje stanja: Izogibajte se `document.write ()` + 0ms
    ocenjevanje stanja: Izogibajte se knjižnicam JavaScript vnaprej z znanimi ranljivostmi varnosti + 0ms
    stanje Ocenjevanje: Zaznane knjižnice JavaScript + 9ms
    ocenjevanje stanja: Izogibajte se zahtevi dovoljenja za obveščanje pri nalaganju strani + 1ms
    ocenjevanje stanja: uporabnikom dovoli, da se prilepijo v polja gesla + 0ms
    ocenjevanje stanja: Za lastne vire uporablja HTTP / 2 + 0ms
    ocenjevanje stanja: Uporablja pasivne poslušalce za izboljšanje zmogljivosti drsenja + 1ms
    ocenjevanje stanja: Dokument ima meta opis + 0ms
    ocenjevanje stanja: Stran ima uspešno statusno kodo HTTP + 1ms
    ocenjevanje stanja: Dokument uporablja čitljive velikosti pisave + 5 ms
    ocenjevanje stanja: Povezave imajo opisno besedilo + 1ms
    ocenjevanje stanja: Stran ni blokirana iz indeksiranja + 1 ms
    ocenjevanje stanja: robots.txt je veljaven + 2ms
    ocenjevanje stanja: Dokument ima veljaven `hreflang` + 1ms
    ocenjevanje stanja: Dokument se izogiba vtičnikom + 1ms
    ocenjevanje stanja: Dokument ima veljavno `rel = kanonično` + 0ms
    stanje Ocenjevanje: Stran je prijazna za mobilne naprave + 1ms
    stanje Ocenjevanje: Strukturirani podatki so veljavni + 0ms
    stanje Ustvarjanje rezultatov … + 0ms
    ChromeLauncher Killing primerka Chrome 7098 + 59ms
    HTML izhod tiskalnika napisan v /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: Zaženite svetilnik z `–view`, da takoj odprete poročilo HTML v svojem brskalniku + 1ms

    V drugi zadnji vrstici lahko vidite, da je natisnila pot, kjer lahko najdem poročilo. Privzeto bo ustvaril poročilo v obliki HTML, ki si ga lahko ogledate tako, da ga naložite v računalnik ali pa ga pošljete prek katerega koli spletnega strežnika.

    Ampak, kaj če morate ustvariti poročilo v JSON format?

    Izvedljivo je na naslednji način.

    URL svetilnika –chrome-flags ="–brez glave" –izhod json – izhodna pot URL.json

    Z uporabo svetilnika CLI imate popoln nadzor nad uporabo tako, kot želite. Toplo priporočam, da preverite GitHub repozitorij če želite izvedeti več o uporabi CLI ali programsko.

    Zaključek

    Google Svetilnik izgleda obetavno orodje za izvajanje neprekinjenega preizkusa za izboljšanje uspešnosti in uporabnosti spletnega mesta. Če uporabljate WordPress in želite, da se vaše spletno mesto naloži hitreje, potem oglejte 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