Menggunakan alat untuk mengukur performa

Ada beberapa tujuan inti untuk membuat situs yang andal dan berperforma tinggi dengan biaya data yang rendah.

Untuk setiap tujuan, Anda memerlukan audit.

Tujuan Mengapa demikian? Apa yang perlu diuji?
Memastikan privasi, keamanan, dan integritas data, serta memungkinkan penggunaan API yang efektif Mengapa HTTPS Penting HTTPS diterapkan untuk semua halaman/rute dan aset situs.
Meningkatkan performa pemuatan 53% pengguna meninggalkan situs yang membutuhkan waktu pemuatan lebih dari tiga detik JavaScript dan CSS yang dapat dimuat secara asinkron atau ditangguhkan. Tetapkan sasaran untuk waktu hingga interaktif dan ukuran payload: misalnya TTI di 3G. Tetapkan anggaran performa.
Mengurangi berat halaman • Mengurangi biaya data untuk pengguna dengan paket data yang dibatasi • Mengurangi persyaratan penyimpanan aplikasi web — terutama penting bagi pengguna di perangkat dengan spesifikasi rendah • Mengurangi biaya hosting dan penayangan • Meningkatkan performa, keandalan, dan ketahanan penayangan Tetapkan anggaran berat halaman: misalnya, pemuatan pertama di bawah 400 kB. Periksa apakah ada JavaScript yang berat. Periksa ukuran file untuk menemukan gambar, media, HTML, CSS, dan JavaScript yang membengkak. Temukan gambar yang dapat dimuat lambat, dan periksa kode yang tidak digunakan dengan alat cakupan.
Mengurangi permintaan resource • Mengurangi masalah latensi • Mengurangi biaya penayangan • Meningkatkan performa, keandalan, dan ketahanan penayangan Cari permintaan yang berlebihan atau tidak perlu untuk jenis resource apa pun. Misalnya: file yang dimuat berulang kali, JavaScript yang dimuat dalam beberapa versi, CSS yang tidak pernah digunakan, gambar yang tidak pernah dilihat (atau dapat dimuat dengan lambat).
Mengoptimalkan penggunaan memori Memori dapat menjadi bottleneck baru, terutama di perangkat seluler Gunakan Task Manager Chrome untuk membandingkan situs Anda dengan situs lain terkait penggunaan memori saat memuat halaman beranda dan menggunakan fitur situs lainnya.
Mengurangi beban CPU Perangkat seluler memiliki CPU terbatas, terutama perangkat dengan spesifikasi rendah Periksa JavaScript yang berat. Temukan JavaScript dan CSS yang tidak digunakan dengan alat cakupan. Periksa ukuran DOM yang berlebihan dan skrip yang berjalan tidak perlu saat pemuatan pertama. Cari JavaScript yang dimuat dalam beberapa versi, atau library yang dapat dihindari dengan pemfaktoran ulang kecil.

Ada berbagai alat dan teknik untuk mengaudit situs:

  • Alat sistem
  • Alat browser bawaan
  • Ekstensi browser
  • Aplikasi pengujian online
  • Alat emulasi
  • Analytics
  • Metrik yang disediakan oleh server dan sistem bisnis
  • Perekaman layar dan video
  • Pengujian manual

Di bawah ini Anda akan mempelajari pendekatan mana yang relevan untuk setiap jenis audit.

Mencatat permintaan resource: jumlah, ukuran, jenis, dan waktu

Cara terbaik untuk memulai audit situs adalah dengan memeriksa halaman menggunakan alat jaringan browser Anda. Jika Anda tidak yakin cara melakukannya, baca Panduan Memulai panel jaringan Chrome DevTools. Alat serupa tersedia untuk Firefox, Safari, Internet Explorer, dan Edge.

Jangan lupa untuk menyimpan catatan hasil sebelum Anda melakukan perubahan. Untuk permintaan jaringan, hal ini dapat dilakukan semudah screenshot — Anda juga dapat menyimpan data profil sebagai file JSON. Berikut informasi selengkapnya tentang cara menyimpan dan membagikan hasil pengujian.

Sebelum Anda mulai mengaudit penggunaan jaringan, pastikan untuk menonaktifkan cache browser untuk memastikan Anda mendapatkan statistik yang akurat untuk performa pemuatan pertama. Jika Anda sudah melakukan penyimpanan cache melalui pekerja layanan, hapus penyimpanan Cache API. Sebaiknya gunakan jendela Samaran (Pribadi), sehingga Anda tidak perlu khawatir untuk menonaktifkan cache browser atau menghapus entri yang di-cache sebelumnya.

Berikut beberapa fitur dan metrik inti yang harus Anda periksa dengan alat browser:

  • Performa pemuatan: Lighthouse memberikan ringkasan metrik pemuatan. Addy Osmani telah menulis ringkasan menarik tentang momen penting pengguna untuk pemuatan halaman.
  • Peristiwa linimasa untuk memuat dan mengurai resource, serta penggunaan memori. Jika Anda ingin mengetahui lebih dalam, jalankan pembuatan profil memori dan JavaScript.
  • Total berat halaman dan jumlah file.
  • Jumlah dan ukuran file JavaScript.
  • Setiap file JavaScript yang sangat besar (misalnya, lebih dari 100 KB).
  • JavaScript yang tidak digunakan. Anda dapat memeriksanya menggunakan alat cakupan Chrome.
  • Jumlah total dan ukuran file gambar.
  • Setiap file gambar yang sangat besar.
  • Format gambar: apakah ada PNG yang dapat berupa JPEG atau SVG? Apakah WebP digunakan dengan fallback?
  • Apakah teknik gambar responsif (seperti srcset) digunakan.
  • Ukuran file HTML.
  • Jumlah total dan bobot file CSS.
  • CSS yang tidak digunakan. (Di Chrome, gunakan panel cakupan.)
  • Periksa penggunaan aset lain yang bermasalah seperti Font Web (termasuk font ikon).
  • Periksa linimasa DevTools untuk menemukan apa pun yang memblokir pemuatan halaman.

Jika Anda bekerja dengan Wi-Fi cepat atau koneksi seluler cepat, uji dengan bandwidth rendah dan emulasi latensi tinggi. Jangan lupa untuk melakukan pengujian di perangkat seluler dan desktop — beberapa situs menggunakan sniffing UA untuk menghadirkan berbagai aset dan tata letak di berbagai perangkat. Anda mungkin perlu menguji pada hardware yang sebenarnya menggunakan proses debug jarak jauh, bukan hanya dengan simulasi perangkat.

Memeriksa beban memori dan CPU

Sebelum melakukan perubahan, catat penggunaan memori dan CPU.

Di Chrome, Anda dapat mengakses Pengelola Tugas dari menu Jendela. Ini adalah cara sederhana untuk memeriksa persyaratan halaman web.

Pengelola Tugas Chrome menunjukkan penggunaan memori dan CPU untuk
  empat tab browser yang terbuka
Pengelola Tugas Chrome — waspadai aplikasi yang menghabiskan memori dan CPU.

Menguji performa pemuatan pertama dan berikutnya

Lighthouse, WebPagetest, dan Pagespeed Insights berguna untuk menganalisis kecepatan, biaya data, dan penggunaan resource. WebPagetest juga akan memeriksa cache konten statis, waktu hingga byte pertama, dan apakah situs Anda menggunakan CDN secara efektif.

Menyimpan hasil

Menguji persyaratan inti Progressive Web App

Lighthouse membantu Anda menguji keamanan, fungsi, aksesibilitas, performa, dan performa mesin telusur. Secara khusus, Lighthouse akan memeriksa apakah situs Anda berhasil menerapkan fitur PWA, seperti pekerja layanan dan manifes Aplikasi Web.

Lighthouse juga menguji apakah situs Anda dapat memberikan pengalaman offline yang dapat diterima.

Anda dapat mendownload laporan Lighthouse sebagai JSON atau, jika menggunakan Ekstensi Chrome Lighthouse, bagikan laporan sebagai GitHub Gist: klik tombol bagikan, pilih Buka di Penampil, lalu klik tombol bagikan lagi di jendela baru dan Simpan sebagai Gist.

Screenshot yang menunjukkan cara mengekspor laporan Lighthouse Chrome
  sebagai ringkasan
Mengekspor laporan ke ringkasan dari Ekstensi Chrome Lighthouse — klik tombol bagikan

Gunakan analisis, pelacakan peristiwa, dan metrik bisnis untuk melacak performa di dunia nyata

Jika memungkinkan, catat data analisis sebelum Anda menerapkan perubahan: rasio pantulan, waktu di halaman, halaman keluar: apa pun yang relevan dengan persyaratan bisnis Anda.

Jika memungkinkan, catat metrik bisnis dan teknis yang mungkin terpengaruh, sehingga Anda dapat membandingkan hasil setelah melakukan perubahan. Misalnya: situs e-commerce mungkin melacak pesanan per menit atau mencatat statistik untuk pengujian stres dan ketahanan. Biaya penyimpanan backend, persyaratan CPU, biaya penayangan, dan ketahanan cenderung akan meningkat jika Anda mengurangi beban halaman dan permintaan resource.

Jika analisis belum diterapkan, sekarang saatnya. Metrik dan analisis bisnis adalah penentu akhir apakah situs Anda berfungsi atau tidak. Jika memungkinkan, sertakan pelacakan peristiwa untuk tindakan pengguna seperti klik tombol dan pemutaran video. Anda juga dapat menerapkan analisis alur sasaran: jalur yang digunakan pengguna untuk membuka 'konversi'.

Anda dapat memantau Kecepatan Situs Google Analytics untuk memeriksa korelasi metrik performa dengan metrik bisnis. Misalnya: 'seberapa cepat halaman beranda dimuat?' dibandingkan dengan 'apakah entri melalui halaman beranda menghasilkan penjualan?'

Screenshot yang menampilkan Kecepatan Situs Google Analytics

Google Analytics menggunakan data dari Navigation Timing API.

Anda mungkin ingin merekam data menggunakan salah satu API performa JavaScript atau metrik Anda sendiri, misalnya:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Anda juga dapat menggunakan ReportingObserver untuk memeriksa peringatan penghentian penggunaan dan intervensi browser. Ini adalah salah satu dari banyak API untuk mendapatkan pengukuran langsung di dunia nyata dari pengguna sebenarnya.

Pengalaman dunia nyata: perekaman video dan layar

Buat rekaman video pemuatan halaman di perangkat seluler dan desktop. Ini berfungsi lebih baik pada frekuensi gambar tinggi dan jika Anda menambahkan tampilan {i>timer<i}.

Anda juga dapat menyimpan rekaman layar. Ada banyak aplikasi perekaman screencast untuk platform Android, iOS, dan desktop (dan skrip untuk melakukan hal yang sama).

Pemuatan halaman perekaman video berfungsi seperti tampilan filmstrip di WebPagetest atau Mengambil Screenshot di Chrome DevTools. Anda akan mendapatkan catatan dunia nyata tentang kecepatan pemuatan komponen halaman: mana yang cepat dan mana yang lambat. Simpan rekaman video dan screencast untuk dibandingkan dengan peningkatan di lain waktu.

Perbandingan sebelum dan sesudah secara berdampingan dapat menjadi cara yang bagus untuk menunjukkan peningkatan.

Apa lagi?

Jika relevan, dapatkan Skor Pembesaran Web. Pengujian ini menyenangkan, tetapi juga dapat menjadi cara yang menarik untuk menunjukkan pemborosan kode — atau untuk menunjukkan bahwa Anda telah melakukan peningkatan.

Berapa Biaya Situs Saya?, yang ditampilkan di bawah, memberikan panduan kasar tentang biaya finansial untuk memuat situs Anda di berbagai wilayah.

Screenshot dari whatdoesmysitecost.com

Banyak alat mandiri dan online lainnya yang tersedia: lihat perf.rocks/tools.