Pengantar
Aplikasi web yang cepat adalah aplikasi web yang sukses. Tugas Anda sebagai developer belum selesai sampai Anda mengoptimalkan performa aplikasi yang sebenarnya dan yang dirasakan. Hal ini tidak hanya merupakan hal yang tepat untuk dilakukan guna memastikan pengguna Anda mendapatkan pengalaman yang luar biasa, tetapi ada alasan bisnis yang sangat praktis dan penting untuk melakukan pengoptimalan. Amazon mengukur penurunan penjualan sebesar 1% untuk setiap latensi situs 100 md, dan Google mengukur penurunan traffic sebesar 20% untuk setiap penundaan 0,5 detik (kutipan. Angka tersebut adalah angka nyata dengan implikasi nyata untuk bisnis dan aplikasi web Anda.
Kecepatan web sangat penting, bahkan Google memiliki seluruh upaya yang ditujukan untuk membuat web lebih cepat. Jika Anda memerlukan alasan lain untuk mengoptimalkan performa aplikasi, Google mengumumkan bahwa kecepatan halaman telah ditambahkan ke algoritma peringkatnya.
Ada banyak praktik terbaik yang dipublikasikan untuk mengoptimalkan performa aplikasi web Anda, termasuk dua buku bagus (High Performance Web Sites dan Even Faster Web Sites). Teknik di server (menerapkan header kontrol cache yang benar) dan di klien (memberikan atribut lebar dan tinggi gambar) digabungkan menjadi strategi menyeluruh untuk mengoptimalkan performa. Dengan begitu banyak tips dan trik, terkadang sulit untuk mengukur bagaimana semuanya dipetakan ke kehidupan nyata dan aplikasi web Anda yang sebenarnya.
Untungnya, Chrome DevTools (disertakan dalam setiap instance Chrome), menyediakan alat yang sangat baik untuk memeriksa aplikasi web Anda dan menawarkan rekomendasi yang disesuaikan untuk meningkatkan performa dan mengurangi latensi. Artikel ini akan membahas Panel Audit, yang cakupannya mirip dengan alat YSlow yang sangat populer, dan cara menggunakannya untuk mempercepat situs, mengurangi latensi, dan meningkatkan kepuasan pengguna.
Perhatikan bahwa alat Panel Audit saat ini hanya tersedia di Chrome, tetapi kami berharap browser WebKit lainnya pada akhirnya akan mengintegrasikannya.
Memulai
Untuk mengilustrasikan cara Panel Audit dapat merekomendasikan peningkatan performa aplikasi web, kita akan mengalihkan alat ini ke www.html5rocks.com milik kita sendiri. Kita akan menggunakan Panel Audit untuk membantu membuat situs kita lebih cepat.
Memulai DevTools semudah menggunakan ikon Chrome (kanan atas jendela Chrome) dan memilih Alat > Developer Tools.
Untuk informasi selengkapnya tentang cara memulai DevTools, baca dokumentasi resmi.
Panel Audit terletak di panel tombol alat utama. Anda akan melihat bahwa, setelah dipilih, Panel Audit belum menjalankan analisis aplikasi web Anda. Menjalankan semua heuristik dapat berjalan lambat, terutama untuk aplikasi web besar seperti Gmail, sehingga alat ini dinonaktifkan secara default.
Mari kita mulai dengan mengklik tombol Run, yang memuat ulang aplikasi web dengan heuristik performa diaktifkan. Setelah halaman dimuat ulang, Anda akan melihat daftar rekomendasi yang mirip dengan screenshot di bawah.
Anda akan melihat bahwa Panel Audit mengklasifikasikan saran berdasarkan tingkat keparahan, dengan saran yang paling serius ditandai dengan titik merah, dan saran dengan tingkat keparahan sedang ditandai dengan titik kuning. Kode warna ini membantu Anda memprioritaskan saran, dengan berfokus pada saran yang paling penting (dan memberikan manfaat terbesar) terlebih dahulu.
Angka dalam tanda kurung, setelah saran, adalah jumlah instance yang terdeteksi oleh Alat Audit. Misalnya, ada 12 instance "Manfaatkan cache browser". Hal ini memberi Anda gambaran tentang seberapa sering saran dapat diterapkan.
Strategi Kecepatan
Seperti yang disebutkan sebelumnya, ada banyak strategi yang terkenal dan telah diuji secara intensif untuk mengoptimalkan performa aplikasi web. Kami tidak akan membahas semuanya secara mendalam dalam artikel ini, tetapi Anda dapat dengan mudah menemukan informasi dan detail selengkapnya. Referensi bermanfaat untuk mempelajari lebih lanjut detail pengoptimalan aplikasi web mencakup Tutorial Mari kita buat web lebih cepat dan Latensi Skalabilitas Tinggi Ada di Mana-Mana dan Mengakibatkan Penurunan Penjualan.
Panel Audit mengelompokkan sarannya ke dalam dua kategori, Penggunaan Jaringan dan Performa Halaman Web.
Menurut Panel Audit, untuk meningkatkan Penggunaan Jaringan, kita harus:
- memanfaatkan penyimpanan dalam cache browser
- memanfaatkan penyimpanan cache proxy
- meminimalkan ukuran cookie
- menayangkan konten statis dari domain tanpa cookie
- menentukan dimensi gambar
Untuk meningkatkan performa Halaman Web, kita harus:
- mengoptimalkan urutan gaya dan skrip
- menghapus aturan CSS yang tidak digunakan
Mari kita lihat salah satu strategi yang dapat kita fokuskan untuk meningkatkan performa htmlrocks.com.
Memanfaatkan Penyimpanan ke Cache Browser
Misalnya, mari kita pelajari rekomendasi untuk memanfaatkan penyimpanan dalam cache browser terlebih dahulu. Apa maksudnya, secara khusus? Saat membuka opsi di UI, kita akan melihat detail berikut:
- Resource berikut tidak memiliki masa berlaku cache. Resource yang tidak menentukan masa berlaku mungkin tidak di-cache oleh browser.
- Aset yang dapat di-cache berikut memiliki masa berlaku yang singkat.
- Resource berikut secara eksplisit tidak dapat di-cache. Pertimbangkan untuk membuatnya dapat di-cache jika memungkinkan.
Menyimpan resource dalam cache adalah cara yang sangat baik untuk meningkatkan penggunaan jaringan, yang menghasilkan tagihan bandwidth yang lebih rendah bagi developer dan waktu respons yang lebih cepat bagi pengguna. Sayangnya, alat ini tidak memberi tahu Anda dengan tepat apa yang perlu dilakukan, jadi kita perlu mempelajari rekomendasinya sedikit dan menggunakan pengetahuan kita tentang pengoptimalan performa aplikasi web untuk menerapkan saran ini.
Menyimpan ke cache
Tanpa membahas cache HTTP secara mendalam, kita tentu dapat membahas beberapa dasar-dasarnya. Protokol HTTP menyertakan petunjuk penyimpanan dalam cache, yang memungkinkan server dan klien mengurangi jumlah data yang perlu ditransfer melalui jaringan. Misalnya, server dapat memberi tahu klien untuk menyimpan resource secara lokal selama jangka waktu tertentu, sehingga tidak perlu meminta resource lagi. Klien juga dapat menanyakan apakah resource server lebih baru dari resource yang disimpan secara lokal. Idealnya, jika resource bersifat statis, server harus memberi tahu klien untuk menyimpan resource secara lokal dan menghindari meminta resource dari server di masa mendatang. Seperti yang dapat Anda bayangkan, ada banyak sekali detail terkait caching HTTP, tetapi tema umumnya adalah "mengurangi jumlah data yang dikirim melalui jaringan dengan menyimpan resource secara lokal di klien".
Memperbaiki Resource yang Tidak Dapat Di-Cache
Mari kita lihat satu rekomendasi secara mendalam, dan pelajari cara menghubungkan rekomendasi Audit ke alat lain di dalam DevTools. Secara khusus, mari kita lihat cara memperbaiki "resource berikut secara eksplisit tidak dapat di-cache".
Karena penyimpanan dalam cache dilakukan melalui protokol HTTP, kita perlu melihat permintaan dan respons HTTP untuk resource http://www.html5rocks.com/. Cukup klik resource untuk melihat header dan detail permintaan serta respons asli.
Anda kemudian akan diarahkan ke panel Jaringan, Resource, atau Sumber (bergantung pada jenis resource yang diklik) dengan informasi lebih lanjut. Dalam hal ini, kita akan diarahkan ke panel Jaringan.
Kita mencoba mengonfirmasi bahwa server telah memberi tahu klien "jangan simpan halaman beranda html5rocks.com dalam cache". Untuk melakukannya, kita mengklik resource untuk melihat Header Respons, karena ini adalah header dan petunjuk yang dikirim oleh server.
Cache-Control.Benar saja, server mengirimkan header "Cache-Control: no-cache" ke klien. Seperti yang Anda bayangkan, hal ini akan memberi tahu klien untuk selalu meminta resource dan tidak meng-cache-nya secara lokal. Secara khusus, spesifikasi HTTP untuk "no-cache" berbunyi:
"Jika perintah no-cache tidak menentukan nama kolom, cache TIDAK BOLEH menggunakan respons untuk memenuhi permintaan berikutnya tanpa validasi ulang yang berhasil dengan server origin. Hal ini memungkinkan server origin mencegah penyimpanan dalam cache bahkan oleh cache yang telah dikonfigurasi untuk menampilkan respons yang sudah tidak berlaku untuk permintaan klien."
Inilah alasan Panel Audit merekomendasikan untuk mengaktifkan penyimpanan dalam cache, karena jika tidak, server dan klien akan mengirim informasi yang berpotensi berlebihan.
Setelah mengonfirmasi akar masalah dari Saran audit, bagaimana cara memperbaikinya? Dalam hal ini, solusinya melibatkan konfigurasi atau kode sisi server. Bergantung pada penyiapan, Anda dapat mengaktifkan penyimpanan dalam cache melalui konfigurasi server web atau melalui konfigurasi di framework aplikasi web. Secara khusus, Anda harus menyertakan header Expires dan Cache-Control: private dengan parameter max-age untuk resource apa pun yang ingin Anda simpan dalam cache.
Saran Hanya Saran
Perlu diingat bahwa Panel Audit merekomendasikan peningkatan berdasarkan heuristik umum. Alat ini menerapkan praktik terbaik, yang dipelajari selama bertahun-tahun, ke aplikasi web tertentu Anda. Sebagian besar waktu, rekomendasi ini tepat dan harus dipertimbangkan.
Namun, ada beberapa kasus saat rekomendasi mungkin benar, tetapi mungkin tidak benar-benar menghasilkan peningkatan. Misalnya, jika halaman Anda hanya memiliki satu gambar besar, Panel Audit akan merekomendasikan untuk menambahkan atribut lebar dan tinggi ke tag <img> (sehingga mesin rendering mengetahui dimensi gambar tanpa harus mendownload dan memeriksa gambar). Meskipun umumnya merupakan saran yang bagus, hal ini tidak akan banyak membantu jika gambar adalah satu-satunya elemen di halaman.
Jangan lupa untuk menerapkan saran ini setelah Anda memahaminya. Selain itu, jangan lupa untuk mengukur performa sebelum dan sesudah perubahan, untuk memastikan benar-benar ada peningkatan.
Ringkasan
Panel Audit adalah alat yang sangat baik dan mudah digunakan yang akan dengan cepat menunjukkan cara mengoptimalkan performa aplikasi web Anda. Kecepatan adalah atribut aplikasi web yang penting, karena banyak perusahaan telah menemukan korelasi langsung antara performa dan pendapatan atau aktivitas. Mengoptimalkan performa aplikasi bukan hanya hal yang tepat untuk dilakukan bagi pengguna, tetapi juga hal yang tepat untuk dilakukan bagi laba bisnis Anda.