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.

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

Catatan: Gambar sejauh ini merupakan bobot terbesar dan permintaan terbanyak untuk sebagian besar halaman web. Latensi semakin buruk ketika konektivitas memburuk sehingga permintaan file gambar yang berlebihan adalah masalah yang semakin meningkat ketika web digunakan di perangkat seluler. Gambar juga mengonsumsi daya: semakin banyak permintaan gambar, semakin sering penggunaan radio, maka baterai akan semakin boros. Bahkan untuk merender gambar saja membutuhkan daya – dan ini sesuai dengan ukuran dan jumlah gambar. Demikian pula untuk memori: peningkatan kecil pada dimensi piksel akan menghasilkan peningkatan besar pada penggunaan memori. Dengan gambar di perangkat seluler — terutama pada perangkat dengan spesifikasi rendah — memori dapat menjadi bottleneck baru. Gambar yang terlalu besar juga bermasalah bagi pengguna yang memiliki paket data terbatas. Hapus gambar yang berlebihan. Jika Anda tidak dapat menghapusnya, optimalkan: tingkatkan kompresi sebanyak mungkin, kurangi dimensi piksel, dan gunakan format yang memberikan ukuran file terkecil. Mengoptimalkan 'gambar hero' seperti banner dan latar belakang adalah cara mudah untuk mendapatkan hasil maksimal.

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.

Catatan: Anda sering dapat menggunakan alat browser untuk menemukan masalah hanya dengan memeriksa respons jaringan dan mengurutkannya berdasarkan ukuran. Misalnya: PNG 349 KB di sini sepertinya bisa menjadi masalah:

Ternyata, gambar tersebut memiliki lebar 1.600 piksel, sedangkan lebar tampilan maksimum elemen hanya 400 piksel. Setelah di-dekompresi, gambar memerlukan memori lebih dari 4 MB, yang sangat banyak di ponsel. Menyimpan ulang gambar sebagai JPEG selebar 800 piksel (untuk mengatasi lebar tampilan 400 piksel pada layar 2x) dan mengoptimalkannya dengan ImageOptim menghasilkan file berukuran 17 KB: bandingkan PNG asli dengan JPEG yang dioptimalkan.

Itu adalah peningkatan sebesar 95%.

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.

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.

Catatan: Mengaktifkan penyimpanan dalam cache konten statis sangat mudah sehingga browser dapat menyimpan aset dalam cache saat pertama kali diminta, dengan mengonfigurasi server Anda untuk menyertakan header yang sesuai. Jika dapat menyimpan resource dalam cache, browser tidak perlu mengambilnya dari jaringan pada kunjungan berikutnya. Hal ini meningkatkan kecepatan pemuatan, mengurangi biaya data, dan mengurangi beban jaringan dan server — bahkan untuk browser yang tidak mendukung penyimpanan cache melalui pekerja layanan. Meskipun Anda menggunakan Cache API, Anda harus mengaktifkan cache browser. Untuk mengetahui informasi selengkapnya, lihat PageSpeed Tools dan referensi di Dasar-Dasar Web (khususnya, bagian 'Membatalkan validasi dan memperbarui respons yang di-cache').

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.

Mengekspor laporan ke ringkasan dari Ekstensi Chrome Lighthouse — klik tombol bagikan

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.