Cum îți testezi site-ul cu Google Far?

Un nou instrument de către Google este de a testa și de a vă oferi recomandarea de a îmbunătăți performanța, SEO, securitatea, cele mai bune practici și accesibilitatea.


Google a fost lansat recent Far, un instrument open-source pentru auditul site-ului dvs. manual și automat.

Ce valori sunt testate de Google Lighthouse?

Sunt mai mult de 75 de valori testează și vă oferă scor general. Unele dintre cele mai populare pe care le-ar putea interesa în calitate de proprietar de site, analist SEO, webmasteri.

  • Performanţă – timp de interacțiune, latență, index de viteză, optimizare resurse, TTFB, livrare de active, timp de execuție scripturi, dimensiune DOM, etc..
  • SEO – Mobil prietenos, meta, crawling, canonic, structură, etc.
  • Cele mai bune practici – Optimizarea imaginii, bibliotecile JS, înregistrarea erorilor browserului, accesibilă prin HTTPS, vulnerabilități cunoscute JS, etc.
  • Accesibilitate  – Elemente de pagină, limbă, atribute ARIA, etc.
  • PWA (Aplicația Web Progresivă) – redirecționați HTTP către HTTPS, cod de răspuns ok, încărcare rapidă pe 3G, ecran splash, viewport etc..

Instrumentul său fantastic și puteți utiliza în mai multe moduri.

Așa este – atât de multe moduri. Dacă sunteți dezvoltator, îl puteți utiliza cu Node.js pentru a rula un test programatic. Există deja puține instrumente pe piață alimentate de Lighthouse care oferă monitorizare continuă a performanței site-ului.

Vom afla cum derulați testul far pe site-ul dvs..

Începeți de la cel mai ușor.

Măsurați prin web.dev

Google a lansat web.dev cu câteva luni în urmă și a câștigat o popularitate bună. Testarea online este ușoară.

Mergi la Măsura pagina și introduceți adresa URL pentru a rula auditul. Va dura câteva secunde și ar trebui să vedeți raportarea detaliată cu punctajul general.

Rezultatele arată, de asemenea, testul metricilor de succes atât de bine făcut pentru auditurile trecute și lucrul asupra acelor nevoi.

Nu petreceți prea mult timp obținând 100. Nici site-urile Google nu obțin acest punctaj.

Considerați-le drept ghiduri și încercați să îmbunătățiți cât puteți.

Notă: web.dev emulează un test folosind un dispozitiv mobil și, în timp ce scriu, nu văd o opțiune de testat folosind Desktop.

Crom

Știți că Farul este disponibil în browserul dvs. Chrome? Și, marea veste este că puteți alege să testați folosind Mobile sau Desktop. Este disponibil în instrumentele pentru dezvoltatori.

  • Deschide browserul Chrome
  • Accesați site-ul dvs. pentru a testa
  • Deschideți instrumentele pentru dezvoltatori (apăsați F12 dacă folosiți Windows) sau faceți clic dreapta pe pagină și faceți clic pe Inspectare
  • Accesați fila auditurilor

După cum puteți vedea mai sus, aveți o opțiune de a alege ce doriți să testați. Acest lucru este excelent, deoarece vă puteți concentra pe obiectivul dvs. și pentru a obține mai rapid rezultatele auditului.

Rezultatele arată și simt de la Chome și web.dev este aproape similar.

Dar dacă te uiți cu atenție, aici există un grup de valori suplimentare – Aplicația Web progresivă. Așadar, un alt motiv pentru a audita folosind Chrome.

Node.js

Farul este disponibil ca modul nod. Îl puteți instala instalat pe serverul dvs. și îl puteți folosi programatic sau linia de comandă. Să verificăm rapid cum se instalează Lighthouse pentru a rula un test.

Instalarea Farului pe Ubuntu 18.x

În continuare, am testat DigitalOcean Server. Farul necesită Node LTS 8.9 sau mai recent și presupun că îl aveți deja instalat. Dacă nu, consultați acest ghid de instalare Node.js.

Veți avea, de asemenea, nevoie browserul de crom pentru a fi instalat pe server. Am acoperit instrucțiunea de instalare aici.

Instalarea Farului este simplă, la fel ca și alte module.

  • Autentificați-vă pe serverul dvs.
  • Rulați următoarea comandă pentru instalare

npm instalați -g far

Folosesc -g aici, astfel încât să fie instalat ca modul global.

[Email protected]: ~ # npm instalează -g far
/ Usr / bin / far -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ Usr / bin / crom-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]
a adăugat 179 de pachete de la 119 colaboratori în 10.094
[Email protected]: ~ #

După instalare, executați comanda far pentru a vă asigura că s-a instalat corect.

[Email protected]: ~ # far
Vă rugăm să furnizați o adresă URL

Precizați – ajutor pentru opțiunile disponibile
[Email protected]: ~ #

Bun, farul este gata să conducă auditul. Să încercăm câteva opțiuni de testare.

Pentru a rula un test folosind un browser fără cap

adresa URL a farului –chrome-flags ="–acefal"

Trebuie să furnizați o adresă URL absolută, inclusiv http sau https.

Ex:

[Email protected]: ~ $ far https://geekflare.com –chrome-flags ="–acefal"
ChromeLauncher În așteptare pentru browser. + 0ms
ChromeLauncher În așteptare pentru browser … + 1ms
ChromeLauncher În așteptare pentru browser ….. + 511ms
ChromeLauncher Așteaptă browserul ….. ✓ + 2ms
stare Conectare la browser + 176ms
stare Stare de resetare cu aproximativ: gol + 24ms
Stare Benchmarking machine + 30ms
status Initializing … + 508ms
starea Pagina de încărcare & de așteptare pentru scripturi onload, CSSUsage, Viewport, ViewportDimensions, ThemeColor, manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accesibilitate, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FONTSIZE, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
status Recuperarea in-page: Scripturi + 2s
status Recuperarea in-page: CSSUsage + 0ms
status Recuperarea in-page: Viewport + 0ms
status Recuperarea in-page: ViewportDimensions + 0ms
status Recuperarea in-page: ThemeColor + 0ms
status Recuperarea in-page: Manifest + 0ms
status Recuperarea in-page: RuntimeExceptions + 0ms
status Recuperarea in-page: ChromeConsoleMessages + 0ms
status Recuperarea in-page: ImageUsage + 0ms
status Recuperarea in-page: Accesibilitate + 0ms
status Recuperarea in-page: LinkElements + 0ms
status Recuperarea in-page: AnchorsWithNoRelNoopener + 1ms
status Recuperarea in-page: AppCacheManifest + 0ms
status Recuperarea in-page: Doctype + 0ms
status Recuperarea in-page: DOMStats + 0ms
status Recuperarea in-page: JSLibraries + 0ms
status Recuperarea in-page: OptimizedImages + 0ms
status Recuperarea in-page: PasswordInputsWithPreventedPaste + 0ms
status Recuperarea in-page: ResponseCompression + 0ms
status Recuperarea in-page: TagsBlockingFirstPaint + 0ms
status Recuperarea in-page: MetaDescription + 0ms
status Recuperarea in-page: FontSize + 0ms
status Recuperarea in-page: CrawlableLinks + 0ms
status Recuperarea in-page: MetaRobots + 0ms
status Recuperarea in-page: Hreflang + 0ms
status Recuperarea in-page: EmbeddedContent + 0ms
status Recuperarea in-page: Canonical + 0ms
status Recuperarea in-page: RobotsTxt + 0ms
status Recuperarea urmelor + 1ms
status Recuperare devtoolsLog & înregistrări de rețea + 110ms
Stare de recuperare: Scripturi + 27ms
Stare de recuperare: CSSUsage + 53ms
regăsirea stării: Viewport + 192ms
regăsirea stării: Dimensiuni Viewport + 5ms
Stare preluare: ThemeColor + 13ms
status Retrieving: Manifest + 2ms
status Retrieving: RuntimeExceptions + 295ms
regăsirea stării: ChromeConsoleMessages + 1ms
regăsirea stării: ImageUsage + 2ms
regăsirea stării: Accesibilitate + 22ms
Stare de recuperare: LinkElements + 526ms
status Retrieving: AnchorsWithNoRelNoopener + 10ms
regăsirea stării: AppCacheManifest + 6ms
regăsirea stării: Doctype + 20ms
Stare preluare: DOMStats + 4ms
Stare preluare: JSLibraries + 50ms
regăsirea stării: imagini optimizate + 25ms
regăsirea stării: PasswordInputsWithPreventedPaste + 234ms
status Retrieving: ResponseCompression + 3ms
regăsirea stării: EticheteBlucrareFirstPaint + 7ms
regăsirea stării: MetaDescription + 6ms
regăsirea stării: FontSize + 7ms
regăsirea stării: CrawlableLinks + 245ms
regăsirea stării: MetaRobots + 6ms
status Retrieving: Hreflang + 2ms
regăsirea stării: EmbeddedContent + 2ms
regăsirea stării: Canonical + 3ms
status Retrieving: RobotsTxt + 6ms
stare Stare de resetare cu aproximativ: gol + 19ms
starea Pagina de încărcare & așteptare pentru încărcare ServiceWorker, Offline, StartUrl + 24ms
status Recuperarea pe pagina: ServiceWorker + 59ms
status Recuperarea pe pagina: Offline + 0ms
status Recuperarea in-page: StartUrl + 1ms
status Recuperare devtoolsLog & înregistrări de rețea + 0ms
regăsirea stării: ServiceWorker + 2ms
regăsirea stării: Offline + 1ms
regăsirea stării: StartUrl + 1ms
stare Stare de resetare cu aproximativ: gol + 5ms
starea Pagina de încărcare & așteptare pentru încărcare HTTPRedirect, HTMLWithoutJavaScript + 48ms
status Recuperarea pe pagina: HTTPRedirect + 260ms
status Recuperarea in-page: HTMLWithoutJavaScript + 0ms
status Recuperare devtoolsLog & înregistrări de rețea + 0ms
regăsirea stării: HTTPRedirect + 7ms
regăsirea stării: HTMLWithoutJavaScript + 12ms
stare Deconectare de la browser … + 7ms
stare Analiza și rularea auditurilor … + 6ms
Evaluarea stării: Utilizează HTTPS + 3ms
Evaluarea stării: Redirecționează traficul HTTP către HTTPS + 24ms
Evaluarea stării: Înregistrează un lucrător de serviciu care controlează pagina și start_url + 1ms
Evaluarea stării: Pagina curentă răspunde cu un 200 atunci când este offline + 0ms
Evaluarea stării: Are o etichetă “ cu `lățime` sau` scara inițială` + 1ms
Evaluarea stării: Conține un anumit conținut atunci când JavaScript nu este disponibil + 1ms
Evaluarea stării: Prima vopsea conținut + 6ms
Evaluarea stării: Prima vopsea semnificativă + 54ms
Evaluarea stării: încărcarea paginii este suficient de rapidă în rețelele mobile + 10ms
Evaluarea stării: Index de viteză + 33ms
Evaluarea stării: Screenshot Miniaturi + 529ms
Evaluarea stării: Captura de ecran finală + 287ms
Evaluarea stării: Latenția estimată a intrării + 2ms
Evaluarea stării: Nicio eroare a browserului nu a fost înregistrată la consolă + 16ms
Evaluarea stării: Timpul de răspuns al serverului este scăzut (TTFB) + 1ms
Evaluarea stării: Primul procesor de ralanti + 1ms
Evaluarea stării: timp de interacțiune + 30ms
Evaluarea stării: Marcaje și măsuri de sincronizare ale utilizatorului + 0ms
starea Evaluare: Minimizarea adâncimilor cererilor critice + 2ms
Evaluarea stării: Evitați mai multe redirecționări de pagini + 3ms
Evaluarea stării: Manifestul aplicației Web îndeplinește cerințele de instalare + 2ms
Evaluarea stării: Configurat pentru un ecran personalizat + 1ms
status Evaluating: Setează o bară de adrese de culoare + 0ms
Evaluarea stării: Conținutul este dimensionat corect pentru viewport + 1ms
status Evaluating: Afișează imagini cu raportul de aspect corect + 0ms
Evaluarea stării: Evită API-urile depășite + 1ms
Evaluarea stării: Minimizează lucrul prin fir principal + 0ms
Evaluarea stării: timp de execuție JavaScript + 11ms
Evaluarea stării: Preîncărcare cereri cheie + 3ms
Evaluarea stării: Preconectați la originile necesare + 2ms
Evaluarea stării: Tot textul rămâne vizibil în timpul încărcărilor webfont + 2ms
Evaluarea stării: Cereri de rețea + 1ms
Evaluarea stării: Metrici + 2ms
Evaluarea stării: start_url răspunde cu un 200 atunci când este offline + 1ms
Evaluarea stării: Site-ul funcționează prin browser-ul + 1ms
Evaluarea stării: tranzițiile pe pagină nu par să blocheze în rețea + 0ms
Evaluarea stării: Fiecare pagină are un URL + 0ms
Evaluarea stării: `[atributele [aria – *]` se potrivesc cu rolurile lor + 1ms
Evaluarea stării: `[rol]` s au toate atributele necesare [[aria – *] `+ 1ms
Evaluarea stării: Elementele cu `[rol]` care necesită copii specifici [rol] `s, sunt prezente + 0ms
Evaluarea stării: `[rolul]` sunt conținute de elementul părinte necesar + 1ms
Evaluarea stării: valorile `[rol]` sunt valabile + 1ms
Evaluarea stării: atributele `[aria – *]` au valori valide + 0ms
Evaluarea stării: atributele `[aria – *]` sunt valide și nu sunt greșite + 1ms
Evaluarea stării: “ elementele conțin un element “ cu `[kind ="legende"] `+ 1ms
Evaluarea stării: Butoanele au un nume accesibil + 1ms
Evaluarea stării: Pagina conține o titlu, săriți legătura sau regiune de reper + 1ms
Evaluarea stării: Culorile de fundal și prim plan au un raport de contrast suficient + 1ms
Evaluarea statusului: “ ” conțin numai elemente grupate “ și “, “ sau “ ordonate corespunzător. + 1ms
Evaluarea stării: articolele din lista de definiții sunt învelite în “ elemente + 0ms
Evaluarea stării: Documentul are un “ element + 1ms
Evaluarea stării: atributele `[id]` din pagină sunt unice + 1ms
Evaluarea stării: elementele “ sau “ au un titlu + 1ms
Evaluarea stării: “ elementul are un atribut `[lang ]` + 0ms
Evaluarea stării: “ elementul are o valoare valabilă pentru atributul său [[lang ]` + 1ms
Evaluarea stării: Elementele de imagine au atribute `[alt]` + 1ms
Evaluarea stării: “ elementele au text [[alt] `+ 1ms
Evaluarea stării: Elementele de formă au etichete asociate + 0ms
Evaluarea statutului: Prezentativ `

elementele evită să folosești atributul “, “ sau `[rezumat]. + 1ms
Evaluarea stării: Linkurile au un nume perceptibil + 1ms
Evaluarea stării: Listele conțin doar `
  • `elemente și elemente care susțin scriptul (` `și` `). + 1ms
    Evaluarea stării: Lista elementelor (`
  • `) sunt cuprinse în„
      `sau`
        `elemente părinte + 1ms
        Evaluarea stării: documentul nu folosește “ + 0ms
        Evaluarea stării: `[scalabil de utilizator ="Nu"] `nu este utilizat în elementul` `și atributul` [la scara maximă] nu este mai mic de 5. + 1ms
        Evaluarea stării: “ elementele au text [[alt] `+ 1ms
        Evaluarea stării: Niciun element nu are o valoare [[tabindex] `mai mare de 0 + 1ms
        Evaluarea stării: Celulele într-un `
  • `elementul care utilizează atributul` [anteturi] `se referă numai la alte celule ale aceluiași tabel. + 1ms
    Evaluarea stării: “ elemente și elemente cu `[rol ="columnheader"/"rowheader"] `au celule de date pe care le descriu. + 0ms
    Evaluarea stării: atributele `[lang]` au o valoare valabilă + 1ms
    Evaluarea stării: “ elementele conțin un element “ cu `[kind ="legende"] `+ 1ms
    Evaluarea stării: “ elementele conțin un element “ cu `[kind ="Descriere"] `+ 1ms
    Evaluarea stării: valorile `[taste de acces]` sunt unice + 1ms
    Evaluarea stării: Controalele personalizate au etichete asociate + 0ms
    Evaluarea stării: Controalele personalizate au roluri ARIA + 1ms
    Evaluarea stării: Focusul utilizatorului nu este prins accidental într-o regiune + 0ms
    Evaluarea stării: Controalele interactive sunt focalizate pe tastatură + 0ms
    Evaluarea stării: rubricile nu sări peste niveluri + 0ms
    Evaluarea stării: Elementele interactive indică scopul și starea lor + 1ms
    Evaluarea stării: Pagina are o comandă de filă logică + 0ms
    Evaluarea stării: Focusul utilizatorului este direcționat către conținut nou adăugat la pagină + 1ms
    Evaluarea stării: Conținutul de pe ecran este ascuns de tehnologia de asistare + 0ms
    Evaluarea stării: elementele de reper HTML5 sunt utilizate pentru a îmbunătăți navigarea + 0ms
    Evaluarea stării: Ordinea vizuală pe pagină urmărește ordinul DOM + 0ms
    Evaluarea stării: utilizează o politică de cache eficientă pe activele statice + 1ms
    Evaluarea stării: Evită sarcini enorme de rețea + 3ms
    Evaluarea stării: amâna imagini offscreen + 1ms
    Evaluarea stării: Eliminați resursele care blochează redarea + 12ms
    Evaluarea stării: Minimizați CSS + 28ms
    Evaluare status: Minimizare JavaScript + 64ms
    Evaluarea stării: Amâna CSS neutilizat + 69ms
    Evaluarea stării: Serviți imagini în formate de genul următor + 12ms
    Evaluarea stării: codificarea eficientă a imaginilor + 11ms
    Evaluarea stării: Activați compresia textului + 6ms
    Evaluarea stării: dimensiuni corespunzătoare imagini + 6ms
    Evaluarea stării: Utilizați formate video pentru conținut animat + 7ms
    Evaluarea stării: Evită cașul aplicației + 11ms
    Evaluarea stării: Pagina are codul HTML + 0ms
    Evaluarea stării: Evită o dimensiune excesivă a DOM + 1ms
    Evaluarea stării: Linkurile către destinații încrucișate sunt în siguranță + 2ms
    Evaluarea stării: Evită solicitarea permisiunii de geolocalizare pe sarcina paginii + 1ms
    Evaluarea stării: Evită `document.write ()` + 0ms
    Evaluarea stării: Evită bibliotecile JavaScript front-end cu vulnerabilități de securitate cunoscute + 0ms
    Evaluarea stării: detectate biblioteci JavaScript + 9ms
    Evaluarea stării: Evită solicitarea permisiunii de notificare la încărcarea paginii + 1ms
    Evaluarea stării: Permite utilizatorilor să lipească în câmpuri de parolă + 0ms
    Evaluarea stării: Utilizează HTTP / 2 pentru propriile resurse + 0ms
    Evaluarea stării: Utilizează ascultători pasivi pentru a îmbunătăți performanțele de derulare + 1ms
    Evaluarea stării: Documentul are o meta descriere + 0ms
    Evaluarea stării: Pagina are un cod de stare HTTP de succes + 1ms
    Evaluarea stării: Documentul folosește dimensiuni de fonturi lizibile + 5ms
    Evaluarea stării: Linkurile au text descriptiv + 1ms
    Evaluarea stării: pagina nu este blocată de la indexare + 1ms
    Starea de evaluare: robots.txt este valabilă + 2ms
    Evaluarea stării: Documentul are un `hreflang` + 1ms valid
    Evaluarea stării: Documentul evită pluginurile + 1ms
    Evaluarea stării: Documentul are un valid „rel = canonic” + 0ms
    Evaluarea stării: Pagina este mobilă + 1ms
    evaluarea stării: datele structurate sunt valabile + 0ms
    status Generare de rezultate … + 0ms
    ChromeLauncher Killing Chrome instanță 7098 + 59ms
    Imprimanta html ieșire scrisă la /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: Rulați farul cu `–view` pentru a deschide imediat raportul HTML în browserul dvs. + 1ms

    În a doua ultimă linie, puteți vedea că a tipărit calea unde pot găsi raportul. În mod implicit, va genera un raport în format HTML pe care îl puteți vizualiza fie descărcând pe computer sau servit prin intermediul unui server web.

    Dar ce se întâmplă dacă trebuie să generați un raport în JSON format?

    Este realizabil după cum urmează.

    adresa URL a farului –chrome-flags ="–acefal" –output json –output-path URL.json

    Folosind Lighthouse CLI, aveți controlul deplin pentru a utiliza așa cum doriți. Aș recomanda cu tărie să verificați Depozitul GitHub pentru a afla mai multe despre utilizarea CLI sau programatic.

    Concluzie

    Google Lighthouse pare un instrument promițător pentru a efectua un test de continuitate pentru a îmbunătăți performanța și capacitatea de utilizare a site-ului. Dacă utilizați WordPress și încercați să faceți încărcarea site-ului dvs. mai repede, consultați rachetă.

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