Pelajaran dari React dan Vue Framework untuk Kecepatan Halaman

Dalam mengejar kecepatan halaman secara terus-menerus, kita sering kali mendapati diri kita berputar kembali ke titik yang sama. Terlepas dari upaya tim produk, pemasaran, dan pertumbuhan untuk memotivasi tim teknologi, tugas yang dapat meningkatkan kinerja situs sering kali ditunda karena perlunya pemfaktoran ulang, dan bahkan ketika tugas tersebut selesai, tugas tersebut tidak selalu memberikan hasil yang lengkap. Dalam siklus ini, ada baiknya untuk mempertimbangkan beberapa perspektif mendalam dalam mencapai kinerja nyata. Misalnya, pelajaran apa yang dapat kita pelajari dari kecepatan React.js dan Vue.js atau ekstensi SSR (server-side rendering) seperti Next.js dan Nuxt.js dibandingkan dengan platform lain? Bukankah sudah waktunya untuk mengoptimalkan MB file jQuery dan CSS? Kapan perusahaan besar yang mengorbankan kinerja web mereka kepada pengembang front-end yang kurang informasi akan bangkit? Mari kita jawab pertanyaan-pertanyaan ini satu per satu.

Mengapa Situs Berbasis Next.js dan Nuxt.js Cepat?

Platform Next dan Nuxt, yang merupakan struktur ramah SEO yang dibangun di React dan Vue, menonjol karena kinerja kecepatannya. Namun mengapa platform ini begitu cepat?

React.js dan Vue.js adalah kerangka kerja berbasis komponen yang memecah setiap halaman menjadi sub-komponen, seperti yang ditunjukkan di bawah ini.

Mari kita ambil contoh dunia nyata untuk mengilustrasikan hal ini: halaman daftar e-commerce. Halaman daftar ini dapat dianggap memiliki sub-komponen berikut:

• Header
• listing
  • Daftar informasi entri
    • Halaman judul
    • Remah roti
    • Jumlah produk
  • Filter
    • filter kategori
    • Filter Harga
    • ...
  • Penyortiran
  • Kartu produk
    • Foto produk
  • Produk rincian
    • Nama produk
    • Harga produk
      • Harga coret
      • Harga penjualan
    • Nilai diskon
    • Informasi kampanye
  • Pemberian nomor pd halaman buku
  • Konten kategori
• Footer

Saat membuat aplikasi berbasis komponen dengan Nuxt.js, masing-masing komponen ini diberi kode secara terpisah dan disertakan dalam halaman master. Misalnya, pertimbangkan file bernama ProductPhoto.js. Apapun fungsi yang diperlukan untuk foto produk (carousel, tampilan gambar responsif, dll), kode JS tertulis di dalam komponen ini. Demikian pula, hanya file CSS yang digunakan oleh komponen ini yang disertakan di dalamnya. Artinya hanya file-file yang diperlukan oleh masing-masing komponen yang dijalankan jika komponen tersebut digunakan.

Bagaimana proses ini ditangani di sebagian besar platform web?

File script.js menyertakan kode untuk semuanya mulai dari keanggotaan, filter, dan halaman keranjang hingga menu, yang berjalan di semua halaman. Hasil? 

Situs web dengan a File JS 3 MB dan CSS 1.5 MB mengajukan. Masalah utamanya bukan hanya ukuran file tetapi fakta bahwa Anda tidak dapat mengharapkan rata-rata CPU perangkat seluler Android mengeksekusi ribuan baris kode dalam milidetik. Dengan hanya menjalankan kode yang Anda perlukan, Anda dapat mencapai peningkatan kinerja.

Bagaimana Cara Menghilangkan Sumber Daya yang Memblokir Render?

Saat ini, 32% dari 1 juta situs web teratas menggunakan pustaka font Font Awesome, yang rata-rata berukuran sekitar 250 KB. Mengingat pemuatan asinkron tidak disukai karena efek jentikan, pikirkan berapa banyak font yang terlihat di layar pertama suatu halaman saat dibuka di perangkat seluler atau desktop. Sebuah studi singkat pada 50 platform berbeda menemukan rata-rata 3.4 ikon digunakan (paling umum: keranjang, pengguna, menu, notifikasi). Jadi, untuk memuat empat ikon saja tanpa masalah, kami memuat seluruh perpustakaan.

Bagaimana kerangka kerja JS tingkat lanjut mengelola hal ini? Dengan hanya mengimpor format SVG dari ikon yang digunakan dalam komponen yang relevan, menghilangkan kebutuhan untuk memuat seluruh font atau pustaka CSS.

Apa yang Diberitahukan Penggunaan Bootstrap vs. React JS kepada Kita?

Pustaka Bootstrap JS memiliki pangsa pasar sebesar 26% di seluruh situs di seluruh dunia, sementara penggunaan React sekitar 4%. Bootstrap populer karena fleksibilitas dan kemudahan penggunaannya, memungkinkan pengembangan yang cepat. Namun, fleksibilitas ini memerlukan biaya: fungsi JS umum, cakupan kode yang luas, dan fungsi untuk fitur yang mungkin tidak pernah Anda gunakan disertakan dalam proyek Anda.

Jadi, mari kita bertanya: Apa yang dimaksud dengan peningkatan penggunaan lebih dari 100% dari 10,000 teratas hingga 1,000 situs teratas ditunjukkan? Hal ini menunjukkan bahwa pihak terbaik mengubah detail demi keuntungan mereka menjadi lebih baik lagi.

Singkatnya, Daripada menulis ulang situs kami dengan teknologi seperti itu Selanjutnya, Nuxt, Angular, React, Vue, dll., kita harus memahami fungsi teknologi ini dalam hal kecepatan dan menerapkan praktik terbaik ini pada aplikasi web kita.