Lighthouse adalah alat otomatis untuk meningkatkan kualitas situs Anda. Anda memberikan URL, dan menyediakan daftar rekomendasi tentang cara meningkatkan performa halaman, membuat halaman lebih mudah diakses, mematuhi praktik terbaik, dan banyak lagi. Anda dapat menjalankannya dari dalam Chrome DevTools, sebagai Ekstensi Chrome, atau bahkan sebagai modul Node, yang berguna untuk continuous integration.
Untuk sementara waktu, Lighthouse telah memberikan banyak tips untuk meningkatkan performa pemuatan halaman, seperti mengaktifkan kompresi teks atau mengurangi skrip pemblokiran render. Tim Lighthouse terus mengirimkan audit baru untuk memberikan saran yang lebih berguna guna mempercepat situs Anda. Postingan ini adalah rangkuman audit performa yang berguna yang mungkin tidak Anda ketahui, seperti:
- Perincian Pekerjaan Thread Utama
- Pramuat Permintaan Kunci
- Waktu Boot-up JavaScript Tinggi
- Menghindari Pengalihan Halaman
- JavaScript yang tidak digunakan
- Menggunakan Kebijakan Cache yang Tidak Efisien pada Aset Statis
- Menghindari Beberapa Round-Trip yang Mahal ke Asal Mana Pun
- Menggunakan Format Video untuk Konten Animasi
- Semua teks tetap terlihat selama pemuatan font web
- CSS & JavaScript yang Tidak Diminifikasi
- Aturan CSS yang tidak digunakan
Perincian Pekerjaan Thread Utama
Jika pernah menggunakan panel performa di DevTools, Anda tahu bahwa mungkin sulit untuk mendapatkan perincian tentang tempat waktu CPU dihabiskan untuk memuat sebuah halaman. Dengan senang hati kami umumkan bahwa informasi ini kini tersedia dan mudah melalui audit Perincian Pekerjaan Thread Utama yang baru.
Diagnostik baru ini mengevaluasi jumlah dan jenis aktivitas yang terjadi selama pemuatan halaman, yang dapat Anda gunakan untuk menangani masalah performa pemuatan yang terkait dengan tata letak, evaluasi skrip, penguraian, dan aktivitas lainnya.
Pramuat Permintaan Kunci
Saat browser mengambil resource, browser akan melakukannya saat menemukan referensi ke resource tersebut
dalam dokumen dan subresource-nya. Terkadang, tindakan ini bisa kurang optimal karena beberapa resource penting ditemukan agak terlambat dalam proses pemuatan halaman. Untungnya, rel=preload
memberi developer kemampuan untuk memberikan petunjuk kepada browser yang sesuai tentang resource
yang harus diambil sesegera mungkin. Audit Pramuat Permintaan Kunci yang baru memungkinkan developer mengetahui
resource apa yang dapat diuntungkan jika dimuat lebih cepat oleh rel=preload.
Anda harus menguji dan membandingkan perubahan performa dengan dan tanpa
rel=preload karena hal ini dapat memengaruhi performa pemuatan dengan cara yang mungkin tidak
Anda harapkan. Misalnya, melakukan pramuat gambar besar dapat menunda render awal, tetapi
penyeimbangannya adalah gambar pramuat akan muncul lebih cepat dalam tata letak.
Selalu pastikan Anda tidak keberatan dengan hasilnya!
Waktu Boot-up JavaScript Tinggi
Jika terlalu banyak JavaScript yang dimuat, halaman dapat menjadi tidak responsif saat browser mengurai, mengompilasi, dan menjalankannya. Skrip dan iklan pihak ketiga merupakan sumber khusus aktivitas skrip berlebihan yang dapat menghambat perangkat yang bahkan canggih. Audit Waktu Boot-up JavaScript Tinggi mengungkapkan jumlah waktu CPU yang digunakan oleh setiap skrip pada halaman, beserta URL-nya:
Saat menjalankan audit ini, Anda juga dapat mengaktifkan badge pihak ketiga di panel jaringan dan memfilter daftar untuk mengidentifikasi resource skrip pihak ketiga. Dengan data dari audit ini, Anda akan lebih siap untuk menemukan sumber aktivitas JavaScript yang berlebihan yang mengubah halaman dari cepat menjadi tersendat. Untuk skrip khusus aplikasi, Anda dapat menggunakan teknik seperti pemisahan kode dan tree shaking untuk membatasi jumlah JavaScript di setiap halaman situs Anda.
Menghindari Pengalihan Halaman
Terkadang saat browser meminta URL, server dapat merespons dengan kode status level 300. Hal ini menyebabkan browser mengalihkan ke URL lain. Meskipun pengalihan diperlukan untuk tujuan SEO dan kemudahan, pengalihan dapat menambahkan latensi pada permintaan. Hal ini terjadi terutama jika dialihkan ke origin lain, yang dapat menimbulkan waktu tambahan untuk pencarian DNS dan negosiasi koneksi/TLS.
Pengalihan tidak diinginkan untuk halaman landing di situs Anda. Untuk membantu Anda mengurangi latensi dan meningkatkan performa pemuatan, Lighthouse kini menawarkan audit Hindari Pengalihan Halaman, yang memberi tahu Anda saat navigasi memicu pengalihan apa pun.
Perlu diperhatikan bahwa audit ini sulit dipicu di Lighthouse versi DevTools, karena audit tersebut menganalisis URL saat ini di kolom URL halaman, yang mencerminkan resolusi semua pengalihan. Anda kemungkinan akan melihat audit ini diisi di Node CLI.
JavaScript yang tidak digunakan
Kode mati dapat menjadi masalah serius pada aplikasi yang sarat JavaScript. Meskipun tidak menimbulkan biaya eksekusi karena tidak pernah dipanggil, model ini membawa efek lain yang tidak diinginkan. Kode mati akan tetap didownload, diuraikan, dan dikompilasi oleh browser. Hal ini memengaruhi performa pemuatan dan waktu booting JavaScript. Serupa dengan panel cakupan di DevTools, audit JavaScript yang tidak digunakan menunjukkan JavaScript yang didownload oleh halaman saat ini, tetapi tidak pernah digunakan.
Dengan audit ini, Anda dapat mengidentifikasi kode yang mati di aplikasi dan menghapusnya untuk meningkatkan performa pemuatan dan mengurangi penggunaan resource sistem. Tips pro: Anda juga dapat menggunakan panel cakupan kode di DevTools Chrome untuk menemukan informasi ini.
Menggunakan Kebijakan Cache yang Tidak Efisien pada Aset Statis
Meskipun banyak saran performa cenderung berfokus pada peningkatan kecepatan situs bagi pengguna pemula, penting juga untuk menggunakan cache guna meningkatkan performa pemuatan bagi pengguna yang kembali. Audit Penggunaan Cache yang Tidak Efisien pada Aset Statis memeriksa header cache untuk resource jaringan, dan memberi tahu Anda apakah kebijakan cache untuk resource statis di bawah standar.
Dengan bantuan audit ini, Anda akan dapat dengan mudah menemukan dan memperbaiki masalah terkait kebijakan cache saat ini. Hal ini akan meningkatkan performa secara signifikan bagi pengguna yang kembali, dan mereka akan menyukai kecepatan ekstra.
Menghindari Beberapa Round-Trip yang Mahal ke Asal Mana Pun
Saat browser mengambil resource dari server, perlu waktu cukup lama untuk melakukan pencarian DNS dan membuat koneksi ke server.
rel=preconnect
memungkinkan developer menyamarkan latensi ini dengan membuat koneksi ke server
lain sebelum browser melakukannya. Audit Hindari Beberapa
Pulang Pergi ke Mana Pun akan membantu Anda menemukan peluang untuk menggunakan
rel=preconnect.
rel=preconnect di Lighthouse.Saat latensi untuk aset lintas-asal berkurang, pengguna akan merasa bahwa segala sesuatunya berjalan sedikit lebih cepat. Dengan audit Lighthouse baru ini, Anda akan mempelajari
peluang baru dalam menggunakan rel=preconnect untuk melakukannya.
Menggunakan Format Video untuk Konten Animasi
GIF animasi sangat besar dan sering kali menghabiskan setidaknya beberapa ratus kilobyte jika bukan beberapa megabyte data. Jika Anda ingin memuat performa, mengonversi GIF tersebut menjadi video merupakan cara yang tepat. Untungnya, audit Menggunakan Format Video untuk Konten Animasi dapat membantu Anda.
Jika situs Anda memiliki GIF berukuran lebih dari 100 KB, audit ini akan otomatis menandainya dan mengarahkan Anda ke beberapa panduan tentang cara mengonversinya ke video dan menyematkannya. Situs seperti Imgur telah meningkatkan performa pemuatan secara signifikan dengan mengonversi GIF-nya menjadi video. Selain itu, jika situs Anda menggunakan paket hosting dengan bandwidth berbayar, potensi penghematan biaya saja seharusnya cukup untuk meyakinkan Anda.
Semua Teks Tetap Terlihat Selama Pemuatan Font Web
Saat kita memuat font web untuk halaman, browser sering merender teks yang tidak terlihat hingga font dimuat. Fenomena ini, yang dikenal sebagai Flash of Invisible Text (FOIT)), mungkin lebih disukai bagi Anda dari sudut pandang desain, tetapi sebenarnya ini sebuah masalah. Teks yang diblokir dari rendering tidak dapat dibaca sampai dirender dan terlihat. Pada koneksi latensi tinggi dan/atau bandwidth tinggi, ini berarti bagian inti dari pengalaman pengguna Anda tidak tersedia. Hal ini juga dapat berupa masalah performa persepsi karena halaman tidak merender konten yang bermakna secepat yang seharusnya. Untungnya, audit Semua Teks Tetap Terlihat Selama Beban Font Web membantu Anda menemukan peluang untuk memperbaiki masalah ini di situs Anda.
Jika Lighthouse menemukan font web dalam aplikasi Anda yang menunda rendering teks, ada beberapa solusi yang dapat dilakukan. Anda dapat mengontrol rendering teks dengan
properti CSS font-display,
dan/atau Font Loading API.
Jika Anda ingin menggali lebih dalam, pertimbangkan untuk membaca Panduan Komprehensif untuk Strategi Pemuatan Font, sebuah
panduan bagus dari Zach Leatherman yang merupakan
referensi bagus untuk pemuatan font yang optimal.
CSS & JavaScript yang tidak diminifikasi
Minifikasi telah menjadi teknik yang disarankan karena performa web telah menjadi suatu keharusan, dan untuk alasan yang baik. Solusi ini secara signifikan mengurangi ukuran resource berbasis teks, yang pada akhirnya bagus untuk performa pemuatan. Namun, pengoptimalan ini dapat sering diabaikan, terutama jika proses build tidak menanganinya untuk Anda. Audit Minifikasi CSS dan Minifikasi JavaScript akan mengompilasi daftar resource yang tidak diminifikasi yang ditemukan di halaman saat ini. Dari sana, Anda dapat mengambil tindakan dengan meminifikasi file tersebut secara manual, atau meningkatkan sistem build untuk melakukannya.
Aturan CSS yang tidak digunakan
Seiring berjalannya situs menjadi semakin panjang, tidak dapat dihindari bahwa sampah yang tersisa dari pemfaktoran ulang mulai menumpuk. Salah satu sumber penyimpangan tersebut berupa aturan CSS yang tidak digunakan, yang tidak lagi diperlukan agar situs dapat berfungsi, tetapi tetap menghabiskan bandwidth. Untuk memudahkan Anda, audit Aturan CSS yang Tidak Digunakan mengungkapkan resource CSS mana di halaman yang berisi CSS yang tidak digunakan.
Jika Lighthouse menemukan CSS yang tidak digunakan di halaman, ada cara untuk menghilangkannya. UnCSS adalah salah satu utilitas yang melakukan hal ini untuk Anda secara otomatis (meskipun harus digunakan dengan hati-hati). Metode yang lebih manual melibatkan penggunaan panel cakupan kode di DevTools. Namun ingatlah bahwa CSS yang tidak digunakan di satu halaman mungkin diperlukan di halaman lain. Pendekatan lainnya mungkin adalah dengan membagi CSS Anda menjadi file khusus template yang hanya dimuat jika diperlukan. Apa pun yang Anda pilih, Lighthouse akan ada di sana untuk memberi tahu jika konten CSS Anda mulai agak merepotkan.
Cobalah Lighthouse!
Jika Anda antusias dengan audit baru ini, update Lighthouse dan cobalah!
- Ekstensi Chrome Lighthouse
akan diupdate secara otomatis, tetapi Anda dapat mengupdatenya secara manual melalui
chrome://extensions. - Di DevTools, Anda dapat menjalankan Lighthouse di panel audit. Chrome diupdate ke versi baru setiap 6 minggu, sehingga beberapa audit yang lebih baru mungkin tidak tersedia. Jika ingin menggunakan audit terbaru yang tersedia, Anda dapat menjalankan kode Chrome terbaru dengan mendownload Chrome Canary.
- Untuk pengguna Node: Jalankan
npm update lighthouse, ataunpm update lighthouse -gjika Anda menginstal Lighthouse secara global.
Terima kasih banyak kepada Kayce Basques, Patrick Hulce, Addy Osmani, dan Vinamrata Singal atas masukan mereka yang berharga, yang secara signifikan meningkatkan kualitas artikel ini.