Kecepatan menjadi salah satu dari empat prinsip utama Chrome, sejak pertama kali diluncurkan sepuluh tahun yang lalu. Kami selalu ingin menyediakan semua yang dibutuhkan developer web untuk memberikan pengalaman web yang menarik dan cepat kepada pengguna. Pada ulang tahun Chrome yang ke-10, kami berpikir, akan menyenangkan melihat apa yang telah kami lakukan untuk meningkatkan kecepatan selama bertahun-tahun ini dan apa yang akan kami lakukan berikutnya.

Banyak komponen dalam browser berkontribusi terhadap kecepatan

V8 adalah mesin WebAssembly dan JavaScript Chrome. Dengan penggunaan JavaScript yang semakin banyak pada halaman web, mesin yang cepat untuk menanganinya merupakan elemen dasar yang penting. Selama bertahun-tahun, kami mengerjakan pipeline eksekusi JavaScript baru untuk V8, meluncurkan Ignition (interpreter baru) dan TurboFan (compiler optimalisasi). Ini memungkinkan kami meningkatkan kinerja pada benchmark Speedometer hingga 5-10%. Streaming skrip memungkinkan kami mengurai JavaScript pada thread latar belakang segera setelah ia mulai mendownload, mempercepat pemuatan halaman hingga 10%. Kami kemudian menambahkan kompilasi latar belakang sehingga mengurangi waktu kompilasi thread-utama hingga 20%.

Pekerjaan kami di project Orinoco memungkinkan pengumpulan sampah secara bersamaan, mengosongkan thread utama dan mengurangi jank. Seiring waktu, kami juga menggeser fokus pada kinerja JavaScript yang sesungguhnya, membantu kami menggandakan kinerja waktu proses React.js dan meningkatkan kinerja library seperti Vue.js, Preact, dan Angular hingga 40%. Pengumpulan sampah secara paralel, bersamaan, dan bertahap mengurangi pengumpulan sampah yang disebabkan jank sebesar 100× sejak awal V8 dijalankan. Kami juga mengimplementasikan WebAssembly, yang memungkinkan developer menjalankan kode non-JavaScript di web dengan kinerja yang terprediksi, dan meluncurkan compiler dasar Liftoff untuk memastikan waktu startup yang cepat dari aplikasi WASM. Komponen-komponen baru ini adalah yang terbaru dalam upaya 10 tahun yang telah meningkatkan kinerja rilis-ke-rilis V8 sebesar 20x lipat selama tahun-tahun tersebut.

Skor V8 Bench untuk berbagai rilis Chrome selama beberapa tahun. V8 Bench adalah pendahulu dari benchmark Octane yang lama. Kami menggunakannya untuk bagan ini karena tidak seperti Octane, ia bisa berjalan di semua versi Chrome, termasuk Chrome Beta awal.


Chrome juga memainkan peran kunci dalam membantu mengembangkan protokol jaringan dan layer transpor melalui SPDY, HTTP/2 dan QUIC. SPDY bertujuan untuk mengatasi keterbatasan HTTP/1.1 dan menjadi dasar dari protokol HTTP/2, yang sekarang didukung oleh semua browser modern. Secara paralel, tim telah secara aktif melakukan iterasi pada QUIC, yang bertujuan untuk meningkatkan latensi dan pengalaman pengguna dan sekarang memiliki karya IETF aktif di belakangnya. Keunggulan QUIC terlihat nyata untuk layanan video seperti YouTube. Pengguna melaporkan 30% lebih sedikit rebuffer saat menonton video melalui QUIC.

Yang berikutnya adalah pipeline rendering Chrome. Ini bertanggung jawab untuk memastikan halaman responsif terhadap pengguna dan ditampilkan dengan kecepatan 60 bingkai per detik (fps). Untuk menampilkan konten pada 60fps, Chrome memiliki waktu 16ms untuk merender setiap bingkai. Ini mencakup eksekusi JavaScript, gaya, layout, warna dan mendorong piksel ke layar pengguna. Dari 16ms ini, semakin sedikit waktu yang digunakan Chrome, semakin besar kemungkinan developer web memuaskan penggunanya. Penyempurnaan pada pipeline rendering ini termasukmengoptimalisasi bagaimana kami mengidentifikasi elemen apa di halaman yang harus digambar ulang dan pelacakan yang lebih baik secara visual dari perangkat yang tidak tumpang tindih. Ini mengurangi waktu untuk menggambar bingkai baru ke layar hingga 35%.

Pada tahun 2015, model kinerja berorientasi-pengguna yang disebut RAIL diperkenalkan oleh tim Chrome. Kami baru saja mengupdatenya.

Bagaimana dengan konsumsi memori? Antara Chrome 63 dan 66, kami berhasil mengamati peningkatan ~20-30% dalam penggunaan memori proses renderer. Sekarang, kami berharap bisa terus mengeksplorasi cara-cara mem-build di sini karena isolasi-situs telah hadir. Ignition dan TurboFan mengurangi jejak memori keseluruhan V8, merampingkannya hingga 5-10% pada semua perangkat dan platform yang didukung oleh V8. Tahun ini, beberapa pencari jejak juga menemukan kebocoran memori yang memengaruhi 7% situs di web, yang kini telah kami perbaiki semuanya. Banyak komponen berkontribusi terhadap kecepatan Chrome termasuk DOM, CSS, dan sistem penyimpanan seperti IndexedDB. Untuk mempelajari lebih lanjut tentang peningkatan kinerja kami, terus ikuti Blog Chromium.

Memberikan developer web kemampuan lebih besar untuk mengukur dan mengoptimalkan halaman web mereka

Memahami di mana harus memulai perbaikan situs Anda bisa menjadi proses yang membosankan. Untuk membantu, kami memeriksa beberapa fitur untuk memahami sinyal lab dan pengalaman sesungguhnya yang dirasakan oleh pengguna Anda. Selama bertahun-tahun, panel Performance Chrome DevTools menjadi cara ampuh untuk memvisualisasikan perincian secara mendetail tentang bagaimana halaman web ditampilkan dalam pengaturan lab. Untuk terus menurunkan friksi dalam menemukan peluang kinerja yang dimiliki situs, kami kemudian mengerjakan Lighthouse - fitur untuk menganalisis kualitas situs web, memberi Anda pengukuran yang jelas tentang kinerja situs dan panduan khusus untuk meningkatkan pengalaman pengguna. Lighthouse bisa langsung diakses dari bagian dalam panel Audits DevTools, dijalankan dari baris perintah, atau terintegrasi dengan produk pengembangan lainnya seperti WebPageTest.
Lighthouse berjalan di panel Audits Chrome DevTools




Untuk melengkapi data lab yang disediakan Lighthouse, kami merilis Chrome User Experience Report untuk membantu developer mendapatkan akses ke metrik kolom untuk pengalaman yang dirasakan pengguna di dunia nyata, seperti First Contentful Paint dan First Input Delay. Sekarang, developer bisa mem-build laporan kinerja situs khusus mereka sendiri dan melacak perkembangan jutaan sumber menggunakan Dasbor CrUX.

Kami juga memperkenalkan sejumlah kemampuan Platform Web untuk membantu developer mengoptimalkan pemuatan situs mereka. Kami meluncurkan Resource Hints dan <link rel=preload> sehingga memungkinkan developer memberi tahu browser tentang sumber daya apa yang penting untuk dimuat sejak awal. Chrome adalah salah satu browser pertama yang mengimplementasikan dukungan untuk pendekatan penghemat-byte seperti Brotli untuk kompresi, WOFF2 untuk font web yang lebih kecil dan dukungan WebP untuk gambar.

Kami senang melihat semakin banyak browser yang mendukung fitur ini dari waktu ke waktu. Chrome mengimplementasikan Service Worker, mengaktifkan caching offline & jaringan yang andal untuk kunjungan berulang ke halaman. Kami sangat senang melihat dukungan browser modern yang luas untuk fitur ini.




Bahkan, Google Penelusuran sekarang menggunakan Service Worker dan pramuat navigasi untuk caching oportunistik pada penelusuran berulang. Hal ini menyebabkan peningkatan 2x lipat dalam waktu pemuatan halaman untuk kunjungan berulang.

Saat kami melihat ke masa depan, kami juga bersemangat tentang potensi standar yang muncul seperti pemuatan untuk gambar & iframe selalu lamban, dan format gambar seperti AV1 harus membantu menyampaikan konten kepada pengguna secara efisien.

Nikmati lebih banyak konten web di paket data Anda dengan Chrome




Selama 10 tahun terakhir, ukuran halaman web semakin meningkat, tetapi bagi banyak pengguna yang online untuk pertama kalinya, data bisa sangat mahal atau sangat lambat. Untuk membantu, Chrome merilis fitur sadar-data selama bertahun-tahun seperti Penghemat Data Chrome. Penghemat Data secara cerdas mengoptimalkan halaman, menghemat konsumsi data hingga 92%.

Ke depannya, kami akan mengeksplorasi cara-cara baru untuk membantu Anda menghemat data. Bagi pengguna yang memiliki koneksi paling lambat, kami telah mengerjakan Chrome untuk Android, yang memungkinkan optimalisasi halaman yang lebih cerdas untuk menampilkan konten penting lebih dahulu. Transformasi halaman ini dimuat jauh lebih cepat daripada halaman penuh, dan kami terus meningkatkan keakuratan, cakupan, dan kinerjanya.

Kami juga bereksperimen dengan menempatkan pagar pengaman untuk pengguna yang data atau jaringannya dibatasi. Misalnya, kami melakukan penjelajahan dalam menghadirkan pemuatan untuk gambar & iframe selalu lamban ke Chrome, serta memberikan opsi kepada pengguna untuk menghentikan permintaan tambahan dari halaman saat ia menggunakan banyak data

Kami baru memulai...

Bersama-sama, perubahan ini membantu developer dan bisnis mengirimkan konten yang bermanfaat kepada pengguna mereka dengan lebih cepat. Kami tahu masih ada pekerjaan yang harus diselesaikan. Kami di sini untuk menghadirkan peningkatan kinerja pemuatan halaman untuk 10 tahun berikutnya!


Ditulis oleh Addy Osmani, JavaScript Janitor