Apakah anda tahu bagaimana kondisi website anda ketika dianalisa dari segi performance, accessibility, best practise, SEO dan progressive web app. Untuk mengetahui hal tersebut diatas google mengeluarkan aplikasi yang melalui ekstensi dari chrome yang dinamakan Lighthouse. Lighthouse ini merupakan alat sumber terbuk otomatis untuk meningkatan kualitas aplikasi web anda. Lighthouse ini melakukan serangkaian pengujian terhadap laman web yang menghasilkan sebuah laporan. Laman pengujian menentukan skor laporan dari performance, accessibility, best practise, SEO dan progressive web app.
Bagaimana cara menggunakan aplikasi ini. Lighthouse ini merupakan ekstensi dari chrome tentunya harus di instal terlebih dahulu melalui ekstensi dari chrome yang ada di chrome web store. Ketikan Lighthouse pada chrome web store yang berisi aplikasi ekstensi yang mendukung chrome kemudian pasangkan. Setelah terpasang akan muncul ikon Lighthouse di sebelah atas kanan. Masuk terlebih dahulu address website anda kemudian klik ikon Lighthouse dan general report.
Coba kita lihat apa saja yang diuji didalam aplikasi Lighthouse ini.
Performance
- First Contentful Paint adalah mengukur waktu dari navigasi ke waktu ketika browser membuat bit konten pertama dari DOM. Ini merupakan awal penting bagi pengguna karena memberikan umpan balik ke halaman yang sebenarnya. Untuk mengatasi skor yang rendah pertama minimalkan jumlah slylesheet atau scripts pemblokiran render dan memuat javascript pihak ketiga. Gunakan HTTP caching untuk mempercepat kunjungan berulang dan perkecil serta kompres teks. Optimalkan bootup Javascript untuk mengurangi kerja javascript pada muatan halaman.
- Speed Index, Lighthouse menggunakan modul simpul yang disebut Speedline untuk menghasilkan nilai Indeks Kecepatan. Untuk informasi selengkapnya tentang algoritme dan metodologi di balik Indeks Kecepatan, lihat Indeks Kecepatan. Target nilai dihitung dengan fungsi distribusi kumulatif dari distribusi normal-log.
- Time to Interactive, Saatnya untuk Interaktif didefinisikan sebagai titik di mana layout telah stabil, webfonts utama terlihat, dan tersedia cukup thread utama untuk menangani masukan pengguna.
- First Meaningful Paint, Gambar Pertama yang Penuh Makna pada dasarnya adalah gambar yang diikuti oleh terjadinya perubahan layout pada bagian teratas laman web, dan pemuatan font web. Lihat spesifikasi untuk mengetahui selengkapnya.
- First CPU Idle, Mengukur halaman sedikit interaksi walaupun tidak semua elemen UI dilayar tidak bersifat interaktif. Apa yang dilakukan apabila skor rendah adalah minimalkan jumlah sumber daya yang diperlukan dengan mengoptimalkan efisiensi konten.
- Max Potential First Input Delay, Mengukur waktu dari saat pengguna pertama kali berinteraksi dengan situs anda. Keterlambatan input terjadi karena browser sibuk melakukan sesuatu yang lain, sehingga tidak dapat merespon pengguna.
Dari masalah performance diatas gunakan Preconnect membangun koneksi ke asal yang lain, serta Anda ingin proses tersebut dimulai secepat mungkin.
Accessibility
- Names and labels adalah peluang untuk meningkatkan semantik kontrol dalam aplikasi Anda. Menganalisas Elemen yang memiliki/tidak memiliki judul, Elemen formulir tidak memiliki label terkait, Tautan tidak memiliki nama yang dapat dilihat.
- Internationalization and localization adalah peluang untuk meningkatkan interpretasi konten Anda oleh pengguna di berbagai tempat. Elemen <html> tidak memiliki atribut.
- Additional items to manually check adalah membahas area yang tidak dapat dicakup oleh alat pengujian otomatis.
- Passed audits, banyak yang diaudit disana mulai dari konten, backgroud, dokumen, attribut, foto, table, elemen, dan lain-lain.
- Not applicable, mulai dari accesskey, role, audio,, scripts, html, image, dokumen, object, element, lang, video dan lain-lain.
Best Practices
- Uses document.write(), Untuk pengguna dengan koneksi lambat, skrip eksternal secara dinamis disuntikkan melalui `document.write ()` dapat menunda pemuatan halaman dengan puluhan detik.
- Links to cross-origin destinations are unsafe, meningkatkan kinerja dan mencegah kerentanan keamanan dengan menambahkan rel="noopener"` or `rel="noreferrer"`
- Includes front-end JavaScript libraries with known security vulnerabilities 2 vulnerabilities detected, Beberapa skrip pihak ketiga mungkin berisi kerentanan keamanan yang diketahui yang mudah diidentifikasi dan dieksploitasi oleh penyerang.
- Browser errors were logged to the console, Kesalahan yang dicatat di konsol menunjukkan masalah yang belum terselesaikan. Mereka dapat berasal dari kegagalan permintaan jaringan dan masalah browser lainnya.
SEO
Pemeriksaan ini memastikan bahwa halaman anda dioptimalkan untuk peringkat hasil mesin pencarian.
- Content Best Practices, Dokumen tidak memiliki deskripsi meta, dapat dimasukan dalam hasil pencarian untuk meringkas konten halaman secara ringkas.
- Mobile Friendly, Target tidak berukuran merupakan elemen interaktif seperti tombol dan tautan yang cukup besar dan memiliki cukup ruang disekitarnya agar cukup mudah untuk diketuk tanpa tumpang tindih dengan elemen lain.
- Additional items to manually check, Jalankan validator tambahan disitus anda untuk memeriks praktik terbaik SEO tambahan. Data yang validator adalah data terstruktur valid.
Progressive Web App
Pemeriksaan ini menvalidasi aspek Aplikasi Web Progresif.
- Fast and reliable merupakan Pemuatan halaman tidak cukup cepat di jaringan seluler. Pemeriksaan dilakukan sekitar Pemuatan halaman telalu lambat dan tidak interaktif dalam 10 detik, halaman tidak merespon dengan 200 ketika offline, dan start_url tidak merespon dengan 200 ketika offline manifes aplikasi web yang dapat digunakan ditemukan dihalaman.
- Installable adalah menggunakan HTTPS tidak mendaftarkan pekerja layanan yang mengontrol halaman dan start_url serta manifes aplikasi web tidak memenuhi persyaratan pemasangan.
- PWA Optimized memeriksa optimal redirect lalu lintas HTTP ke HTTPS, Tidak dikonfigurasi untuk splash screenFailures kustom, Tidak ada manifes yang diambil, Konten berukuran dengan benar untuk viewport, Memiliki tag <meta name = "viewport"> dengan lebar atau skala awal, Berisi beberapa konten saat JavaScript tidak tersedia dan Tidak menyediakan ikon sentuh-apel yang valid.
 |
| Lighthouse Report |
0 Response to "Lighthouse Untuk Menganalisa Website"
Post a Comment