Menggunakan alat untuk mengukur performa

Sam Dutton

Ada beberapa tujuan inti untuk membuat situs yang berperforma baik dan tangguh dengan biaya data yang rendah.

Untuk setiap tujuan, Anda memerlukan audit.

Tujuan	Apa tujuannya?	Apa yang harus diuji?
Memastikan privasi, keamanan, dan integritas data, serta mengaktifkan penggunaan API yang andal	Mengapa HTTPS Penting	HTTPS diterapkan untuk semua halaman/rute dan aset situs.
Meningkatkan performa pemuatan	53% pengguna mengabaikan situs yang memerlukan waktu lebih dari tiga detik untuk dimuat	JavaScript dan CSS yang dapat dimuat secara asinkron atau ditangguhkan. Tetapkan sasaran waktu untuk interaktif dan ukuran payload: misalnya TTI di 3G. Tetapkan anggaran performa.
Kurangi tebal halaman	• Mengurangi biaya data untuk pengguna dengan paket data terbatas • Mengurangi persyaratan penyimpanan aplikasi web — terutama sangat penting bagi pengguna dengan perangkat spesifikasi rendah • Mengurangi biaya hosting dan penayangan • Meningkatkan performa, keandalan, dan ketahanan	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 mungkin lambat dimuat, dan periksa kode yang tidak digunakan dengan alat cakupan.
Mengurangi permintaan resource	• Mengurangi masalah latensi • Mengurangi biaya penayangan • Meningkatkan ketahanan, keandalan, dan performa 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 Pengelola Tugas 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 berjalan secara 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
• Analisis
• Metrik 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.

Catatan: Gambar sejauh ini merupakan berat dan sebagian besar permintaan untuk sebagian besar halaman web. Latensi semakin memburuk karena konektivitas memburuk sehingga permintaan file gambar yang berlebihan juga dapat meningkatkan masalah saat web mulai digunakan di perangkat seluler. Gambar juga mengonsumsi daya: lebih banyak permintaan gambar, lebih banyak penggunaan radio, dan lebih banyak daya baterai. Bahkan hanya untuk merender gambar, Anda membutuhkan daya – dan ini sebanding dengan ukuran serta kuantitas gambar. Demikian juga untuk memori: peningkatan kecil pada dimensi piksel menghasilkan peningkatan besar dalam penggunaan memori. Pada gambar di perangkat seluler — terutama pada perangkat dengan spesifikasi rendah — memori dapat menjadi kendala baru. Gambar yang besar juga menimbulkan masalah bagi pengguna yang menggunakan paket data yang dibatasi. Hapus gambar yang tidak perlu! Jika Anda tidak dapat menghilangkannya, optimalkan: tingkatkan kompresi sebanyak mungkin, kurangi dimensi piksel, dan gunakan format yang memberikan ukuran file terkecil. Mengoptimalkan 'gambar utama' seperti banner dan latar belakang adalah cara yang mudah dilakukan satu kali.

Merekam permintaan resource: jumlah, ukuran, jenis, dan pengaturan waktu

Tempat yang baik untuk memulai saat mengaudit situs adalah dengan memeriksa halaman dengan alat jaringan browser Anda. Jika Anda tidak yakin cara melakukannya, pelajari Panduan Memulai di panel jaringan Chrome DevTools. Alat serupa tersedia untuk Firefox, Safari, Internet Explorer, dan Edge.

Ingatlah untuk menyimpan catatan hasil sebelum Anda membuat perubahan. Untuk permintaan jaringan, caranya sesederhana screenshot — Anda juga dapat menyimpan data profil sebagai file JSON. Di bawah ini, informasi selengkapnya tentang cara menyimpan dan membagikan hasil pengujian, tersedia di bawah.

Sebelum mulai mengaudit penggunaan jaringan, pastikan Anda menonaktifkan cache browser guna memastikan Anda mendapatkan statistik yang akurat untuk performa pemuatan pertama. Jika Anda sudah menyimpan dalam 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 adalah beberapa metrik dan fitur inti yang harus Anda periksa dengan alat browser:

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

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

Catatan: Anda sering kali dapat menggunakan alat browser untuk menemukan masalah hanya dengan memeriksa respons jaringan dan mengurutkan berdasarkan ukuran. Misalnya: PNG 349 KB di sini sepertinya akan menimbulkan masalah:

Tentu saja, ternyata gambar memiliki lebar 1600 piksel, sedangkan lebar tampilan maksimum elemen hanya 400 piksel. Setelah didekompresi, gambar membutuhkan memori lebih dari 4 MB, yang sangat banyak pada ponsel. Menyimpan ulang gambar sebagai JPEG lebar 800 piksel (untuk mengatasi lebar tampilan 400 piksel pada layar 2x) dan mengoptimalkannya dengan ImageOptim menghasilkan file 17 KB: bandingkan PNG asli dengan JPEG yang dioptimalkan.

Itu peningkatan sebesar 95%!

Memeriksa beban memori dan CPU

Sebelum Anda membuat perubahan, simpan data penggunaan memori dan CPU.

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

Pengelola Tugas Chrome — waspadai penggunaan 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 ke byte pertama, dan apakah situs Anda menggunakan CDN yang efektif.

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

Simpan hasil

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

  

Menguji persyaratan Progressive Web App inti

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 Gist GitHub: klik tombol berbagi, pilih Buka di Viewer, lalu klik lagi tombol berbagi di jendela baru dan Simpan sebagai Gist.

Ekspor laporan ke gist dari Ekstensi Chrome Lighthouse — klik tombol bagikan

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

Jika bisa, simpan catatan data analisis sebelum Anda menerapkan perubahan: rasio pantulan, waktu di halaman, halaman keluar: apa pun yang relevan dengan kebutuhan 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 berat halaman dan permintaan resource.

Jika analisis tidak diterapkan, sekaranglah saatnya. Metrik dan analisis bisnis adalah pengambil keputusan akhir untuk menentukan apakah situs Anda berfungsi atau tidak. Jika memungkinkan, gabungkan pelacakan peristiwa untuk tindakan pengguna seperti klik tombol dan pemutaran video. Anda juga sebaiknya menerapkan analisis alur sasaran: jalur yang dilalui pengguna untuk menuju 'konversi'.

Anda dapat memantau Kecepatan Situs Google Analytics untuk melihat 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 browser dan intervensi. Ini adalah salah satu dari banyak API untuk mendapatkan pengukuran langsung dari pengguna sebenarnya.

Pengalaman dunia nyata: perekaman layar dan video

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

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

Pemuatan halaman perekaman video memiliki cara kerja yang sama seperti tampilan filmstrip di WebPagetest atau Mengambil Screenshot di Chrome DevTools. Anda akan mendapatkan catatan nyata tentang kecepatan pemuatan komponen halaman: mana yang cepat dan mana yang lambat. Simpan rekaman video dan screencast untuk dibandingkan dengan peningkatan pada masa mendatang.

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

Apa lagi?

Jika relevan, dapatkan Web Bloat Score. Ini adalah pengujian yang menyenangkan, tetapi juga bisa menjadi cara menarik untuk menunjukkan penggunaan kode yang berlebihan — 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.