Üçüncü taraf komut dosyalarının yüklenmesini optimize etmek için yerleşik bir çözüm sunan Next.js'in Komut Dosyası bileşeninin arkasındaki vizyonu anlayın.
Mobil cihazlarda ve masaüstünde yayınlanan web sitelerinden gelen isteklerin yaklaşık %45'i üçüncü taraf isteklerinden oluşur ve bunların % 33'ü komut dosyasıdır. Üçüncü taraf komut dosyalarının boyutu, gecikmesi ve yüklenmesi sitenin performansını önemli ölçüde etkileyebilir. Next.js komut dosyası bileşeni, geliştiricilerin uygulamalarına üçüncü taraf komut dosyaları eklemesine yardımcı olmak ve potansiyel performans sorunlarını kullanıma sunulduğu anda çözmek için yerleşik en iyi uygulamalar ve varsayılanlarla birlikte gelir.
Üçüncü taraf komut dosyaları ve performans üzerindeki etkileri
Üçüncü taraf komut dosyaları, web geliştiricilerin ortak özellikleri uygulamak ve geliştirme süresini kısaltmak için mevcut çözümlerden yararlanmasına olanak tanır. Ancak bu komut dosyalarını oluşturanların, genellikle tüketici web sitesindeki performans üzerindeki etkiyi dikkate alma konusunda herhangi bir teşviki yoktur. Bu komut dosyaları, onları kullanan geliştiriciler için de bir kara kutudur.
Komut dosyaları, web siteleri tarafından farklı üçüncü taraf istek kategorilerinde indirilen önemli sayıda üçüncü taraf baytını oluşturur. Varsayılan olarak tarayıcı, komut dosyalarına dokümanda bulundukları yere göre öncelik verir. Bu durum, kullanıcı deneyimi açısından kritik olan 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şlemi için gerekli olmayan üçüncü taraflar, ana iş parçacığındaki diğer işlemleri engellememesi için ertelenebilir. Lighthouse, oluşturmayı engelleyen veya ana iş parçacığını engelleyen 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ı dikkate almanız önemlidir.
Üçüncü tarafların etkisini azaltmak için en iyi uygulamalar olsa da herkes bu uygulamaları kullandıkları her üçüncü taraf için nasıl uygulayacağını bilmeyebilir. Bu durum aşağıdaki nedenlerden dolayı karmaşık olabilir:
- Web siteleri, mobil ve masaüstünde komut dosyaları da dahil olmak üzere ortalama 21 ila 23 farklı üçüncü taraf kullanır. Kullanım ve öneriler her biri için farklı olabilir.
- Birçok üçüncü tarafın uygulanması, belirli bir çerçevenin veya kullanıcı arayüzü kitaplığının kullanılıp kullanılmadığı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 değişen işletme şartları, 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 odaklanışı
Aurora'nın açık kaynak web çerçeveleri ve araçlarıyla ortak çalışmasının bir parçası olarak, geliştiricilerin performans, erişilebilirlik, güvenlik ve mobil kullanıma hazır olma gibi kullanıcı deneyimi özelliklerini iyileştirmesine yardımcı olmak için güçlü varsayılanlar ve kararlı araçlar sağlanır. 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 attığımız 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, geliştiricilerin üçüncü taraflar da dahil olmak üzere kaynakları verimli bir şekilde yüklemesine yardımcı olan faydalı varsayılanlar ve özellikler sunmak için benzersiz bir konuma sahiptir. Farklı çerçevelerde en çok oluşturmayı engelleyen üçüncü tarafları bulmak için kapsamlı HTTP Archive ve Lighthouse verilerini inceledik.
Bir uygulamada kullanılan üçüncü taraf komut dosyalarının ana iş parçacığı tarafından engellenmesi sorununu gidermek için Komut dosyası bileşenini oluşturduk. Bileşen, geliştiricilere üçüncü taraf komut dosyası yükleme konusunda daha iyi kontroller sunmak için sıralama özelliklerini kapsar.
Çerçeve bileşeni olmadan üçüncü taraf komut dosyalarını sıralama
Oluşturma işlemini engelleyen komut dosyalarının etkisini azaltmaya yönelik mevcut kılavuz, üçüncü taraf komut dosyalarını verimli bir şekilde yüklemek ve sıralamak için aşağıdaki yöntemleri sağlar:
asyncveyadeferözelliğini, tarayıcıya belgeyi ayrıştırıcıyı engellemeden kritik olmayan üçüncü taraf komut dosyalarını yüklemesini söyleyen<script>etiketleriyle kullanın. İlk sayfa yüklemesi veya ilk kullanıcı etkileşimi için gerekli olmayan komut dosyaları kritik olmayan olarak kabul edilebilir.<script src="https://example.com/script1.js" defer></script> <script src="https://example.com/script2.js" async></script>Önceden bağlanma ve dns-prefetch'i kullanarak gerekli kaynaklara erken bağlantılar oluşturun. Bu sayede kritik komut dosyaları daha erken indirilmeye başlar.
<head> <link rel="preconnect" href="http://PreconnThis.com"> <link rel="dns-prefetch" href="http://PrefetchThis.com"> </head>Ana sayfa içeriği yüklendikten sonra veya kullanıcı sayfanın, üçüncü taraf kaynaklarının ve yerleştirilmelerinin bulunduğu bölümüne kaydırdığında üçüncü taraf kaynaklarını ve yerleştirilmelerini geç yükleyin.
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ştiricilerin yükleme stratejilerini tanımlamaları için bir şablon sağlar. Uygun strateji belirtildikten sonra 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ının 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.
beforeInteractive: Bu seçenek, sayfa etkileşimli hale gelmeden önce çalıştırılması 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 paketlenmiş diğer JavaScript'lerden önce yürütülmesini sağlar. Kullanıcı rızası yönetimi, bot algılama komut dosyaları veya kritik içeriği oluşturmak için gereken yardımcı kitaplıklar bu strateji için iyi adaylardır.afterInteractive: Uygulanan varsayılan stratejidir ve bir komut dosyasını defer özelliğiyle yüklemeye eşdeğerdir. Tarayıcı, sayfa etkileşimli hale geldikten sonra çalıştırabileceği komut dosyaları (ör. analiz komut dosyaları) için kullanılmalıdır. Next.js bu komut dosyalarını istemci tarafına enjekte eder ve sayfa beslendikten sonra çalıştırılır. Bu nedenle, aksi belirtilmedikçe Script bileşeni kullanılarak tanımlanan tüm üçüncü taraf komut dosyaları Next.js tarafından ertelendiğinden güçlü bir varsayılan değer sağlanır.lazyOnload: Bu seçenek, tarayıcı boştayken düşük öncelikli komut dosyalarını gecikmeli olarak yüklemek için kullanılabilir. Bu tür komut dosyalarının sağladığı işlevler (ör. sohbet veya sosyal medya eklentileri) sayfa etkileşimli hale geldikten hemen sonra gerekli değildir.
Geliştiriciler, stratejiyi belirterek uygulamalarının bir komut dosyasını nasıl kullandığını Next.js'e bildirebilir. Bu sayede çerçeve, en iyi yükleme sırasını sağlarken komut dosyasını yüklemek için optimizasyonlar ve en iyi uygulamalar uygulayabilir.
Geliştiriciler, komut dosyası bileşenini kullanarak geç yüklenen üçüncü taraflar için uygulamanın herhangi bir yerine ve kritik komut dosyaları için doküman düzeyinde üçüncü taraf komut dosyası yerleştirebilir. Bu, komut dosyası bileşeninin, komut dosyasını kullanan bileşenle birlikte yerleştirilebileceği anlamına gelir. Sulandırıldıktan sonra komut dosyası, kullanılan stratejiye bağlı olarak ilk oluşturulan dokümanın başına veya gövdenin alt kısmına yerleştirilir.
Etkiyi ölçme
Üçüncü taraf komut dosyalarının dahil edilmesinin etkisini ölçmeye yardımcı olan iki demo uygulama oluşturmak için Next.js ticaret uygulaması ve başlangıç blogu şablonlarını kullandık. Google Etiket Yöneticisi ve sosyal medya yerleşimleri için yaygın olarak kullanılan üçüncü taraflar, bu uygulamaların sayfalarına önce doğrudan, ardından komut dosyası bileşeni aracılığıyla ekleniyordu. Ardından, bu sayfaların performansını WebPageTest'te karşılaştırdık.
Next.js ticari uygulamasındaki üçüncü taraf komut dosyaları
Demo için aşağıdaki gibi üçüncü taraf komut dosyaları ticari uygulama şablonuna eklenmiştir.
Aşağıdaki karşılaştırmada, Next.js ticaret başlangıç paketinin her iki sürümünün de görsel ilerleme durumu gösterilmektedir. 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ı, demo blog uygulamasına aşağıda belirtildiği şekilde eklenmiştir.
| Önce | Sonra |
|---|---|
| Asenkron Google Etiket Yöneticisi | Dört komut dosyasının her biri için strategy = lazyonload olan komut dosyası bileşeni |
| Asynkron Twitter takip düğmesi | |
| Asynkron veya erteleme olmadan YouTube abone ol düğmesi | |
| Asenkron veya erteleme olmadan LinkedIn Takip düğmesi |
Videoda görüldüğü gibi, ilk zengin içerikli boyama (FCP), komut dosyası bileşeni olmadan sayfada 0,9 saniyede, komut dosyası bileşeniyle ise 0,4 saniyede gerçekleşir.
Komut dosyası bileşeni için sırada ne var?
afterInteractive ve lazyOnload için strateji seçenekleri, oluşturmayı engelleyen komut dosyaları üzerinde önemli ölçüde kontrol sağlarken komut dosyası bileşeninin kullanışlılığını artıracak diğer seçenekleri de araştırıyoruz.
Web işçilerini kullanma
Web işçileri, arka plan iş parçalarında bağımsız komut dosyaları çalıştırmak için kullanılabilir. Bu sayede ana iş parçasını, kullanıcı arayüzü görevlerini işlemek ve performansı artırmak için kullanabilirsiniz. Web çalışanları, kullanıcı arayüzü çalışması yerine JavaScript işlemenin ana iş parçacığının dışına aktarılması için en 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 plan iş parçacığında çalıştırılmak için iyi adaylar olabilir. Bu tür komut dosyalarını bir web işçisinde izole etmek için hafif bir üçüncü taraf kitaplığı (PartyTown) kullanılabilir.
Next.js komut dosyası bileşeninin mevcut uygulamasında, stratejiyi afterInteractive veya lazyOnload olarak ayarlayarak bu komut dosyalarını ana iş parçacığında ertelemenizi öneririz. Gelecekte, Next.js'in web işçilerinde komut dosyaları çalıştırmak için PartyTown'u veya özel bir çözümü kullanmasına olanak tanıyacak yeni bir strateji seçeneği ('worker') sunmayı planlıyoruz. Geliştiricilerin bu RFC ile ilgili yorumlarını bekliyoruz.
CLS'yi en aza indirme
Reklamlar, videolar veya sosyal medya feed'leri gibi üçüncü taraf yerleşimleri, gecikmeli yüklendiğinde sayfa düzeninde kaymalara neden olabilir. Bu durum, kullanıcı deneyimini ve sayfanın kümülatif düzen kayması (CLS) metriğini etkiler. CLS, yerleştirilen içeriğin yükleneceği kapsayıcının boyutu belirtilerek en aza indirilebilir.
Komut dosyası bileşeni, düzen kaymalarına neden olabilecek yerleşik öğeleri yüklemek için kullanılabilir. CLS'yi azaltmaya yardımcı olacak yapılandırma seçenekleri sunmak için bu özelliği geliştirmeyi düşünüyoruz. Bu, komut dosyası bileşeninin içinde veya tamamlayıcı bileşen olarak kullanılabilir.
Sarmalayıcı bileşenler
Google Analytics veya Google Etiket Yöneticisi (GTM) gibi popüler üçüncü taraf komut dosyalarını dahil etme söz dizimi ve yükleme stratejisi genellikle sabittir. Bunlar, her komut dosyası türü için ayrı sarmalayıcı bileşenlerine de yerleştirilebilir. Geliştiriciler yalnızca uygulamaya özgü minimum sayıda özellikten (ör. izleme kimliği) yararlanabilir. Sarmalayıcı bileşenler, geliştiricilere şu konularda yardımcı olur:
- Popüler komut dosyası etiketlerini eklemelerini kolaylaştırır.
- Çerçevenin, arka planda en uygun stratejiyi kullandığından emin olma
Sonuç
Üçüncü taraf komut dosyaları genellikle, tüketen web sitesine belirli özellikler eklemek için oluşturulur. Kritik olmayan komut dosyalarının etkisini azaltmak için bunları ertelemenizi öneririz. Next.js komut dosyası bileşeni varsayılan olarak bunu yapar. Geliştiriciler, beforeInteractive stratejisini açıkça uygulamadıkları sürece dahil edilen komut dosyalarının kritik işlevleri geciktirmeyeceğinden emin olabilirler. Next.js komut dosyası bileşeni gibi, çerçeve geliştiricileri de bu özellikleri diğer çerçevelerde oluşturmayı düşünebilir. Nuxt.js ekibiyle benzer bir bileşeni kullanıma sunma konusunda aktif olarak çalışıyoruz. Geri bildirimler doğrultusunda, Komut dosyası bileşenini ek kullanım alanlarını da kapsayacak şekilde daha da geliştirmeyi umuyoruz.
Tasdik
Bu yayınla ilgili geri bildirimde bulunan Kara Erickson, Janicklas Ralph, Katie Hempenius, Philip Walton, Jeremy Wagner ve Addy Osmani'ye teşekkür ederiz.