Optimasi Skor INP: Cara Mengurangi Long Task JavaScript

Optimasi INP menjadi salah satu bagian penting dalam meningkatkan responsivitas website. Interaction to Next Paint (INP) mengukur seberapa cepat halaman memberikan respons visual setelah pengguna melakukan interaksi seperti mengklik tombol, membuka menu, mengisi formulir, atau menggunakan fitur tertentu. Ketika JavaScript menjalankan proses yang terlalu berat, main thread browser dapat menjadi sibuk sehingga interaksi pengguna terasa lambat dan skor INP berpotensi menjadi buruk.

Salah satu masalah yang sering ditemukan dalam proses optimasi INP adalah Long Task JavaScript, yaitu pekerjaan yang menggunakan main thread dalam waktu lebih dari 50 milidetik. Long Task dapat menghambat browser dalam memproses input dan melakukan rendering secara cepat. Karena itu, mengurangi pekerjaan JavaScript yang terlalu lama menjadi langkah penting untuk membuat website lebih responsif. Lantas, bagaimana cara menemukan dan mengurangi Long Task JavaScript? Berikut pembahasannya.

Apa Itu INP pada Website?

Interaction to Next Paint (INP) merupakan salah satu metrik Core Web Vitals yang digunakan untuk mengukur responsivitas halaman terhadap interaksi pengguna.

Berbeda dengan metrik yang berfokus pada proses pemuatan halaman, INP melihat apa yang terjadi ketika pengguna berinteraksi dengan website.

Contoh interaksi yang dapat memengaruhi INP antara lain:

• Mengklik tombol.
• Membuka atau menutup menu.
• Mengisi kolom formulir.
• Memilih opsi pada dropdown.
• Menggunakan fitur pencarian.
• Menambahkan produk ke keranjang.
• Berinteraksi dengan komponen website lainnya.

Secara sederhana, ketika pengguna melakukan interaksi, browser harus menerima input, menjalankan proses yang diperlukan, kemudian menampilkan perubahan pada layar.

Jika proses tersebut berjalan terlalu lama, pengguna akan merasakan adanya jeda antara tindakan dan respons website.

Karena itu, optimasi INP perlu memperhatikan bagaimana JavaScript memproses setiap interaksi pengguna.

Apa Itu Long Task JavaScript?

Long Task JavaScript adalah pekerjaan yang berlangsung lebih dari 50 milidetik pada main thread browser.

Main thread bertanggung jawab terhadap berbagai pekerjaan penting, termasuk menjalankan JavaScript, menangani input pengguna, melakukan perhitungan layout, dan membantu proses rendering.

Ketika JavaScript menjalankan pekerjaan yang terlalu lama, main thread dapat menjadi sibuk.

Contohnya:

button.addEventListener("click", () => {
    processLargeData();
    calculateResult();
    updateInterface();
});

Jika ketiga proses tersebut membutuhkan waktu lama, browser dapat mengalami keterlambatan dalam menangani pekerjaan lainnya.

Dampaknya dapat terlihat ketika pengguna mengklik tombol tetapi respons visual baru muncul setelah beberapa saat.

Inilah alasan Long Task JavaScript perlu diperhatikan ketika melakukan optimasi INP.

Hubungan Long Task dengan INP

Long Task dan INP memiliki hubungan yang erat karena keduanya berkaitan dengan pekerjaan browser saat pengguna berinteraksi dengan halaman.

Ketika main thread sedang menjalankan pekerjaan JavaScript yang panjang, interaksi baru dapat tertunda. Browser perlu menyelesaikan pekerjaan yang sedang berjalan sebelum dapat menangani pekerjaan berikutnya.

Misalnya, sebuah halaman sedang menjalankan JavaScript selama 300 milidetik. Pada saat yang sama, pengguna menekan tombol.

Jika browser belum dapat menangani input tersebut, pengguna akan melihat adanya jeda sebelum tombol memberikan respons.

Dalam proses optimasi INP, kondisi seperti ini perlu diperhatikan karena respons interaksi tidak hanya dipengaruhi oleh ukuran file JavaScript, tetapi juga berapa lama JavaScript menggunakan main thread.

Penyebab Long Task JavaScript

Ada beberapa penyebab umum yang dapat membuat JavaScript menghasilkan Long Task pada website.

1. JavaScript Terlalu Banyak

Website dengan banyak library, plugin, framework, dan fitur interaktif dapat mengirimkan JavaScript dalam jumlah besar ke browser.

Tidak semua kode tersebut selalu dibutuhkan pada setiap halaman.

JavaScript yang sebenarnya tidak diperlukan dapat menambah pekerjaan browser, terutama jika script tersebut langsung dijalankan ketika halaman atau komponen dimuat.

Karena itu, salah satu langkah dalam optimasi INP adalah mengevaluasi JavaScript yang benar-benar dibutuhkan.

2. Event Handler Terlalu Berat

Event handler dapat menjadi penyebab Long Task ketika menjalankan terlalu banyak proses.

Contohnya:

button.addEventListener("click", () => {
    loadData();
    processData();
    generateReport();
    updateTable();
});

Jika seluruh proses tersebut berjalan ketika pengguna mengklik tombol, main thread dapat menerima beban yang cukup besar.

Solusinya adalah mengevaluasi proses mana yang benar-benar harus dijalankan saat interaksi dan mana yang dapat dilakukan setelahnya.

3. Manipulasi DOM Berlebihan

JavaScript sering digunakan untuk mengubah elemen HTML secara dinamis.

Namun, perubahan DOM yang terlalu banyak dapat meningkatkan pekerjaan browser.

Contohnya dapat terjadi pada:

• Dashboard.
• Tabel dengan banyak data.
• Daftar produk.
• Filter pencarian.
• Aplikasi web interaktif.

Optimasi dapat dilakukan dengan mengurangi perubahan DOM yang tidak diperlukan dan mengelompokkan pembaruan ketika memungkinkan.

4. Script Pihak Ketiga

Script pihak ketiga juga dapat menambah pekerjaan JavaScript pada halaman.

Contohnya adalah:

• Analytics.
• Live chat.
• Widget.
• Iklan.
• Social media embed.
• Tracking script.

Bukan berarti seluruh script pihak ketiga harus dihapus. Namun, script yang tidak memberikan manfaat signifikan atau tidak dibutuhkan pada halaman tertentu dapat dievaluasi kembali.

5. Proses Hydration yang Berat

Website yang menggunakan framework JavaScript modern dapat melakukan proses hydration setelah HTML ditampilkan.

Hydration membuat elemen pada halaman menjadi interaktif dengan menghubungkan HTML yang sudah dirender dengan JavaScript.

Jika terlalu banyak komponen harus diproses sekaligus, pekerjaan tersebut dapat meningkatkan beban main thread.

Karena itu, mengurangi JavaScript yang dikirim ke browser dan menggunakan pendekatan rendering yang lebih efisien dapat membantu optimasi INP.

Cara Mengurangi Long Task JavaScript untuk Optimasi INP

Setelah menemukan penyebabnya, langkah berikutnya adalah mengurangi pekerjaan yang terlalu berat pada main thread.

1. Pecah Long Task Menjadi Beberapa Task Kecil

Salah satu cara mengurangi Long Task JavaScript adalah membagi pekerjaan besar menjadi beberapa task yang lebih kecil.

Misalnya:

processPart1();
processPart2();
processPart3();
processPart4();

Jika seluruh proses dijalankan sekaligus, browser dapat sibuk cukup lama.

Pada browser yang mendukungnya, scheduler.yield() dapat digunakan untuk memberikan kesempatan kepada browser menangani pekerjaan lain sebelum JavaScript melanjutkan proses berikutnya.

Contohnya:

async function processTasks() {
    processPart1();

    await scheduler.yield();

    processPart2();

    await scheduler.yield();

    processPart3();
}

Dengan membagi pekerjaan seperti ini, browser memiliki kesempatan untuk menangani input dan pekerjaan penting lainnya.

2. Gunakan Web Worker untuk Komputasi Berat

Jika JavaScript digunakan untuk melakukan komputasi yang berat dan proses tersebut tidak membutuhkan akses langsung ke DOM, Web Worker dapat menjadi pilihan.

Web Worker memungkinkan JavaScript tertentu dijalankan di thread terpisah sehingga main thread tidak harus menangani seluruh proses.

Contoh sederhananya:

const worker = new Worker("worker.js");

worker.postMessage(data);

worker.onmessage = (event) => {
    console.log(event.data);
};

Pendekatan ini dapat berguna untuk pemrosesan data dalam jumlah besar, perhitungan tertentu, atau pekerjaan lain yang membutuhkan waktu cukup lama.

Namun, Web Worker tidak dapat digunakan untuk semua pekerjaan. Manipulasi DOM secara langsung tetap membutuhkan main thread.

3. Kurangi JavaScript yang Tidak Digunakan

Mengurangi JavaScript yang tidak diperlukan dapat membantu menurunkan beban browser.

Periksa kembali:

• Library yang tidak digunakan.
• Plugin yang tidak dibutuhkan.
• Kode JavaScript yang duplikat.
• Script yang dimuat di semua halaman.
• Fitur yang hanya digunakan pada halaman tertentu.
• Kode lama yang sudah tidak diperlukan.

Jika sebuah script hanya diperlukan pada halaman checkout, misalnya, tidak selalu perlu memuat script tersebut pada seluruh halaman website.

Pendekatan ini dapat membantu mengurangi pekerjaan yang harus dilakukan browser.

4. Optimalkan Event Handler

Event handler sebaiknya tidak melakukan pekerjaan berat jika tidak benar-benar diperlukan.

Perhatikan event seperti:

• click
• input
• change
• scroll
• resize

Event tertentu dapat dipanggil berkali-kali dalam waktu singkat.

Sebagai contoh, event input pada fitur pencarian dapat berjalan setiap kali pengguna mengetik karakter.

Jika setiap perubahan langsung menjalankan pencarian ke data yang besar, proses tersebut dapat membebani main thread.

5. Gunakan Debounce

Debounce dapat digunakan ketika sebuah fungsi tidak perlu dijalankan setiap kali event terjadi.

Contohnya pada fitur pencarian:

let timer;

input.addEventListener("input", () => {
    clearTimeout(timer);

    timer = setTimeout(() => {
        searchData(input.value);
    }, 300);
});

Dengan pendekatan tersebut, fungsi pencarian menunggu sekitar 300 milidetik setelah pengguna berhenti mengetik.

Teknik ini dapat membantu mengurangi jumlah pekerjaan yang dijalankan secara berulang.

6. Gunakan Throttle pada Event Tertentu

Throttle dapat digunakan ketika sebuah event terjadi terlalu sering dan fungsi tidak perlu dijalankan pada setiap pemanggilan event.

Contohnya adalah event scroll atau resize.

Daripada menjalankan proses berat setiap kali event dipanggil, eksekusi dapat dibatasi pada interval tertentu.

Namun, debounce dan throttle memiliki fungsi yang berbeda. Pemilihannya harus disesuaikan dengan karakteristik interaksi pada website.

7. Tunda Pekerjaan yang Tidak Penting

Tidak semua pekerjaan JavaScript harus dilakukan secepat mungkin.

Pekerjaan yang tidak berhubungan langsung dengan interaksi utama dapat dipertimbangkan untuk dijalankan setelah pekerjaan prioritas selesai.

Contohnya:

• Logging tambahan.
• Pemrosesan sekunder.
• Fitur yang jarang digunakan.
• Pembaruan data yang tidak mendesak.
• Pekerjaan analitik tertentu.

Dengan mengatur prioritas pekerjaan, browser dapat memberikan respons lebih cepat terhadap interaksi pengguna.

Cara Mengecek Long Task Menggunakan Chrome DevTools

Sebelum melakukan optimasi, sebaiknya cari tahu terlebih dahulu JavaScript mana yang menyebabkan masalah.

Chrome DevTools dapat digunakan untuk menganalisis aktivitas main thread.

Berikut langkah sederhananya:

1. Buka halaman website yang ingin dianalisis.
2. Buka Chrome DevTools.
3. Pilih tab Performance.
4. Mulai proses recording.
5. Lakukan interaksi yang terasa lambat.
6. Hentikan recording.
7. Periksa aktivitas pada main thread.
8. Cari pekerjaan JavaScript yang memiliki durasi panjang.
9. Identifikasi fungsi atau script yang menjalankan pekerjaan tersebut.
10. Lakukan optimasi dan lakukan pengujian kembali.

Dengan cara ini, optimasi INP dapat dilakukan berdasarkan data, bukan hanya perkiraan.

Contoh Mengurangi Long Task JavaScript

Misalnya website harus memproses banyak data ketika pengguna menekan sebuah tombol.

Kode berikut menjalankan seluruh data dalam satu proses:

button.addEventListener("click", () => {
    for (const item of data) {
        processItem(item);
    }
});

Jika jumlah data sangat besar, proses tersebut dapat menggunakan main thread dalam waktu yang lama.

Pekerjaan dapat dibagi menjadi beberapa bagian agar tidak seluruh data diproses sekaligus.

Contohnya:

async function processData(data) {
    for (let i = 0; i < data.length; i++) {
        processItem(data[i]);

        if (i % 50 === 0) {
            await scheduler.yield();
        }
    }
}

Dengan pendekatan tersebut, proses yang panjang dapat dibagi menjadi beberapa bagian.

Jumlah data per batch tetap perlu disesuaikan dengan aplikasi. Tidak ada satu angka yang cocok untuk semua website karena beban setiap fungsi JavaScript berbeda.

Cara Mengukur Hasil Optimasi INP

Setelah melakukan perubahan pada JavaScript, jangan langsung menganggap optimasi berhasil.

Lakukan pengukuran kembali untuk mengetahui perubahan performanya.

Beberapa hal yang dapat diperiksa adalah:

• Durasi Long Task.
• Aktivitas main thread.
• Respons tombol.
• Respons formulir.
• Respons menu.
• Respons fitur pencarian.
• Nilai INP.
• Performa pada perangkat dengan spesifikasi lebih rendah.

Pengujian sebelum dan sesudah optimasi dapat membantu mengetahui apakah perubahan yang dilakukan benar-benar memberikan dampak.

Website yang terasa cepat pada komputer developer belum tentu memberikan pengalaman yang sama pada perangkat pengguna.

Kesalahan Saat Melakukan Optimasi INP

Optimasi INP juga dapat menjadi kurang efektif jika dilakukan tanpa mengetahui sumber masalah.

Hanya Mengurangi Ukuran File JavaScript

Ukuran JavaScript memang penting, tetapi bukan satu-satunya faktor yang menentukan INP.

File yang kecil tetap dapat menyebabkan Long Task jika kode tersebut melakukan pekerjaan berat ketika pengguna berinteraksi.

Menghapus Semua JavaScript

Tidak semua JavaScript merupakan masalah.

Website membutuhkan JavaScript untuk menyediakan berbagai fitur interaktif. Fokus optimasi sebaiknya berada pada JavaScript yang tidak diperlukan atau pekerjaan yang dapat dilakukan dengan lebih efisien.

Tidak Melakukan Pengukuran

Optimasi tanpa pengukuran dapat membuat developer memperbaiki bagian yang sebenarnya bukan sumber masalah.

Gunakan Chrome DevTools untuk mengetahui pekerjaan mana yang menggunakan waktu paling banyak pada main thread.

Menggunakan Debounce dan Throttle Secara Berlebihan

Debounce dan throttle bukan solusi untuk semua masalah performa.

Jika digunakan tanpa mempertimbangkan kebutuhan interaksi, keduanya dapat membuat website terasa kurang responsif.

Gunakan teknik tersebut hanya ketika karakteristik event memang membutuhkannya.

Checklist Optimasi INP

Sebelum menyelesaikan optimasi, developer dapat menggunakan checklist berikut:

• Periksa nilai INP website.
• Identifikasi interaksi yang terasa lambat.
• Analisis main thread menggunakan Chrome DevTools.
• Cari Long Task JavaScript.
• Periksa event handler yang berat.
• Kurangi JavaScript yang tidak diperlukan.
• Evaluasi script pihak ketiga.
• Pecah pekerjaan JavaScript yang terlalu panjang.
• Gunakan Web Worker untuk komputasi yang sesuai.
• Terapkan debounce atau throttle jika diperlukan.
• Tunda pekerjaan yang tidak kritis.
• Ukur kembali performa setelah optimasi.