Get best of the week

Apa itu kinerja aplikasi web?

gambar

Beberapa aplikasi memuat dengan cepat, beberapa lambat, tetapi karena apa ini terjadi? Apakah kecepatan memuat halaman adalah satu-satunya ukuran kinerja aplikasi?

Akan sangat sulit untuk menjawab ini dan banyak pertanyaan lain dalam satu artikel. Jadi saya mengumpulkan katalog tautan dan membaginya menjadi beberapa kategori. Tetapi sebagai permulaan - sedikit teori tentang apa itu kinerja dan kapan Anda harus memikirkannya.

Ketika masalah kinerja muncul


Anda dapat mengembangkan aplikasi web selama bertahun-tahun dan hampir tidak memiliki masalah dengan kinerja aplikasi.

Tetapi, kemungkinan besar, masalah muncul dalam situasi berikut:

  1. Data besar muncul (Anda perlu membuat daftar besar atau ratusan ribu titik di peta).
  2. Aplikasi menjadi besar (ratusan skrip pengguna, puluhan layar, formulir, dan sebagainya).
  3. Sejumlah besar pelanggan dari berbagai daerah (misalnya, 300.000+ pelanggan per hari dari seluruh dunia).
  4. Persaingan yang tinggi di pasar (pasti, pengguna akan lebih memilih aplikasi pesaing Anda jika bekerja lebih cepat).
  5. Diperlukan versi seluler (browser pada perangkat seluler masih mengalami masalah kinerja).

Terdiri dari apa kinerja


Secara global, masalah kinerja aplikasi web dapat dibagi menjadi dua kategori: transfer data dan runtime.

  • Transfer data berarti mengunduh sumber daya apa pun yang diperlukan agar aplikasi berfungsi.
  • Di bawah runtime - operasi aplikasi, rendering, dan pemrosesan input pengguna.

Masing-masing kategori ini mengandung banyak nuansa yang sering tidak kita pikirkan, tetapi yang membedakan aplikasi berkualitas tinggi dari yang berkualitas rendah.

Berikut adalah metrik kinerja aplikasi web paling populer (semua harus minimal):

Pemuatan halaman



Runtime


  • Waktu respons input pengguna.
  • Antarmuka redraw waktu.

Meskipun TTFB dan TTI keduanya metrik untuk kinerja pemuatan halaman, masalah terkait runtime juga dapat memengaruhi mereka.

Cara mencari dan menganalisis masalah kinerja


Toolkit utama dalam gudang pengembang adalah Chrome DevTools atau alat serupa, seperti alat pengembang Firebug / Firefox .
Artikel terpisah dapat ditulis tentang mereka, tetapi kami akan membatasi diri pada poin yang paling penting.

Jaringan - memungkinkan Anda untuk menganalisis secara rinci sumber daya mana yang dimuat pada halaman, dari sumber daya mana, dengan kecepatan apa dan seterusnya. Alat ini sering digunakan untuk menganalisis kecepatan pemuatan halaman secara manual.

Kinerja - di tab ini, Anda dapat mengaktifkan rekaman panggilan eksekusi kode, operasi input / output, dan lainnya. Selain itu, perekaman dapat dilakukan dengan emulasi jaringan pelambatan dan CPU. Misalnya, periksa aplikasi pada perangkat yang lemah.

Mercu suar - Alat yang tertanam dalam Chrome DevTools yang memulai pemuatan halaman, mencatat metrik, menganalisisnya, dan bahkan memberikan rekomendasi untuk meningkatkan kinerja.

Bagaimana mengukur / memonitor kinerja


Alat untuk memantau kinerja aplikasi web dapat dibagi menjadi dua kategori: yang melakukan pengukuran sintetis dan yang merekam data kinerja dari pengguna nyata.


Selain itu, ada alat-alat seperti Webpack-bundle-analyzer yang tidak dapat ditugaskan untuk dua kategori ini. Tetapi dengan bantuan mereka, Anda dapat mengukur beberapa parameter yang memengaruhi kinerja, seperti ukuran bundel.

Transfer data


Koneksi TCP, pencarian DNS - Anda dapat mempercepat pemuatan halaman meskipun konfigurasi koneksi yang benar ke server. Khususnya, jika Anda menggunakan DNS pre-fetching atau bahkan alamat IP alih-alih nama domain.

TTFB (Waktu ke Byte Pertama) . Waktu untuk mendapatkan byte pertama adalah metrik yang penting. Untuk mempercepatnya, Anda harus mencoba menerapkan logika sesedikit mungkin di server sebelum mengeluarkan index.html.

HTTP1 vs HTTP2 - HTTP2 dapat sangat mempercepat pemuatan halaman dengan header multiplexing atau kompresi. Selain itu, protokol baru (relatif) membuka banyak fitur, seperti server push.

Pecahan domain. Jika Anda perlu mengirim banyak header HTTP untuk permintaan API, tetapi tidak untuk permintaan statis, maka lebih baik untuk memisahkannya ke domain yang berbeda.

CDN (jaringan pengiriman konten) akan membantu mempercepat pemuatan untuk klien yang didistribusikan secara geografis.

Prioritas sumber daya (preload, prefetch, preconnect) adalah percepatan pemuatan halaman karena strategi pemuatan sumber daya yang benar. Peramban memungkinkan Anda menetapkan prioritas untuk berbagai jenis sumber daya dan mengunduh lebih awal apa yang penting untuk perenderan pertama.

Kompresi statis: GZIP dan Brotli . Brotli adalah algoritma kompresi yang akan mengurangi bobot statis dan, karenanya, meningkatkan kecepatan pengunduhan. Dan ini adalah solusi hebat dari rekan saya.

Webp vs Png & Jpg. Webp adalah alternatif yang bagus untuk Png. Selain bobot gambar yang lebih rendah, kualitas Webp tidak kalah. Sekarang format ini mendukung sekitar 78% browser . Tetapi bahkan jika Anda membutuhkan dukungan 100%, Anda dapat menerapkan fallback pada Png menggunakan tag gambar .

Runtime


Tugas, Microtasks . Dengan memprioritaskan eksekusi kode dengan benar, Anda dapat menghilangkan jalur dan mempercepat respons terhadap input pengguna.

requestIdleCallback adalah fungsi yang berguna yang memungkinkan Anda untuk mengeksekusi kode di waktu luang Anda di akhir frame (bingkai / centang) atau ketika pengguna tidak aktif. Ini akan membantu menyingkirkan semua lag yang sama dan "membeku".

requestAnimationFrame memungkinkan Anda merencanakan animasi dengan benar dan memaksimalkan peluang rendering 60 frame per detik.

ES2015 vs ES5 . ES2015 menyediakan banyak fitur yang lebih produktif daripada ES5.

Manipulasi dom. Manipulasi dengan DOM mahal, Anda harus melakukannya dengan hati-hati dan bermakna. Misalnya, jangan panggil querySelector () dalam satu lingkaran jika ini dapat dilakukan dengan satu panggilan.

Berikan sumber daya pemblokiran . Memuat beberapa sumber dapat memblokir perenderan. Untuk menghindari ini, Anda perlu menggunakan atribut penangguhan, async, preload.

60 FPS oleh pointer-events: tidak ada peretas hebat yang dapat digunakan untuk mencapai 60 FPS dengan menggulir halaman. Ini bekerja sangat sederhana: semua pengendali acara mouse dinonaktifkan selama pengguliran.

Pendengar acara pasif- cara untuk membuat halaman gulir dengan lancar di layar sentuh. Singkatnya, browser memiliki pemrosesan aliran yang tidak sempurna untuk pendengar acara sentuh. Jika Anda mengatur parameter pasif saat membuat event handler, browser akan memahami dengan jelas bahwa handler tidak akan membatalkan scrolling dan render, tanpa menunggu sampai selesai.

Gulir virtual adalah cara cerdas untuk tidak membuat daftar besar, tetapi menghasilkannya saat menggulir. Memungkinkan Anda menggunakan lebih sedikit memori dan memfasilitasi daftar gulir.

Hindari Layout Kompleks yang besar dan Meronta-ronta Layout . Layout / reflow adalah operasi mahal yang melakukan banyak perhitungan ulang parameter rendering. Untuk menghindari seringnya menelepon, Anda perlu membangun tata letak dan memanipulasi DOM dengan benar.

Apa yang memaksa tata letak / reflow - lembar cheat di mana Anda dapat menemukan daftar fungsi dan parameter yang berfungsi dengan yang menyebabkan tata letak / reflow.

Majelis


Tree shaking - hapus kode yang tidak digunakan dari bundel dan percepat pemuatan halaman.

Pemecahan kode - membagi kode menjadi potongan-potongan, Anda dapat mengoptimalkan beban pertama dan membuka kemampuan untuk mengunduh bagian dari kode "malas".

Kebingungan dapat mengurangi ukuran bundel dan bahkan membantu sedikit untuk menyembunyikan kode Anda dari mencongkel mata.

Arsitektur


Perenderan sisi server mungkin merupakan cara paling terkenal untuk membuat SPA merender segera saat boot pertama. Ini merupakan persyaratan penting untuk beberapa mesin pencari (dan tidak hanya).

Malas memuat gambar dan video ( + asli ) - solusi asli yang dirancang untuk meningkatkan metrik rendering pertama karena "malas" memuat gambar dan video.

Modul / rute pemuatan malas adalah alat yang ditemukan di semua kerangka kerja populer dan perpustakaan. Memungkinkan Anda "dengan malas" memuat keping fungsionalitas aplikasi.

Caching file dengan petugas layanan memungkinkan Anda untuk men-cache file di browser dan tidak mengunduhnya setiap waktu dari server. Mungkin satu-satunya cara untuk melakukan mode offline di aplikasi browser.

Caching HTTP - Menggunakan beberapa header HTTP, Anda dapat sangat meningkatkan kecepatan pemuatan halaman dan mengurangi beban server.

More articles:


All Articles