Üçü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, yerleşik en iyi uygulamalar ve varsayılanlarla birlikte gelir. Bu sayede geliştiriciler, uygulamalarında üçüncü taraf komut dosyalarını kullanıma sunarken olası performans sorunlarını sıfırdan çözebilir.
Üçüncü taraf komut dosyaları ve bunların performans üzerindeki etkisi
Üçü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ı 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 kutu.
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şlemi için gerekli olmayan üçüncü taraflar, ana iş parçacığındaki diğer işlemleri engellememesi için ertelenebilir. 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ı 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 karmaşık olabilir çünkü:
- 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 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 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, üçü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 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:
async
veyadefer
ö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, kritik komut dosyalarının daha erken indirilmesine olanak tanır.
<head> <link rel="preconnect" href="http://PreconnThis.com"> <link rel="dns-prefetch" href="http://PrefetchThis.com"> </head>
Ana sayfa içeriğinin yüklenmesi bittikten sonra veya kullanıcı, sayfada dahil oldukları bölüme gittikten sonra üçüncü taraf kaynaklarını ve yerleştirmelerini 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ş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 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 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. 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 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ı 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 uygulamalarının bir komut dosyasını nasıl kullandığını Next.js'e bildirebilir. 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. 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 ticari uygulama şablonuna aşağıda gösterildiği gibi üçüncü taraf komut dosyaları eklendi.
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 |
Asynchronize 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, kullanıcı arayüzü görevlerini işlemek ve performansı artırmak için ana iş parçasını boşaltabilirsiniz. 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
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 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ş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, 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 dahil etmelerini 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 bir şekilde uygulamadıkları sürece, kullandıkları komut dosyalarının kritik işlevleri geciktirmeyeceğine emindirler. 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ş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 bildirimleri için Kara Erickson, Janicklas Ralph, Katie Hempenius, Philip Walton, Jeremy Wagner ve Addy Osmani'ye teşekkür ederiz.