Kako testirati svoju web lokaciju pomoću Google Svjetionika?

Googleov novi alat je da testira i daje vam preporuku za poboljšanje performansi, SEO, sigurnosti, najboljih praksi i pristupačnosti.


Nedavno je pokrenut Google Svjetionik, alat otvorenog koda za ručnu i automatsku reviziju vaše web stranice.

Koje mjerne podatke testira Google Lighthouse?

Tamo su više od 75 metrika testira i daje ukupno bodovanje. Neke od sljedećih popularnih koje bi vas mogle zanimati kao vlasnika web mjesta, SEO analitičara, webmastera.

  • Izvođenje – vrijeme za interaktivni rad, kašnjenje, indeks brzine, optimizacija resursa, TTFB, dostava imovine, vrijeme izvršavanja skripti, veličina DOM-a itd..
  • SEO – Mobilno prilagođavanje, meta, puzanje, kanonik, struktura itd.
  • Najbolje prakse – optimizacija slike, JS knjižnice, evidentiranje pogrešaka u pregledniku, dostupno putem HTTPS-a, poznate JS ranjivosti itd.
  • Pristupačnost  – Elementi stranice, jezik, ARIA atributi itd.
  • PWA (Progresivna web aplikacija) – preusmjeravanje HTTP-a na HTTPS, kôd odgovora u redu, brzo učitavanje na 3G, ekran za prskanje, pregledni okvir itd..

Njegov fantastičan alat i možete ga koristiti na više načina.

To je točno – tako mnogo načina. Ako ste programer, možete ga koristiti s Node.js za programski pokretanje testa. Na tržištu je već nekoliko alata koje pokreće svjetionik i koji nude kontinuirano nadziranje performansi mjesta.

Otkrijmo kako pokrećete test svjetionika na svojoj web lokaciji.

Krenite od najlakšeg.

Izmjerite web.dev

Google je objavio web.dev prije nekoliko mjeseci i stekao dobru popularnost. Testiranje na mreži je jednostavno.

Ići Mjera stranicu i unesite URL da biste pokrenuli reviziju. Trebat će nekoliko sekundi, a vi biste trebali vidjeti detaljno izvještavanje s ukupnim bodovanjem.

Rezultati također pokazuju test mjernih podataka o uspjehu koji je tako dobro napravljen za provedene revizije i na njima je potrebno obratiti pažnju.

Ne trošite previše vremena uzimajući 100. Čak ni Googleove web-lokacije ne postižu to.

Smatrajte ih smjernicama i pokušajte poboljšati što više možete.

Napomena: web.dev oponaša test putem mobilnog uređaja i tijekom pisanja ne vidim opciju za testiranje putem Desktop-a.

Krom

Znate li da je svjetionik dostupan u vašem pregledniku Chrome? Sjajna vijest je da možete odlučiti za testiranje putem usluge Mobile ili Desktop. Dostupno je u alatima za razvojne programere.

  • Otvorite preglednik Chrome
  • Pristupite svojoj web lokaciji kako biste testirali
  • Otvorite alate za razvojne programere (Pritisnite F12 ako koristite Windows) ili desnom tipkom miša kliknite stranicu i kliknite Ispitaj
  • Idite na karticu revizije

Kao što vidite gore, imate mogućnost izbora onoga što želite testirati. Ovo je sjajno jer se možete usredotočiti na svoj cilj i brže dobiti rezultate revizije.

Rezultati izgledaju i osjećaju iz Chomea i web.dev gotovo su slični.

Ali ako pogledate pažljivo, ovdje postoji jedna dodatna skupina mjernih podataka – Progresivna web aplikacija. Dakle, još jedan razlog za reviziju pomoću Chromea.

Node.js

Svjetionik je dostupan kao modul čvora. Možete ga instalirati na vaš poslužitelj i koristiti ga programski ili naredbenog retka. Brzo ćemo provjeriti kako instalirati Lighthouse za pokretanje nekog testa.

Instalacija svjetionika na Ubuntu 18.x

Sljedeće sam testirao DigitalOcean poslužitelj. Za svjetionik je potreban čvor LTS 8.9 ili noviji, a pretpostavljam da ga već imate instaliran. Ako ne, pogledajte ovaj vodič za instalaciju Node.js.

Također ćete zahtijevati preglednik krom biti instaliran na poslužitelj. Ovdje sam pokrivao upute za instalaciju.

Instalacija svjetionika je jednostavna, kao i drugi moduli.

  • Prijavite se na svoj poslužitelj
  • Za instalaciju pokrenite sljedeću naredbu

npm instalirajte -g svjetionik

Ovdje koristim -g pa se instalira kao globalni modul.

[E zaštićeni]: ~ # npm instalirajte -g svjetionik
/ Usr / bin / svjetionik -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ Usr / bin / krom-ispravljanje -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [E zaštićeni] postinstall / usr / lib / node_modules / svjetionik / node_modules / ax-core
> node build / utils / postinstall.js

+ [E zaštićeni]
dodano 179 paketa od 119 suradnika u 10.094
[E zaštićeni]: ~ #

Jednom instaliran, pokrenite naredbu svjetionik da biste se osigurali da je ispravno instaliran.

[E zaštićeni]: ~ # svjetionik
Navedite URL

Navedite – pomoć za dostupne opcije
[E zaštićeni]: ~ #

Dobar, svjetionik je spreman pokrenuti reviziju. Pokušajmo neke opcije testiranja.

Da biste pokrenuli test pomoću preglednika bez glave

URL svjetionika –chrome-flags ="–bezglav"

Morate navesti apsolutni URL uključujući http ili https.

ex:

[E zaštićeni]: ~ $ svjetionik https://geekflare.com –chrome-flags ="–bezglav"
ChromeLauncher čeka na preglednik. + 0ms
ChromeLauncher čeka na preglednik … + 1ms
ChromeLauncher čeka na preglednik ….. + 511ms
ChromeLauncher čeka na preglednik ….. ✓ + 2ms
status Povezivanje s preglednikom + 176ms
stanje Poništavanje stanja s oko: prazno + 24ms
status Benchmarking stroj + 30ms
pokretanje statusa… + 508ms
status Učitavanje stranice & čekajući onLoad Skripte, CSSUsage, prikaza, ViewportDimensions, ThemeColor, manifesta, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Pristupačnost, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, DOCTYPE, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, veličinu slova, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
status Dohvaćanje unutar stranice: skripte + 2s
status Dohvaćanje na stranici: CSSUsage + 0ms
status Dohvaćanje na stranici: Viewport + 0ms
status Dohvaćanje na stranici: ViewportDimensions + 0ms
status Dohvaćanje na stranici: ThemeColor + 0ms
status Dohvaćanje unutar stranice: Manifest + 0ms
status Dohvaćanje na stranici: RuntimeExceptions + 0ms
status Dohvaćanje na stranici: ChromeConsoleMessages + 0ms
status Dohvaćanje na stranici: Upotreba slike + 0ms
status Dohvaćanje na stranici: Pristupačnost + 0ms
status Dohvaćanje na stranici: LinkElements + 0ms
status Dohvaćanje na stranici: AnchorsWithNoRelNoopener + 1ms
status Dohvaćanje na stranici: AppCacheManifest + 0ms
status Dohvaćanje na stranici: Doctype + 0ms
status Dohvaćanje na stranici: DOMStats + 0ms
status Dohvaćanje na stranici: JSLibraries + 0ms
status Dohvaćanje na stranici: OptimizedImages + 0ms
status Dohvaćanje na stranici: PasswordInputsWithPreventedPaste + 0ms
status Dohvaćanje na stranici: ResponseCompression + 0ms
status Dohvaćanje na stranici: OznakeBlockingFirstPaint + 0ms
status Dohvaćanje na stranici: MetaDescription + 0ms
status Dohvaćanje na stranici: Veličina fonta + 0ms
status Dohvaćanje na stranici: CrawlableLinks + 0ms
status Dohvaćanje na stranici: MetaRobots + 0ms
status Dohvaćanje na stranici: Hreflang + 0ms
status Dohvaćanje na stranici: EmbeddedContent + 0ms
status Dohvaćanje na stranici: Canonical + 0ms
status Dohvaćanje na stranici: RobotsTxt + 0ms
status Dohvaćanje traga + 1ms
status Dohvaćanje devtoolsLog & mrežni zapisi + 110ms
status Dohvaćanje: skripte + 27ms
status Dohvaćanje: CSSUsage + 53ms
status Dohvaćanje: Viewport + 192ms
status Dohvaćanje: ViewportDimensions + 5ms
status Dohvaćanje: ThemeColor + 13ms
status Dohvaćanje: Manifest + 2ms
status Dohvaćanje: RuntimeExceptions + 295ms
status Dohvaćanje: ChromeConsoleMessages + 1ms
status Dohvaćanje: upotreba slike + 2ms
status Dohvaćanje: pristupačnost + 22ms
status Dohvaćanje: LinkElements + 526ms
status Dohvaćanje: sidraWithNoRelNoopener + 10ms
status Dohvaćanje: AppCacheManifest + 6ms
status Dohvaćanje: Doctype + 20ms
Dohvaćanje statusa: DOMStats + 4ms
status Dohvaćanje: JSLibraries + 50ms
status Dohvaćanje: OptimizedImages + 25ms
status Dohvaćanje: PasswordInputsWithPreventedPaste + 234ms
status Dohvaćanje: ResponseCompression + 3ms
status Dohvaćanje: OznakeBlockingFirstPaint + 7ms
status Dohvaćanje: MetaDescription + 6ms
status Dohvaćanje: Veličina fonta + 7ms
status Dohvaćanje: CrawlableLinks + 245ms
status Dohvaćanje: MetaRobots + 6ms
status Dohvaćanje: Hreflang + 2ms
status Dohvaćanje: EmbeddedContent + 2ms
status Dohvaćanje: kanonski + 3ms
status Dohvaćanje: RobotsTxt + 6ms
stanje Poništavanje stanja s oko: prazno + 19ms
status Učitavanje stranice & čeka na onload ServiceWorker, offline, StartUrl + 24ms
status Dohvaćanje na stranici: ServiceWorker + 59ms
status Dohvaćanje na stranici: Offline + 0ms
status Dohvaćanje unutar stranice: StartUrl + 1ms
status Dohvaćanje devtoolsLog & mrežni zapisi + 0ms
status Dohvaćanje: ServiceWorker + 2ms
status Dohvaćanje: Offline + 1ms
status Dohvaćanje: StartUrl + 1ms
stanje Poništavanje stanja s oko: prazno + 5ms
status Učitavanje stranice & čeka se učitavanje HTTPRedirect, HTMLWithoutJavaScript + 48ms
status Dohvaćanje na stranici: HTTPRedirect + 260ms
status Dohvaćanje na stranici: HTMLWithoutJavaScript + 0ms
status Dohvaćanje devtoolsLog & mrežni zapisi + 0ms
status Dohvaćanje: HTTPRedirect + 7ms
status Dohvaćanje: HTMLWithoutJavaScript + 12ms
status Prekid veze s preglednikom … + 7ms
stanje Analiziranje i pokretanje revizija … + 6ms
procjena stanja: koristi HTTPS + 3ms
procjena stanja: Preusmjerava HTTP promet na HTTPS + 24ms
procjena stanja: Registrira uslužni radnik koji kontrolira stranicu i start_url + 1ms
ocjenjivanje statusa: Trenutna stranica odgovara sa 200 kada je offline + 0ms
ocjenjivanje statusa: Ima “ oznaku sa `width ‘ili` početna skala` + 1ms
procjena stanja: Sadrži neki sadržaj kada JavaScript nije dostupan + 1ms
ocjenjivanje statusa: Prva sadržajna boja + 6ms
ocjenjivanje statusa: prvorazborita boja + 54ms
procjena stanja: Učitavanje stranica je dovoljno brzo na mobilnim mrežama + 10ms
procjena stanja: Indeks brzine + 33ms
Status Procjenjivanje: Snimke ekrana + 529 ms
ocjenjivanje statusa: Finalni snimak zaslona + 287ms
Status Procjenjivanje: procijenjena latencija unosa + 2ms
procjena stanja: Nema pogrešaka preglednika prijavljenih na konzolu + 16 ms
procjena stanja: Vreme odziva poslužitelja je malo (TTFB) + 1ms
ocjenjivanje statusa: Neaktivan prvi CPU + 1ms
ocjenjivanje statusa: Vrijeme za interakciju + 30 ms
Status Procjena: Korisničke vremenske oznake i mjere + 0ms
Status Procjena: Minimiziranje kritičnih zahtjeva Dubina + 2ms
procjena stanja: izbjegavajte višestruka preusmjeravanja stranica + 3ms
ocjenjivanje statusa: manifest web aplikacije ispunjava zahtjeve instaliranja + 2ms
procjena stanja: Konfigurirano za prilagođeni zaslonski zaslon + 1ms
Status Evaluacija: postavlja boju teme adresne trake + 0ms
procjena stanja: Sadržaj je ispravno veličine za prikazni prostor + 1ms
Status Procjena: Prikazuje slike s ispravnim omjerima + 0ms
procjena stanja: izbjegava zastarjele API-je + 1ms
ocjenjivanje statusa: Minimizira rad glavnog niza + 0ms
procjena stanja: Vrijeme izvršenja JavaScripta + 11ms
ocjenjivanje statusa: unaprijed učitajte ključne zahtjeve + 3ms
ocjenjivanje statusa: prethodno se povežite s potrebnim izvorima + 2ms
Status ocjenjivanje: sav tekst ostaje vidljiv tijekom učitavanja web-slova + 2ms
procjena stanja: mrežni zahtjevi + 1ms
ocjenjivanje statusa: Metrike + 2ms
ocjenjivanje statusa: start_url odgovara sa 200 kada je offline + 1ms
ocjenjivanje statusa: web mjesto funkcionira putem preglednika + 1ms
ocjenjivanje statusa: Prijelazi na stranice ne osjećaju se kao da blokiraju na mreži + 0ms
ocjenjivanje statusa: Svaka stranica ima URL + 0ms
ocjenjivanje statusa: atributi `[aria – *]` odgovaraju njihovim ulogama + 1ms
ocjenjivanje statusa: `[role]` imaju sve potrebne `[aria – *]` atribute + 1ms
ocjenjivanje statusa: Elementi s `[role]` koji zahtijevaju određenu djecu `[role]` s, prisutni su + 0ms
ocjenjivanje statusa: `[role]` s sadrže potrebni roditeljski element + 1ms
ocjenjivanje statusa: vrijednosti [[role] `su važeće + 1ms
ocjenjivanje statusa: Atributi `[aria – *]` imaju važeće vrijednosti + 0ms
ocjenjivanje statusa: Atributi [[aria – *] `su valjani i nisu pogrešno napisani + 1ms
ocjenjivanje statusa: “ elementi sadrže “ element sa `[vrste ="opisi"] `+ 1ms
procjena stanja: gumbi imaju pristupno ime + 1ms
Status Procjena: Stranica sadrži naslov, preskočenu vezu ili regiju orijentacije + 1ms
Status Procjena: Boje pozadine i prednjeg plana imaju dovoljan omjer kontrasta + 1ms
ocjenjivanje statusa: “ sadrži samo ispravno uređene “ i “ grupe, “ ili “ elemente. + 1ms
ocjenjivanje statusa: Stavke popisa definicije zamotane su u “ elemente + 0ms
ocjenjivanje statusa: Dokument ima “ element + 1ms
ocjenjivanje statusa: atributi `[id]` na stranici jedinstveni su + 1ms
ocjenjivanje statusa: “ ili “ elementi imaju naslov + 1ms
ocjenjivanje statusa: “ element ima atribut `[lang]` + 0ms
ocjenjivanje statusa: “ element ima valjanu vrijednost za svoj atribut `[lang]` + 1ms
ocjenjivanje statusa: Elementi slike imaju atribute `[alt]` + 1ms
ocjenjivanje statusa: “ elementi imaju `[alt]` tekst + 1ms
procjena stanja: Elementi obrasca imaju pridružene oznake + 0ms
ocjenjivanje statusa: prezentacija `

`elementi izbjegavaju koristiti atribut` `,` `ili` [summary] `. + 1ms
ocjenjivanje statusa: veze imaju prepoznatljivo ime + 1ms
ocjenjivanje statusa: popisi sadrže samo `
  • `elementi i elementi koji podržavaju skriptu (` `i` `). + 1ms
    ocjenjivanje statusa: stavke popisa (`
  • `) sadržani su unutar`
      `ili`
        `nadređeni elementi + 1ms
        ocjenjivanje statusa: dokument ne koristi “ + 0ms
        ocjenjivanje statusa: `[user-scalable ="Ne"] `se ne upotrebljava u elementu` `i atribut` [maksimalna skala] `nije manji od 5. + 1ms
        ocjenjivanje statusa: “ elementi imaju `[alt]` tekst + 1ms
        ocjenjivanje statusa: Nijedan element nema vrijednost “[tabindex]” veću od 0 + 1ms
        ocjenjivanje statusa: Stanice u a
  • `element koji upotrebljava atribut` [zaglavlja] `odnosi se samo na ostale ćelije iste tablice. + 1ms
    ocjenjivanje statusa: “ elementi i elementi sa `[role ="columnheader"/"rowheader"] `imati ćelije podataka koje opisuju. + 0ms
    procjena stanja: Atributi `[lang]` imaju valjanu vrijednost + 1ms
    ocjenjivanje statusa: “ elementi sadrže “ element sa `[vrste ="opisi"] `+ 1ms
    ocjenjivanje statusa: “ elementi sadrže “ element sa `[vrste ="opis"] `+ 1ms
    ocjenjivanje statusa: vrijednosti [[accesskey] `su jedinstvene + 1ms
    procjena stanja: Prilagođene kontrole imaju pridružene oznake + 0ms
    procjena stanja: Prilagođene kontrole imaju ARIA uloge + 1ms
    Status Procjena: Fokus korisnika nije slučajno zarobljen u regiji + 0ms
    ocjenjivanje statusa: Interaktivne kontrole su fokusirane na tipkovnicu + 0ms
    Status Vrednovanje: Naslovi ne preskaču razine + 0ms
    ocjenjivanje statusa: Interaktivni elementi ukazuju na njihovu svrhu i stanje + 1ms
    ocjenjivanje statusa: Stranica ima logički redoslijed kartica + 0ms
    procjena stanja: Fokus korisnika je usmjeren na novi sadržaj dodan na stranicu + 1ms
    procjena stanja: Sadržaj izvan zaslona je skriven od pomoćne tehnologije + 0ms
    procjena stanja: HTML5 orijentir elementi se koriste za poboljšanje navigacije + 0ms
    ocjenjivanje statusa: Vizualni poredak na stranici slijedi redoslijed DOM + 0ms
    Status Procjena: Koristi učinkovitu politiku predmemoriranja statičkih elemenata + 1ms
    Procjena statusa: Izbjegava ogromne opterećenja mreže + 3ms
    Status Procjena: Odgodite slike izvan zaslona + 1ms
    Status Procjenjivanje: Uklonite resurse koji blokiraju renderiranje + 12ms
    procjena stanja: Smanjite CSS + 28ms
    procjena statusa: Umanjite JavaScript + 64ms
    Status Procjena: Odgodite neiskorišteni CSS + 69ms
    ocjenjivanje statusa: posluživanje slika u sljedećim genima u formatima + 12ms
    ocjenjivanje statusa: učinkovito kodiranje slika + 11ms
    ocjenjivanje statusa: Omogući kompresiju teksta + 6ms
    procjena stanja: slike odgovarajuće veličine + 6 ms
    ocjenjivanje statusa: koristite video formate za animirani sadržaj + 7ms
    ocjenjivanje statusa: Izbjegava cache aplikacije + 11ms
    ocjenjivanje statusa: Stranica ima HTML doctype + 0ms
    procjena stanja: Izbjegava prekomjernu veličinu DOM + 1ms
    procjena stanja: veze do odredišnih destinacija sigurne su + 2ms
    procjena stanja: Izbjegava se traženje dozvole za geolokaciju na učitavanju stranice + 1ms
    ocjenjivanje statusa: Izbjegava `document.write ()` + 0ms
    procjena stanja: Izbjegava sučelje JavaScript knjižnica s poznatim sigurnosnim ranjivostima + 0ms
    procjena stanja: Otkrivene JavaScript biblioteke + 9ms
    procjena stanja: Izbjegava se traženje dozvole za obavijest pri učitavanju stranice + 1ms
    ocjenjivanje statusa: dopušta korisnicima da se zalijepe u polja zaporke + 0ms
    procjena stanja: Koristi HTTP / 2 za vlastite resurse + 0ms
    procjena stanja: koristi pasivne slušatelje za poboljšanje performansi pomicanja + 1ms
    ocjenjivanje statusa: Dokument ima meta opis + 0ms
    procjena stanja: Stranica ima uspješan HTTP statusni kôd + 1ms
    ocjenjivanje statusa: Dokument koristi čitljive veličine slova + 5ms
    ocjenjivanje statusa: Linkovi imaju opisni tekst + 1ms
    procjena stanja: Stranica nije blokirana u indeksiranju + 1ms
    ocjenjivanje statusa: robots.txt vrijedi + 2ms
    ocjenjivanje statusa: dokument ima važeću `hreflang` + 1ms
    procjena stanja: Dokument izbjegava dodatke + 1ms
    ocjenjivanje statusa: Dokument ima valjano `rel = kanonski` + 0ms
    procjena stanja: Stranica je prilagođena mobilnim uređajima + 1ms
    ocjenjivanje statusa: Strukturirani podaci su valjani + 0ms
    status Stvaranje rezultata … + 0ms
    ChromeLauncher Killing Chrome instance 7098 + 59ms
    HTML ispis pisača napisan u /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: Pokrenite svjetionik s `–view` da biste odmah otvorili HTML izvješće u pregledniku + 1ms

    U drugom posljednjem retku možete vidjeti kako je ispisala putanju na kojoj mogu pronaći izvješće. Prema zadanim postavkama stvorit će izvješće u HTML formatu koje možete pregledati ili preuzimanjem na računalu ili ga poslužiti putem nekog web poslužitelja.

    Ali, što ako morate generirati izvještaj JSON format?

    Izvodi se na sljedeći način.

    URL svjetionika –chrome-flags ="–bezglav" –izlaz json – izlazni put URL.json

    Korištenjem CLI-ja Lighthouse u potpunosti ste kontrolirani kako biste željeli koristiti. Toplo bih vam preporučio da provjerite GitHub repozitorij da biste saznali više o upotrebi CLI-a ili programski.

    Zaključak

    Google Lighthouse izgleda obećavajući alat za provođenje testa kontinuiteta za poboljšanje performansi i upotrebljivosti web lokacije. Ako koristite WordPress i želite brže učitavanje svoje web stranice, onda provjerite 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