Menggunakan Lighthouse untuk meningkatkan performa pemuatan halaman

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

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.

Perincian aktivitas thread utama di
Lighthouse.
Gambar 1. Perincian aktivitas thread utama di Lighthouse.

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.

Audit Preload Key Requests Lighthouse
merekomendasikan daftar resource untuk dipertimbangkan sebagai pramuat.
Gambar 2. Audit Preload Key Requests Lighthouse merekomendasikan daftar resource untuk dipertimbangkan melakukan pramuat.

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:

Lighthouse yang menampilkan jumlah evaluasi,
penguraian, dan waktu kompilasi untuk skrip di suatu halaman.
Gambar 3. Lighthouse yang menampilkan jumlah evaluasi, penguraian, dan waktu kompilasi untuk skrip di halaman.

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.

Rantai pengalihan seperti yang terlihat di panel jaringan
alat developer Chrome.
Gambar 4. Rantai pengalihan seperti yang terlihat di panel jaringan alat developer Chrome.

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.

Daftar pengalihan halaman di Lighthouse.
Gambar 5. Daftar pengalihan halaman di Lighthouse.

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.

Lighthouse yang menampilkan jumlah
JavaScript yang tidak digunakan di halaman.
Gambar 6. Lighthouse yang menampilkan jumlah JavaScript yang tidak digunakan di halaman.

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.

Tabel aset statis
Gambar 7.

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.

Daftar origin yang direkomendasikan untuk
rel=preconnectin Lighthouse.
Gambar 8. Daftar origin yang direkomendasikan untuk 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.

Rekomendasi untuk mengonversi GIF menjadi video di
Lighthouse.
Gambar 9. Rekomendasi untuk mengonversi GIF menjadi video di Lighthouse.

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.

Lighthouse yang memberikan rekomendasi untuk meningkatkan
rendering font.
Gambar 10. Lighthouse memberikan rekomendasi untuk meningkatkan rendering font.

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.

Lighthouse menampilkan daftar resource CSS
yang berisi aturan CSS yang tidak digunakan.
Gambar 11. Lighthouse yang menampilkan daftar resource CSS yang berisi aturan 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, atau npm update lighthouse -g jika 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.