Ringkasan
Google+ berjalan sangat responsif.
Menggunakan Responsif
Google+ adalah tempat orang-orang berkumpul karena minat yang sama, mulai dari Zombie Cats hingga Vintage Calculators. Hingga saat ini, Google+ memiliki dua versi situs yang berbeda - satu untuk desktop dan satu lagi untuk web seluler yang dirancang untuk browser lama.
Tantangan
Mengelola dua situs akan menghasilkan serangkaian tantangan yang unik. Memiliki versi situs yang terpisah berarti setiap fitur harus diterapkan dua kali. Hal ini menghasilkan banyak kode duplikat dan upaya tambahan untuk mengoptimalkan dua pengalaman untuk web desktop dan seluler. Dan karena garis antarperangkat semakin buram - dengan desktop yang mendukung perangkat sentuh dan perangkat seluler canggih dengan layar yang semakin besar - desain yang berbeda untuk desktop dan seluler menjadi semakin kurang masuk akal.
Seiring penambahan fitur, situs desktop lama kami juga menjadi lambat dan membengkak. Awal tahun ini, halaman beranda kami memiliki ukuran sekitar 5 MB dan menghasilkan sekitar 250 permintaan HTTP. Hanya saja performanya kurang baik. Gambar di situs terlalu berat dan tidak dioptimalkan, sehingga semakin memperlambat halaman. Akibatnya, streaming kami nyaris tidak dapat diakses pada jaringan yang lambat dan tidak stabil dan pengalaman bagi para pengguna ini sangat mengecewakan. Selain itu, persyaratan untuk mendukung browser lama di web seluler membuat kami tidak mengandalkan JavaScript di seluruh situs dan mencegah kami menerapkan fitur yang sangat interaktif. Kami tidak dapat mengandalkan kemajuan di browser web seluler.
Solusi
Kami memulai dengan fokus pada desain responsif: satu penerapan yang akan berfungsi di perangkat seluler, tablet, desktop, dan lainnya. Kami mempelajari setiap fitur, halaman, library JavaScript, dan class CSS secara menyeluruh. Kami ingin mem-build sistem yang akan memastikan bahwa situs hanya akan mendownload apa yang benar-benar diperlukan agar berfungsi, kecuali jika pengguna meminta lebih banyak. Tantangannya adalah membuat situs yang berfungsi dengan baik pada ponsel yang lebih lambat dengan koneksi seluler, tetapi masih memberikan pengalaman imersif yang luar biasa di browser yang lebih cepat dan layar yang lebih besar.
Serangkaian batasan ini membuat kami harus mengamati setiap perubahan kode ke depannya. Untuk mencapai hal ini, kami membuat aturan 6^5 untuk memastikan bahwa pada pemuatan halaman awal, kami tidak mendownload lebih dari 60 K HTML, 60 K JavaScript, 60 K CSS, animasi kami selalu 60 fps, dan kami memiliki latensi rata-rata 0,6 dtk.
Untuk mencapainya, kami memilih framework JavaScript dan CSS yang membangun modularitas dan pemuatan lambat sejak awal. Oleh karena itu, kami memastikan bahwa pengguna hanya mendownload JavaScript dan CSS saat mereka benar-benar menggunakan fitur yang memerlukannya. Hal ini dilakukan melalui pendekatan berbasis template yang digabungkan dengan sistem build dan modul kami sehingga semuanya berfungsi dengan hampir tanpa upaya dari developer.
Dengan framework baru ini, kami mulai membuat prototipe implementasi ulang Google+ di web. Kami mulai melarang hal-hal yang “buruk” dan menetapkan aturan yang ketat untuk pengembangan. Salah satu aturan utama kami adalah semua halaman kami harus dirender di sisi server dan sisi klien. Dengan rendering sisi server, kita memastikan bahwa pengguna dapat mulai membaca segera setelah HTML dimuat, dan tidak ada JavaScript yang perlu dijalankan untuk memperbarui konten halaman. Setelah halaman dimuat dan pengguna mengklik link, kita tidak ingin melakukan perjalanan bolak-balik penuh untuk merender semuanya lagi. Di sinilah rendering sisi klien menjadi penting - kita hanya perlu mengambil data dan template, serta merender halaman baru di klien. Hal ini melibatkan banyak konsekuensi; jadi kami menggunakan framework yang membuat rendering sisi server dan sisi klien menjadi mudah tanpa kelemahannya karena harus menerapkan semuanya dua kali, baik di server dan di klien.
Aturan lainnya mencakup pelarangan animasi tinggi dan lebar yang akan menyebabkan tata letak ulang browser dan berdampak negatif pada performa. Untuk manipulasi dan animasi DOM, kami menjadwalkan tugas agar dilakukan secara sinkron dengan kecepatan refresh render browser. Kita juga mengelompokkan semua tugas pengukuran sehingga kita dapat menghindari penghitungan gaya berulang yang mahal. Kami juga sangat mengandalkan alat profiler Chrome untuk memastikan semuanya berfungsi sebagaimana mestinya selama kami menjalankannya. Selain itu, kami membuat alat yang menghitung efek perubahan kode pada jejak JS untuk memastikan kami tidak meningkatkan ukuran halaman secara drastis.
Proses ini memerlukan waktu, tetapi akan jauh lebih sulit jika kami tidak memiliki kemampuan untuk mengidentifikasi dan menghilangkan masalah saat kami membangun.
Kami meluncurkan versi web seluler untuk penerapan responsif ini pada Februari 2015. Hal ini memungkinkan kami untuk memeriksa desain dan proses yang baru. Kami menggunakan data dari peluncuran ini untuk memvalidasi apa yang berhasil dan apa yang tidak. Kami melakukan iterasi desain dan mulai memperluas dukungan untuk lebih banyak perangkat. Pada November 2015, kami meluncurkan penerapan baru ini di semua perangkat.
Hasil
Tanpa mengorbankan performa, Google+ dapat membuat aplikasi web yang kompleks dengan UI yang kaya. Situs ini sekarang lebih cepat dan lebih ramping dari sebelumnya.
| Sebelum | Setelah | |
|---|---|---|
| Berat total halaman beranda, di-gzip (dengan gambar) | 22.600 KB | 327 KB |
| Jumlah permintaan | 251 | 45 |
| HTML (bukan gzip) | 1.100 KB | 362 KB |
| JavaScript & CSS (di-gzip) | 2.768 KB | 111KB |
| Waktu muat halaman lengkap rata-rata (latensi) | 12 detik 0,7 detik ke byte pertama |
3 detik 0,1 detik ke byte pertama |