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.
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.
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.
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.
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.