#perfmatters: Teknik peralatan untuk ninja performa
Mengetahui seluk-beluk alat pengembangan adalah kunci untuk menjadi pakar performa. Colt melangkah melalui tiga pilar performa: jaringan, komputasi, dan render, dengan memberikan tur tentang masalah utama di setiap area serta alat yang tersedia untuk menemukan dan memberantasnya.
- Anda kini dapat membuat profil Chrome di Android dengan DevTools yang Anda kenal dan sukai dari desktop.
- Loop iterasi untuk pekerjaan berbasis performa adalah: mengumpulkan data, memperoleh insight, dan mengambil tindakan.
- Prioritaskan aset yang ada di jalur rendering penting untuk halaman Anda.
- Hindari mengecat; biayanya sangat mahal.
- Hindari churn memori dan eksekusi kode selama waktu penting di aplikasi Anda.
#perfmatters: Mengoptimalkan performa jaringan
Jaringan dan latensi biasanya menyumbang 70% dari total waktu pemuatan halaman situs. Itu persentase yang besar, tetapi juga berarti bahwa setiap peningkatan yang Anda lakukan di sana akan menuai manfaat besar bagi pengguna. Dalam diskusi ini, Ilya memaparkan perubahan terbaru di Chrome yang akan meningkatkan waktu pemuatan, serta beberapa perubahan yang dapat Anda buat di lingkungan Anda untuk membantu menjaga beban jaringan tetap minimum.
- Chrome M27 memiliki penjadwal resource baru yang ditingkatkan.
- Chrome M28 membuat situs SPDY (bahkan) lebih cepat.
- Cache sederhana Chrome telah diperbaiki.
- SPDY / HTTP/2.0 menawarkan peningkatan kecepatan transfer yang sangat besar. Ada modul SPDY matang yang tersedia untuk nginx, Apache, dan Jetty (sebut saja tiga saja).
- QUIC adalah protokol baru dan eksperimental yang dibuat di atas UDP; masih sangat awal, tetapi bagaimanapun caranya, pengguna akan menang.
#perfmatters: tata letak dan rendering 60 fps
Mencapai 60 fps dalam project Anda berhubungan langsung dengan engagement pengguna dan sangat penting untuk kesuksesannya. Dalam diskusi ini, Nat dan Tom berbicara tentang pipeline rendering Chrome, beberapa penyebab umum frame terlepas dan cara menghindarinya.
- Panjang frame adalah 16 md. Codelab ini berisi JavaScript, penghitungan gaya, penggambaran, dan pengomposisian.
- Pengecatan extremely mahal. Paint Storm adalah tempat Anda mengulangi pekerjaan cat yang mahal.
- {i>Layer<i} digunakan untuk meng-{i>cache<i} elemen yang dilukis.
- Pengendali input (pemroses sentuh dan roda mouse) dapat menghentikan responsivitas; hindari hal ini sebisa mungkin. Anda tidak dapat meminimalkannya.
#perfmatters: Aplikasi web seluler instan
Jalur Rendering Penting mengacu pada apa pun (JavaScript, HTML, CSS, gambar) yang diperlukan browser sebelum dapat mulai menggambar halaman. Prioritas pengiriman aset di jalur rendering penting adalah suatu keharusan, terutama bagi pengguna dengan perangkat dengan jaringan terbatas seperti smartphone pada jaringan seluler. Bryan berbicara tentang bagaimana tim di Google menjalani proses mengidentifikasi dan memprioritaskan aset untuk situs web PageSpeed Insights, yang membuatnya hanya membutuhkan waktu pemuatan 20 detik menjadi lebih dari 1 detik!
- Hilangkan JavaScript dan CSS yang memblokir perenderan.
- Prioritaskan konten yang terlihat.
- Muat skrip secara asinkron.
- Render tampilan awal sisi server sebagai HTML dan tingkatkan dengan JavaScript.
- Minimalkan CSS yang memblokir perenderan; hanya kirimkan gaya yang diperlukan untuk menampilkan area pandang awal, lalu tampilkan sisanya.
- URI data besar yang disisipkan dalam CSS yang memblokir rendering berbahaya bagi performa render; URI ini memblokir resource yang tidak memblokir URL gambar.