Clever Geek Handbook

Mengapa kinerja web sistem back-end penting dan membutuhkan pengoptimalan?

Suatu hari saya melakukan percakapan yang menarik dengan tim pendukung Departemen Perdagangan Internasional (DIT) . Mereka ingin meningkatkan kinerja salah satu aplikasi web mereka. Berbicara seperti ini adalah yang paling saya sukai di posisi saya saat ini. Saya berbicara tentang topik yang menarik minat saya, bertemu orang baru, memberi tahu mereka tentang peluang yang mungkin tidak mereka ketahui, misalnya, cara meningkatkan UX aplikasi.



Sejujurnya, saya sedikit kesal ketika diberi tahu bahwa layanan ini untuk penggunaan internal dan bukan untuk umum. Ini berarti alat goto saya yang biasa untuk mengevaluasi kinerja web tidak tersedia. Yaitu:





Ini memberi saya gambaran: bagaimana Anda bisa menguji layanan dan produk internal? Pada artikel ini saya akan mencoba mencari tahu.



Kondisi terpenting untuk sistem internal yang cepat



Seperti kita ketahui bersama, dunia telah berubah secara signifikan akibat pandemi global . Karena penguncian yang meluas, setiap orang yang memiliki kesempatan mulai bekerja dari rumah. Hal ini berdampak signifikan pada kinerja Internet di seluruh dunia dan mengakibatkan lalu lintas yang tinggi serta waktu unduh yang meningkat. Karena itu, semua alat yang dibutuhkan karyawan untuk menyelesaikan pekerjaannya harus dimuat dengan cepat dan juga interaktif.



Sebelumnya, tidak ada masalah kinerja seperti itu karena pengguna internal bekerja dari kantor dan menggunakan jaringan area lokal (LAN). Masalahnya diperparah oleh kenyataan bahwa banyak orang tinggal di kota-kota kecil dengan koneksi Internet yang lambat dan tidak stabil. Atau sebaliknya, di kota-kota dengan koefisien persaingan yang tinggi (rasio pertentangan). Karena kita berbicara tentang sistem internal, sebagian besar waktu karyawan perlu menggunakan VPN untuk masuk ke jaringan kantor. Tetapi ini juga sangat tidak nyaman: VPN sering kali memperlambat kecepatan Internet .



Penting untuk diingat bahwa karyawan juga pengguna. Oleh karena itu, pastikan Anda juga mengoptimalkan sistem internal Anda, karena kinerja aplikasi web yang buruk berdampak negatif pada pekerjaan karyawan. Alat apa yang digunakan jika sistem internal biasanya pribadi? Kami akan membicarakan ini lebih lanjut.



WebPageTest



Hal pertama yang ingin saya klarifikasi adalah bahwa saat Anda menguji sistem internal, Anda tidak akan dapat menggunakan versi open source WebPageTest . Tapi Anda bisa mengatur yang pribadi. Berkat ini, dimungkinkan untuk menggunakannya di jaringan internal.







Setelah peluncuran, akses ke sejumlah besar data untuk semua sistem internal akan terbuka. Pastikan untuk membaca panduan untuk mendapatkan informasi sebanyak mungkin dari WebPageTest. Menyiapkan versi Anda sendiri tidak sesulit kedengarannya. Ada beberapa tutorial bagus tentang cara menyiapkannya sendiri di AWS dalam beberapa menit:





Opsi ini akan memungkinkan WebPageTest berjalan secara otomatis. Hal ini dapat dilakukan dengan beberapa cara:





Dengan cara ini, Anda dapat melacak dampak kinerja (positif atau negatif) dari perubahan sistem baru.



Mercu suar



Alat goto berikutnya yang mungkin sudah Anda miliki adalah Mercusuar Google. Jika Anda telah memasang salinan Google Chrome di komputer Anda, maka menggunakan Lighthouse untuk mengaudit sistem internal Anda sangatlah sederhana:







Di tab DevTools, cari "Lighthouse" dan klik "Buat laporan".







Semenit setelah peluncuran, audit akan mengembalikan hasilnya, seperti yang ditunjukkan pada gambar di atas. Saya sangat menyarankan menyiapkan profil Chrome baru khusus untuk menguji Lighthouse karena ekstensi browser dapat berdampak negatif pada kinerja (tergantung pada apa yang sebenarnya mereka lakukan di halaman).



Tapi Lighthouse bukan hanya dasbor audit. Berikut beberapa cara lain Anda dapat menggunakan alat ini:



Anda dapat menjalankan Lighthouse menggunakan antarmuka baris perintah (CLI)



Anda dapat dengan mudah menjalankan Lighthouse di semua halaman situs Anda .



Bandingkan Performa Sebelum dan Sesudah dengan Lighthouse CI Diff



Secara otomatis menjalankan Lighthouse secara berkala di beberapa lokasi dengan menjalankan pengujian .



Tambahkan audit Anda sendiri untuk memantau bagian tertentu dari situs



Bagikan hasil melalui Github Gist dan Lighthouse Report Viewer .



Sitespeed.io



Saya menempatkan Sitespeed.io di salah satu tempat teratas dalam daftar ini karena menurut saya diremehkan oleh banyak orang. Ini adalah seperangkat alat yang luar biasa untuk meningkatkan kinerja situs web. Ini dapat dikonfigurasi dengan cepat dan mudah dengan perintah sederhana docker



atau npm



. Sitespeed.io juga mudah dijalankan di komputer lokal Anda untuk pengujian cepat.







Dengan sitespeed.io, Anda dapat terus melacak halaman sebanyak yang Anda butuhkan dengan mengirimkan data ke Graphite / Grafana untuk mendapatkan dasbor seperti ini . Pada dasarnya, Sitespeed.io adalah seperangkat alat berikut:



  • Coach adalah alat otomatis yang membantu Anda meningkatkan kecepatan memuat halaman Anda.
  • Browsertime adalah alat utama Sitespeed . Ini berinteraksi dengan browser uji (misalnya Chrome, Firefox, iOS Safari) dan mengumpulkan metrik kinerja, gambar, video, dan banyak lagi.
  • PageXray digunakan untuk mengonversi file HTTP-archive (HAR) ke JSON untuk kemudahan membaca dan penggunaan. (Baca lebih lanjut tentang file HAR di bawah)
  • Throttle adalah alat baris perintah untuk membatasi konektivitas jaringan untuk pengujian kinerja.


Catatan: Throttle memblokir koneksi Internet di seluruh komputer, jadi ingatlah untuk mematikannya saat Anda mematikannya.



  • Bandingkan adalah alat online untuk membandingkan file HAR dengan cepat dan mudah (misalnya sebelum dan sesudah).


DevTools di Chrome



Semua peramban modern sudah memiliki alat pengembang bawaan. Kami telah menempuh perjalanan panjang sejak Firebug di Firefox . Yang terpenting, DevTools menjadi lebih kuat dengan setiap versi baru browser. Ini nyaman bagi pengembang dan pengguna, karena seharusnya ada lebih sedikit bug di situs, bukan? Ha!







Gambar di atas menunjukkan informasi rinci yang dapat disediakan oleh audit kinerja halaman web ( tab Kinerja ). Tetapi Chrome DevTools, selain tab pengukuran kinerja, memiliki banyak fitur lain:





Dan jika Anda mencari artikel non-Google tentang topik ini, lihat ini:





DevTools di Firefox



Ada browser lain yang dapat membantu Anda mengevaluasi masalah kinerja menggunakan DevTools. Saya adalah pengguna Firefox, jadi saya secara teratur menggunakan alat peramban ini. Firefox juga memiliki sekumpulan tab lengkap yang dapat Anda gunakan untuk menemukan masalah di situs







Anda : Anda dapat menggunakan alat ini untuk:





Perpustakaan untuk memperluas data analitik



Ini mungkin tidak berfungsi dengan alat internal, tetapi jika Anda melacak penggunaan menggunakan analitik (seperti Google Analytics, Fathom, Matomo), Anda dapat memperluas data yang dikumpulkan untuk menyertakan informasi yang lebih lengkap tentang kinerja web.







Beberapa perpustakaan yang dapat Anda gunakan:





Perfume.js menonjol dari alat lain untuk jumlah data yang dikumpulkan Pemantauan Pengguna Nyata (RUM). Itu dapat sepenuhnya disesuaikan untuk mengumpulkan sebanyak yang Anda butuhkan. Berikut beberapa tutorial tentang cara melakukannya:





Analisis JavaScript



Artikel ini tidak membahas JavaScript secara internal, meskipun saya yakin bahwa meminimalkan penggunaannya dapat meningkatkan kinerja web dan stabilitas secara keseluruhan . Tetapi jika Anda menggunakan JavaScript, cobalah untuk mengoptimalkannya sebanyak mungkin.







Untungnya, ada banyak alat untuk ini:



  • bundle-wizard - Alat CLI untuk membuat visualisasi bundel JavaScript (lihat gambar di atas) sehingga Anda dapat menghapus apa pun yang tidak Anda butuhkan.
  • Bundle Phobia - Cari tahu berapa biaya untuk menambahkan paket npm ke bundel Anda.
  • Webpack Bundle Analyzer - Visualisasikan struktur internal file output webpack dengan alat peta interaktif yang dapat diskalakan ini.
  • source-map-explorer - Gunakan peta sumber untuk mengurai kode JavaScript yang membengkak (alat ini juga bekerja dengan Sass dan LESS untuk mengurai CSS).


Kerangka khusus untuk menganalisis alat dan artikel juga tersedia:



  • reactopt - React 's A CLI performance optimization tool - menentukan apakah halaman perlu dirender ulang.
  • TracerBench adalah alat pengujian kinerja yang dipantau untuk aplikasi web. Memberikan analisis perbedaan kinerja yang jelas, dapat ditindaklanjuti, dan nyaman.
  • Aplikasi React Performance - DebugBear


Analisis CSS



Selain tab Cakupan yang disebutkan sebelumnya di Chrome DevTools, ada juga alat yang dapat Anda jalankan melalui Command Line Interface (CLI). Mereka akan mengurai CSS mengingat kerumitannya dan juga mengidentifikasi penyeleksi yang tidak digunakan di seluruh situs web:



  • analyzer-css adalah penganalisis kompleksitas dan kinerja pemilih CSS yang dijalankan dari antarmuka baris perintah.
  • uCSS - Lintasi seluruh situs untuk mencari pemilih CSS yang tidak digunakan yang kemudian dapat dihapus.


Pengukuran kinerja server



Aturan emas kinerja adalah: 80-90% dari waktu yang dihabiskan pengguna di front-end.



Sebaiknya pastikan backend / server sudah dioptimalkan. Bagaimanapun, "Time to First Byte penting" .







Penting juga untuk memastikan bahwa server dapat terus berjalan di bawah beban berat jika memang demikian. Ada sejumlah alat yang dapat membantu Anda melakukan kedua hal ini:



  • httpstat adalah skrip Python kecil untuk memvisualisasikan data waktu koneksi yang dikembalikan dari curl (lihat gambar di atas).
  • h2load adalah alat antarmuka baris perintah untuk menguji HTTP / 2 dan HTTP / 1.1.
  • Hey — .
  • k6 — , JavaScript. API CLI.
  • Server- — , -. - .


Puppeteer



Puppeteer adalah pustaka Node yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium menggunakan protokol DevTools. Sebagian besar hal yang Anda lakukan secara manual di browser dapat direproduksi dengan Puppeteer. Bagaimana ini bisa digunakan untuk pengujian kinerja web? Addy Osmani menulis postingan blog tentang penggunaan Pupperteer untuk pengujian performa web dan juga membagikan kode tersebut di Github. Tes ini dapat dengan mudah dijalankan melalui CLI untuk menguji situs web internal dan eksternal:





Ekstensi browser



Ada banyak ekstensi browser yang dapat digunakan untuk mengukur kinerja web. Saya akan merekomendasikan menggunakan profil terpisah dengan minimal ekstensi yang disertakan saat Anda meluncurkannya. Ini karena beberapa ekstensi browser berinteraksi dengan halaman dan dapat menurunkan performa, sehingga menghasilkan hasil yang salah. Anda dapat menggunakan ekstensi berikut:



  • sloth adalah ekstensi yang memperlambat CPU dan jaringan di browser, membuatnya mudah untuk mensimulasikan kinerja halaman pada perangkat yang lebih lambat.
  • Perfmap - Saat menggunakan ekstensi ini, browser membuat peta panas dari sumber daya yang dimuat ke dalam browser dan dampak kinerja individualnya sesuai dengan Resource Timing API .
  • Ekstensi Chrome Web Vitals adalah ekstensi Chrome yang menampilkan metrik inti Web Vitals (LCP, CLS, FID) untuk halaman apa pun yang Anda kunjungi. Catatan: Ini akan segera dibangun di Chrome DevTools, sekarang tersedia di Canary .
  • perf-diagnostik.css sebenarnya bukan ekstensi browser, melainkan sekumpulan CSS yang dapat Anda tambahkan ke halaman Anda untuk memperbaiki masalah kinerja umum. Cara sederhana dan efektif untuk menyorot gambar tanpa atribut lebar / tinggi, di antara beberapa lainnya.


Ada juga ekstensi yang dirancang khusus untuk meningkatkan kinerja saat menggunakan kerangka kerja JavaScript tertentu:







Network Throttling



Pelambatan jaringan adalah cara untuk memperlambat koneksi jaringan. Penting untuk dipahami bahwa banyak pengguna tidak akan memiliki koneksi broadband yang cepat dan stabil di kota besar. Di sisi lain, yang lain mungkin berada di daerah pedesaan dengan broadband yang buruk dan kekuatan sinyal seluler yang sangat lemah. Dengan membatasi koneksi jaringan Anda sendiri, Anda mendapatkan wawasan tentang kinerja situs untuk pengguna di lingkungan jaringan tertentu.



Anda mungkin bertanya, "Mengapa saya ingin memblokir jaringan saya jika sudah ada dalam Chrome DevTools?" Penting untuk dipahami bahwa tidak semua metode regulasi jaringanbekerja dengan cara yang sama. Pembatasan dengan Chrome DevTools menerapkan penundaan tingkat browser untuk setiap respons. Lighthouse menjalankan pengujian dengan kecepatan penuh dan kemudian mensimulasikan kecepatan koneksi, mengorbankan akurasi untuk kecepatan pesan. Alat berikut jauh lebih akurat. Mereka menggunakan pembatasan jaringan tingkat OS yang bekerja pada tingkat yang jauh lebih rendah.



Catatan: Alat-alat di bawah ini mengatur koneksi di seluruh komputer, jadi pastikan Anda menutup aplikasi yang tidak diperlukan saat pengujian, dan juga nonaktifkan pembatasan saat selesai!





Saya selalu menggunakan throttle



karena sangat sederhana: 



# Enable 3G Slow
throttle 3gslow

# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250

# Disable throttle
throttle --stop


Menganalisis file HAR



Saya menyebutkan file HTTP Archive (HAR) sebelumnya di artikel ini. File-file ini memungkinkan Anda merekam interaksi jaringan browser web dengan situs web. Hal terbaik tentang file-file ini adalah Anda dapat menggunakannya untuk situs apa pun yang dapat diakses melalui browser (internal atau eksternal). Menemukannya cukup mudah di alat pengembang Firefox dan Chrome:



Firefox





Chrome





Ada alat lain yang dapat Anda gunakan untuk melihat dan menganalisis:





Web APIs



Kembali ke kapabilitas asli browser browser, ada beberapa API yang bisa Anda gunakan untuk mengukur kinerja situs sendiri, tanpa menggunakan pustaka.



  • performance.now () - Metode now()



    antarmuka kinerja browser mengembalikan stempel waktu presisi tinggi sejak metode dipanggil. Ini membuatnya sangat mudah untuk mengukur waktu antara 2 panggilan. Menambahkannya sebelum dan sesudah bagian kode tertentu akan memungkinkan Anda mengukur dan mengoptimalkannya.
  • Pengaturan Waktu Navigasi - API ini memungkinkan pengembang untuk mengumpulkan data pengaturan waktu yang terkait dengan navigasi dokumen.
  • Waktu Sumber Daya - API ini memungkinkan pengembang mengumpulkan informasi waktu lengkap untuk sumber daya yang dimuat oleh dokumen.
  • Menilai Kinerja Pemuatan dalam Kehidupan Nyata dengan Navigasi dan Waktu Sumber Daya - Jeremy Wagner - Artikel yang sangat mendetail tentang bagaimana dua API di atas dapat digunakan untuk mengukur kinerja pemuatan halaman web.


Hasil



Mudah-mudahan, dalam alat yang tercantum dalam artikel ini, Anda akan menemukan alat yang akan membantu Anda meningkatkan sistem internal Anda. Jika suatu layanan atau situs web hanya digunakan oleh karyawan di dalam perusahaan, bukan berarti tidak perlu dioptimalkan. Terlepas dari kenyataan bahwa banyak orang bekerja dari jarak jauh akhir-akhir ini, tidak semua orang memiliki koneksi yang cepat dan stabil. Oleh karena itu, ingatlah bahwa Anda dan kolega Anda adalah pengguna juga!


More articles:


All Articles