Menggunakan alat untuk mengukur performa

Sam Dutton

Ada beberapa tujuan inti untuk membangun situs yang berperforma tinggi dan tangguh 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 andal	Alasan HTTPS Penting	HTTPS diterapkan untuk semua halaman/rute dan aset situs.
Meningkatkan performa pemuatan	53% pengguna meninggalkan situs yang memerlukan waktu lebih dari tiga detik untuk dimuat	JavaScript dan CSS yang dapat dimuat secara asinkron atau ditangguhkan. Tetapkan sasaran untuk waktu interaktif dan ukuran payload: misalnya TTI di 3G. Tetapkan anggaran performa.
Mengurangi ukuran halaman	• Mengurangi biaya data bagi pengguna dengan paket data terbatas • Mengurangi persyaratan penyimpanan aplikasi web — sangat penting bagi pengguna perangkat berspesifikasi rendah • Mengurangi biaya hosting dan penayangan • Meningkatkan performa, keandalan, dan ketahanan penayangan	Tetapkan anggaran bobot halaman: misalnya, pemuatan pertama di bawah 400 kB. Periksa JavaScript yang berat. Periksa ukuran file untuk menemukan gambar, media, HTML, CSS, dan JavaScript yang terlalu besar. 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 Pengelola Tugas Chrome untuk membandingkan situs Anda dengan situs lain dalam hal penggunaan memori saat memuat halaman beranda dan menggunakan fitur situs lainnya.
Mengurangi beban CPU	Perangkat seluler memiliki CPU terbatas, terutama perangkat berspesifikasi rendah	Periksa JavaScript yang berat. Temukan JavaScript dan CSS yang tidak digunakan dengan alat cakupan. Periksa ukuran DOM yang berlebihan dan skrip yang berjalan tanpa perlu pada pemuatan pertama. Cari JavaScript yang dimuat dalam beberapa versi, atau library yang dapat dihindari dengan refaktorisasi kecil.

Ada berbagai alat dan teknik untuk mengaudit situs:

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

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

Catatan: Gambar sejauh ini merupakan ukuran terbesar dan permintaan terbanyak untuk sebagian besar halaman web. Latensi akan memburuk seiring memburuknya konektivitas, sehingga permintaan file gambar yang berlebihan menjadi masalah yang semakin besar seiring dengan beralihnya web ke perangkat seluler. Gambar juga menggunakan daya: makin banyak permintaan gambar, makin banyak penggunaan radio, makin banyak baterai yang habis. Bahkan hanya untuk merender gambar, diperlukan daya – dan ini sebanding dengan ukuran dan jumlah gambar. Demikian pula untuk memori: sedikit peningkatan dimensi piksel akan menyebabkan peningkatan besar dalam penggunaan memori. Dengan gambar di perangkat seluler — terutama di perangkat berspesifikasi rendah — memori dapat menjadi bottleneck baru. Gambar yang terlalu besar juga menjadi masalah bagi pengguna dengan paket data terbatas. Hapus gambar yang berlebihan. Jika Anda tidak dapat menghilangkannya, lakukan pengoptimalan: tingkatkan kompresi sebanyak mungkin, kurangi dimensi piksel, dan gunakan format yang memberikan ukuran file terkecil. Mengoptimalkan 'banner besar' seperti banner dan latar belakang adalah cara mudah dan cepat untuk meningkatkan performa.

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

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

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

Sebelum mulai mengaudit penggunaan jaringan, pastikan untuk menonaktifkan cache browser guna memastikan Anda mendapatkan statistik yang akurat untuk performa pemuatan pertama. Jika Anda sudah melakukan caching 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 mempelajari lebih dalam, jalankan pembuatan profil memori dan JavaScript.
• Total bobot halaman dan jumlah file.
• Jumlah dan ukuran file JavaScript.
• File JavaScript individual 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.
• File gambar individual 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 ukuran 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 hal-hal yang memblokir pemuatan halaman.

Jika Anda menggunakan Wi-Fi cepat atau koneksi seluler cepat, uji dengan emulasi bandwidth rendah dan latensi tinggi. Jangan lupa untuk menguji di perangkat seluler dan desktop — beberapa situs menggunakan UA sniffing untuk menampilkan aset dan tata letak yang berbeda untuk perangkat yang berbeda. Anda mungkin perlu melakukan pengujian 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 berukuran 349 KB di sini sepertinya bisa menjadi masalah:

Benar saja, ternyata gambar tersebut memiliki lebar 1.600 piksel, sedangkan lebar tampilan maksimum elemen hanya 400 piksel. Setelah didekompresi, gambar memerlukan memori lebih dari 4 MB, yang merupakan jumlah yang besar di ponsel. Menyimpan ulang gambar sebagai JPEG dengan lebar 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 melakukan perubahan, catat penggunaan memori dan CPU.

Di Chrome, Anda dapat mengakses Task Manager dari menu Window. Ini adalah cara sederhana untuk memeriksa persyaratan halaman web.

Pengelola Tugas Chrome — waspadai penggunaan memori dan CPU yang berlebihan

Menguji performa pemuatan pertama dan berikutnya

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

Catatan: Mengaktifkan caching konten statis sangatlah 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 ke cache melalui pekerja layanan. Meskipun Anda menggunakan Cache API, penting untuk mengaktifkan cache browser. Untuk mengetahui informasi selengkapnya, lihat PageSpeed Tools dan referensi di Dasar-Dasar Web (khususnya, bagian 'Membatalkan dan memperbarui respons yang di-cache').

Menyimpan hasilnya

• 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: simpan laporan dari panel Audit Chrome DevTools dengan mengklik tombol download:

  

Menguji persyaratan inti Progressive Web App

Lighthouse membantu Anda menguji keamanan, fungsionalitas, 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 Anda 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 gist dari Ekstensi Chrome Lighthouse — klik tombol bagikan

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

Jika bisa, simpan 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 back-end, persyaratan CPU, biaya penayangan, dan ketahanan kemungkinan akan meningkat jika Anda mengurangi bobot halaman dan permintaan resource.

Jika analisis belum diterapkan, sekaranglah 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 mungkin juga ingin menerapkan analisis alur sasaran: jalur yang digunakan pengguna untuk menuju '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 kunjungan melalui halaman beranda menghasilkan penjualan?'

Google Analytics menggunakan data dari Navigation Timing API.

Anda mungkin ingin mencatat 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 penghentian penggunaan browser dan peringatan intervensi. Ini adalah salah satu dari banyak API untuk mendapatkan pengukuran langsung di dunia nyata dari pengguna sebenarnya.

Pengalaman di dunia nyata: Perekaman layar dan video

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

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

Pemuatan halaman perekaman video berfungsi mirip dengan tampilan filmstrip di WebPagetest atau Ambil Screenshot di Chrome DevTools. Anda akan mendapatkan data nyata tentang kecepatan pemuatan komponen halaman: apa yang cepat dan apa yang lambat. Simpan rekaman video dan screencast untuk dibandingkan dengan peningkatan di masa mendatang.

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

Apa lagi?

Jika relevan, dapatkan Skor Bloat Web. Ini adalah pengujian yang menyenangkan, tetapi juga dapat menjadi cara yang menarik untuk menunjukkan bloatware kode — atau untuk menunjukkan bahwa Anda telah melakukan peningkatan.

What Does My Site Cost?, yang ditampilkan di bawah, memberikan panduan kasar tentang biaya finansial untuk memuat situs Anda di berbagai wilayah.

Tersedia banyak alat mandiri dan online lainnya: lihat perf.rocks/tools.