Pengantar
Aplikasi web yang cepat adalah aplikasi web yang sukses. Tugas Anda sebagai developer tidak akan selesai sampai Anda mengoptimalkan performa aplikasi yang sebenarnya dan yang dirasakan. Hal ini bukan hanya merupakan hal yang benar untuk dilakukan untuk memastikan pengguna mendapatkan pengalaman terbaik, tetapi ada juga alasan bisnis yang sangat praktis dan penting yang perlu dioptimalkan. Amazon mengukur penurunan penjualan sebesar 1% untuk setiap 100 md latensi situs, dan Google mengukur penurunan traffic sebesar 20% untuk setiap penundaan 0,5 detik (kutipan. Data tersebut adalah angka riil dengan implikasi nyata bagi bisnis dan aplikasi web Anda.
Kecepatan web sangat penting. Google bahkan berupaya keras untuk membuat web lebih cepat. Jika Anda memerlukan alasan lain untuk mengoptimalkan performa aplikasi, Google yang mengumumkan bahwa kecepatan halaman telah ditambahkan ke algoritme peringkatnya.
Ada banyak praktik terbaik yang dipublikasikan untuk mengoptimalkan performa aplikasi web Anda, termasuk dua buku hebat (Situs Web Berperforma Tinggi dan Situs Web yang Lebih Cepat). Teknik pada server (menerapkan header kontrol cache yang benar) dan pada 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 semua itu dipetakan ke kehidupan nyata dan aplikasi web Anda yang sebenarnya.
Untungnya, Chrome DevTools (disertakan di setiap instance Chrome), menyediakan alat terbaik yang memeriksa aplikasi web Anda dan menawarkan rekomendasi yang disesuaikan untuk meningkatkan performa dan mengurangi latensi. Artikel ini akan membahas Panel Audit, yang cakupannya serupa dengan alat YSlow yang sangat populer, dan cara menggunakannya untuk mempercepat situs, mengurangi latensi, dan meningkatkan kepuasan pengguna.
Perhatikan, alat Audits Panel saat ini hanya tersedia di Chrome, tetapi kami berharap browser WebKit lain nantinya akan mengintegrasikannya.
Memulai
Untuk menggambarkan bagaimana Panel Audit dapat merekomendasikan peningkatan performa aplikasi web, kami akan menyesuaikan alat ini dengan www.html5rocks.com kami sendiri. Kami akan menggunakan Panel Audit untuk membantu membuat situs kami lebih cepat.
Memulai DevTools semudah menggunakan ikon Chrome (kanan atas jendela Chrome) dan memilih Tools > Developer Tools.
Untuk informasi selengkapnya tentang cara memulai DevTools, baca dokumentasi resmi.
Panel Audits terletak di panel tombol alat utama. Anda akan melihat bahwa, setelah dipilih, Panel Audits belum menjalankan analisisnya terhadap aplikasi web Anda. Menjalankan semua heuristik dapat menjadi lambat, terutama untuk aplikasi web besar seperti Gmail, sehingga alat ini dinonaktifkan secara default.
Mari kita pelajari lebih dalam dengan mengklik tombol Run, yang memuat ulang aplikasi web dengan heuristik performa yang diaktifkan. Setelah halaman dimuat ulang, Anda akan melihat daftar rekomendasi yang mirip dengan screenshot di bawah.
Anda akan melihat bahwa Panel Audits mengklasifikasikan saran berdasarkan tingkat keparahan, dengan yang paling parah ditandai dengan titik merah, dan saran tingkat keparahan sedang ditandai dengan titik kuning. Kode warna ini membantu Anda memprioritaskan saran, dengan fokus pada hal yang paling penting (dan keuntungan terbesar) terlebih dahulu.
Angka dalam tanda kurung, sesuai saran, menunjukkan jumlah instance yang terdeteksi Alat Audit. Misalnya, ada 12 instance "Manfaatkan cache browser". Dengan begitu, Anda akan mengetahui seberapa sering saran tersebut dapat diterapkan.
Strategi Kecepatan
Seperti disebutkan sebelumnya, ada banyak strategi yang terkenal dan teruji ketat untuk mengoptimalkan performa aplikasi web. Kami tidak akan membahas semuanya secara mendalam di artikel ini, tetapi menemukan informasi dan detail lebih lanjut sangatlah mudah. Referensi yang berguna untuk mempelajari detail pengoptimalan aplikasi web lebih lanjut mencakup Mari kita jadikan web lebih cepat dan Latensi Skalabilitas Tinggi Ada di Mana Saja dan Membebani Anda Penjualan.
Panel Audit mengelompokkan sarannya ke dalam dua kategori, Penggunaan Jaringan dan Performa Halaman Web.
Menurut Panel Audits, untuk meningkatkan Pemanfaatan Jaringan, kita harus:
- memanfaatkan cache browser
- memanfaatkan cache proxy
- minimalkan 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 kinerja htmlRock.com.
Memanfaatkan Penyimpanan ke Cache Browser
Misalnya, mari pelajari lebih dalam rekomendasi untuk memanfaatkan cache browser. Secara khusus, apa artinya? Membuka opsi di UI, kita akan melihat detail berikut:
- Resource berikut tidak memiliki masa berlaku cache. Resource yang tidak menetapkan masa berlaku mungkin tidak di-cache oleh browser.
- Resource yang dapat disimpan dalam cache berikut memiliki masa segar yang singkat.
- Resource berikut secara eksplisit tidak dapat disimpan dalam cache. Pertimbangkan untuk membuatnya agar dapat disimpan dalam cache jika memungkinkan.
Menyimpan resource ke dalam cache adalah cara terbaik untuk meningkatkan pemanfaatan jaringan, yang menyebabkan tagihan bandwidth yang lebih rendah bagi developer dan waktu respons yang lebih cepat bagi pengguna. Sayangnya, alat ini tidak memberi tahu dengan tepat apa yang perlu Anda lakukan, jadi kita perlu membahas rekomendasi sedikit dan menggunakan pengetahuan kita tentang pengoptimalan performa aplikasi web untuk menerapkan saran ini.
Menyimpan data ke dalam cache
Tanpa masuk ke cache HTTP, kita pasti dapat membahas beberapa hal dasar. Protokol HTTP menyertakan petunjuk penyimpanan dalam cache, yang memungkinkan server dan klien mengurangi jumlah data yang perlu ditransfer melalui kabel. Misalnya, server dapat memberi tahu klien untuk menyimpan sumber daya secara lokal selama jangka waktu tertentu, sehingga menghilangkan kebutuhan untuk meminta sumber daya lagi. Klien juga dapat menanyakan apakah resource server lebih baru daripada resource yang disimpan secara lokal. Idealnya, jika sumber daya bersifat statis, server harus memberi tahu klien untuk menyimpan sumber daya secara lokal dan menghindari permintaan sumber daya ke server di waktu mendatang. Ada, seperti yang dapat Anda bayangkan, ada sejumlah detail yang luar biasa mengenai cache HTTP, tetapi tema umumnya adalah "kurangi jumlah data yang dikirim melalui kabel dengan menyimpan sumber daya secara lokal di klien".
Memperbaiki Sumber Daya 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 disimpan dalam cache".
Karena proses {i>caching<i} dilakukan melalui protokol HTTP, kita perlu melihat permintaan dan respons HTTP untuk sumber daya http://www.html5Rock.com/. Cukup klik resource untuk melihat header dan detail permintaan serta respons asli.
Anda kemudian diarahkan ke panel Jaringan, Sumber Daya, atau Sumber (bergantung pada jenis sumber daya yang diklik) dengan informasi lebih lanjut. Dalam hal ini kita akan diarahkan ke panel Jaringan.
Kami berusaha untuk memberikan konfirmasi bahwa server telah memberi tahu klien "jangan meng-cache beranda html5Rock.com". Untuk melakukannya, kita klik sumber daya untuk melihat {i>Header<i} Respons, karena ini adalah {i>header<i} dan instruksi yang dikirim oleh server.
Cache-Control.Tentu saja, server mengirim header "Cache-Control: no-cache" ke klien. Cara ini, seperti yang akan Anda bayangkan, memberi tahu klien untuk selalu meminta sumber daya dan tidak meng-cache-nya secara lokal. Secara khusus, spesifikasi HTTP untuk "no-cache" bertuliskan:
"Jika perintah no-cache tidak menentukan nama kolom, cache TIDAK BOLEH menggunakan respons untuk memenuhi permintaan berikutnya tanpa validasi ulang yang berhasil dengan server asal. Hal ini memungkinkan server origin mencegah penyimpanan cache bahkan oleh cache yang telah dikonfigurasi untuk menampilkan respons lama terhadap permintaan klien."
Inilah alasan Panel Audits merekomendasikan pengaktifan cache, karena jika tidak, server dan klien akan mengirimkan informasi yang berpotensi redundan.
Setelah mengonfirmasi penyebab utama saran Audit, bagaimana cara memperbaikinya? Dalam hal ini, solusinya melibatkan konfigurasi atau kode sisi server. Bergantung pada penyiapannya, Anda dapat mengaktifkan penyimpanan cache melalui konfigurasi server web atau melalui konfigurasi dalam framework aplikasi web. Khususnya, Anda harus menyertakan header Expires dan Cache-Control: private dengan parameter max-age untuk setiap sumber daya yang ingin Anda {i>cache<i}.
Saran Hanya Sekaligus, Saran
Ingatlah bahwa Panel Audit merekomendasikan peningkatan berdasarkan heuristik generik. Google Analytics menerapkan praktik terbaik, yang dipelajari selama bertahun-tahun, ke aplikasi web tertentu. Sering kali, rekomendasi ini sudah tepat dan harus diperhatikan.
Namun, ada beberapa kasus di mana rekomendasi mungkin benar tetapi sebenarnya tidak menghasilkan peningkatan apa pun. Misalnya, jika halaman Anda hanya memiliki satu gambar besar, Panel Audits akan merekomendasikan penambahan atribut lebar dan tinggi ke tag <img> (sehingga mesin rendering mengetahui dimensi gambar tanpa harus mendownload dan memeriksa gambar). Meskipun ini merupakan saran yang bagus, tidak akan banyak membantu jika gambar adalah satu-satunya elemen pada halaman.
Ingatlah untuk menerapkan saran ini setelah Anda memahaminya. Dan jangan lupa untuk mengukur performa sebelum dan sesudah perubahan, untuk memastikan adanya peningkatan.
Ringkasan
Panel Audit adalah alat yang sangat baik dan mudah digunakan yang akan menunjukkan dengan cepat 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 benar untuk dilakukan bagi pengguna Anda, tetapi juga merupakan hal yang tepat untuk dilakukan untuk keuntungan bisnis Anda.