#perfmatters: Teknik alat untuk ninja performa
Mengetahui seluk-beluk alat pengembangan Anda merupakan kunci untuk menjadi pakar performa. Colt melangkah melalui tiga pilar performa: jaringan, komputasi, dan render, dengan memperlihatkan tur tentang masalah utama di setiap area serta alat yang tersedia untuk menemukan dan memberantasnya.
- Kini Anda dapat membuat profil Chrome di Android dengan DevTools yang Anda kenal dan sukai dari desktop.
- Putaran iterasi untuk pekerjaan kinerja adalah: mengumpulkan data, mencapai wawasan, mengambil tindakan.
- Prioritaskan aset yang ada di jalur rendering penting untuk halaman Anda.
- Hindari mengecat; sangat mahal.
- Hindari churn memori dan eksekusi kode selama waktu penting dalam aplikasi Anda.
#perfmatters: Mengoptimalkan performa jaringan
Jaringan dan latensi biasanya menyumbang 70% dari total waktu muat halaman situs. Ini adalah persentase yang besar, tetapi ini juga berarti bahwa setiap peningkatan yang Anda lakukan di sana akan menuai manfaat besar bagi pengguna Anda. Dalam diskusi kali ini, Ilya membahas perubahan terbaru di Chrome yang akan meningkatkan waktu pemuatan, serta beberapa perubahan yang dapat Anda lakukan di lingkungan Anda untuk membantu menjaga beban jaringan seminimal mungkin.
- Chrome M27 memiliki penjadwal resource baru yang lebih baik.
- Chrome M28 telah menjadikan situs SPDY (bahkan) lebih cepat.
- Cache sederhana Chrome telah mengalami perbaikan besar.
- SPDY / HTTP/2.0 menawarkan peningkatan kecepatan transfer yang sangat besar. Terdapat modul SPDY matang yang tersedia untuk nginx, Apache, dan Jetty (hanya tiga di antaranya).
- QUIC adalah protokol baru dan eksperimental yang dibuat berdasarkan UDP; masih terlalu awal, tetapi ternyata pengguna yang akan menang.
#perfmatters: Tata letak dan rendering 60 fps
Mencapai 60 fps di proyek Anda berkorelasi langsung dengan keterlibatan pengguna dan sangat penting untuk keberhasilannya. Dalam diskusi kali ini, Nat dan Tom membahas pipeline rendering Chrome, beberapa penyebab umum penurunan frame, dan cara menghindarinya.
- Panjang frame adalah 16 md. Aplikasi ini berisi JavaScript, penghitungan gaya, pengecatan, dan pengomposisian.
- Lukisan itu sangat mahal. {i>Paint Storm<i} adalah tempat Anda tidak perlu mengulangi pekerjaan pengecatan yang mahal.
- Lapisan digunakan untuk menyimpan cache elemen yang digambar.
- Pengendali input (pemroses sentuh dan roda mouse) dapat mematikan responsivitas; jika Anda bisa menghindarinya. Anda tidak dapat meminimalkannya.
#perfmatters: Aplikasi web seluler instan
Jalur Rendering Penting mengacu pada apa saja (JavaScript, HTML, CSS, gambar) yang diperlukan browser sebelum dapat mulai melukis halaman. Memprioritaskan pengiriman aset di jalur rendering penting adalah suatu keharusan, terutama bagi pengguna pada perangkat dengan jaringan terbatas seperti smartphone di jaringan seluler. Bryan berbicara tentang bagaimana tim di Google melalui proses mengidentifikasi dan memprioritaskan aset untuk situs web PageSpeed Insights, yang membutuhkan waktu pemuatan 20 detik menjadi lebih dari 1 detik.
- Hilangkan JavaScript dan CSS yang memblokir render.
- Prioritaskan konten yang terlihat.
- Muat skrip secara asinkron.
- Render tampilan awal sisi server sebagai HTML dan tingkatkan dengan JavaScript.
- Meminimalkan CSS yang memblokir render; hanya mengirimkan gaya yang diperlukan untuk menampilkan area pandang awal, lalu mengirimkan sisanya.
- URI data besar yang disisipkan dalam CSS pemblokir render berbahaya untuk performa render; mereka memblokir resource di mana URL gambar tidak bersifat memblokir.