Halaman ini diterjemahkan oleh Cloud Translation API.

Paket Next.js untuk mengelola library pihak ketiga

Houssein Djirdeh

Pada tahun 2021, tim Chrome Aurora memperkenalkan Skrip komponen untuk meningkatkan memuat performa skrip pihak ketiga di Next.js. Sejak diluncurkan, kami telah memperluas kemampuannya untuk mempermudah pemuatan sumber daya pihak ketiga dan dengan lebih cepat bagi pengembang.

Posting blog ini memberikan ikhtisar tentang berbagai fitur baru yang telah kami rilis, terutama @next/third-parties serta garis besar inisiatif mendatang dalam rencana kami.

Implikasi performa skrip pihak ketiga

41% dari semua permintaan pihak ketiga di situs Next.js adalah skrip. Tidak seperti konten lain {i>script<i}, skrip dapat memakan banyak waktu untuk diunduh dan dijalankan, yang dapat memblokir rendering dan menunda interaktivitas pengguna. Data dari Chrome Laporan Pengalaman Pengguna (CrUX) menunjukkan bahwa situs Next.js yang memuat lebih banyak situs skrip memiliki Interaction to Next Paint yang lebih rendah (INP) dan Largest Contentful Paint (LCP) (LCP).

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 diagram ini tidak menyiratkan kausalitas. Namun, model lokal memberikan bukti tambahan bahwa skrip pihak ketiga memengaruhi performa halaman. Misalnya, diagram di bawah ini membandingkan berbagai lab metrik saat penampung Google Tag Manager—terdiri dari 18 kolom yang dipilih secara acak tag—ditambahkan ke Taksonomi, contoh Next.js yang populer .

Diagram batang yang menunjukkan perbedaan di 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, ini memahami bahwa semua metrik lab ini dipengaruhi oleh penampung GTM. Sebagai contoh, Total Blocking Time (TBT)—lab yang berguna yang mendekati INP—mengalami peningkatan hampir 20 kali lipat.

Komponen skrip

Saat mengirimkan komponen <Script> di Next.js, kami memastikan untuk memperkenalkan melalui API yang mudah digunakan dan sangat mirip dengan <script> . Dengan menggunakannya, developer dapat menempatkan skrip pihak ketiga 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—gunakan komponen <Script>. Meskipun efektifitasnya, beberapa developer telah menyampaikan kekhawatirannya hal:

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

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

Pengalaman developer: mempermudah pengelolaan library pihak ketiga

Banyak skrip pihak ketiga digunakan dalam sebagian besar situs Next.js, dengan Google Tag Manager menjadi yang paling populer, yang digunakan oleh 66% situs secara berurutan. @next/third-parties di-build di atas <Script> dengan memperkenalkan wrapper tingkat lebih tinggi yang dirancang untuk menyederhanakan penggunaan 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 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 umum digunakan, tetapi juga memperluas kemampuan kami untuk mengembangkan utilitas bagi pihak ketiga kategori, seperti sematan. Misalnya, sematan Google Maps dan YouTube digunakan di 8% dan 4% situs Next.js, dan kami juga telah 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

Sempurna, setiap pustaka pihak ketiga yang diadopsi secara luas akan dioptimalkan, sehingga abstraksi yang meningkatkan kinerja mereka tidak diperlukan. Namun, hingga hal itu diwujudkan, kita dapat mencoba meningkatkan kualitas saat diintegrasikan melalui framework populer seperti Next.js. Kita dapat bereksperimen dengan teknik pemuatan yang berbeda, pastikan bahwa skrip diurutkan dengan cara yang benar, dan pada akhirnya membagikan masukan kami kepada pihak ketiga penyedia layanan untuk mendorong perubahan upstream.

Contohnya, sematan YouTube. Di mana beberapa implementasi alternatif memiliki jauh lebih baik daripada sematan bawaan. Saat ini, <YouTubeEmbed> komponen yang diekspor oleh @next/third-parties menggunakan lite-youtube-embed, yang akan ketika didemonstrasikan dalam "Hello, World" (Halo Dunia) Perbandingan Next.js, yang dimuat secara signifikan dengan 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 untuk memastikan bahwa peta hanya dimuat pada jarak tertentu dari area pandang. Ini mungkin tampak seperti atribut yang jelas untuk disertakan—terutama karena Google Maps dokumentasi menyertakannya dalam cuplikan kode contoh—tetapi hanya 45% situs Next.js yang menyematkan Google Maps menggunakan loading="lazy".

Menjalankan skrip pihak ketiga di pekerja web

Salah satu teknik tingkat lanjut yang kami eksplorasi di @next/third-parties adalah membuatnya lebih mudah untuk mengalihkan skrip pihak ketiga ke pekerja web. Dipopulerkan oleh seperti Partytown, hal ini dapat mengurangi pengaruh skrip pihak ketiga terhadap performa halaman secara signifikan dengan atau merelokasinya sepenuhnya dari thread utama.

GIF animasi berikut menunjukkan variasi dalam tugas yang panjang dan thread utama waktu pemblokiran saat menerapkan strategi <Script> yang berbeda ke penampung GTM dalam situs Next.js. Perhatikan bahwa saat beralih di antara beberapa opsi strategi saja menunda waktu eksekusi skrip, dan memindahkannya ke pekerja web 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 dicatat bahwa, jika tidak dikelola dengan hati, teknik ini dapat secara perlahan merusak banyak skrip pihak ketiga, membuat proses debug menjadi sulit. Dalam bulan, kami akan memvalidasi jika ada komponen pihak ketiga yang ditawarkan oleh @next/third-parties berfungsi dengan benar saat dijalankan di pekerja web. Jika ya, kita akan berupaya menyediakan cara yang mudah dan bersifat opsional bagi developer untuk menggunakan standar.

Langkah berikutnya

Dalam proses pengembangan paket ini, menjadi jelas bahwa ada perlu memusatkan rekomendasi pemuatan pihak ketiga sehingga kerangka kerja lain juga bisa mendapatkan manfaat dari teknik dasar yang sama dengan yang digunakan. Hal ini mengarahkan kami untuk membangun Pihak Ketiga Modal, perpustakaan yang menggunakan JSON untuk menjelaskan 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. Saat ini kami sedang bekerja sama dengan Nuxt pengelola, dan berencana merilis utilitas pihak ketiga serupa yang disesuaikan bagi 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 cobalah! Kami ingin mendengar masukan Anda tentang GitHub.