Menggunakan alat untuk mengukur performa

Sam Dutton

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

Untuk setiap tujuan, Anda memerlukan audit.

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 yang relevan untuk setiap jenis audit.

Catat 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 dalam cache melalui service worker, 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 yang bagus 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 penggantian?
• 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 dari Wi-Fi cepat atau koneksi seluler cepat, uji dengan emulasi latensi tinggi dan bandwidth rendah. Jangan lupa untuk menguji di perangkat seluler dan desktop — beberapa situs menggunakan sniffing UA untuk mengirimkan berbagai aset dan tata letak untuk perangkat yang berbeda. Anda mungkin perlu menguji pada hardware yang sebenarnya menggunakan proses debug jarak jauh, bukan hanya dengan simulasi perangkat.

Memeriksa beban memori dan CPU

Sebelum Anda 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.

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

• WebPagetest: setiap hasil pengujian memiliki URL-nya sendiri.
• Pagespeed Insights: alat Pagespeed Insights online kini menyertakan data laporan Pengalaman Pengguna Chrome yang menyoroti statistik performa di dunia nyata.
• Lighthouse: menyimpan laporan dari panel Audit Chrome DevTools dengan mengklik tombol download:

  

Menguji persyaratan inti Progressive Web App

Lighthouse membantu Anda menguji keamanan, fungsi, aksesibilitas, performa, dan performa mesin telusur. Secara khusus, Lighthouse 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.

Menggunakan 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 sesuai, 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?'

Google Analytics menggunakan data dari Navigation Timing API.

Anda dapat 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 layar dan video

Buat rekaman video pemuatan halaman di perangkat seluler dan desktop. Hal ini akan berfungsi lebih baik pada kecepatan frame tinggi dan jika Anda menambahkan tampilan timer.

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 hampir seperti tampilan filmstrip di WebPagetest atau Capture Screenshots di Chrome DevTools. Anda mendapatkan data kecepatan pemuatan komponen halaman di dunia nyata: yang cepat dan yang lambat. Simpan rekaman video dan screencast untuk dibandingkan dengan peningkatan di lain waktu.

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

Apa lagi?

Jika relevan, dapatkan Skor Pembesaran Web. Ini adalah pengujian yang 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.

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