Bagaimana cara menguji Situs Anda dengan Google Lighthouse?

Alat baru oleh Google adalah untuk menguji dan memberi Anda rekomendasi untuk meningkatkan kinerja, SEO, keamanan, praktik terbaik, dan aksesibilitas.


Google baru-baru ini diluncurkan Mercu suar, alat sumber terbuka untuk mengaudit situs web Anda secara manual dan otomatis.

Metrik apa yang diuji oleh Google Lighthouse?

Ada lebih dari 75 metrik itu menguji dan memberi Anda skor keseluruhan. Beberapa yang populer berikut Anda mungkin tertarik sebagai pemilik situs, analis SEO, webmaster.

  • Performa – waktu untuk interaktif, latensi, indeks kecepatan, optimalisasi sumber daya, TTFB, pengiriman aset, waktu eksekusi skrip, ukuran DOM, dll..
  • SEO – Ponsel ramah, meta, merangkak, kanonik, struktur, dll.
  • Praktik terbaik – Optimalisasi gambar, pustaka JS, logging kesalahan browser, dapat diakses melalui HTTPS, kerentanan JS yang diketahui, dll
  • Aksesibilitas  – Elemen halaman, bahasa, atribut ARIA, dll.
  • PWA (Aplikasi Web Progresif) – redirect HTTP ke HTTPS, kode respons ok, memuat cepat pada 3G, layar splash, viewport, dll.

Alat yang fantastis dan dapat Anda gunakan dalam berbagai cara.

Itu benar – banyak cara. Jika Anda seorang pengembang, Anda dapat menggunakannya dengan Node.js untuk menjalankan tes secara terprogram. Sudah ada beberapa alat di pasar yang didukung oleh Mercusuar yang menawarkan pemantauan kinerja situs yang berkelanjutan.

Mari cari tahu bagaimana Anda menjalankan uji mercusuar terhadap situs Anda.

Mulai dari yang termudah.

Ukur dengan web.dev

Google merilis web.dev beberapa bulan lalu dan mendapatkan popularitas yang baik. Menguji online itu mudah.

Pergi ke Mengukur halaman dan masukkan URL untuk menjalankan audit. Ini akan memakan waktu beberapa detik, dan Anda akan melihat laporan terperinci dengan skor keseluruhan.

Hasil juga menunjukkan tes metrik sukses yang dilakukan dengan sangat baik untuk audit yang lulus dan bekerja pada perhatian kebutuhan tersebut.

Jangan menghabiskan terlalu banyak waktu untuk mendapatkan 100. Bahkan situs Google pun tidak memberi skor.

Anggap itu sebagai pedoman dan cobalah untuk meningkatkan sebanyak mungkin.

Catatan: web.dev mengemulasi tes menggunakan perangkat Seluler, dan saat menulis, saya tidak melihat opsi untuk menguji menggunakan Desktop.

Chrome

Apakah Anda tahu Lighthouse tersedia di browser Chrome Anda? Dan, kabar baiknya adalah, Anda dapat memilih untuk menguji menggunakan Ponsel atau Desktop. Ini tersedia di alat Pengembang.

  • Buka browser Chrome
  • Akses situs Anda untuk menguji
  • Buka alat Pengembang (Tekan F12 jika menggunakan Windows) atau klik kanan pada halaman dan klik Periksa
  • Buka tab audit

Seperti yang dapat Anda lihat di atas, Anda memiliki opsi untuk memilih apa yang ingin Anda uji. Ini bagus karena Anda dapat fokus pada tujuan Anda dan mendapatkan hasil audit lebih cepat.

Hasil terlihat dan terasa dari Chome dan web.dev hampir serupa.

Tetapi jika Anda perhatikan dengan teliti, ada satu grup metrik tambahan di sini – Aplikasi Web Progresif. Jadi alasan lain untuk mengaudit menggunakan Chrome.

Node.js

Mercusuar tersedia sebagai modul Node. Anda dapat menginstalnya di server Anda dan menggunakannya secara terprogram atau baris perintah. Mari kita cepat memeriksa cara menginstal Mercusuar untuk menjalankan beberapa tes.

Menginstal Mercusuar di Ubuntu 18.x

Berikut ini, saya sudah mencobanya DigitalOcean server. Mercusuar membutuhkan Node LTS 8.9 atau lebih baru dan saya menganggap Anda sudah menginstalnya. Jika tidak, lihat panduan instalasi Node.js ini.

Anda juga akan membutuhkan peramban kromium untuk diinstal di server. Saya membahas instruksi instalasi di sini.

Memasang Mercusuar sangat mudah, seperti halnya Anda melakukan modul lain.

  • Login ke server Anda
  • Jalankan perintah berikut untuk menginstal

npm menginstal -g mercusuar

Saya menggunakan -g di sini sehingga bisa diinstal sebagai modul global.

[dilindungi email]: ~ # npm install -g mercusuar
/ usr / bin / mercusuar -> /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

> [dilindungi email] postinstall / usr / lib / node_modules / mercusuar / node_modules / ax-core
> node build / utils / postinstall.js

+ [dilindungi email]
menambahkan 179 paket dari 119 kontributor dalam 10.094s
[dilindungi email]: ~ #

Setelah terinstal, jalankan perintah mercusuar untuk memastikannya telah diinstal dengan benar.

[dilindungi email]: ~ # mercusuar
Harap berikan url

Tentukan –help untuk opsi yang tersedia
[dilindungi email]: ~ #

Bagus, mercusuar siap menjalankan audit. Mari kita coba beberapa opsi pengujian.

Untuk menjalankan tes menggunakan browser tanpa kepala

URL mercusuar –chrome-flags ="–tanpa kepala"

Anda harus memberikan URL absolut termasuk http atau https.

Ex:

[dilindungi email]: ~ $ mercusuar https://geekflare.com –chrome-flags ="–tanpa kepala"
ChromeLauncher Menunggu browser. + 0ms
ChromeLauncher Menunggu browser … +1ms
ChromeLauncher Menunggu browser ….. + 511ms
ChromeLauncher Menunggu browser ….. ✓ + 2ms
status Menghubungkan ke browser + 176ms
status Menyetel ulang status dengan tentang: kosong + 24 ms
status mesin Benchmarking + 30 ms
status Inisialisasi … + 508 ms
status Memuat halaman & Menunggu Script onload, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Aksesibilitas, LinkElements, JangkarNoRelNoopener, AppCacheManifest, Doctype, DOMStat, JSOtomatis, BergairahTranslateIdak BergerakTelepon, Menempelkan Lebih Banyak Permintaan, Menempel Banyak Permintaan, Menambah, Menambah, Menambah, Menambah, Menambah, Menambah, Menekan , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
status Retrieving in-page: Script + 2s
status Retrieving di halaman: CSSUsage + 0ms
status Mengambil di halaman: Viewport + 0ms
status Mengambil di halaman: ViewportDimensions + 0ms
status Mengambil di halaman: ThemeColor + 0ms
status Mengambil di halaman: Manifes + 0ms
status Retrieving di halaman: RuntimeExceptions + 0ms
status Mengambil di halaman: ChromeConsoleMessages + 0ms
status Mengambil di halaman: ImageUsage + 0ms
Status Retrieving in-page: Aksesibilitas + 0ms
status Mengambil di halaman: LinkElements + 0ms
status Mengambil dalam-halaman: AnchorsWithNoRelNoopener + 1ms
status Retrieving di halaman: AppCacheManifest + 0ms
Status Retrieving in-page: Doctype + 0ms
status Retrieving dalam halaman: DOMStats + 0ms
status Mengambil di halaman: JSLibraries + 0ms
status Retrieving dalam halaman: OptimizedImages + 0ms
status Retrieving dalam halaman: Kata SandiInputsDengan PreventedPaste + 0ms
status Retrieving di halaman: ResponseCompression + 0ms
status Retrieving in-page: TagsBlockingFirstPaint + 0ms
status Retrieving di halaman: MetaDescription + 0ms
status Retrieving di halaman: FontSize + 0ms
status Retrieving in-page: CrawlableLinks + 0ms
status Retrieving di halaman: MetaRobots + 0ms
status Mengambil di halaman: Hreflang + 0ms
status Mengambil di halaman: EmbeddedContent + 0ms
status Retrieving in-page: Canonical + 0ms
status Mengambil di halaman: RobotsTxt + 0ms
status Retrieving trace + 1ms
Status Mengambil devtoolsLog & catatan jaringan + 110ms
Status Retrieving: Script + 27ms
Status Retrieving: CSSUsage + 53ms
Status Retrieving: Viewport + 192ms
Status Retrieving: ViewportDimensions + 5ms
Status Retrieving: ThemeColor + 13ms
Status Retrieving: Manifest + 2ms
status Retrieving: RuntimeExceptions + 295ms
Pengambilan status: ChromeConsoleMessages +1ms
Status Retrieving: ImageUsage + 2ms
Status Retrieving: Aksesibilitas + 22 ms
Status Retrieving: LinkElements + 526ms
Status Retrieving: AnchorsWithNoRelNoopener + 10ms
Status Retrieving: AppCacheManifest + 6ms
Status Retrieving: Doctype + 20ms
Status Retrieving: DOMStats + 4ms
Pengambilan status: JSLibraries + 50ms
Pengambilan status: OptimizedImages + 25ms
status Retrieving: PasswordInputsWithPreventedPaste + 234ms
Pengambilan status: ResponseCompression + 3ms
status Retrieving: TagsBlockingFirstPaint + 7ms
Status Retrieving: MetaDescription + 6ms
Status Retrieving: FontSize + 7ms
Status Retrieving: CrawlableLinks + 245ms
Status Retrieving: MetaRobots + 6ms
Status Retrieving: Hreflang + 2ms
status Retrieving: EmbeddedContent + 2ms
Status Retrieving: Canonical + 3ms
Status Retrieving: RobotsTxt + 6ms
status Menyetel ulang status dengan tentang: kosong + 19ms
status Memuat halaman & menunggu onload ServiceWorker, Offline, StartUrl + 24ms
status Mengambil di halaman: ServiceWorker + 59ms
status Mengambil di halaman: Offline + 0ms
status Retrieving in-page: StartUrl +1ms
Status Mengambil devtoolsLog & catatan jaringan + 0ms
Pengambilan status: ServiceWorker + 2ms
Pengambilan status: Offline + 1ms
Pengambilan status: StartUrl + 1ms
status Menyetel ulang status dengan tentang: kosong + 5ms
status Memuat halaman & menunggu onload HTTPRedirect, HTMLWithoutJavaScript + 48ms
Pengambilan status di halaman: HTTPRedirect + 260ms
status Retrieving di halaman: HTMLWithoutJavaScript + 0ms
Status Mengambil devtoolsLog & catatan jaringan + 0ms
Pengambilan status: HTTPRedirect + 7ms
status Retrieving: HTMLWithoutJavaScript + 12ms
status Putuskan sambungan dari browser … + 7ms
status Menganalisis dan menjalankan audit … +6ms
status Mengevaluasi: Menggunakan HTTPS + 3ms
status Mengevaluasi: Mengarahkan lalu lintas HTTP ke HTTPS + 24ms
status Evaluating: Mendaftarkan pekerja layanan yang mengontrol halaman dan start_url +1ms
status Mengevaluasi: Halaman saat ini merespons dengan 200 ketika offline + 0ms
status Evaluating: Memiliki tag “ dengan `width` atau` skala awal` + 1ms
status Evaluating: Berisi beberapa konten ketika JavaScript tidak tersedia +1ms
status Mengevaluasi: Paint Contentful Pertama + 6ms
status Evaluating: Paint Bermakna Pertama + 54ms
status Evaluating: Memuat halaman cukup cepat di jaringan seluler + 10ms
status Mengevaluasi: Indeks Kecepatan + 33ms
status Evaluating: Screenshot Thumbnail + 529ms
status Mengevaluasi: Tangkapan Layar Akhir + 287ms
status Mengevaluasi: Diperkirakan Input Latency + 2ms
status Mengevaluasi: Tidak ada kesalahan peramban yang login ke konsol + 16ms
status Mengevaluasi: Waktu respons server rendah (TTFB) +1ms
status Mengevaluasi: Idle CPU Pertama + 1ms
status Mengevaluasi: Waktu untuk Interaktif + 30 ms
status Mengevaluasi: Tanda dan ukuran Waktu Pengguna + 0ms
status Evaluating: Minimalkan Permintaan Kritis Kedalaman + 2ms
status Mengevaluasi: Hindari pengalihan beberapa halaman +3ms
status Mengevaluasi: Manifes aplikasi web memenuhi persyaratan pemasangan 2ms
status Evaluating: Dikonfigurasi untuk layar splash khusus + 1ms
status Evaluating: Mengatur warna tema address-bar + 0ms
status Mengevaluasi: Konten berukuran dengan benar untuk area pandang + 1ms
status Evaluating: Menampilkan gambar dengan rasio aspek yang benar + 0ms
status Mengevaluasi: Menghindari API usang + 1ms
status Evaluating: Meminimalkan pekerjaan thread utama + 0ms
status Evaluating: waktu eksekusi JavaScript + 11ms
status Evaluating: Preload request key +3ms
status Mengevaluasi: Pra-koneksi ke asal yang diperlukan +2ms
status Evaluating: Semua teks tetap terlihat selama webfont memuat +2ms
status Mengevaluasi: Permintaan Jaringan +1ms
status Mengevaluasi: Metrik + 2ms
status Evaluating: start_url merespons dengan 200 ketika offline +1ms
status Mengevaluasi: Situs berfungsi lintas-browser + 1ms
status Mengevaluasi: Transisi halaman tidak terasa seperti diblokir di jaringan + 0ms
status Mengevaluasi: Setiap halaman memiliki URL + 0ms
status Mengevaluasi: atribut `[aria – *]` cocok dengan perannya + 1ms
status Mengevaluasi: `[peran]` s memiliki semua yang diperlukan atribut `[aria – *]` 1ms
status Mengevaluasi: Elemen dengan `[peran]` yang memerlukan anak-anak tertentu `[peran], hadir + 0ms
status Mengevaluasi: `[peran]` s terkandung oleh elemen induk yang disyaratkan + 1ms
status Mengevaluasi: nilai `[peran]` valid + 1ms
status Mengevaluasi: atribut `[aria – *]` memiliki nilai yang valid + 0ms
status Mengevaluasi: atribut `[aria – *]` valid dan tidak salah eja +1ms
status Mengevaluasi: elemen “ berisi elemen “ dengan `[kind ="keterangan"] `+1ms
status Mengevaluasi: Tombol memiliki nama yang dapat diakses + 1ms
status Mengevaluasi: Halaman berisi tajuk, lewati tautan, atau wilayah tengara + 1 ms
status Mengevaluasi: Warna latar belakang dan latar depan memiliki rasio kontras yang cukup + 1 ms
status Mengevaluasi: “ mengandung hanya elemen-elemen “ dan “ yang disusun dengan benar, “ atau “. +1ms
status Mengevaluasi: Item daftar definisi dibungkus dengan elemen “ + 0ms
status Mengevaluasi: Dokumen memiliki elemen “ +1ms
status Mengevaluasi: atribut `[id]` pada halaman tersebut unik +1ms
status Mengevaluasi: elemen “ atau “ memiliki judul +1ms
status Mengevaluasi: “ elemen memiliki atribut `[lang]` + 0ms
status Mengevaluasi: elemen “ memiliki nilai yang valid untuk atribut `[lang]` +1ms
status Mengevaluasi: Elemen gambar memiliki atribut `[alt]` +1ms
status Mengevaluasi: “ elemen memiliki teks `[alt]` + 1ms
status Mengevaluasi: Elemen formulir memiliki label yang terkait + 0ms
status Mengevaluasi: Presentasional `

`elemen hindari menggunakan atribut` `,` `atau atribut` [ringkasan] `. +1ms
status Mengevaluasi: Tautan memiliki nama yang dapat dilihat + 1ms
status Mengevaluasi: Daftar hanya berisi `
  • `elemen dan elemen pendukung skrip (` `dan` `). +1ms
    status Mengevaluasi: Daftar item (`
  • `) terkandung dalam`
      `atau`
        `elemen induk +1ms
        status Mengevaluasi: Dokumen tidak menggunakan “ +ms
        status Mengevaluasi: `[user-scalable ="tidak"] `tidak digunakan dalam elemen` `dan atribut` [skala maksimum] `tidak kurang dari 5. + 1ms
        status Mengevaluasi: “ elemen memiliki teks `[alt]` + 1ms
        status Mengevaluasi: Tidak ada elemen yang memiliki nilai `[tabindex]` lebih besar dari 0 +1ms
        status Mengevaluasi: Sel dalam `
  • Elemen `yang menggunakan atribut` [header] `hanya merujuk ke sel lain dari tabel yang sama. +1ms
    status Mengevaluasi: “ elemen dan elemen dengan `[peran ="kepala kolom"/"kepala baris"] `punya sel data yang mereka gambarkan. + 0ms
    status Mengevaluasi: atribut `[lang]` memiliki nilai yang valid + 1ms
    status Mengevaluasi: elemen “ berisi elemen “ dengan `[kind ="keterangan"] `+1ms
    status Mengevaluasi: elemen “ berisi elemen “ dengan `[kind ="deskripsi"] `+1ms
    status Mengevaluasi: nilai `[accesskey]` unik + 1ms
    status Mengevaluasi: Kontrol khusus memiliki label yang terkait + 0ms
    status Mengevaluasi: Kontrol khusus memiliki peran ARIA +1ms
    status Mengevaluasi: Fokus pengguna tidak sengaja terjebak di wilayah + 0ms
    status Mengevaluasi: Kontrol interaktif dapat fokus pada keyboard + 0ms
    status Mengevaluasi: Judul tidak melewati level + 0ms
    status Mengevaluasi: Elemen interaktif menunjukkan tujuan dan menyatakan +1ms
    status Mengevaluasi: Halaman ini memiliki urutan tab logis + 0ms
    status Mengevaluasi: Fokus pengguna diarahkan ke konten baru yang ditambahkan ke halaman +1ms
    status Mengevaluasi: Konten di layar tersembunyi dari teknologi bantuan + 0ms
    status Mengevaluasi: Elemen tengara HTML5 digunakan untuk meningkatkan navigasi + 0ms
    status Evaluating: Urutan visual pada halaman mengikuti urutan DOM + 0ms
    status Mengevaluasi: Menggunakan kebijakan cache efisien pada aset statis + 1ms
    status Evaluating: Menghindari muatan jaringan yang sangat besar + 3ms
    status Mengevaluasi: Menunda gambar di layar + 1ms
    status Mengevaluasi: Menghilangkan sumber daya pemblokiran render + 12ms
    status Evaluating: Minify CSS + 28ms
    status Evaluating: Minify JavaScript + 64ms
    status Mengevaluasi: Menunda CSS + 69ms yang tidak digunakan
    status Mengevaluasi: Melayani gambar dalam format next-gen + 12ms
    status Mengevaluasi: Menyandikan gambar secara efisien + 11ms
    status Evaluating: Mengaktifkan kompresi teks + 6ms
    status Evaluating: Gambar dengan ukuran yang tepat + 6ms
    status Evaluating: Gunakan format video untuk konten animasi + 7ms
    status Mengevaluasi: Menghindari Cache Aplikasi + 11ms
    status Mengevaluasi: Halaman memiliki doctype HTML + 0ms
    status Evaluating: Menghindari ukuran DOM berlebihan + 1ms
    status Mengevaluasi: Tautan ke tujuan lintas-asal aman +2ms
    status Evaluating: Menghindari meminta izin geolokasi pada pemuatan halaman + 1ms
    status Mengevaluasi: Menghindari `document.write ()` + 0ms
    status Mengevaluasi: Menghindari pustaka JavaScript front-end dengan kerentanan keamanan yang diketahui + 0ms
    status Mengevaluasi: Perpustakaan JavaScript yang terdeteksi + 9ms
    status Evaluating: Menghindari meminta izin pemberitahuan pada pemuatan halaman + 1ms
    status Evaluating: Memungkinkan pengguna untuk menempelkan bidang kata sandi + 0ms
    status Mengevaluasi: Menggunakan HTTP / 2 untuk sumber dayanya sendiri + 0ms
    status Mengevaluasi: Menggunakan pendengar pasif untuk meningkatkan kinerja bergulir + 1 ms
    status Mengevaluasi: Dokumen memiliki deskripsi meta + 0ms
    status Mengevaluasi: Halaman berhasil kode status HTTP +1 +1
    status Mengevaluasi: Dokumen menggunakan ukuran font yang dapat dibaca + 5ms
    status Mengevaluasi: Tautan memiliki teks deskriptif + 1ms
    status Mengevaluasi: Halaman tidak diblokir dari pengindeksan +1ms
    status Mengevaluasi: robots.txt valid + 2ms
    status Mengevaluasi: Dokumen memiliki `hreflang` + 1ms yang valid
    status Mengevaluasi: Dokumen menghindari plugin + 1ms
    status Mengevaluasi: Dokumen memiliki `rel = canonical` + 0ms yang valid
    status Mengevaluasi: Halaman adalah seluler + 1 ms
    status Mengevaluasi: Data terstruktur valid + 0ms
    status Menghasilkan hasil … + 0ms
    ChromeLauncher Membunuh instance Chrome 7098 + 59ms
    Output html printer ditulis ke /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: Jalankan mercusuar dengan `–view` untuk segera membuka laporan HTML di browser Anda + 1ms

    Di baris terakhir kedua, Anda dapat melihatnya telah mencetak jalur tempat saya dapat menemukan laporan. Secara default, ini akan menghasilkan laporan dalam format HTML yang dapat Anda lihat dengan mengunduh pada PC Anda atau melayani melalui beberapa server web.

    Tetapi, bagaimana jika Anda harus membuat laporan masuk JSON format?

    Itu bisa dilakukan sebagai berikut.

    URL mercusuar –chrome-flags ="–tanpa kepala" –output json –output-path URL.json

    Dengan menggunakan Mercusuar CLI, Anda berada dalam kendali penuh untuk menggunakan seperti yang Anda inginkan. Saya akan sangat menyarankan untuk memeriksa Repositori GitHub untuk mempelajari lebih lanjut tentang penggunaan CLI atau secara terprogram.

    Kesimpulan

    Google Lighthouse terlihat alat yang menjanjikan untuk melakukan pengujian kontinuitas untuk meningkatkan kinerja dan kegunaan situs. Jika Anda menggunakan WordPress dan ingin mempercepat pemuatan situs Anda, maka periksa Roket.

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