Gunakan Google Lighthouse Untuk Meningkatkan Performa Website
Gunakan Google Lighthouse Untuk Meningkatkan Performa website - Meningkat Kecepatan loading merupakan sebuah cara terbaik bagi setiap blogger untuk meoptimalkan SEO pada search engine. Studi dari Walmart dan Amazon mengungkapkan bahwa perbaikan sekecil apapun pada website sangatlah penting, karena dengan meningkatkan kecepatan loading pada website setiap 100 milidetik per-halaman bisa memberikan peluang penambahan pendapatan 1 persen.
Terlebih lagi, Think with Google juga menemukan bahwa kecepatan website yang lebih lambat dapat secara signifikan mengurangi konversi dan meningkatkan pantulan - hingga 20 persen dalam penundaan satu detik.
Jadi sekarang bagaimana? Salah satu opsi adalah menggunakan Google Lighthouse, yang merupakan salah satu Developer Tools gratis. Untuk browser Chrome, Developer Tools ini bisa ditemukan pada : View > Developer > Developer Tools > Audits.
Google Lighthouse memberikan saran terperinci untuk meningkatkan kualitas teknis dan kecepatan website. Setiap rekomendasi dari Google Lighthouse dilengkapi dengan daftar file spesifik untuk dioptimalkan serta tautan "informasi lanjutan".
Tips Kecepatan dari Google Lighthouse
Optimasikan render-blocking. Setiap kali pengunjung datang pada sebuah website, browser yang digunakan selalu meminta, mengunduh, dan memproses external CSS stylesheets serta file JavaScript. Itulah yang dimaksud render-blocking. CSS dan JavaScript adalah alat yang ampuh. Tetapi juga dapat memperlambat website. Sebaiknya Beberapa file JavaScript dan CSS tidak perlu dimuat di awal proses render.
Untuk JavaScript, gunakanlah atribut async atau defer untuk bagian nonkritis. Atribut async atau defer digunakan untuk menunda loading JS setelah elemen lain yang lebih penting loading terlebih dahulu.
File CSS juga dapat diuraikan oleh perangkat melalui string kueri media. Dalam strategi ini, setiap tautan stylesheet dalam HTML harus memiliki atribut medianya sendiri sehingga Browser hanya mengeksekusi apa yang diperlukan.
Minifikasi. HTML, CSS, dan JavaScript semuanya dapat diperkecil dan dikompres untuk mengurangi ukuran file.
Minifikasi merupakan cara untuk mengecilkan jumlah karakter atau kode tanpa mengubah cara proses browser. Contoh minifikasi termasuk menghapus komentar, pemformatan, dan string yang tidak perlu.
Kompresi mengurangi ukuran file, mirip dengan zip. Layanan kompresi seperti Brotli atau Gzip berfungsi untuk merubah ukuran file teks menjadi paket yang lebih kecil tanpa mengubah apa yang ada di dalam text tersebut.
Optimasikan gambar. Optimalisasi bukan untuk mengurangi kualitas gambar. Format seperti JPEG 2000, JPEG XR, dan WebP memberikan visual berkualitas dengan tingkat kompresi yang lebih tinggi. Selain itu jika memiliki anggaran dana lebih, alangkah baiknya menggunakan CDN agar proses loading gambar lebih cepat lagi.
Optimasikan caching browser. Browser pengunjung untuk sementara waktu dapat menyimpan cache, yang berguna untuk kunjungan berulang ke halaman website. Cache ini hanya berlaku untuk kunjungan pertama saja, jadi setiap ada postingan atau informasi terbaru pada website perbaharuilah cache tersebut agar pengunjung mendapatkan konten yang realtime.
Simpan Laporan Google Lighthouse
Anda tidak dapat mencetak laporan Google Lighthouse dari konsol langsung. Tetapi Anda dapat mengunduh hasilnya. Sayangnya, unduhan tidak dalam format teks yang dapat dimengerti. Tetapi GitHub memiliki solusinya, buka halaman ini di GitHub ( BUKA ). Seret file Lighthouse yang telah diunduh dari manajer file anda ke halaman GitHub di browser. Kemudian GitHub akan membuat laporan secara terperinci, lengkap dengan tautan bantuan yang dapat diklik dan opsi pencetakan serta penyimpanan dari browser.
Terlebih lagi, Think with Google juga menemukan bahwa kecepatan website yang lebih lambat dapat secara signifikan mengurangi konversi dan meningkatkan pantulan - hingga 20 persen dalam penundaan satu detik.
Jadi sekarang bagaimana? Salah satu opsi adalah menggunakan Google Lighthouse, yang merupakan salah satu Developer Tools gratis. Untuk browser Chrome, Developer Tools ini bisa ditemukan pada : View > Developer > Developer Tools > Audits.
Google Lighthouse memberikan saran terperinci untuk meningkatkan kualitas teknis dan kecepatan website. Setiap rekomendasi dari Google Lighthouse dilengkapi dengan daftar file spesifik untuk dioptimalkan serta tautan "informasi lanjutan".
Tips Kecepatan dari Google Lighthouse
Optimasikan render-blocking. Setiap kali pengunjung datang pada sebuah website, browser yang digunakan selalu meminta, mengunduh, dan memproses external CSS stylesheets serta file JavaScript. Itulah yang dimaksud render-blocking. CSS dan JavaScript adalah alat yang ampuh. Tetapi juga dapat memperlambat website. Sebaiknya Beberapa file JavaScript dan CSS tidak perlu dimuat di awal proses render.
Untuk JavaScript, gunakanlah atribut async atau defer untuk bagian nonkritis. Atribut async atau defer digunakan untuk menunda loading JS setelah elemen lain yang lebih penting loading terlebih dahulu.
File CSS juga dapat diuraikan oleh perangkat melalui string kueri media. Dalam strategi ini, setiap tautan stylesheet dalam HTML harus memiliki atribut medianya sendiri sehingga Browser hanya mengeksekusi apa yang diperlukan.
Minifikasi. HTML, CSS, dan JavaScript semuanya dapat diperkecil dan dikompres untuk mengurangi ukuran file.
Minifikasi merupakan cara untuk mengecilkan jumlah karakter atau kode tanpa mengubah cara proses browser. Contoh minifikasi termasuk menghapus komentar, pemformatan, dan string yang tidak perlu.
Kompresi mengurangi ukuran file, mirip dengan zip. Layanan kompresi seperti Brotli atau Gzip berfungsi untuk merubah ukuran file teks menjadi paket yang lebih kecil tanpa mengubah apa yang ada di dalam text tersebut.
Optimasikan gambar. Optimalisasi bukan untuk mengurangi kualitas gambar. Format seperti JPEG 2000, JPEG XR, dan WebP memberikan visual berkualitas dengan tingkat kompresi yang lebih tinggi. Selain itu jika memiliki anggaran dana lebih, alangkah baiknya menggunakan CDN agar proses loading gambar lebih cepat lagi.
Optimasikan caching browser. Browser pengunjung untuk sementara waktu dapat menyimpan cache, yang berguna untuk kunjungan berulang ke halaman website. Cache ini hanya berlaku untuk kunjungan pertama saja, jadi setiap ada postingan atau informasi terbaru pada website perbaharuilah cache tersebut agar pengunjung mendapatkan konten yang realtime.
Simpan Laporan Google Lighthouse
Anda tidak dapat mencetak laporan Google Lighthouse dari konsol langsung. Tetapi Anda dapat mengunduh hasilnya. Sayangnya, unduhan tidak dalam format teks yang dapat dimengerti. Tetapi GitHub memiliki solusinya, buka halaman ini di GitHub ( BUKA ). Seret file Lighthouse yang telah diunduh dari manajer file anda ke halaman GitHub di browser. Kemudian GitHub akan membuat laporan secara terperinci, lengkap dengan tautan bantuan yang dapat diklik dan opsi pencetakan serta penyimpanan dari browser.