Resource tercepat dan yang dioptimalkan terbaik adalah resource yang tidak dikirim. Anda harus menghapus resource yang tidak diperlukan dari aplikasi. Sebaiknya ajukan pertanyaan, dan tinjau kembali secara berkala, asumsi implisit dan eksplisit dengan tim Anda. Berikut adalah beberapa contohnya:
- Anda selalu menyertakan resource X di halaman, tetapi apakah biaya mendownload dan menampilkannya mengimbangi nilai yang diberikan kepada pengguna? Dapatkah Anda mengukur dan membuktikan nilainya?
- Apakah resource (terutama jika resource pihak ketiga) memberikan performa yang konsisten? Apakah resource ini berada di jalur kritis, atau harus berada di jalur kritis? Jika resource berada di jalur kritis, apakah resource tersebut dapat menjadi titik tunggal kegagalan untuk situs? Artinya, jika resource tidak tersedia, apakah hal itu memengaruhi performa dan pengalaman pengguna halaman Anda?
- Apakah resource ini memerlukan atau memiliki SLA? Apakah resource ini mengikuti praktik terbaik performa: kompresi, penyimpanan dalam cache, dan sebagainya?
Sering kali, halaman berisi resource yang tidak diperlukan, atau lebih buruk lagi, yang menghambat performa halaman tanpa memberikan banyak nilai kepada pengunjung atau situs tempat halaman tersebut dihosting. Hal ini berlaku sama untuk widget dan resource pihak pertama dan pihak ketiga:
- Situs A telah memutuskan untuk menampilkan carousel foto di halaman berandanya agar pengunjung dapat melihat pratinjau beberapa foto dengan sekali klik. Semua foto dimuat saat halaman dimuat, dan pengguna melihat foto satu per satu.
- Pertanyaan: Sudahkah Anda mengukur jumlah pengguna yang melihat beberapa foto dalam carousel? Anda mungkin mengalami overhead yang tinggi dengan mendownload resource yang tidak pernah dilihat oleh sebagian besar pengunjung.
- Situs B telah memutuskan untuk menginstal widget pihak ketiga guna menampilkan konten terkait, meningkatkan interaksi sosial, atau menyediakan beberapa layanan lainnya.
- Pertanyaan: Sudahkah Anda melacak jumlah pengunjung yang menggunakan widget atau klik-tayang pada konten yang disediakan widget? Apakah engagement yang dihasilkan widget ini cukup untuk membenarkan overhead-nya? Selain itu, apakah Anda dapat menggunakan strategi pemuatan untuk memastikan skrip tidak dimuat hingga diperlukan?
Menentukan apakah akan menghapus download yang tidak perlu sering kali memerlukan banyak pemikiran dan pengukuran yang cermat. Untuk hasil terbaik, buat inventaris dan tinjau pertanyaan ini secara berkala untuk setiap aset di halaman Anda.
Efek pada Core Web Vitals
Inisiatif Data Web Inti diperkenalkan oleh Google untuk memberikan serangkaian metrik yang mencerminkan pengalaman pengguna saat menggunakan web. Meskipun ada banyak strategi pengoptimalan untuk Core Web Vitals, mempertanyakan apakah akan memuat resource tertentu di halaman dapat membuka jalan bagi Anda untuk meningkatkan metrik ini di situs Anda. Berikut adalah beberapa contoh—yang dikelompokkan menurut setiap Data Web Inti—yang patut Anda pertimbangkan. Meskipun ini bukan daftar lengkap contoh (dan ada banyak contoh), membacanya dapat memberi Anda bahan pertimbangan.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) mengukur waktu saat konten terbesar (misalnya gambar hero, atau judul) dimuat. Metrik ini dianggap sebagai metrik persepsi penting yang memberi pengguna kesan bahwa situs dimuat dengan cepat.
Secara umum, mendownload lebih sedikit resource berarti bandwidth yang dimiliki pengguna akan dialokasikan ke lebih sedikit resource, dan dapat menghasilkan peningkatan LCP. Contoh klasiknya adalah pemuatan lambat, yaitu gambar di luar area pandang selama pemuatan halaman tidak akan didownload hingga browser menentukan bahwa pengguna cenderung akan melihatnya. Jika Anda memiliki galeri thumbnail besar yang berisi, misalnya, 50 gambar, pemuatan lambat semua gambar kecuali sepuluh gambar teratas berarti browser dapat menggunakan bandwidth yang tersedia secara lebih efisien, dan gambar pertama yang akan dilihat pengguna akan dimuat lebih cepat.
Namun, hal ini bukan hanya tentang memuat lebih sedikit gambar. Browser memiliki skema prioritas internal yang menentukan jumlah bandwidth yang harus diterima setiap resource. Namun, meskipun dengan semua resource ini—terutama yang didownload dengan prioritas tinggi—memiliki potensi untuk merampas resource dependen elemen LCP yang potensial. Hal ini terutama berlaku pada koneksi jaringan yang lambat. Resource dependen tersebut dapat berupa file gambar yang mewakili elemen LCP halaman, tetapi juga dapat berupa resource font web yang diperlukan browser untuk merender node teks yang dapat ditentukan sebagai elemen LCP halaman.
Jika situs Anda banyak berisi teks, elemen LCP halaman mungkin berupa node teks. Meskipun ada banyak strategi pemuatan dan pengoptimalan font yang baik, sebaiknya pertimbangkan apakah font sistem sudah memadai untuk kebutuhan situs Anda, sehingga elemen LCP yang merupakan node teks dapat dimuat tanpa dependensi pada resource font web dan digambar hampir segera saat CSS dan HTML tiba dari server.
Pergeseran Tata Letak Kumulatif (CLS)
Setiap resource yang Anda muat berpotensi berkontribusi pada Pergeseran Tata Letak Kumulatif (CLS) halaman, terutama jika belum selesai didownload pada saat proses rendering awal. Untuk gambar, hindari CLS yang melibatkan praktik seperti menetapkan dimensi eksplisit. Untuk font, mengelola pemuatan font dan kemungkinan pencocokan font pengganti dapat meminimalkan pergeseran selama periode pertukaran font web. Untuk JavaScript, ini dapat mengelola cara skrip tersebut memanipulasi DOM sehingga pergeseran tata letak dikurangi menjadi jumlah yang dapat diterima.
Setiap resource yang berkontribusi pada CLS halaman memerlukan sejumlah pekerjaan untuk memastikan tata letak halaman cukup stabil. Dengan mempertanyakan apakah Anda memerlukan resource tertentu atau tidak, Anda tidak hanya mempercepat pemuatan halaman, tetapi juga mengurangi upaya kognitif yang diperlukan untuk mempertahankan stabilitas tata letak. Hal ini tidak hanya menghasilkan pengalaman pengguna yang jauh lebih tidak menjengkelkan, tetapi juga pengalaman developer yang tidak terlalu menjengkelkan, karena Anda akan memiliki lebih banyak waktu untuk mengejar sasaran lain dalam project Anda.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) mengukur responsivitas terhadap input pengguna selama masa aktif halaman. INP halaman dapat sangat dipengaruhi oleh JavaScript yang dimuatnya, karena JavaScript adalah yang mendorong sebagian besar interaktivitas yang dialami pengguna di seluruh web. Khususnya, jumlah resource skrip yang didownload selama pemuatan halaman dapat memulai pekerjaan yang berpotensi mahal yang terlibat dalam evaluasi dan kompilasi skrip. Makin sedikit JavaScript yang Anda muat selama startup, makin sedikit pekerjaan yang harus dilakukan browser pada titik kritis dalam pengalaman halaman, tempat pengguna mungkin mencoba berinteraksi dengannya.
Meskipun ada strategi untuk mengurangi ukuran resource JavaScript yang didownload selama startup—seperti pemisahan kode dan tree shaking—sebaiknya audit paket yang Anda gunakan dalam project untuk melihat apakah paket tersebut benar-benar diperlukan. Misalnya, lodash memiliki banyak metode yang masih berguna saat ini, tetapi dilengkapi dengan metode yang disediakan browser secara langsung, seperti fungsi khusus Array untuk pemetaan, pengurangan, dan pemfilteran, serta banyak lagi.
Progressive enhancement juga merupakan pendekatan yang berguna untuk JavaScript, karena memungkinkan Anda menayangkan pengalaman dasar (tetapi tetap berfungsi) bagi pengguna yang dapat Anda tambahkan untuk pengguna dengan perangkat yang lebih canggih dan koneksi jaringan yang lebih cepat. Baik Anda mematuhi prinsip progressive enhancement atau tidak, intinya tetap sama: Setiap resource JavaScript yang dapat Anda hindari untuk didownload dapat menghasilkan pengalaman yang merespons interaksi pengguna lebih cepat, yang merupakan aspek penting dari performa web.
Kesimpulan
Mengaudit situs Anda untuk menemukan download yang tidak perlu mungkin hanya salah satu aspek dalam memberikan pengalaman pengguna yang cepat, tetapi ini adalah aspek yang berpotensi memberikan dampak tinggi. Ringkasnya:
- Buat inventaris aset Anda sendiri dan aset pihak ketiga di halaman Anda.
- Ukur performa setiap aset: nilai dan performa teknisnya.
- Tentukan apakah resource memberikan nilai yang memadai.
- Pahami pengaruh download yang tidak perlu terhadap Core Web Vitals dan metrik pendukung.
Dengan mengoptimalkan efisiensi konten dengan cara ini, Anda tidak hanya meningkatkan performa secara keseluruhan, tetapi juga memastikan tidak membuang bandwidth pengguna, serta berpotensi meningkatkan metrik yang berfokus pada pengguna dan memberikan pengalaman pengguna yang lebih baik.