2021'de, Chrome Aurora ekibi Komut Dosyası bileşenini Next.js'deki üçüncü taraf komut dosyalarının yükleme performansı. Lansmandan bu yana üçüncü taraf kaynaklarını yüklemeyi kolaylaştırmak ve daha hızlı sunmamızı sağlıyor.
Bu blog yayınında, kullanıma sunduğumuz yeni özelliklere, özellikle de @next/third-parties ve yol haritamızda gelecekteki girişimlerin bir taslağını hazırlar.
Üçü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çerikleri beğenme komut dosyalarının indirilmesi ve yürütülmesi çok fazla zaman alabilir, Bu da, oluşturmayı engelleyebilir ve kullanıcı etkileşimini geciktirebilir. Chrome verileri Kullanıcı Deneyimi Raporu (CrUX), daha fazla üçüncü taraf yükleyen Next.js sitelerinin, komut dosyalarının Sonraki Boyamayla Etkileşimi daha düşük (INP) ve Largest Contentful Paint (LCP) geçme oranları.
Bu grafikte gözlemlenen korelasyon, nedensellik anlamına gelmez. Ancak, yerel denemeler, üçüncü taraf komut dosyalarının önemli ölçüde daha belirgin sayfa performansını etkiler. Örneğin, aşağıdaki grafikte çeşitli lab'ler karşılaştırılmaktadır rastgele seçilen 18'den oluşan bir Google Etiket Yöneticisi kapsayıcısından oluşan etiketleri—popüler bir Next.js örneği olan Sınıflandırma'ya eklenir uygulamasını indirin.
WebPageTest dokümanları bu zamanlamaların nasıl ölçüldüğüne dair ayrıntılar içerir. İlk bakışta tüm bu laboratuvar metriklerinin GTM kapsayıcısından etkilendiği açıkça belirtilmiştir. Örneğin, Örneğin, Toplam Engelleme Süresi (TBT): yaklaşık 20 kat artış sağladı.
Komut dosyası bileşeni
Next.js'de <Script> bileşenini gönderirken,
geleneksel <script> API'sine çok benzeyen kullanıcı dostu bir API üzerinden
öğesine dokunun. Geliştiriciler bu komut dosyasını kullanarak üçüncü taraf komut dosyalarını istedikleri
bileşenine sahip olur. Next.js, JavaScript'in
komut dosyasını çalıştırın.
<!-- 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" />
Örneğin, Google Haritalar ve Google Earth gibi popüler siteler dahil
Patreon, Target ve
Notion: <Script> bileşenini kullanın. Her ne kadar
bazı geliştiriciler aşağıdaki konularda endişelerini dile getirmiştir:
şeyler:
- Politikalara uyurken Next.js uygulamasında
<Script>bileşeninin yerleştirileceği yer farklı üçüncü taraf sağlayıcıların çeşitli yükleme talimatlarına uygun olduğundan emin olun. (geliştirici deneyimi). - Farklı farklı dönüşümler için kullanılacak en ideal yükleme stratejisi üçüncü taraf komut dosyaları (kullanıcı deneyimi).
Bu endişelerin ikisini de ele almak için @next/third-parties
Bir dizi optimize edilmiş bileşen ve yardımcı program sunan özel kitaplık
özelleştirilmiş bir çözüm sunar.
Geliştirici deneyimi: Üçüncü taraf kitaplıkların yönetimini kolaylaştırma
Birçok üçüncü taraf komut dosyası, Next.js sitelerinin önemli bir yüzdesinde
En popüleri olan Google Etiket Yöneticisi,
Sitelerin sırasıyla% 66'sı.
@next/third-parties, <Script> üzerine inşa edildi
kullanımını kolaylaştırmak için tasarlanmış daha yüksek düzeyli sarmalayıcılar sunarak
kullanım alanlarından bahsedeceğiz.
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: Yaygın olarak kullanılan başka bir üçüncü taraf komut dosyası (Next.js sitelerinin% 52'si) - Ayrıca kendi ö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 işlemini kolaylaştırır.
aynı zamanda diğer üçüncü taraflar için yardımcı programlar geliştirme imkanımızı da
yerleştirmeler gibi. Örneğin, Google Haritalar ve YouTube yerleştirmeleri
kullanıldığı yer
%8
ve
%4
sırasıyla Next.js web sitelerinin birkaçı. Ayrıca, bunları hazırlamak için
daha kolay yüklenir.
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 daha hızlı yüklenmesini sağlama
Kusursuz bir dünyada, yaygın olarak benimsenen her üçüncü taraf kitaplığı tam olarak Bu nedenle, performanslarını artıran soyutlamaları gereksiz hale getirirler. Ancak bu gerçekleşene kadar kullanıcılarının deneyimini iyileştirmeye çalışabiliriz. yeni deneyim kazanma fırsatından bahsedin. Google'da farklı yükleme tekniklerini deneyin, komut dosyalarının sıralı olduğundan emin olun ve nihai olarak, geri bildirimimizi üçüncü taraflarla yüksek akış değişikliklerine teşvik etmek için
Örneğin, yerleştirilmiş YouTube öğelerine bakalım. Bazı alternatif uygulamalarda
yerel yerleşik reklamdan çok daha iyi performans
gösteriyor. Şu anda <YouTubeEmbed>
@next/third-parties kullanım tarafından dışa aktarılan bileşen
lite-youtube-embed,
"Hello, World" mesajıyla gösterildiğinde Next.js karşılaştırması, önemli ölçüde yükleniyor
daha hızlı.
Benzer şekilde, Google Haritalar için loading="lazy" değerini,
Haritanın yalnızca belirli bir mesafe içinde yüklendiğinden emin olmak için,
görüntü alanını değiştirebilirsiniz. Bu, özellikle eklenmesi gereken bariz bir özellik gibi görünebilir.
Google Haritalar’dan bu yana
belgeler
bunu örnek kod snippet'ine ekler; ancak
Google Haritalar'ın yerleştirildiği Next.js sitelerinin% 45'i loading="lazy" kullanıyor.
Bir web çalışanında üçüncü taraf komut dosyaları çalıştırma
@next/third-parties ürününde incelediğimiz gelişmiş tekniklerden biri,
üçüncü taraf komut dosyalarını bir web çalışanına boşaltmak daha kolaydır. Popülerleştiren:
Partytown gibi kitaplıklar varsa bu,
üçüncü taraf komut dosyalarının sayfa performansı üzerindeki etkisini,
bunları tamamen ana iş parçacığının dışına taşımanızı öneririz.
Aşağıdaki animasyonlu GIF'te, uzun görevlerdeki ve ana ileti dizisindeki farklılıklar gösteriliyor
GTM kapsayıcısına farklı <Script> stratejileri uygularken engelleme süresi
bir Next.js sitesi içinde. Yalnızca strateji seçenekleri arasında geçiş yaparken
bu komut dosyalarının yürütülme zamanını geciktirerek bunları bir web çalışanına yeniden yerleştirir
ana ileti dizisinde geçirdikleri süreyi tamamen ortadan kaldırır.
Bu örnekte, GTM kapsayıcısının yürütülmesi ve bununla birlikte etiket komut dosyalarını bir web çalışanı için TBT'yi%92 azalttı.
Dikkatli bir şekilde yönetilmezse bu tekniğin sessizce
üçüncü taraf komut dosyalarını bozarak hata ayıklamayı zorlaştırır. Gelecekte
tarafından sunulan üçüncü taraf bileşenlerinin mevcut olup olmadığını
@next/third-parties, bir web çalışanında çalıştırıldığında düzgün çalışıyor. Eğer öyleyse,
isteğe bağlı olarak yararlanabileceğiniz kolay ve isteğe bağlı bir yöntem
tekniği inceleyelim.
Sonraki adımlar
Bu paketi geliştirme sürecinde, satın alma konusunda ortaya çıkan bir
diğer çerçevelerin yararlanabilmesi için üçüncü taraf yükleme
önerilerini merkezileştirmesi
kullanılan temel tekniklerden
fayda sağladığını da görebilirsiniz. Bu da
oluşturma Üçüncü Taraf
Capital bir kütüphane
üçüncü taraf yükleme tekniklerini açıklamak için JSON kullanan
@next/third-parties için temel niteliğindedir.
Sonraki adımlarımızda, sağlanan bileşenleri iyileştirmeye odaklanmaya devam edeceğiz: geliştirmenin yanı sıra, diğer Google ürünlerindeki benzer yardımcı programlara ve İYS platformlarını kullanabilirsiniz. Şu anda Nuxt ile birlikte çalışıyoruz ve bunlara benzer üçüncü taraf hizmetler yayınlamayı planlayan ekosistemine katılmaya çalışıyor.
Next.js uygulamanızda kullandığınız üçüncü taraflardan biri,
@next/third-parties,
paketi yükleyin
ve bir deneme yapın! Geri bildiriminizi bizimle paylaşın:
GitHub'a gidin.