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 sunulmasından bu yana, üçüncü taraf kaynaklarını yüklemeyi geliştiriciler için daha kolay ve hızlı hale getirmek amacıyla bu aracın özelliklerini 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 dosyası şeklindedir. 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 Sonraki Boyama İçin 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 uyarken
<Script>bileşeninin bir Next.js uygulamasına yerleştirileceği yer (geliştirici deneyimi). - Farklı üçüncü taraf komut dosyaları için en uygun 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 içerikleri 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
Mükemmel bir dünyada, yaygın olarak kullanılan her üçüncü taraf kitaplığı tamamen optimize edilmiş olurdu. Bu da performanslarını artıran tüm soyutlamaları gereksiz hale getirirdi. 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, YouTube yerleşik videolarını ele alalı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, "Merhaba Dünya" Next.js karşılaştırmasında gösterildiğinde önemli ölçüde daha hızlı yüklenen lite-youtube-embed bileşenini kullanıyor.
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ı ç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 yaygınlaştırılan bu yöntem, üçüncü taraf komut dosyalarını tamamen ana iş parçacığından kaldırarak sayfa performansı üzerindeki etkilerini ö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şleyicisine 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ıklama işlemini 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 diğer popüler çerçevelere ve içerik yönetim sistemi platformlarına benzer yardımcı programlar eklemek 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.