Pengantar
Saat ini, hal terpenting yang dapat Anda lakukan untuk situs Anda adalah memastikan situs tersebut berperforma baik saat dikunjungi dari ponsel atau tablet. Lanjutkan membaca dan pelajari cara mengoptimalkan situs Anda untuk browser seluler menggunakan Chrome DevTools dan perangkat Android.
Mengapa Pengoptimalan untuk Web Seluler begitu Penting?
Performa
Perangkat seluler memiliki CPU yang lebih cepat, RAM yang lebih besar, GPU yang lebih cepat, dan akses jaringan yang lebih cepat saat kita beralih dari 2G dan 3G ke 4G. Terlepas dari kemajuan yang pesat, perangkat seluler kurang bertenaga jika dibandingkan dengan komputer kita. Dalam istilah yang lebih konkret, pemuatan resource jaringan memerlukan waktu lebih lama, proses mengekstrak gambar memerlukan waktu lebih lama, proses menggambar halaman memerlukan waktu lebih lama, dan mengeksekusi skrip memerlukan waktu lebih lama. Dapat diasumsikan bahwa halaman Anda berjalan 5 hingga 10 kali lebih lambat di perangkat seluler.
Baterai
Perangkat seluler hanya menggunakan daya baterai. Pengguna perangkat seluler ingin baterai itu bertahan selama mungkin. Situs yang kurang optimal akan menghabiskan baterai jauh lebih cepat daripada yang diperlukan. Minimalkan traffic jaringan dan kurangi paint untuk mengurangi konsumsi baterai. Saat Anda mengambil resource, Wi-Fi atau radio seluler harus aktif, sehingga akan menguras baterai. Saat browser menggambar elemen, penggunaan CPU dan GPU akan melonjak, yang juga menguras daya baterai.
Engagement
Kinerja digunakan untuk meningkatkan metrik yang paling penting bagi Anda. Di Facebook, kita lebih suka men-scroll. Dalam pengujian A/B, kami memperlambat scroll dari 60 fps ke 30 fps. Interaksi diciutkan. Kami bilang oke, oleh karena itu men-scroll itu penting.
Facebook di Edge Conference
Pengguna seluler berharap dapat login dan logout dengan cepat. Situs tercepat akan mendapatkan engagement terbanyak.
Mengelola Performa
Chrome dilengkapi dengan serangkaian alat developer yang andal. Artikel ini menjelaskan cara menggunakan alat tersebut untuk membuat profil situs seluler Anda. Jika Anda sudah terbiasa dengan Chrome DevTools, bagus! Jika belum, lihat tutorial hebat ini:
Setelah Anda selesai, mari kita lihat cara mempercepat situs seluler Anda dengan DevTools. Jika ini adalah pertama kalinya Anda menggunakan Chrome DevTools untuk Android, lihat panduan memulai di bagian bawah artikel.
Menggunakan Chrome DevTools dari Jarak Jauh
Dengan perangkat Android yang di-tether ke komputer. Di Chrome desktop, buka http://localhost:9222 dan buka situs Anda di perangkat Android. Anda akan diarahkan ke daftar tab yang terbuka di perangkat Android. Pilih halaman dari daftar 'Halaman yang dapat diperiksa'.
dan Anda akan diarahkan ke Chrome DevTools untuk halaman tersebut.
Aduh... toolbar Chrome DevTools yang sudah dikenal ada di sana. Yang paling penting untuk dipahami tentang Chrome DevTools jarak jauh adalah bahwa Chrome DevTools ini sama dengan yang Anda gunakan saat ini di desktop. Satu-satunya perbedaan adalah perangkat Android Anda hanya bertanggung jawab atas halaman, sedangkan desktop bertanggung jawab atas DevTools. Di balik layar, data yang sama dikumpulkan dan fungsi yang sama tersedia.
Sebagai contoh, saya membuka www.sfgate.com/movies di ponsel. Dengan menggunakan Chrome DevTools di desktop, saya mengarahkan kursor ke div di fitur Elemen dan, seperti di desktop, div disorot secara visual di perangkat Android saya.
Alat Elemen juga dapat digunakan untuk mengaktifkan dan menonaktifkan gaya, yang akan berguna saat kita mencoba menyelidiki waktu paint.
Cahaya pada Akses Jaringan
Kinerja jaringan adalah hal penting, dan ini bahkan lebih penting pada web seluler. Perangkat seluler sering kali menggunakan koneksi yang lebih lambat daripada komputer desktop dan laptop kita. Untuk memastikan Anda melakukan hal yang benar, ambil snapshot jaringan dengan membuka Alat jaringan, lalu menekan rekam.
Screenshot menampilkan traffic jaringan yang dihasilkan dari penelusuran Google. Amati permintaan jaringan yang dibuat situs Anda dan temukan cara untuk meminimalkannya. Jika situs Anda membuat permintaan polling ke server, Anda dapat memperhatikan aktivitas pengguna dan menghindari polling saat pengguna tidak ada aktivitas. Alat jaringan memungkinkan Anda melihat header HTTP mentah, yang berguna jika jaringan seluler mengubahnya sama sekali.
Mengoptimalkan Waktu Penggambaran
Salah satu hambatan terbesar di browser web seluler adalah proses menggambar halaman Anda. Menggambar adalah proses menggambar elemen pada halaman dengan gaya visual yang ditentukan. Jika satu elemen mahal untuk dilukis, proses tersebut akan memperlambat pengecatan seluruh halaman. Chrome mencoba meng-cache elemen yang sebelumnya digambar dalam buffer offscreen. Namun, di perangkat seluler, jumlah RAM GPU yang tersedia terbatas, sehingga membatasi jumlah elemen yang dapat disimpan dalam cache di luar layar. Efek sampingnya adalah lebih banyak paint dan setiap paint lebih lambat daripada desktop. Agar scroll responsif, Anda harus meminimalkan waktu menggambar.
Chrome 25 menyertakan mode cat ulang halaman berkelanjutan. Mode pewarnaan ulang halaman berkelanjutan tidak pernah meng-cache elemen yang digambar dan, sebagai gantinya, melukis semua elemen setiap frame. Dengan memaksa semua elemen dilukis di setiap frame, Anda dapat melakukan pengujian A/B terhadap waktu paint dengan mengaktifkan dan menonaktifkan elemen, serta mengaktifkan dan menonaktifkan gaya. Meskipun prosesnya manual, ini adalah alat yang sangat berharga untuk melacak seberapa mahal pengecatan setiap elemen di halaman Anda. Aturan pertama klub pengoptimalan adalah mengukur apa yang ingin Anda optimalkan untuk mendapatkan dasar pengukuran. Mari kita bahas contoh sederhananya.
Pertama, aktifkan mode repaint halaman berkelanjutan:
Setelah diaktifkan, grafik akan terlihat di sudut kanan atas perangkat Android Anda. Sumbu x pada grafik adalah waktu, yang dibagi menjadi {i>frame<i}. Sumbu y pada grafik mengukur waktu paint, dalam milidetik. Anda dapat melihat bahwa, di perangkat saya, halaman membutuhkan waktu 14 milidetik untuk menggambar. Waktu menggambar minimum dan maksimum juga ditampilkan bersama dengan memori GPU yang digunakan.
Sebagai eksperimen, saya menetapkan gaya pada elemen yang dipilih menjadi display: none. Mari kita lihat seberapa mahal
halaman itu untuk dilukis sekarang.
Waktu Paint berubah dari sekitar 14 milidetik per frame menjadi 4 milidetik per frame. Dengan kata lain, proses menggambar satu elemen tersebut memerlukan waktu sekitar 10 milidetik. Dengan mengikuti proses mengaktifkan dan menonaktifkan elemen serta aktif dan nonaktif, Anda dapat dengan cepat mempersempit bagian halaman yang mahal. Ingat, waktu paint yang lebih cepat berarti lebih sedikit jank, baterai yang lebih lama, dan lebih banyak interaksi dari pengguna. Jika Anda siap untuk menggali lebih dalam, pastikan untuk membaca artikel bagus ini tentang mode rekonstruksi halaman berkelanjutan.
Fitur Lanjutan
about:pelacakan
Banyak fitur developer yang lebih canggih yang tersedia di Chrome desktop juga tersedia di Chrome Android. Misalnya, about:gpu-internals, about:appcache-internals, dan about:net-internals telah tersedia. Saat menyelidiki masalah yang sangat rumit, terkadang Anda memerlukan lebih banyak data untuk mempersempit penyebab masalah. Di desktop, Anda mungkin menggunakan about:tracing. Jika Anda belum mempelajari about:tracing, tonton video saya tentang cara menggunakan dan mempelajari alat pembuatan profil about:tracing. Anda dapat mengambil data yang sama dari Android Chrome. Ikuti langkah-langkah berikut untuk memulai:
- Download adb_trace.py
- Menjalankan adb_trace.py dari command line
- Menggunakan Chrome di Android
- Tekan enter pada command line, untuk menonaktifkan skrip adb_trace.py.
Setelah adb_trace.py selesai, Anda akan memiliki file JSON yang dapat dimuat di about:tracing Chrome desktop.
Panduan Memulai
Setelah meninjau apa saja yang dapat dilakukan Chrome DevTools jarak jauh, mari kita bahas cara memulai sesi proses debug jarak jauh Anda. Jika Anda belum pernah menggunakannya,baca petunjuk mendetail tentang cara memulai. Jika Anda sudah menggunakannya, tetapi lupa cara menggunakannya, kami juga telah mencantumkan petunjuk singkat di sini.
1. Instal Android SDK
Anda mungkin bertanya-tanya mengapa Anda harus menginstal Android SDK saat mengembangkan untuk web. Termasuk dalam SDK adalah adb (Android Debug Bridge). Chrome desktop harus dapat berkomunikasi dengan perangkat Android Anda. Chrome tidak berkomunikasi langsung dengan perangkat Android, tetapi merutekan komunikasi melalui adb.
2. Mengaktifkan proses debug USB di perangkat Anda
Opsi untuk mengaktifkan proses debug USB dapat ditemukan di Setelan Android. Aktifkan.
3. Hubungkan ke perangkat
Jika belum melakukannya, hubungkan perangkat Android ke desktop melalui USB. Jika ini adalah pertama kalinya Anda menggunakan proses debug USB, Anda akan menerima perintah berikut:
Jika Anda akan sering melakukan sesi debug jarak jauh, sebaiknya centang 'Selalu izinkan dari komputer ini'.
4. Memastikan perangkat terhubung dengan benar
Jalankan adb devices dari command prompt. Anda akan melihat perangkat tercantum.
5. Mengaktifkan proses debug USB di Chrome
Buka Setelan > Lanjutan > DevTools dan centang opsi Aktifkan proses debug Web USB seperti yang ditunjukkan di sini:
6. Membuat koneksi DevTools ke perangkat Android Anda
Jalankan perintah berikut:
adb forward tcp:9222 localabstract:chrome_devtools_remote
membuat jembatan antara mesin desktop dan perangkat Android melalui adb. Jika Anda mengalami masalah untuk mencapai tahap ini, baca petunjuk penyiapan mendetail di sini.
7. Memverifikasi bahwa Anda siap memulai
Pastikan perangkat Anda terhubung dengan benar dengan membuka Chrome di desktop dan membuka http://localhost:9222. Jika Anda mendapatkan 404, error lain, atau tidak melihat sesuatu seperti berikut:
Baca petunjuk penyiapan mendetail di sini.
Kesimpulan
Pengguna seluler sering kali terburu-buru dan perlu mendapatkan bagian informasi penting dari halaman Anda dengan cepat. Sebagai pembuat situs seluler, tugas Anda adalah memastikan halaman dimuat dengan cepat dan berperforma baik di perangkat seluler. Jika tidak, interaksi pengguna akan menurun. Chrome DevTools jarak jauh secara fungsional setara dengan desktop. UI-nya cukup mirip sehingga Anda tidak perlu mempelajari kumpulan alat baru. Dengan kata lain, alur kerja Anda akan terus berlanjut. Ingat, Facebook tidak terkalahkan oleh masalah performa dan situs Anda juga tidak terkalahkan. Situs berperforma tinggi mendapatkan lebih banyak engagement pengguna.