Halaman ini diterjemahkan oleh Cloud Translation API.

Paket Next.js untuk mengelola library pihak ketiga

Houssein Djirdeh

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

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

Implikasi performa skrip pihak ketiga

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

Diagram batang yang menunjukkan penurunan persentase Next.js yang mencapai skor INP dan LCP yang baik sebanding dengan jumlah pihak ketiga yang dimuat — Laporan CrUX Desember 2023 (110.823 situs)

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

Diagram batang yang menunjukkan perbedaan dalam berbagai metrik lab saat situs dimuat dengan dan tanpa Google Tag Manager — WebPageTest (4G Seluler - Virginia AS)

Dokumentasi WebPageTest memberikan detail tentang cara pengukuran waktu ini. Secara sekilas, jelas bahwa semua metrik lab ini terpengaruh oleh penampung GTM. Misalnya, Total Blocking Time (TBT)—proxy lab berguna yang memperkirakan 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 bersama-sama menemukan skrip pihak ketiga 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>. Meskipun efektivitasnya, beberapa developer telah mengemukakan kekhawatiran tentang hal-hal berikut:

Tempat untuk menempatkan komponen <Script> di aplikasi Next.js dengan tetap mematuhi berbagai petunjuk penginstalan dari penyedia pihak ketiga yang berbeda (pengalaman developer).
Strategi pemuatan mana yang paling optimal 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: menjadikan library pihak ketiga lebih mudah dikelola

Banyak skrip pihak ketiga digunakan di sebagian besar situs Next.js, dengan Google Tag Manager menjadi yang paling populer, yang digunakan oleh masing-masing 66% situs. @next/third-parties dibuat berdasarkan 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 lainnya yang banyak digunakan (52% situs Next.js)—juga memiliki komponen khusus sendiri.

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 kami dalam mengembangkan utilitas untuk kategori pihak ketiga lainnya, seperti sematan. Misalnya, sematan Google Maps dan YouTube digunakan masing-masing di 8% dan 4% situs Next.js, dan kami juga mengirimkan komponen untuk membuatnya lebih mudah dimuat.

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

Seharusnya, setiap library pihak ketiga yang diadopsi secara luas akan dioptimalkan sepenuhnya, sehingga abstraksi apa pun yang meningkatkan performanya tidak diperlukan. Namun, hingga hal itu menjadi kenyataan, kami dapat mencoba meningkatkan pengalaman pengguna mereka 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 memberikan masukan kepada penyedia pihak ketiga untuk mendorong perubahan upstream.

Contohnya adalah sematan YouTube. Beberapa implementasi alternatif memiliki performa yang jauh lebih baik daripada sematan native. Saat ini, komponen <YouTubeEmbed> yang diekspor oleh @next/third-parties menggunakan lite-youtube-embed, yang saat ditunjukkan dalam perbandingan Next.js "Halo, Dunia" akan dimuat jauh lebih cepat.

GIF yang menampilkan perbandingan pemuatan halaman antara komponen YouTube Embed dan iframe YouTube biasa — WebPageTest (4G Seluler - Virginia AS)

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 kodenya—tetapi hanya 45% situs Next.js yang menyematkan Google Maps yang menggunakan loading="lazy".

Menjalankan skrip pihak ketiga dalam pekerja web

Salah satu teknik lanjutan yang kami 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 terhadap performa halaman secara substansial dengan memindahkannya sepenuhnya dari thread utama.

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

GIF yang menunjukkan perbedaan waktu pemblokiran thread utama untuk berbagai strategi Skrip — WebPageTest (4G Seluler - Virginia AS)

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 otomatis merusak banyak skrip pihak ketiga, sehingga proses debug menjadi sulit. 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 berupaya menyediakan cara yang mudah dan opsional bagi developer untuk menggunakan teknik ini.

Langkah berikutnya

Dalam proses pengembangan paket ini, terlihat jelas bahwa rekomendasi pemuatan pihak ketiga perlu terpusat sehingga framework lain juga dapat memperoleh manfaat dari teknik dasar yang sama dengan yang digunakan. Oleh karena itu, kami membuat Modal Pihak Ketiga, library yang menggunakan JSON untuk menjelaskan teknik pemuatan pihak ketiga, yang saat ini berfungsi sebagai dasar untuk @next/third-parties.

Sebagai langkah berikutnya, kami akan terus berfokus pada peningkatan komponen yang disediakan untuk Next.js serta memperluas upaya kami untuk menyertakan utilitas serupa dalam framework populer dan platform CMS lainnya. Saat ini, kami bekerja sama dengan pengelola Nuxt, dan berencana 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 paket dan cobalah. Kami ingin mendengar masukan Anda di GitHub.