#perfmatters: Teknik alat untuk ninja performa
Mengetahui cara menggunakan alat pengembangan adalah kunci untuk menjadi pakar performa. Colt membahas tiga pilar performa: jaringan, komputasi, dan rendering, serta memberikan tur tentang masalah utama di setiap area dan alat yang tersedia untuk menemukan dan memberantasnya.
- Anda kini dapat membuat profil Chrome di Android dengan DevTools yang sudah Anda kenal dan sukai dari desktop.
- Loop iterasi untuk pekerjaan performa adalah: mengumpulkan data, mendapatkan insight, mengambil tindakan.
- Prioritaskan aset yang berada di jalur rendering kritis untuk halaman Anda.
- Hindari mengecat; harganya sangat mahal.
- Hindari perubahan memori dan eksekusi kode selama waktu kritis di aplikasi Anda.
#perfmatters: Mengoptimalkan performa jaringan
Jaringan dan latensi biasanya menyumbang 70% dari total waktu pemuatan halaman situs. Persentase ini memang besar, tetapi juga berarti bahwa setiap peningkatan yang Anda lakukan di sana akan memberikan manfaat besar bagi pengguna. Dalam presentasi ini, Ilya menjelaskan perubahan terbaru di Chrome yang akan meningkatkan waktu pemuatan, serta beberapa perubahan yang dapat Anda lakukan di lingkungan untuk membantu meminimalkan beban jaringan.
- Chrome M27 memiliki penjadwal resource baru dan lebih baik.
- Chrome M28 telah membuat situs SPDY (lebih) cepat.
- Cache sederhana Chrome telah dirombak.
- SPDY / HTTP/2.0 menawarkan peningkatan kecepatan transfer yang sangat besar. Ada modul SPDY yang sudah matang yang tersedia untuk nginx, Apache, dan Jetty (hanya tiga contoh).
- QUIC adalah protokol baru dan eksperimental yang dibuat di atas UDP; ini adalah tahap awal, tetapi bagaimanapun hasilnya, pengguna akan menang.
#perfmatters: Tata letak dan rendering 60 fps
Mencapai 60 fps dalam project Anda secara langsung berkorelasi dengan interaksi pengguna dan sangat penting untuk kesuksesannya. Dalam diskusi ini, Nat dan Tom membahas pipeline rendering Chrome, beberapa penyebab umum frame yang terputus, dan cara menghindarinya.
- Durasi frame adalah 16 md. File ini berisi JavaScript, penghitungan gaya, gambar, dan komposisi.
- Biaya pengecatan sangat mahal. Paint Storm adalah saat Anda mengulangi pekerjaan cat yang mahal tanpa perlu.
- Lapisan digunakan untuk meng-cache elemen yang dicat.
- Pengendali input (pemroses sentuh dan roda mouse) dapat menghentikan responsivitas; hindari jika memungkinkan. Jika Anda tidak dapat meminimalkannya.
#perfmatters: Aplikasi web seluler instan
Jalur Rendering Kritis mengacu pada apa pun (JavaScript, HTML, CSS, gambar) yang diperlukan browser sebelum dapat mulai merender halaman. Memprioritaskan pengiriman aset di jalur rendering penting adalah suatu keharusan, terutama bagi pengguna di perangkat yang dibatasi jaringan seperti smartphone di jaringan seluler. Bryan menjelaskan bagaimana tim di Google melalui proses identifikasi dan prioritas aset untuk situs PageSpeed Insights, yang awalnya memiliki waktu pemuatan 20 detik menjadi hanya lebih dari 1 detik.
- Menghapus JavaScript dan CSS yang memblokir rendering.
- Prioritaskan konten yang terlihat.
- Memuat skrip secara asinkron.
- Render tampilan awal sisi server sebagai HTML dan tambahkan dengan JavaScript.
- Minimalkan CSS yang memblokir rendering; hanya kirim gaya yang diperlukan untuk menampilkan area pandang awal, lalu kirim sisanya.
- URI data besar yang disisipkan dalam CSS pemblokir render berbahaya bagi performa render; URI tersebut memblokir resource saat URL gambar tidak memblokir.