Pengantar
Saat ini, hal terpenting yang dapat Anda lakukan untuk situs Anda adalah memastikan situs tersebut berperforma baik saat dikunjungi dari ponsel atau tablet. Baca terus dan pelajari cara mengoptimalkan situs Anda untuk browser seluler menggunakan Chrome DevTools dan perangkat Android.
Mengapa pengoptimalan untuk web seluler sangat penting?
Performa
Perangkat seluler mendapatkan CPU yang lebih cepat, RAM yang lebih besar, GPU yang lebih cepat, dan akses jaringan yang lebih cepat seiring transisi kita dari 2G dan 3G ke 4G. Meskipun ada kemajuan, perangkat seluler memiliki daya yang lebih rendah jika dibandingkan dengan komputer kita. Secara lebih konkret, memuat resource jaringan memerlukan waktu lebih lama, membuka paket gambar memerlukan waktu lebih lama, menggambar halaman memerlukan waktu lebih lama, menjalankan 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 bertahan selama mungkin. Situs yang kurang optimal akan menguras baterai jauh lebih cepat daripada yang diperlukan. Minimalkan traffic jaringan dan kurangi penggambaran untuk mengurangi konsumsi baterai. Saat Anda mengambil resource, radio Wi-Fi atau seluler harus aktif, yang akan menguras baterai. Saat browser menggambar elemen, penggunaan CPU dan GPU akan melonjak, yang juga akan menguras baterai.
Engagement
Performa ada untuk meningkatkan metrik yang paling penting bagi Anda. Di Facebook, kami peduli dengan scrolling. Dalam pengujian A/B, kami memperlambat scrolling dari 60 fps menjadi 30 fps. Interaksi diciutkan. Kami berkata oke, oleh karena itu scroll penting.
Facebook di Edge Conference
Pengguna seluler mengharapkan dapat masuk dan keluar dengan cepat. Situs tercepat akan mendapatkan engagement terbanyak.
Mengelola performa
Chrome dilengkapi dengan set alat developer yang hebat. Artikel ini mengajarkan cara menggunakan alat ini untuk membuat profil situs seluler Anda. Jika Anda sudah memahami Chrome DevTools, bagus. Jika belum, lihat tutorial menarik berikut:
Setelah Anda memahami hal ini, mari kita lihat cara mempercepat situs seluler Anda dengan DevTools. Jika ini 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 ditambatkan ke komputer. Di Chrome desktop, buka http://localhost:9222 dan di perangkat Android, buka situs Anda. Anda akan diarahkan ke daftar tab yang terbuka di perangkat Android Anda. Pilih halaman Anda dari daftar ‘Halaman yang dapat diperiksa’.
dan Anda akan diarahkan ke Chrome DevTools untuk halaman tersebut.
Aww… toolbar Chrome DevTools yang sudah tidak asing lagi ada di sana. Hal terpenting yang perlu dipahami tentang Chrome DevTools jarak jauh adalah bahwa alat ini sama dengan DevTools yang Anda gunakan saat ini di desktop. Satu-satunya perbedaan adalah perangkat Android Anda hanya bertanggung jawab atas halaman, sedangkan desktop Anda bertanggung jawab atas DevTools. Di balik layar, data yang sama dikumpulkan dan fungsi yang sama tersedia.
Misalnya, saya mengunjungi www.sfgate.com/movies di ponsel saya. Dengan menggunakan Chrome DevTools di desktop, saya mengarahkan kursor ke div di alat Elemen dan, seperti di desktop, div ditandai secara visual di perangkat Android saya.
Alat Elements juga dapat digunakan untuk mengaktifkan dan menonaktifkan gaya, yang akan berguna saat kita mencoba menyelidiki waktu render.
Menyoroti akses jaringan
Performa jaringan itu penting, dan bahkan lebih penting lagi di web seluler. Perangkat seluler sering kali memiliki koneksi yang lebih lambat daripada komputer desktop dan laptop kita. Untuk memastikan Anda melakukan hal yang benar, ambil snapshot jaringan dengan membuka alat Jaringan dan menekan rekam.
Screenshot ini menampilkan traffic jaringan yang dihasilkan dari Google Penelusuran. Amati permintaan jaringan yang dibuat situs Anda dan temukan cara untuk meminimalkannya. Jika situs Anda membuat permintaan polling ke server, Anda mungkin perlu memperhatikan aktivitas pengguna dan menghindari polling saat pengguna tidak aktif. Alat Jaringan memungkinkan Anda melihat header HTTP mentah, yang berguna jika jaringan seluler mengubahnya sama sekali.
Mengoptimalkan waktu render
Salah satu bottleneck terbesar di browser web seluler adalah merender halaman Anda. Pengecatan adalah proses menggambar elemen di halaman dengan gaya yang ditentukan. Jika satu elemen memerlukan banyak resource untuk digambar, proses penggambaran seluruh halaman akan melambat. Chrome mencoba meng-cache elemen yang telah digambar sebelumnya dalam buffer di luar layar. Namun, di perangkat seluler, jumlah RAM GPU yang tersedia terbatas, sehingga membatasi jumlah elemen yang dapat di-cache di luar layar. Efek sampingnya adalah lebih banyak render dan setiap render lebih lambat daripada desktop. Agar scroll responsif, Anda harus meminimalkan waktu render.
Chrome 25 menyertakan mode gambar ulang halaman berkelanjutan. Mode penggambaran ulang halaman berkelanjutan tidak pernah meng-cache elemen yang digambar, melainkan menggambar semua elemen di setiap frame. Dengan memaksa semua elemen digambar di setiap frame, Anda dapat melakukan pengujian A/B pada waktu gambar dengan mengaktifkan dan menonaktifkan elemen, serta mengaktifkan dan menonaktifkan gaya. Meskipun prosesnya manual, ini adalah alat yang sangat berharga untuk melacak seberapa mahal biaya menggambar setiap elemen di halaman Anda. Aturan pertama klub pengoptimalan adalah mengukur apa yang ingin Anda optimalkan untuk mendapatkan dasar pengukuran. Mari kita pelajari contoh sederhana.
Pertama, aktifkan mode continuous page repaint:
Setelah diaktifkan, grafik akan terlihat di pojok kanan atas perangkat Android Anda. Sumbu x grafik adalah waktu, yang dibagi menjadi beberapa frame. Sumbu y grafik mengukur waktu render, dalam milidetik. Anda dapat melihat bahwa, di perangkat saya, halaman memerlukan waktu 14 milidetik untuk dirender. Waktu render 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 yang akan digambar sekarang.
Waktu render turun dari sekitar 14 milidetik per frame menjadi 4 milidetik per frame. Dengan kata lain, menggambar satu elemen tersebut memerlukan waktu sekitar 10 milidetik. Dengan mengikuti proses mengaktifkan dan menonaktifkan elemen serta gaya, Anda dapat dengan cepat mempersempit bagian halaman yang mahal. Ingat, waktu render yang lebih cepat berarti lebih sedikit jank, baterai lebih tahan lama, dan lebih banyak engagement dari pengguna Anda. Jika Anda siap untuk mempelajari lebih lanjut, pastikan untuk membaca artikel bagus ini tentang mode gambar ulang halaman berkelanjutan.
Fitur lanjutan
about:tracing
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 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 mengenal about:tracing, tonton video saya tentang penggunaan dan eksplorasi alat pembuatan profil about:tracing. Anda dapat mengambil data yang sama dari Chrome Android, 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, yang akan 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 kita meninjau apa yang dapat dilakukan Chrome DevTools jarak jauh, mari kita bahas cara memulai sesi proses debug jarak jauh. Jika Anda belum pernah menggunakannya, baca petunjuk mendetail tentang cara memulai. Jika Anda sudah menggunakannya, tetapi lupa cara menggunakannya, saya juga telah mencantumkan petunjuk singkat di sini.
1. Menginstal Android SDK
Anda mungkin bertanya-tanya mengapa Anda harus menginstal Android SDK saat mengembangkan aplikasi untuk web. SDK ini menyertakan adb (Android Debug Bridge). Chrome desktop harus dapat berkomunikasi dengan perangkat Android Anda. Chrome tidak berkomunikasi langsung dengan perangkat Android, melainkan 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, hubungkan perangkat Android ke desktop melalui USB. Jika ini pertama kalinya Anda menggunakan proses debug USB, Anda akan melihat perintah berikut:
Jika Anda akan sering melakukan sesi debug jarak jauh, sebaiknya centang 'Always allow from this computer'.
4. Memastikan perangkat Anda terhubung dengan benar
Jalankan adb devices dari command prompt Anda. Anda akan melihat perangkat Anda tercantum.
5. Mengaktifkan proses debug USB di Chrome
Buka Settings > Advanced > DevTools dan centang opsi Enable USB Web debugging seperti yang ditunjukkan di sini:
6. Membuat koneksi DevTools ke perangkat Android
Jalankan perintah berikut:
adb forward tcp:9222 localabstract:chrome_devtools_remote
membuat jembatan antara mesin desktop dan perangkat Android Anda melalui adb. Jika Anda mengalami masalah saat mencapai tahap ini, baca petunjuk penyiapan mendetail di sini.
7. Memverifikasi bahwa Anda siap melanjutkan
Pastikan perangkat Anda terhubung dengan benar dengan membuka Chrome di desktop dan membuka http://localhost:9222. Jika Anda mendapatkan error 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 informasi penting dari halaman Anda dengan cepat. Sebagai pembuat situs seluler, Anda wajib memastikan bahwa halaman dimuat dengan cepat dan berperforma baik di perangkat seluler. Jika tidak, engagement pengguna akan menurun. Chrome DevTools jarak jauh secara fungsional setara dengan Chrome DevTools desktop. UI-nya cukup mirip sehingga Anda tidak perlu mempelajari seperangkat alat baru. Dengan kata lain, alur kerja Anda akan berlanjut. Ingat, Facebook tidak kebal terhadap masalah performa, begitu juga situs Anda. Situs dengan performa yang baik akan mendapatkan lebih banyak engagement pengguna.