Chrome Aurora ekibi, 2021'de Next.js'deki üçüncü taraf komut dosyalarının yükleme performansını iyileştirmek için komut dosyası bileşenini kullanıma sundu. Kullanıma sunulduğundan beri, geliştiricilerin üçüncü taraf kaynaklarını daha kolay ve hızlı yükleyebilmesi için bu özelliğin kapsamını genişlettik.
Bu blog yayınında, kullanıma sunduğumuz yeni özelliklere (özellikle @next/third-parties kitaplığına) genel bir bakış ve yol haritamızdaki gelecekteki girişimlerin ana hatları sunulmaktadır.
Üçüncü taraf komut dosyalarının performans üzerindeki etkileri
Next.js sitelerindeki tüm üçüncü taraf isteklerinin% 41'i komut dosyalarıdır. Diğer içerik türlerinin aksine, komut dosyalarının indirilmesi ve yürütülmesi oldukça uzun sürebilir. Bu da oluşturmayı engelleyebilir ve kullanıcı etkileşimini geciktirebilir. Chrome Kullanıcı Deneyimi Raporu'ndaki (CrUX) veriler, daha fazla üçüncü taraf komut dosyası yükleyen Next.js sitelerinin İlk Boyamaya Etkileşim (INP) ve Largest Contentful Paint (LCP) geçiş oranlarının daha düşük olduğunu gösteriyor.
Bu grafikte gözlemlenen korelasyon, neden sonuç ilişkisi anlamına gelmez. Ancak yerel denemeler, üçüncü taraf komut dosyalarının sayfa performansını önemli ölçüde etkilediğine dair ek kanıtlar sağlar. Örneğin, aşağıdaki grafikte, rastgele seçilen 18 etiketten oluşan bir Google Etiket Yöneticisi kapsayıcısı popüler bir Next.js örnek uygulaması olan Taxonomy'ye eklendiğinde çeşitli Labs metrikleri karşılaştırılmaktadır.
Bu zamanlamaların nasıl ölçüldüğüyle ilgili ayrıntılar WebPageTest dokümanlarında verilmiştir. Bir bakışta, bu laboratuvar metriklerinin tümünün GTM kapsayıcısından etkilendiği açıkça görülüyor. Örneğin, INP'ye yaklaşık olarak karşılık gelen faydalı bir laboratuvar proxy'si olan Total Blocking Time (TBT), yaklaşık 20 kat artış gösterdi.
Komut dosyası bileşeni
Next.js'de <Script> bileşenini kullanıma sunduğumuzda, geleneksel <script> öğesine çok benzeyen kullanıcı dostu bir API aracılığıyla kullanıma sunduk. Geliştiriciler bu özelliği kullanarak üçüncü taraf komut dosyalarını uygulamalarındaki herhangi bir bileşenle birlikte yerleştirebilir. Next.js, kritik kaynaklar yüklendikten sonra komut dosyasının sıralamasını yapar.
<!-- 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" />
Patreon, Target ve Notion gibi popüler siteler de dahil olmak üzere on binlerce Next.js uygulaması <Script> bileşenini kullanır. Etkili olmasına rağmen bazı geliştiriciler aşağıdaki konularla ilgili endişelerini dile getirdi:
- Farklı üçüncü taraf sağlayıcıların farklı yükleme talimatlarına uyarak
<Script>bileşenini bir Next.js uygulamasına yerleştirme (geliştirici deneyimi). - Farklı üçüncü taraf komut dosyaları için kullanılacak en ideal yükleme stratejisi (kullanıcı deneyimi).
Bu iki endişeyi de gidermek için popüler üçüncü taraflara özel olarak tasarlanmış bir dizi optimize edilmiş bileşen ve yardımcı program sunan özel bir kütüphane olan @next/third-parties'ü kullanıma sunduk.
Geliştirici deneyimi: Üçüncü taraf kitaplıklarının daha kolay yönetilmesini sağlama
Next.js sitelerinin önemli bir yüzdesinde birçok üçüncü taraf komut dosyası kullanılmaktadır. Bunların en popüleri Google Etiket Yöneticisi'dir ve sırasıyla sitelerin% 66'sı tarafından kullanılmaktadır.
@next/third-parties, bu yaygın kullanım alanlarında kullanımı basitleştirmek için tasarlanmış üst düzey sarmalayıcılar sunarak <Script> bileşeninin üzerine inşa edilmiştir.
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleTagManager gtmId="GTM-XYZ" />
</html>
);
}
Yaygın olarak kullanılan bir diğer üçüncü taraf komut dosyası olan Google Analytics'in (Next.js sitelerinin% 52'sinde) de özel bir bileşeni vardır.
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, yaygın olarak kullanılan komut dosyalarını yükleme sürecini basitleştirir ancak yerleşimler gibi diğer üçüncü taraf kategorileri için yardımcı programlar geliştirmemizi de sağlar. Örneğin, Google Haritalar ve YouTube yerleşik öğeleri sırasıyla Next.js web sitelerinin %8 ve %4'ünde kullanılıyor. Ayrıca, bunların yüklenmesini kolaylaştırmak için bileşenler de yayınladık.
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" />
</>
);
}
Kullanıcı deneyimi: Üçüncü taraf kitaplıklarının daha hızlı yüklenmesini sağlama
Kusursuz bir dünyada, yaygın olarak benimsenen her üçüncü taraf kitaplığı tamamen optimize edilecektir. Bu da performanslarını iyileştiren soyutlamaları gereksiz hale getirir. Ancak bu gerçekleşene kadar Next.js gibi popüler çerçeveler aracılığıyla entegre edildiğinde kullanıcı deneyimini iyileştirmeye çalışabiliriz. Farklı yükleme tekniklerini deneyebilir, komut dosyalarının doğru şekilde sıralandığından emin olabilir ve yayın öncesi değişiklikleri teşvik etmek için geri bildirimlerimizi üçüncü taraf sağlayıcılarla paylaşabiliriz.
Örneğin, yerleştirilmiş YouTube öğelerine bakalım. Bazı alternatif uygulamalar, yerel yerleşime kıyasla çok daha iyi performans gösterir. Şu anda @next/third-parties tarafından dışa aktarılan <YouTubeEmbed> bileşeni lite-youtube-embed'i kullanıyor. Bu bileşen, "Hello, World" Next.js karşılaştırmasında gösterildiğinde önemli ölçüde daha hızlı yüklenir.
Benzer şekilde, Google Haritalar için haritanın yalnızca görüntü alanından belirli bir mesafede olduğunda yüklenmesini sağlamak amacıyla yerleşik için varsayılan özellik olarak loading="lazy" değerini ekleriz. Bu, özellikle Google Haritalar dokümanları örnek kod snippet'ine dahil ettiğinden dahil edilmesi gereken bariz bir özellik gibi görünebilir. Ancak Google Haritalar'ı yerleştiren Next.js sitelerinin yalnızca% 45'i loading="lazy" kullanıyor.
Web çalışanında üçüncü taraf komut dosyalarını çalıştırma
@next/third-parties'te keşfettiğimiz ileri düzey tekniklerden biri, üçüncü taraf komut dosyalarının bir web işçisine aktarılmasını kolaylaştırmaktır. Partytown gibi kitaplıklar tarafından popüler hale gelen bu yöntem, üçüncü taraf komut dosyalarının tamamen ana iş parçacığının dışına taşınarak sayfa performansı üzerindeki etkisini önemli ölçüde azaltabilir.
Aşağıdaki animasyonlu GIF'te, Next.js sitesindeki bir GTM kapsayıcısına farklı <Script> stratejileri uygularken uzun görevlerde ve ana iş parçacığı engelleme süresinde görülen farklılıklar gösterilmektedir. Strateji seçenekleri arasında geçiş yapmak, bu komut dosyalarının yürütülme zamanını yalnızca geciktirir. Ancak komut dosyalarını bir web işleyiciye taşımak, ana işleyicideki sürelerini tamamen ortadan kaldırır.
Bu örnekte, GTM kapsayıcısının ve ilişkili etiket komut dosyalarının yürütülmesi bir web işleyicisine taşınarak TBT%92 oranında azaltıldı.
Bu tekniğin dikkatli bir şekilde yönetilmezse birçok üçüncü taraf komut dosyasını sessizce bozabileceğini ve hata ayıklamayı zorlaştırabileceğini unutmayın. Önümüzdeki aylarda, @next/third-parties tarafından sunulan üçüncü taraf bileşenlerinin bir web işçisinde çalıştırıldığında doğru şekilde çalışıp çalışmadığını doğrulayacağız. Bu durumda, geliştiricilerin bu tekniği kullanması için kolay ve isteğe bağlı bir yöntem sunmak üzere çalışacağız.
Sonraki adımlar
Bu paket geliştirilirken, diğer çerçevelerin de kullanılan temel tekniklerden yararlanabilmesi için üçüncü taraf yükleme önerilerinin merkezileştirilmesi gerektiği anlaşıldı. Bu durum, üçüncü taraf yükleme tekniklerini tanımlamak için JSON kullanan ve şu anda @next/third-parties'nin temelini oluşturan bir kitaplık olan Third Party Capital'i oluşturmamıza yol açtı.
Sonraki adımlarımızda, Next.js için sağlanan bileşenleri iyileştirmeye odaklanmaya ve benzer yardımcı programları diğer popüler çerçevelere ve içerik yönetim sistemi platformlarına dahil etmek için çalışmalarımızı genişletmeye devam edeceğiz. Şu anda Nuxt geliştiricileriyle birlikte çalışıyoruz ve yakın gelecekte onların ekosistemine özel benzer üçüncü taraf yardımcı programlar yayınlamayı planlıyoruz.
Next.js uygulamanızda kullandığınız üçüncü taraflardan biri @next/third-parties tarafından destekliyorsa paketi yükleyin ve deneyin. GitHub ile ilgili geri bildirimlerinizi öğrenmekten memnuniyet duyarız.