Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Mengapa Kinerja itu Penting

Dalam upaya bersama kita untuk mendorong web agar web melakukan lebih banyak hal, kita mengalami masalah umum: kinerja. Situs memiliki lebih banyak fitur daripada sebelumnya. Begitu banyak, bahwa banyak situs sekarang berusaha mencapai kinerja tingkat tinggi di berbagai kondisi jaringan dan perangkat.

Masalah kinerja sangat beragam. Yang paling ringan, masalahnya berupa pelambatan kecil yang agak mengganggu pengguna. Yang terburuk, masalahnya berupa situs yang benar-benar tidak bisa diakses, tidak ada respons sama sekali saat pengguna menginput sesuatu, atau keduanya.

Kinerja adalah tentang pengguna yang tetap aktif di situs tersebut

Kita ingin pengguna berinteraksi secara penuh makna dengan apa yang kita buat. Jika sebuah blog, kita berharap orang membaca postingannya. Jika sebuah toko online, kita berharap orang-orang membeli barang dagangan. Jika media sosial, kita ingin mereka saling berinteraksi.

Kinerja memainkan peran penting dalam keberhasilan perusahaan online. Berikut adalah beberapa studi kasus yang menunjukkan bagaimana situs berkinerja tinggi akan mampu mempertahankan interaksi penggunanya secara lebih baik daripada yang berkinerja rendah:

Berikut adalah beberapa studi kasus ketika kinerja rendah berdampak negatif terhadap sasaran bisnis:

Dalam penelitian DoubleClick oleh Google yang dikutip di atas, ditemukan bahwa waktu muat situs dalam 5 detik memiliki sesi 70% lebih lama, 35% bounce rate lebih rendah, dan 25% iklan dilihat lebih tinggi daripada situs yang mengambil hampir empat kali lipat lebih lama dalam 19 detik. Untuk mendapatkan gambaran kasar bagaimana kinerja situs Anda jika dibandingkan dengan pesaing Anda, cobalah fitur Speed Scorecard.

Tangkapan layar fitur
Speed Scorecard, membandingkan kinerja di empat outlet berita populer.
Gambar 1. Speed Scorecard membandingkan kinerja empat situs yang sedang bersaing menggunakan data Chrome UX Report dari pengguna jaringan 4G di Amerika Serikat.

Kinerja adalah tentang peningkatan konversi

Mempertahankan pengguna adalah sesuatu yang krusial untuk peningkatan konversi. Situs yang lambat memiliki dampak negatif terhadap pendapatan, begitu pula sebaliknya. Berikut beberapa contoh bagaimana kinerja telah memainkan peran dalam membuat bisnis lebih menguntungkan (atau kurang) menguntungkan:

Jika Anda menjalankan bisnis di web, kinerja menjadi faktor yang sangat krusial. Situs bisa memberi Anda kinerja yang baik hanya jika pengalaman pengguna situs Anda cepat dan responsif terhadap input pengguna. Untuk melihat bagaimana potensi pengaruh kinerja terhadap pendapatan, cobalah fitur Impact Calculator.

Screenshot Impact
Calculator, memperkirakan berapa banyak pendapatan yang bisa didapat oleh situs jika
peningkatan kinerja dicapai.
Gambar 2. Impact Calculator memperkirakan berapa banyak pendapatan yang akan Anda dapatkan dengan meningkatkan kinerja situs.

Kinerja adalah tentang pengalaman pengguna

Saat membuka URL, Anda melakukannya dari sejumlah titik awal potensial. Bergantung pada sejumlah kondisi, seperti kualitas koneksi dan perangkat yang Anda gunakan, pengalaman Anda mungkin sangat berbeda dari pengguna lain.

Perbandingan dua rol film
pemuatan halaman. Yang pertama menampilkan pemuatan halaman pada koneksi yang lambat, sedangkan
yang kedua menampilkan pemuatan halaman yang sama pada koneksi cepat.
Gambar 3. Perbandingan pemuatan halaman pada koneksi yang sangat lambat (atas) versus koneksi yang lebih cepat (bawah).

Saat situs mulai memuat, ada periode waktu ketika pengguna menunggu konten ditampilkan. Hingga konten terbuka, tidak ada pengalaman pengguna untuk dibicarakan. Kurangnya pengalaman ini cepat berlalu pada koneksi cepat. Sementara pada koneksi yang lambat, pengguna harus menunggu. Pengguna mungkin mengalami lebih banyak masalah ketika resource halaman terbuka dengan sangat lambat.

Kinerja adalah aspek dasar dari pengguna yang baik. Ketika situs mengirimkan banyak kode, browser harus menggunakan banyak megabyte paket data pengguna untuk mendownload kode. Perangkat seluler memiliki daya CPU dan memori yang terbatas. Perangkat seluler sering kewalahan dengan apa yang kita anggap sedikit kode yang tidak dioptimalkan. Kinerja yang buruk ini menyebabkan tidak adanya respons. Setelah memahami apa yang kita ketahui tentang perilaku manusia, pengguna hanya akan menoleransi aplikasi berperforma rendah untuk waktu yang lama sebelum meninggalkannya. Jika Anda ingin tahu lebih banyak tentang cara mengukur kinerja situs dan menemukan peluang perbaikan, cobalah Fitur Cara Memikirkan Kecepatan.

Ringkasan kinerja halaman sebagaimana terlihat di
Lighthouse.
Gambar 4. Ringkasan kinerja halaman sebagaimana terlihat di Lighthouse.

Kinerja tentang orang

Situs dan aplikasi yang berkinerja buruk juga dapat memboroskan biaya nyata bagi orang-orang yang menggunakannya.

Seiring terus berkembangnya pengguna internet di seluruh dunia, perlu untuk diperhatikan bahwa sebagian besar pengguna ini mengakses melalui jaringan LTE, 4G, 3G, bahkan 2G. Seperti yang telah disoroti oleh Ben Schwarz dari Calibre dalam studinya tentang kinerja, biaya paket data prabayar mengalami penurunan, yang pada gilirannya akan membuat akses ke internet semakin terjangkau. Perangkat seluler dan akses internet bukan lagi barang mewah. Keduanya sudah menjadi alat umum yang diperlukan untuk bernavigasi dan berfungsi dalam dunia yang semakin terhubung.

Ukuran halaman total semakin meningkat, setidaknya sejak 2011, dan trennya terus berlanjut. Karena halaman secara umum mengirim lebih banyak data, pengguna harus lebih sering mengisi paket data mereka, yang membutuhkan biaya.

Selain menghemat uang pengguna Anda, pengalaman pengguna yang cepat dan ringan juga terbukti krusial bagi pengguna yang mengalami krisis. Fasilitas-fasilitas publik seperti rumah sakit, klinik, dan pusat krisis memiliki resource online yang memberikan pengguna informasi penting dan spesifik yang mereka butuhkan selama krisis. Walaupun desain sangat penting dalam menyajikan informasi penting secara efisien di saat-saat yang penuh tekanan, pentingnya menyampaikan informasi ini dengan cepat tidak dapat diabaikan. Ini adalah bagian dari tugas kita.

Ke mana berikutnya

Meskipun daftar di bawah ini mungkin tampak menakutkan, pahami bahwa Anda tidak perlu melakukan semua hal untuk meningkatkan kinerja situs Anda. Itu hanya titik awal, jadi jangan merasa terlalu terbebani! _Apa pun_yang dapat Anda lakukan untuk meningkatkan kinerja akan sangat membantu pengguna Anda.

Pikirkan resource yang Anda kirimkan

Metode yang efektif untuk membangun aplikasi berkinerja tinggi adalah mengaudit resource apa yang Anda kirim kepada pengguna. Meskipun panel Jaringan di Chrome DevTools melakukan pekerjaan yang luar biasa dalam meringkas semua resource yang digunakan pada halaman tertentu, dapat menjadi hal yang sulit untuk mengetahui di mana harus memulai jika Anda belum mempertimbangkan kinerja sampai sekarang. Berikut beberapa saran:

  • Jika Anda menggunakan Bootstrap atau Fondasi untuk membangun UI, tanyakan pada diri sendiri apakah Anda membutuhkannya. Abstraksi semacam itu akan menambah banyak CSS yang harus diunduh oleh browser, mem-parse, dan menerapkannya ke halaman, semuanya sebelum CSS spesifik situs Anda masuk ke gambar. Flexbox dan Grid hebat dalam membuat layout sederhana maupun kompleks dengan kode yang relatif sedikit. Karena CSS adalah resource yang menghalangi render, maka overhead framework CSS bisa memperlambat rendering secara signifikan. Jika memungkinkan, Anda bisa mempercepat rendering dengan menghapus overhead yang tidak perlu.
  • Library JavaScript itu nyaman, tetapi tidak selalu diperlukan. Kita ambil jQuery misalnya: Pemilihan elemen telah sangat disederhanakan berkat penggunaan metode seperti querySelector dan querySelectorAll. Event binding mudah dilakukan dengan addEventListener. classList, setAttribute, dan getAttribute menawarkan cara mudah bekerja dengan kelas atau atribut elemen. Jika Anda harus menggunakan library, cari alternatif yang lebih efektif. Misalnya, Zepto adalah alternatif jQuery yang lebih kecil, sedangkan Preact adalah alternatif yang jauh lebih kecil untuk.
  • Tidak semua situs web memerlukan aplikasi halaman tunggal atau single page application (SPA), karena seringkali menggunakan JavaScript secara ekstensif. JavaScript adalah resource termahal yang kita sajikan pada byte web untuk byte, karena ia tidak hanya harus didownload, tetapi juga harus di-parse, dikompilasi, dan dieksekusi. Misalnya , situs berita dan blog dengan arsitektur front end yang dioptimalkan dapat berkinerja dengan sangat baik sebagai pengalaman multihalaman tradisional. Secara khusus caching HTTP dikonfigurasi dengan baik, dan opsional, jika service worker digunakan.

Pikirkan bagaimana Anda mengirimkan resource

Pengiriman yang efisien sangat vital untuk membangun pengguna yang cepat.

Pikirkan seberapa besar data yang Anda kirimkan

Berikut adalah beberapa saran untuk membatasi seberapa banyak data yang Anda kirimkan:

Untuk panduan yang lebih holistik tentang peningkatan kinerja, lihat artikel kami pada model kinerja RAIL, yang berfokus pada peningkatan waktu muat dan respons aplikasi. Panduan pola PRPL kami juga merupakan resource yang unggul untuk meningkatkan kinerja aplikasi halaman tunggal modern.

Jika Anda ingin untuk mempelajari lebih lanjut tentang kinerja dan cara membuat situs Anda lebih cepat, dalami dokumentasi kinerja kami untuk panduan tentang berbagai topik. Kami terus menambahkan panduan baru dan memperbarui yang sudah ada, jadi selalu lihat update terbaru dari kami!

Terima kasih untuk Addy Osmani, Jeff Posnick, Matt Gaunt, Philip Walton, Vinamrata Singal, Daniel An, dan Pete LePage untuk umpan balik luas dalam menyempurnakan dan meluncurkan resource ini!_

Masukan

Was this page helpful?