Paket Next.js untuk mengelola library pihak ketiga

Houssein Djirdeh

Pada tahun 2021, tim Chrome Aurora memperkenalkan komponen skrip untuk meningkatkan performa pemuatan skrip pihak ketiga di Next.js. Sejak peluncurannya, kami telah memperluas kemampuannya untuk mempermudah dan mempercepat pemuatan resource pihak ketiga bagi developer.

Postingan blog ini memberikan ringkasan tentang fitur baru yang telah kami rilis, terutama library @next/third-parties, serta garis besar inisiatif mendatang di roadmap kami.

Implikasi performa skrip pihak ketiga

Catatan: Menurut Almanak Web 2022, pihak ketiga adalah entitas eksternal dari hubungan situs/pengguna utama, dan melibatkan aspek situs yang tidak dikontrol langsung oleh pemiliknya, tetapi disertakan dengan persetujuan mereka.

41% dari semua permintaan pihak ketiga di situs Next.js adalah skrip. Tidak seperti jenis konten lainnya, skrip dapat memerlukan waktu yang cukup lama untuk didownload dan dieksekusi, yang dapat memblokir rendering dan menunda interaktivitas pengguna. Data dari Laporan Pengalaman Pengguna Chrome (CrUX) menunjukkan bahwa situs Next.js yang memuat lebih banyak skrip pihak ketiga memiliki rasio kelulusan Interaction to Next Paint (INP) dan Largest Contentful Paint (LCP) yang lebih rendah.

Laporan CrUX Desember 2023 (110.823 situs)

Korelasi yang diamati dalam diagram ini tidak menyiratkan kausalitas. Namun, eksperimen lokal memberikan bukti tambahan bahwa skrip pihak ketiga secara signifikan memengaruhi performa halaman. Misalnya, diagram di bawah membandingkan berbagai metrik lab saat penampung Google Tag Manager—yang terdiri dari 18 tag yang dipilih secara acak—ditambahkan ke Taxonomy, aplikasi contoh Next.js yang populer.

WebPageTest (4G Seluler - Virginia, AS)

Dokumentasi WebPageTest memberikan detail tentang cara pengukuran waktu ini. Dari sekilas, terlihat jelas bahwa semua metrik lab ini terpengaruh oleh penampung GTM. Misalnya, Total Blocking Time (TBT)—proxy lab berguna yang mendekati INP—melihat peningkatan hampir 20 kali lipat.

Komponen skrip

Saat mengirimkan komponen <Script> di Next.js, kami memastikan untuk memperkenalkannya melalui API yang mudah digunakan dan sangat mirip dengan elemen <script> tradisional. Dengan menggunakannya, developer dapat menempatkan skrip pihak ketiga secara bersama-sama di komponen apa pun dalam aplikasi mereka, dan Next.js akan menangani pengurutan skrip setelah resource penting dimuat.

<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />

<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />

<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />

Puluhan ribu aplikasi Next.js—termasuk situs populer seperti Patreon, Target, dan Notion—menggunakan komponen <Script>. Terlepas dari efektivitasnya, beberapa developer telah menyampaikan kekhawatiran tentang hal-hal berikut:

• Tempat untuk menempatkan komponen <Script> di aplikasi Next.js sambil mematuhi berbagai petunjuk penginstalan dari berbagai penyedia pihak ketiga (pengalaman developer).
• Strategi pemuatan mana yang paling optimal untuk digunakan untuk berbagai skrip pihak ketiga (pengalaman pengguna).

Untuk mengatasi kedua masalah ini, kami meluncurkan @next/third-parties—library khusus yang menawarkan serangkaian komponen dan utilitas yang dioptimalkan yang disesuaikan untuk pihak ketiga yang populer.

Pengalaman developer: mempermudah pengelolaan library pihak ketiga

Banyak skrip pihak ketiga yang digunakan dalam persentase yang signifikan di situs Next.js, dengan Google Tag Manager sebagai yang paling populer, yang digunakan oleh 66% situs. @next/third-parties dibuat di atas komponen <Script> dengan memperkenalkan wrapper tingkat lebih tinggi yang dirancang untuk menyederhanakan penggunaan untuk kasus penggunaan umum ini.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Google Analytics—skrip pihak ketiga lain yang banyak digunakan (52% situs Next.js)—juga memiliki komponen khusus.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  );
}

@next/third-parties menyederhanakan proses pemuatan skrip yang biasa digunakan, tetapi juga memperluas kemampuan kita untuk mengembangkan utilitas untuk kategori pihak ketiga lainnya, seperti penyematan. Misalnya, penyematan Google Maps dan YouTube masing-masing digunakan di 8% dan 4% situs Next.js, dan kami juga telah mengirimkan komponen untuk memudahkan pemuatan.

import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";

export default function Page() {
  return (
    <>
      <GoogleMapsEmbed
        apiKey="XYZ"
        height={200}
        width="100%"
        mode="place"
        q="Brooklyn+Bridge,New+York,NY"
      />
      <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
    </>
  );
}

Pengalaman pengguna: membuat library pihak ketiga dimuat lebih cepat

Dalam dunia yang sempurna, setiap library pihak ketiga yang diadopsi secara luas akan sepenuhnya dioptimalkan, sehingga abstraksi apa pun yang meningkatkan performanya tidak diperlukan. Namun, hingga hal itu menjadi kenyataan, kita dapat mencoba meningkatkan pengalaman pengguna saat diintegrasikan melalui framework populer seperti Next.js. Kita dapat bereksperimen dengan berbagai teknik pemuatan, memastikan bahwa skrip diurutkan dengan cara yang benar, dan pada akhirnya membagikan masukan kepada penyedia pihak ketiga untuk mendorong perubahan upstream.

Misalnya, sematan YouTube. Beberapa implementasi alternatif memiliki performa jauh lebih baik daripada penyematan native. Saat ini, komponen <YouTubeEmbed> yang diekspor oleh @next/third-parties menggunakan lite-youtube-embed, yang, saat ditunjukkan dalam perbandingan Next.js "Hello, World", memuat jauh lebih cepat.

WebPageTest (Mobile 4G - Virginia USA)

Demikian pula, untuk Google Maps, kami menyertakan loading="lazy" sebagai atribut default untuk sematan guna memastikan bahwa peta hanya dimuat saat berada dalam jarak tertentu dari area pandang. Ini mungkin tampak seperti atribut yang jelas untuk disertakan—terutama karena dokumentasi Google Maps menyertakannya dalam contoh cuplikan kode—tetapi hanya 45% situs Next.js yang menyematkan Google Maps yang menggunakan loading="lazy".

Menjalankan skrip pihak ketiga di pekerja web

Salah satu teknik lanjutan yang sedang kita pelajari di @next/third-parties adalah mempermudah pemindahan skrip pihak ketiga ke pekerja web. Dipopulerkan oleh library seperti Partytown, hal ini dapat mengurangi dampak skrip pihak ketiga pada performa halaman secara substansial dengan memindahkannya sepenuhnya dari thread utama.

GIF animasi berikut menunjukkan variasi dalam tugas panjang dan waktu pemblokiran thread utama saat menerapkan berbagai strategi <Script> ke penampung GTM dalam situs Next.js. Perhatikan bahwa, meskipun beralih antar-opsi strategi hanya menunda waktu saat skrip ini dieksekusi, memindahkannya ke pekerja web akan sepenuhnya menghilangkan waktunya di thread utama.

WebPageTest (Mobile 4G - Virginia USA)

Dalam contoh khusus ini, memindahkan eksekusi penampung GTM dan skrip tag terkait ke pekerja web mengurangi TBT sebesar 92%.

Perlu diperhatikan bahwa, jika tidak dikelola dengan hati-hati, teknik ini dapat secara otomatis merusak banyak skrip pihak ketiga sehingga mempersulit proses debug. Dalam beberapa bulan mendatang, kami akan memvalidasi apakah komponen pihak ketiga yang ditawarkan oleh @next/third-parties berfungsi dengan benar saat dijalankan di pekerja web. Jika demikian, kami akan bekerja untuk menyediakan cara yang mudah dan opsional bagi developer untuk menggunakan teknik ini.

Langkah berikutnya

Dalam proses pengembangan paket ini, menjadi jelas bahwa ada kebutuhan untuk memusatkan rekomendasi pemuatan pihak ketiga sehingga framework lain juga dapat memanfaatkan teknik dasar yang sama yang digunakan. Hal ini mengarahkan kami untuk membangun Third Pihak Capital, sebuah library yang menggunakan JSON untuk mendeskripsikan teknik pemuatan pihak ketiga, yang saat ini berfungsi sebagai dasar untuk @next/third-parties.

Sebagai langkah selanjutnya, kami akan terus berfokus pada peningkatan komponen yang disediakan untuk Next.js serta memperluas upaya kami untuk menyertakan utilitas serupa di framework dan platform CMS populer lainnya. Saat ini kami sedang berkolaborasi dengan pengelola Nuxt, dan berencana untuk merilis utilitas pihak ketiga serupa yang disesuaikan dengan ekosistem mereka dalam waktu dekat.

Jika salah satu pihak ketiga yang Anda gunakan di aplikasi Next.js didukung oleh @next/third-parties, instal paketnya dan coba. Kami ingin mendengar masukan Anda di GitHub.