Lighthouse: Mengoptimalkan kecepatan situs

Ringkasan

Gunakan panel Lighthouse untuk menjalankan audit komprehensif terhadap situs Anda. Panel Lighthouse menghasilkan laporan yang memberikan insight tentang hal berikut terkait situs Anda:

• Performa
• Aksesibilitas
• Praktik Terbaik
• SEO

... dan banyak metrik lainnya.

Tutorial berikut membantu Anda memulai Lighthouse di Chrome DevTools.

Untuk mempelajari lebih lanjut cara lain Lighthouse dapat meningkatkan kualitas situs Anda, lihat dokumen Lighthouse kami.

Sasaran tutorial

Tutorial ini mengajarkan cara menggunakan Chrome DevTools untuk menemukan cara agar situs Anda dimuat lebih cepat.

Baca terus, atau tonton video dari tutorial ini:

Prasyarat

Anda harus memiliki pengalaman pengembangan web dasar, mirip dengan yang diajarkan dalam kelas Pengantar Pengembangan Web ini.

Anda tidak perlu mengetahui apa pun tentang performa pemuatan.

Pengantar

Ini Tony. Tony sangat terkenal di masyarakat kucing. Dia telah membuat situs agar penggemarnya dapat mempelajari makanan favoritnya. Penggemarnya menyukai situs tersebut, tetapi Tony terus mendengar keluhan bahwa situs tersebut dimuat dengan lambat. Tony meminta Anda untuk membantunya mempercepat situs.

Langkah 1: Audit situs

Setiap kali Anda ingin meningkatkan performa pemuatan situs, selalu mulai dengan audit. Audit memiliki dua fungsi penting:

• Tindakan ini akan membuat dasar pengukuran untuk Anda gunakan sebagai tolak ukur perubahan berikutnya.
• Laporan ini memberi Anda tips yang bisa ditindaklanjuti tentang perubahan yang akan memberikan dampak terbesar.

Siapkan

Pertama, Anda perlu menyiapkan lingkungan kerja baru untuk situs Tony, sehingga Anda dapat melakukan perubahan di situs tersebut nanti:

1. Remix project situs di Glitch. Project baru Anda akan terbuka di tab. Tab ini akan disebut sebagai tab editor.

   

   Nama project berubah dari tony menjadi beberapa nama yang dibuat secara acak. Sekarang Anda memiliki salinan kode sendiri yang dapat diedit. Nanti, Anda akan membuat perubahan pada kode ini.

2. Di bagian bawah tab editor, klik Preview > Preview in a new window. Demo akan terbuka di tab baru. Tab ini akan disebut sebagai tab demo. Mungkin perlu waktu beberapa saat untuk memuat situs.

   

3. Buka DevTools bersama demo.

   

Menetapkan dasar pengukuran

Dasar pengukuran adalah catatan performa situs sebelum Anda melakukan peningkatan performa.

1. Buka panel Lighthouse. Panel ini mungkin disembunyikan di balik double_arrow Panel lainnya.

   

2. Cocokkan setelan konfigurasi laporan Lighthouse Anda dengan setelan pada screenshot. Berikut adalah penjelasan tentang berbagai opsi:

   • check_box Hapus Penyimpanan. Jika kotak centang ini diaktifkan, semua penyimpanan yang terkait dengan halaman akan dihapus sebelum setiap audit. Biarkan setelan ini aktif jika Anda ingin mengaudit pengalaman pengunjung pertama kali di situs Anda. Nonaktifkan setelan ini jika Anda menginginkan pengalaman kunjungan berulang.
   • check_box Aktifkan pengambilan sampel JS. Opsi ini dinonaktifkan secara default. Jika diaktifkan, opsi ini akan menambahkan stack panggilan JavaScript yang mendetail ke rekaman aktivitas performa, tetapi dapat memperlambat pembuatan laporan. Pelacakan tersedia di bagian more_vert Tools menu > View Unthrottled Trace setelah laporan Lighthouse dibuat.
   • Simulasi throttling (default) arrow_drop_down. Opsi ini menyimulasikan kondisi penjelajahan yang umum di perangkat seluler. Ini disebut "simulasi" karena Lighthouse tidak benar-benar membatasi selama proses audit. Sebagai gantinya, alat ini hanya mengekstrapolasi waktu yang diperlukan halaman untuk dimuat dalam kondisi seluler. Di sisi lain, setelan Throttling DevTools (lanjutan) sebenarnya akan membatasi CPU dan jaringan Anda, dengan konsekuensi proses audit yang lebih lama.
   • Mode > radio_button_checked Navigasi (Default). Mode ini menganalisis satu pemuatan halaman dan itulah yang kita perlukan dalam tutorial ini. Untuk mengetahui informasi selengkapnya, lihat Tiga mode.
   • Perangkat > radio_button_checked Seluler. Opsi seluler mengubah string agen pengguna dan menyimulasikan viewport seluler. Opsi desktop hampir hanya menonaktifkan perubahan seluler.
   • Kategori > check_box Performa. Satu kategori yang diaktifkan akan membuat Lighthouse membuat laporan hanya dengan kumpulan audit yang sesuai. Anda dapat mengaktifkan kategori lainnya, jika ingin melihat jenis rekomendasi yang diberikan. Menonaktifkan kategori yang tidak relevan akan sedikit mempercepat proses audit.

3. Klik Analisis pemuatan halaman. Setelah 10 hingga 30 detik, panel Lighthouse akan menampilkan laporan performa situs.

   

Menangani error laporan

Jika Anda pernah mendapatkan error dalam laporan Lighthouse, coba jalankan tab demo dari jendela samaran tanpa membuka tab lain. Tindakan ini memastikan bahwa Anda menjalankan Chrome dari status bersih. Ekstensi Chrome secara khusus dapat mengganggu proses audit.

Memahami laporan

Angka di bagian atas laporan adalah skor performa keseluruhan untuk situs. Kemudian, saat membuat perubahan pada kode, Anda akan melihat jumlah ini meningkat. Skor yang lebih tinggi berarti performa yang lebih baik.

Metrik

Scroll ke bawah ke bagian Metrik, lalu klik Luaskan tampilan. Untuk membaca dokumentasi tentang metrik, klik Pelajari lebih lanjut....

Bagian ini memberikan pengukuran kuantitatif performa situs. Setiap metrik memberikan insight tentang aspek performa yang berbeda. Misalnya, First Contentful Paint memberi tahu Anda kapan konten pertama kali digambar ke layar, yang merupakan tonggak pencapaian penting dalam persepsi pengguna tentang pemuatan halaman, sedangkan Time To Interactive menandai titik saat halaman tampak cukup siap untuk menangani interaksi pengguna.

Screenshot

Berikut adalah kumpulan screenshot yang menunjukkan tampilan halaman saat dimuat.

Peluang

Berikutnya adalah bagian Peluang yang memberikan tips spesifik tentang cara meningkatkan performa pemuatan halaman tertentu ini.

Klik peluang untuk mempelajarinya lebih lanjut.

Klik Pelajari lebih lanjut... untuk melihat dokumentasi tentang alasan pentingnya peluang, dan rekomendasi khusus tentang cara memperbaikinya.

Diagnostik

Bagian Diagnostik memberikan informasi selengkapnya tentang faktor yang berkontribusi pada waktu pemuatan halaman.

Audit yang lulus

Bagian Audit yang lulus menunjukkan hal yang dilakukan situs dengan benar. Klik untuk meluaskan bagian tersebut.

Langkah 2: Lakukan eksperimen

Bagian Peluang di laporan Lighthouse memberi Anda tips tentang cara meningkatkan performa halaman. Di bagian ini, Anda akan menerapkan perubahan yang direkomendasikan pada codebase, mengaudit situs setelah setiap perubahan untuk mengukur pengaruhnya terhadap kecepatan situs.

Aktifkan kompresi teks

Laporan Anda menyatakan bahwa mengaktifkan kompresi teks adalah salah satu peluang teratas untuk meningkatkan performa halaman.

Kompresi teks adalah saat Anda mengurangi, atau mengompresi, ukuran file teks sebelum mengirimkannya melalui jaringan. Mirip dengan cara Anda mengompresi folder sebelum mengirimnya melalui email untuk mengurangi ukurannya.

Sebelum mengaktifkan kompresi, berikut beberapa cara untuk memeriksa secara manual apakah resource teks dikompresi.

Buka panel Jaringan dan centang settings Setelan > check_box Gunakan baris permintaan besar.

Setiap sel Ukuran menampilkan dua nilai. Nilai atas adalah ukuran resource yang didownload. Nilai bawah adalah ukuran resource yang tidak dikompresi. Jika kedua nilai tersebut sama, resource tidak akan dikompresi saat dikirim melalui jaringan. Dalam contoh ini, nilai atas dan bawah untuk bundle.js adalah 1.4 MB.

Anda juga dapat memeriksa kompresi dengan memeriksa header HTTP resource:

1. Klik bundle.js dan buka tab Headers.

   

2. Telusuri bagian Header Respons untuk menemukan header content-encoding. Anda tidak akan melihatnya, yang berarti bundle.js tidak dikompresi. Saat resource dikompresi, header ini biasanya ditetapkan ke gzip, deflate, atau br. Lihat Perintah untuk penjelasan nilai ini.

Cukup penjelasannya. Saatnya melakukan beberapa perubahan. Aktifkan kompresi teks dengan menambahkan beberapa baris kode:

1. Di tab editor, buka server.js dan tambahkan dua baris (yang ditandai) berikut:

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. Pastikan untuk menempatkan app.use(compression()) sebelum app.use(express.static('build')).

   

3. Tunggu hingga Glitch men-deploy build baru situs. Emoji tersenyum di pojok kiri bawah menunjukkan bahwa deployment berhasil.

Gunakan alur kerja yang telah Anda pelajari sebelumnya untuk memeriksa secara manual apakah kompresi berfungsi:

1. Kembali ke tab demo dan muat ulang halaman.

   Kolom Ukuran kini akan menampilkan dua nilai yang berbeda untuk resource teks seperti bundle.js. Nilai atas 269 KB untuk bundle.js adalah ukuran file yang dikirim melalui jaringan, dan nilai bawah 1.4 MB adalah ukuran file yang tidak dikompresi.

   

2. Bagian Header Respons untuk bundle.js kini harus menyertakan header content-encoding: gzip.

   

Jalankan kembali laporan Lighthouse di halaman untuk mengukur dampak kompresi teks terhadap performa pemuatan halaman:

1. Buka panel Lighthouse, lalu klik Lakukan audit... di panel tindakan di bagian atas.

   

2. Biarkan setelan sama seperti sebelumnya, lalu klik Analyze page load.

   

Hore! Sepertinya itu kemajuan. Skor performa keseluruhan Anda seharusnya telah meningkat, yang berarti situs menjadi lebih cepat.

Kompresi teks di dunia nyata

Sebagian besar server memang memiliki perbaikan sederhana seperti ini untuk mengaktifkan kompresi. Cukup telusuri cara mengonfigurasi server apa pun yang Anda gunakan untuk mengompresi teks.

Mengubah ukuran gambar

Laporan baru Anda menunjukkan bahwa menentukan ukuran gambar dengan benar adalah peluang besar lainnya.

Mengubah ukuran gambar membantu mempercepat waktu pemuatan dengan mengurangi ukuran file gambar. Jika pengguna melihat gambar Anda di layar perangkat seluler yang lebarnya 500 piksel, tidak ada gunanya mengirim gambar yang lebarnya 1.500 piksel. Idealnya, Anda mengirim gambar dengan lebar maksimal 500 piksel.

1. Dalam laporan, klik Ubah ukuran gambar dengan benar untuk melihat gambar yang harus diubah ukurannya. Sepertinya keempat gambar berukuran lebih besar dari yang diperlukan.

   

2. Kembali ke tab editor, buka src/model.js.

3. Ganti const dir = 'big' dengan const dir = 'small'. Direktori ini berisi salinan gambar yang sama yang telah diubah ukurannya.

4. Audit halaman lagi untuk melihat pengaruh perubahan ini terhadap performa pemuatan.

   

Sepertinya perubahan ini hanya memiliki pengaruh kecil pada skor performa keseluruhan. Namun, satu hal yang tidak ditampilkan dengan jelas oleh skor ini adalah jumlah data jaringan yang Anda hemat untuk pengguna. Total ukuran foto lama adalah sekitar 6,1 MB, sedangkan sekarang hanya sekitar 633 kB. Anda dapat memeriksanya di status bar di bagian bawah panel Jaringan.

Mengubah ukuran gambar di dunia nyata

Untuk aplikasi kecil, melakukan pengubahan ukuran satu kali seperti ini mungkin sudah cukup. Namun, untuk aplikasi besar, hal ini jelas tidak skalabel. Berikut beberapa strategi untuk mengelola gambar di aplikasi besar:

• Ubah ukuran gambar selama proses build.
• Buat beberapa ukuran setiap gambar selama proses build, lalu gunakan srcset dalam kode Anda. Saat runtime, browser akan memilih ukuran yang terbaik untuk perangkat tempatnya berjalan. Lihat Gambar berukuran relatif.
• Gunakan CDN gambar yang memungkinkan Anda mengubah ukuran gambar secara dinamis saat Anda memintanya.
• Setidaknya, optimalkan setiap gambar. Hal ini sering kali dapat menghemat biaya secara besar-besaran. Pengoptimalan adalah saat Anda menjalankan gambar melalui program khusus yang mengurangi ukuran file gambar. Lihat Pengoptimalan Gambar Penting untuk mengetahui tips selengkapnya.

Menghilangkan resource yang memblokir rendering

Laporan terbaru Anda menyatakan bahwa menghilangkan resource yang memblokir rendering kini menjadi peluang terbesar.

Resource pemblokiran render adalah file JavaScript atau CSS eksternal yang harus didownload, diurai, dan dieksekusi oleh browser sebelum dapat menampilkan halaman. Tujuannya adalah hanya menjalankan kode CSS dan JavaScript inti yang diperlukan untuk menampilkan halaman dengan benar.

Jadi, tugas pertamanya adalah menemukan kode yang tidak perlu dieksekusi saat halaman dimuat.

1. Klik Eliminate render-blocking resources untuk melihat resource yang memblokir: lodash.js dan jquery.js.

   

2. Bergantung pada sistem operasi Anda, tekan tombol berikut untuk membuka Menu Perintah:

   • Di Mac, Command+Shift+P
   • Di Windows, Linux, atau ChromeOS, Kontrol+Shift+P

3. Mulai ketik Coverage, lalu pilih Tampilkan Cakupan.

   

   Tab Cakupan akan terbuka di Panel samping.

   

4. Klik muat ulang Muat ulang. Tab Cakupan memberikan ringkasan tentang jumlah kode di bundle.js, jquery.js, dan lodash.js yang dieksekusi saat halaman dimuat.

   

   Screenshot ini menunjukkan bahwa sekitar 74% dan 30% file jQuery dan Lodash tidak digunakan.

5. Klik baris jquery.js. DevTools akan membuka file di panel Sumber. Baris kode telah dieksekusi jika memiliki batang hijau di sampingnya. Batang merah di samping baris kode berarti kode tersebut tidak dieksekusi, dan tidak diperlukan saat pemuatan halaman.

   

6. Scroll kode jQuery sedikit. Beberapa baris yang "dieksekusi" sebenarnya hanya komentar. Menjalankan kode ini melalui minifier yang menghapus komentar adalah cara lain untuk mengurangi ukuran file ini.

Singkatnya, saat Anda menggunakan kode sendiri, tab Cakupan dapat membantu Anda menganalisis kode, baris demi baris, dan hanya mengirimkan kode yang diperlukan untuk pemuatan halaman.

Apakah file jquery.js dan lodash.js diperlukan untuk memuat halaman? Tab Pemblokiran Permintaan dapat menunjukkan apa yang terjadi saat resource tidak tersedia.

1. Klik tab Jaringan dan buka Menu Perintah lagi.

2. Mulai ketik blocking, lalu pilih Tampilkan Pemblokiran Permintaan. Tab Pemblokiran Permintaan akan terbuka.

   

3. Klik Tambahkan Pola, ketik /libs/* di kotak teks, lalu tekan Enter untuk mengonfirmasi.

   

4. Muat ulang halaman. Permintaan jQuery dan Lodash berwarna merah, yang berarti permintaan tersebut diblokir. Halaman masih dimuat dan bersifat interaktif, sehingga sepertinya resource ini tidak diperlukan sama sekali.

   

5. Klik Hapus semua pola untuk menghapus pola pemblokiran /libs/*.

Secara umum, tab Pemblokiran Permintaan berguna untuk menyimulasikan perilaku halaman Anda saat resource tertentu tidak tersedia.

Sekarang, hapus referensi ke file ini dari kode dan audit halaman lagi:

1. Kembali ke tab editor, buka template.html.

2. Hapus tag <script> yang sesuai:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/https/developer.chrome.com/libs/lodash.js"></script>
       <script src="/https/developer.chrome.com/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. Tunggu hingga situs di-build ulang dan di-deploy ulang.

4. Audit halaman lagi dari panel Lighthouse. Skor Anda secara keseluruhan akan meningkat lagi.

   

Mengoptimalkan Jalur Rendering Penting di dunia nyata

Jalur Rendering Penting mengacu pada kode yang Anda perlukan untuk memuat halaman. Secara umum, Anda dapat mempercepat pemuatan halaman dengan hanya mengirimkan kode penting selama pemuatan halaman, lalu memuat segala sesuatu secara lambat.

• Anda mungkin tidak akan menemukan skrip yang dapat dihapus langsung, tetapi Anda akan sering menemukan bahwa banyak skrip tidak perlu diminta selama pemuatan halaman, dan dapat diminta secara asinkron. Lihat Menggunakan asinkron atau menunda.
• Jika Anda menggunakan framework, periksa apakah framework tersebut memiliki mode produksi. Mode ini dapat menggunakan fitur seperti tree shaking untuk menghapus kode yang tidak perlu yang memblokir render penting.

Melakukan lebih sedikit pekerjaan thread utama

Laporan terbaru Anda menunjukkan beberapa potensi penghematan kecil di bagian Peluang, tetapi jika Anda men-scroll ke bawah ke bagian Diagnostik, sepertinya bottleneck terbesar adalah terlalu banyak aktivitas thread utama.

Thread utama adalah tempat browser melakukan sebagian besar pekerjaan yang diperlukan untuk menampilkan halaman, seperti mengurai dan mengeksekusi HTML, CSS, dan JavaScript.

Tujuannya adalah menggunakan panel Performa untuk menganalisis pekerjaan yang dilakukan thread utama saat halaman dimuat, dan menemukan cara untuk menunda atau menghapus pekerjaan yang tidak perlu.

1. Buka Performa > Setelan Perekaman dan tetapkan Jaringan ke 3G Lambat dan CPU ke Pemalasan 6x.

   

   Perangkat seluler biasanya memiliki lebih banyak batasan hardware daripada laptop atau desktop, sehingga setelan ini memungkinkan Anda merasakan pemuatan halaman seolah-olah Anda menggunakan perangkat yang kurang canggih.

2. Klik muat ulang Muat ulang. DevTools memuat ulang halaman, lalu menghasilkan visualisasi semua yang harus dilakukan untuk memuat halaman. Visualisasi ini akan disebut sebagai rekaman aktivitas.

   

Rekaman aktivitas menunjukkan aktivitas secara kronologis, dari kiri ke kanan. Diagram FPS, CPU, dan NET di bagian atas memberi Anda ringkasan frame per detik, aktivitas CPU, dan aktivitas jaringan.

Dinding kuning yang Anda lihat di bagian Ringkasan berarti CPU benar-benar sibuk dengan aktivitas pembuatan skrip. Ini adalah petunjuk bahwa Anda mungkin dapat mempercepat pemuatan halaman dengan melakukan lebih sedikit pekerjaan JavaScript.

Selidiki rekaman aktivitas untuk menemukan cara melakukan lebih sedikit tugas JavaScript:

1. Klik bagian Timings untuk meluaskannya.

   

   Ada banyak pengukuran User Timing dari React, sepertinya aplikasi Tony menggunakan mode pengembangan React. Beralih ke mode produksi React mungkin akan menghasilkan beberapa peningkatan performa yang mudah.

2. Klik Timings lagi untuk menciutkan bagian tersebut.

3. Jelajahi bagian Utama. Bagian ini menampilkan log kronologis aktivitas thread utama, dari kiri ke kanan. Sumbu y (atas ke bawah) menunjukkan alasan peristiwa terjadi.

   

   Dalam contoh ini, peristiwa Evaluate Script menyebabkan fungsi (anonymous) dieksekusi, yang menyebabkan __webpack__require__ dieksekusi, yang menyebabkan ./src/index.jsx dieksekusi, dan seterusnya.

4. Scroll ke bagian bawah Utama. Saat Anda menggunakan framework, sebagian besar aktivitas atas disebabkan oleh framework, yang biasanya berada di luar kontrol Anda. Aktivitas yang disebabkan oleh aplikasi Anda biasanya berada di bagian bawah.

   

   Di aplikasi ini, sepertinya fungsi yang disebut App menyebabkan banyak panggilan ke fungsi mineBitcoin. Sepertinya Tony mungkin menggunakan perangkat penggemarnya untuk menambang mata uang kripto...

5. Buka tab Bottom-Up di bagian bawah. Tab ini menguraikan aktivitas yang paling banyak menghabiskan waktu. Jika Anda tidak melihat apa pun di bagian Bottom-Up, klik label untuk bagian Main.

   

   Bagian Bottom-Up hanya menampilkan informasi untuk aktivitas, atau grup aktivitas, apa pun yang saat ini Anda pilih. Misalnya, jika Anda mengklik salah satu aktivitas mineBitcoin, bagian Bottom-Up hanya akan menampilkan informasi untuk satu aktivitas tersebut.

   Kolom Waktu Sendiri menunjukkan jumlah waktu yang dihabiskan langsung dalam setiap aktivitas. Dalam hal ini, sekitar 82% waktu thread utama dihabiskan untuk fungsi mineBitcoin.

Saatnya melihat apakah menggunakan mode produksi dan mengurangi aktivitas JavaScript mempercepat pemuatan halaman. Mulai dengan mode produksi:

1. Di tab editor, buka webpack.config.js.
2. Ubah "mode":"development" menjadi "mode":"production".
3. Tunggu hingga build baru di-deploy.

4. Audit halaman lagi.

   

Kurangi aktivitas JavaScript dengan menghapus panggilan ke mineBitcoin:

1. Di tab editor, buka src/App.jsx.
2. Beri komentar pada panggilan ke this.mineBitcoin(1500) di constructor.
3. Tunggu hingga build baru di-deploy.
4. Audit halaman lagi.

Seperti biasa, masih ada hal yang perlu dilakukan, misalnya, mengurangi metrik Largest Contentful Paint dan Cumulative Layout Shift.

Melakukan lebih sedikit pekerjaan thread utama di dunia nyata

Secara umum, panel Performa adalah cara paling umum untuk memahami aktivitas yang dilakukan situs Anda saat dimuat, dan menemukan cara untuk menghapus aktivitas yang tidak perlu.

Jika Anda lebih memilih pendekatan yang lebih mirip dengan console.log(), API User Timing memungkinkan Anda menandai fase tertentu dari siklus proses aplikasi secara arbitrer, untuk melacak berapa lama setiap fase tersebut berlangsung.

Ringkasan

• Setiap kali Anda ingin mengoptimalkan performa pemuatan situs, selalu mulai dengan audit. Audit ini menetapkan dasar pengukuran, dan memberi Anda tips tentang cara meningkatkannya.
• Lakukan satu perubahan pada satu waktu, dan audit halaman setelah setiap perubahan untuk melihat pengaruh perubahan terisolasi tersebut terhadap performa.

Langkah berikutnya

Jalankan audit di situs Anda sendiri. Jika Anda memerlukan bantuan untuk menafsirkan laporan atau menemukan cara untuk meningkatkan performa pemuatan, lihat semua cara untuk mendapatkan bantuan dari komunitas DevTools:

• Laporkan bug pada dokumen ini di repositori developer.chrome.com.
• Ajukan laporan bug di DevTools di Bug Chromium.
• Diskusikan fitur dan perubahan di Milist. Jangan gunakan milis untuk pertanyaan dukungan. Sebagai gantinya, gunakan Stack Overflow.
• Dapatkan bantuan umum tentang cara menggunakan DevTools di Stack Overflow. Untuk mengajukan permintaan bug, selalu gunakan Bug Chromium.
• Kirim tweet kepada kami di @ChromeDevTools.