Next.js'de üçüncü taraf komut dosyasının yüklenmesini optimize etme

Üçüncü taraf komut dosyalarının yüklenmesini optimize etmek için yerleşik bir çözüm sağlayan Next.js Komut Dosyası bileşeninin arkasındaki vizyonu anlayın.

Leena Sohoni

Houssein Djirdeh

Mobil ve masaüstünde sunulan web sitelerinden gelen isteklerin yaklaşık %45'i, % 33'ü komut dosyası olan üçüncü taraf istekleridir. Üçüncü taraf komut dosyalarının boyutu, gecikmesi ve yüklenmesi bir sitenin performansını önemli ölçüde etkileyebilir. Next.js Komut Dosyası bileşeni, geliştiricilerin kullanıma hazır olası performans sorunlarını ele alırken uygulamalarında üçüncü taraf komut dosyalarını kullanmalarına yardımcı olmak için yerleşik en iyi uygulamalar ve varsayılan ayarlarla birlikte gelir.

Üçüncü taraf komut dosyaları ve bunların performans üzerindeki etkisi

Üçüncü taraf komut dosyaları, web geliştiricilerinin ortak özellikleri uygulamak ve geliştirme süresini kısaltmak için mevcut çözümlerden yararlanmalarına olanak tanır. Ancak bu komut dosyalarını hazırlayanların, genellikle performansı tüketen web sitesi üzerindeki etkisini düşünmek için hiçbir motivasyonu yoktur. Bu komut dosyaları aynı zamanda, bunları kullanan geliştiriciler için birer kara kutudur.

Komut dosyaları, farklı kategorilerdeki üçüncü taraf istek kategorilerinde web siteleri tarafından indirilen önemli sayıda üçüncü taraf baytını oluşturur. Varsayılan olarak tarayıcı, komut dosyalarına dokümandaki konumlarına göre öncelik verir. Bu durum, kullanıcı deneyimi açısından kritik öneme sahip komut dosyalarının bulunmasını veya yürütülmesini geciktirebilir.

Düzen için gereken üçüncü taraf kitaplıkları, sayfanın oluşturulabilmesi için erken yüklenmelidir. İlk oluşturma için gerekli olmayan üçüncü taraflar, ana iş parçacığındaki diğer işlemleri engellememeleri için ertelenmelidir. Lighthouse, oluşturma engelleme veya ana iş parçacığı engelleme komut dosyalarını işaretlemek için iki denetime sahiptir.

Kritik kaynakların gecikmemesi ve kritik olmayan kaynakların kritik kaynakları engellememesi için sayfanızın kaynak yükleme sırasını göz önünde bulundurmanız önemlidir.

Üçüncü tarafların etkisini azaltacak en iyi uygulamalar mevcut olsa da, bunları kullandıkları her üçüncü taraf için nasıl uygulanacağını herkes bilmiyor olabilir. Bu durum karmaşık olabilir çünkü:

• Web siteleri, mobil ve masaüstünde ortalama 21 ila 23 farklı üçüncü taraf (komut dosyaları dahil) kullanır. Kullanım ve öneriler her biri için farklılık gösterebilir.
• Çok sayıda üçüncü tarafın uygulanması, belirli bir çerçevenin veya kullanıcı arayüzü kitaplığının kullanılmasına bağlı olarak farklılık gösterebilir.
• Sık sık yeni üçüncü taraf kitaplıkları kullanıma sunulur.
• Aynı üçüncü tarafla ilgili farklı iş gereksinimleri, geliştiricilerin bu üçüncü tarafın kullanımını standartlaştırmasını zorlaştırır.

Aurora’nın üçüncü taraf komut dosyalarına odaklanması

Aurora'nın açık kaynak web çerçeveleri ve araçlarıyla işbirliği kapsamında, geliştiricilerin kullanıcı deneyimiyle ilgili performans, erişilebilirlik, güvenlik ve mobil hazırlık gibi özelliklerini iyileştirmelerine yardımcı olmak amacıyla güçlü varsayılanlar ve sağlamlaştırılmış araçlar sunmak yer alıyor. 2021'de, çerçeve yığınlarının kullanıcı deneyimini ve Core Web Vitals metriklerini iyileştirmesine yardımcı olmaya odaklandık.

Çerçeve performansını iyileştirme hedefimize ulaşma yolunda en önemli adımlardan biri, Next.js'de üçüncü taraf komut dosyalarının ideal yükleme sırasını araştırmaktı. Next.js gibi çerçeveler, üçüncü taraflar da dahil olmak üzere geliştiricilerin kaynakları verimli bir şekilde yüklemesine yardımcı olan yararlı varsayılanlar ve özellikler sağlamak için benzersiz bir konuma sahiptir. Farklı çerçevelerde hangi üçüncü tarafların oluşturmayı engellediğini en fazla bulmak için kapsamlı HTTP Arşivi ve Lighthouse verileri üzerinde çalıştık.

Bir uygulamada kullanılan ana iş parçacığının üçüncü taraf komut dosyalarını engellemesi sorununu çözmek için Komut Dosyası bileşenini geliştirdik. Bileşen, üçüncü taraf komut dosyası yüklemeleri için geliştiricilere daha iyi kontrol sağlamak amacıyla sıralama özelliklerini içerir.

Çerçeve bileşeni olmadan üçüncü taraf komut dosyalarını sıralama

Oluşturma engelleme komut dosyalarının etkisini azaltmaya yönelik mevcut kılavuzda, üçüncü taraf komut dosyalarını verimli bir şekilde yüklemek ve sıralamak için aşağıdaki yöntemler sunulmaktadır:

1. Tarayıcının, doküman ayrıştırıcıyı engellemeden kritik olmayan üçüncü taraf komut dosyalarını yüklemesini isteyen <script> etiketleriyle async veya defer özelliğini kullanın. İlk sayfa yükleme veya ilk kullanıcı etkileşimi için komut dosyaları gerekli olmayan komut dosyaları, kritik olmayan sonuçlar olarak değerlendirilebilir.

      <script src="https://example.com/script1.js" defer></script>
      <script src="https://example.com/script2.js" async></script>
   

2. Önceden bağlanma ve DNS önceden getirme özelliklerini kullanarak gerekli kaynaklara erken bağlantılar oluşturun. Bu sayede önemli komut dosyalarının daha erken indirilmesine başlanabilir.

      <head>
          <link rel="preconnect" href="http://PreconnThis.com">
          <link rel="dns-prefetch" href="http://PrefetchThis.com">
      </head>
   

3. Ana sayfa içeriğinin yüklenmesi bittikten sonra veya kullanıcı, sayfada dahil oldukları bölüme geçildiğinde üçüncü taraf kaynakları ve yerleştirmeleri geç yükleme.

Next.js Komut Dosyası bileşeni

Next.js Komut Dosyası bileşeni, komut dosyalarını sıralamak için yukarıdaki yöntemleri uygular ve geliştiricilere, yükleme stratejilerini tanımlamaları için bir şablon sağlar. Uygun strateji belirlendiğinde diğer kritik kaynakları engellemeden optimum şekilde yüklenir.

Komut Dosyası bileşeni, HTML <script> etiketini temel alır ve strateji özelliğini kullanarak üçüncü taraf komut dosyaları için yükleme önceliğini ayarlama seçeneği sunar.

// Example for beforeInteractive:
<Script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver" strategy="beforeInteractive" />

// Example for afterInteractive (default):
<Script src="https://example.com/samplescript.js" />

// Example for lazyonload:
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

Strateji özelliği üç değer alabilir.

1. beforeInteractive: Bu seçenek, sayfa etkileşimli hale gelmeden önce yürütülmesi gereken kritik komut dosyaları için kullanılabilir. Next.js, bu tür komut dosyalarının sunucudaki ilk HTML'ye yerleştirilmesini ve kendi kendine gruplanmış diğer JavaScript'ten önce yürütülmesini sağlar. Kritik içerik oluşturmak için gereken kullanıcı rızası yönetimi, bot algılama komut dosyaları veya yardımcı kitaplıklar bu stratejiye uygun adaylardır.

2. afterInteractive: Bu, uygulanan varsayılan stratejidir ve ertele özelliğine sahip bir komut dosyası yüklemeye eşdeğerdir. Analytics komut dosyaları gibi, sayfa etkileşimli hale geldikten sonra tarayıcının çalıştırabileceği komut dosyaları için kullanılmalıdır. Next.js, bu komut dosyalarını istemci tarafına ekler ve sayfa verileri aktarıldıktan sonra çalışır. Böylece, aksi belirtilmedikçe, Komut Dosyası bileşeni kullanılarak tanımlanan tüm üçüncü taraf komut dosyaları Next.js tarafından ertelenir ve böylece güçlü bir varsayılan sağlar.

3. lazyOnload: Bu seçenek, tarayıcı boştayken düşük öncelikli komut dosyalarını geç yüklemek için kullanılabilir. Bu tür komut dosyaları tarafından sağlanan işlevler, sayfa etkileşimli hale geldikten hemen sonra gerekli değildir (örneğin, sohbet veya sosyal medya eklentileri).

Geliştiriciler, stratejiyi belirterek Next.js'ye uygulamalarının bir komut dosyasını nasıl kullandığını söyleyebilirler. Bu, çerçevenin en iyi yükleme sırasını sağlarken komut dosyasını yüklemek için optimizasyonlar ve en iyi uygulamalar uygulamasına olanak tanır.

Geliştiriciler, Komut Dosyası bileşenini kullanarak, geç yüklenen üçüncü taraflar için uygulamanın herhangi bir yerine; kritik komut dosyaları için ise belge düzeyinde bir üçüncü taraf komut dosyası yerleştirebilir. Bu, Komut Dosyası bileşeninin, komut dosyası kullanılarak bileşenle aynı yerde bulunabileceği anlamına gelir. Sıvı alımından sonra komut dosyası, kullanılan stratejiye bağlı olarak ilk oluşturulan belgenin başına veya vücudun alt kısmına yerleştirilir.

Etkiyi ölçme

Üçüncü taraf komut dosyalarını dahil etmenin etkisini ölçmeye yardımcı olan iki demo uygulaması oluşturmak için Next.js ticaret uygulaması ve başlangıç blogunun şablonlarını kullandık. Google Etiket Yöneticisi ve sosyal medya yerleştirmeleri için yaygın olarak kullanılan üçüncü taraflar, önce doğrudan bu uygulamaların sayfalarına, ardından Komut Dosyası bileşeni üzerinden dahil edildi. Daha sonra, bu sayfaların performansını WebPageTest'te karşılaştırdık.

Next.js ticari uygulamasındaki üçüncü taraf komut dosyaları

Demo için ticari uygulama şablonuna aşağıda gösterildiği gibi üçüncü taraf komut dosyaları eklendi.

Aşağıdaki karşılaştırma, Next.js ticaret başlangıç kiti'nin her iki sürümünün de görsel ilerleme durumunu göstermektedir. Görüldüğü gibi, komut dosyası bileşeni doğru yükleme stratejisiyle etkinleştirildiğinde LCP, yaklaşık 1 saniye daha erken gerçekleşir.

Next.js blogundaki üçüncü taraf komut dosyaları

Üçüncü taraf komut dosyaları, aşağıda gösterildiği gibi demo blog uygulamasına eklendi.

Videoda görüldüğü gibi, First Contentful Paint (FCP), Komut Dosyası bileşeni olmadan sayfada 0,9.saniyede, Komut Dosyası bileşeninde ise 0,4.saniyede gerçekleşir.

Komut Dosyası bileşeni için sırada ne var?

afterInteractive ve lazyOnload strateji seçenekleri, oluşturma engelleyici komut dosyaları üzerinde önemli ölçüde kontrol sağlar. Bununla birlikte, Komut Dosyası bileşeninin daha faydalı olmasını sağlayacak diğer seçenekleri de araştırıyoruz.

Web çalışanlarını kullanma

Web çalışanları, arka plan iş parçacıklarında bağımsız komut dosyaları çalıştırmak için kullanılabilir. Bu, ana iş parçacığını, kullanıcı arayüzü görevlerini işlemesi ve performansı iyileştirmesi için serbest bırakabilir. Web İşçileri, ana iş parçacığının dışında kullanıcı arayüzü işi yerine JavaScript işlemesini boşaltmak için daha uygundur. Müşteri desteği veya pazarlama için kullanılan ve genellikle kullanıcı arayüzüyle etkileşime geçmeyen komut dosyaları, arka plandaki bir ileti dizisinde yürütülmeye uygun olabilir. Bu tür komut dosyalarını bir web çalışanı olarak izole etmek için basit bir üçüncü taraf kitaplığı (PartyTown) kullanılabilir.

Next.js komut dosyası bileşeninin mevcut uygulanmasıyla birlikte, stratejiyi afterInteractive veya lazyOnload olarak ayarlayarak ana iş parçacığında bu komut dosyalarını ertelemenizi öneririz. Gelecekte, Next.js'nin PartyTown veya özel bir çözümü kullanarak web çalışanlarında komut dosyalarını çalıştırmasına olanak tanıyan yeni bir strateji seçeneğini ('worker') kullanıma sunmayı öneriyoruz. Geliştiricilerin bu RFC ile ilgili görüşlerini almaktan memnuniyet duyarız.

CLS'yi en aza indirme

Reklam, video veya sosyal medya feed'i yerleştirmeleri gibi üçüncü taraf yerleştirmeler, geç yüklendiğinde düzen kaymalarına neden olabilir. Bu, kullanıcı deneyimini ve sayfanın Cumulative Layout Shift (CLS) metriğini etkiler. CLS, yerleştirmenin yükleneceği kapsayıcının boyutu belirtilerek en aza indirilebilir.

Komut Dosyası bileşeni, düzen kaymalarına neden olabilecek yerleştirmeleri yüklemek için kullanılabilir. CLS'yi azaltmaya yardımcı olacak yapılandırma seçenekleri sağlamak için bu aracın kapsamını genişletmeyi düşünüyoruz. Bu özellik, Komut Dosyası bileşeninin içinde veya tamamlayıcı bileşen olarak sunulabilir.

Sarmalayıcı bileşenleri

Google Analytics veya Google Etiket Yöneticisi (GTM) gibi popüler üçüncü taraf komut dosyalarını eklemek için kullanılan söz dizimi ve yükleme stratejisi genellikle sabittir. Bunlar, her komut dosyası türü için bağımsız sarmalayıcı bileşenlerine daha iyi dahil edilebilir. Geliştiriciler, uygulamaya özgü özelliklerin yalnızca bir kısmı (izleme kimliği gibi) tarafından kullanılabilir. Sarmalayıcı bileşenleri, geliştiricilere şu şekilde yardımcı olur:

1. Popüler komut dosyası etiketleri eklemelerini kolaylaştırmak.
2. Çerçevenin altındaki en optimum stratejiyi kullanmasını sağlamak.

Sonuç

Üçüncü taraf komut dosyaları, genellikle kullanıcıyı tüketen web sitesine belirli özellikleri eklemek için oluşturulur. Kritik olmayan komut dosyalarının etkisini azaltmak için bunları ertelemenizi öneririz. Next.js Komut Dosyası bileşeni bunu varsayılan olarak yapar. Geliştiriciler, beforeInteractive stratejisini açıkça uygulamadıkları sürece kritik işlevleri geciktirmeyeceklerini anlatan komut dosyalarından emin olabilirler. Next.js Komut Dosyası bileşeni gibi, çerçeve geliştiricileri de bu özellikleri diğer çerçevelerde oluşturabilir. Nuxt.js ekibiyle benzer bir bileşen çıkarmak için aktif olarak çalışıyoruz. Ayrıca geri bildirimler doğrultusunda, Komut Dosyası bileşenini daha fazla kullanım alanı kapsayacak şekilde geliştirmeyi umuyoruz.

Tasdik

Bu yayınla ilgili geri bildirimleri için Kara Erickson, Janicklas Ralph, Katie Hempenius, Philip Walton, Jeremy Wagner ve Addy Osmani'ye teşekkür ederiz.