Üçüncü taraf komut dosyalarının yüklenmesini optimize etmek için yerleşik bir çözüm sunan Next.js'nin Script bileşeninin arkasındaki vizyonu anlayın.
Mobil ve masaüstü cihazlarda sunulan web sitelerinden gelen isteklerin yaklaşık %45'i üçüncü taraf istekleridir ve bunların %33'ü komut dosyalarıdır. Üçüncü taraf komut dosyalarının boyutu, gecikmesi ve yüklenmesi, sitenin performansını önemli ölçüde etkileyebilir. Next.js Script bileşeni, geliştiricilerin uygulamalarında üçüncü taraf komut dosyalarını kullanmalarına yardımcı olmak ve olası performans sorunlarını hemen çözmek için yerleşik en iyi uygulamalar ve varsayılan ayarlarla birlikte sunulur.
Üçüncü taraf komut dosyaları ve performans üzerindeki etkileri
Üçüncü taraf komut dosyaları, web geliştiricilerin mevcut çözümlerden yararlanarak yaygın özellikleri uygulamasına ve geliştirme süresini kısaltmasına olanak tanır. Ancak bu komut dosyalarını oluşturanların genellikle komut dosyasını kullanan web sitesinin performansı üzerindeki etkiyi dikkate almaları için bir nedenleri yoktur. Bu komut dosyaları, bunları kullanan geliştiriciler için de bir kara kutudur.
Komut dosyaları, farklı üçüncü taraf istek kategorilerinde web siteleri tarafından indirilen üçüncü taraf baytlarının önemli bir kısmını oluşturur. Varsayılan olarak tarayıcı, komut dosyalarını dokümandaki konumlarına göre önceliklendirir. Bu durum, kullanıcı deneyimi açısından kritik öneme sahip komut dosyalarının keşfedilmesini veya yürütülmesini geciktirebilir.
Sayfayı oluşturmak için düzenle ilgili gerekli üçüncü taraf kitaplıkları 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şturmayı engelleyen veya ana iş parçacığını engelleyen komut dosyalarını işaretlemek için iki denetim gerçekleştirir.
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 bunları kullandığı her üçüncü taraf için nasıl uygulayacağını bilmeyebilir. Bu durum şu nedenlerle karmaşık olabilir:
- Web siteleri, mobil ve masaüstü cihazlarda ortalama 21 ila 23 farklı üçüncü taraf (komut dosyaları dahil) kullanır. Kullanım ve öneriler her biri için farklı olabilir.
- Birçok üçüncü tarafın uygulanması, belirli bir çerçeve veya kullanıcı arayüzü kitaplığının kullanılıp kullanılmadığına göre farklılık gösterebilir.
- Yeni üçüncü taraf kitaplıkları sık sık kullanıma sunulur.
- Aynı üçüncü tarafla ilgili farklı 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 odaklanması
Aurora'nın açık kaynak web çerçeveleri ve araçlarıyla işbirliği, geliştiricilerin performans, erişilebilirlik, güvenlik ve mobil cihazlara hazır olma gibi kullanıcı deneyimi özelliklerini iyileştirmelerine yardımcı olmak için güçlü varsayılanlar ve amaca yönelik araçlar sunar. 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 yolundaki 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 kullanışlı varsayılanlar ve özellikler sunmak için benzersiz bir konuma sahiptir. Farklı çerçevelerde en çok hangi üçüncü tarafların oluşturmayı engellediğini bulmak için kapsamlı HTTP Arşivi ve Lighthouse verilerini inceledik.
Uygulamalarda kullanılan üçüncü taraf komut dosyalarının ana iş parçacığını engellemesi sorununu çözmek için Script bileşenini geliştirdik. Bileşen, geliştiricilere üçüncü taraf komut dosyası yükleme konusunda daha iyi kontroller sağlamak için sıralama özelliklerini kapsar.
Çerçeve bileşeni olmadan üçüncü taraf komut dosyalarını sıralama
Oluşturmayı engelleyen komut dosyalarının etkisini azaltmak için mevcut kılavuz, üçüncü taraf komut dosyalarını verimli bir şekilde yüklemek ve sıralamak için aşağıdaki yöntemleri sunar:
Tarayıcıya, kritik olmayan üçüncü taraf komut dosyalarını doküman ayrıştırıcıyı engellemeden yüklemesini söyleyen
<script>etiketleriyleasyncveyadeferözelliğini 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 kullanarak gerekli kaynaklara erken bağlantılar kurun. 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ğinin yüklenmesi tamamlandıktan sonra veya kullanıcı sayfanın ilgili bölümüne kaydırdığında üçüncü taraf kaynaklarını ve yerleştirmelerini geç yükleyin.
Next.js Script bileşeni
Next.js Script 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 belirlendikten sonra, diğer kritik kaynakları engellemeden en uygun şekilde yüklenir.
Script 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.
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 eklenmesini ve diğer paketlenmiş 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: Bu, uygulanan varsayılan stratejidir ve defer özelliğiyle bir komut dosyası yüklemeye eşdeğerdir. Bu özellik, tarayıcının 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 yerleştirir ve sayfa yüklendikten 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 ertelenir ve böylece güçlü bir varsayılan değer sağlanır.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ının sağladığı işlevler, sayfa etkileşimli hale geldikten hemen sonra gerekli değildir (ör. sohbet veya sosyal medya eklentileri).
Geliştiriciler, stratejiyi belirterek Next.js'ye uygulamalarının bir komut dosyasını nasıl kullandığını söyleyebilir. 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, Script bileşenini kullanarak üçüncü taraf komut dosyalarını uygulamanın herhangi bir yerine yerleştirebilir. Bu sayede, üçüncü taraf komut dosyaları geç yüklenir ve kritik komut dosyaları doküman düzeyinde yüklenir. Bu, Script bileşeninin, komut dosyasını kullanan bileşenle aynı yerde bulunabileceği anlamına gelir. Hidrasyondan sonra komut dosyası, kullanılan stratejiye bağlı olarak ilk oluşturulan dokümanın başlığına veya gövdenin alt kısmına yerleştirilir.
Etkiyi ölçme
Üçüncü taraf komut dosyalarını dahil etmenin 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ştirmeleri için en çok tercih edilen üçüncü taraflar, önce doğrudan bu uygulamaların sayfalarına, ardından Komut Dosyası bileşeni aracılığıyla dahil edildi. Ardından bu sayfaların performansını WebPageTest'te karşılaştırdık.
Next.js ticaret uygulamasındaki üçüncü taraf komut dosyaları
Demo için ticari uygulama şablonuna aşağıdaki gibi üçüncü taraf komut dosyaları eklenmiştir.
Aşağıdaki karşılaştırmada, Next.js commerce starter-kit'in her iki sürümünün görsel ilerleme durumu gösterilmektedir. Görüldüğü gibi, doğru yükleme stratejisiyle etkinleştirilen Script bileşeni sayesinde LCP yaklaşık 1 saniye daha erken gerçekleşir.
Next.js blogundaki üçüncü taraf komut dosyaları
Demo blog uygulamasına üçüncü taraf komut dosyaları aşağıda gösterildiği gibi eklenmiştir.
| Önce | Sonra |
|---|---|
| Eşzamansız Google Etiket Yöneticisi | Dört komut dosyasının her biri için strategy = lazyonload içeren komut dosyası bileşeni |
| Eş zamansız Twitter Takip Et düğmesi | |
| async veya defer olmadan YouTube Abone Ol düğmesi | |
| Async veya defer olmadan LinkedIn Takip Et düğmesi |
Videoda görüldüğü gibi, First Contentful Paint (FCP), Script bileşeni olmayan sayfada 0,9 saniyede, Script bileşeni olan sayfada ise 0,4 saniyede gerçekleşir.
Komut dosyası bileşeninin geleceği
afterInteractive ve lazyOnload için strateji seçenekleri, oluşturmayı engelleyen komut dosyaları üzerinde önemli bir kontrol sağlasa da Script bileşeninin kullanımını artıracak diğer seçenekleri de araştırıyoruz.
Web işçilerini kullanma
Web çalışanları, arka plan iş parçacıkları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çacığı serbest bırakılabilir. Web Worker'lar, kullanıcı arayüzü işleri yerine JavaScript işlemlerini ana iş parçacığından ayırmak için en uygun seçenektir. Müşteri desteği veya pazarlama için kullanılan ve genellikle kullanıcı arayüzüyle etkileşimde bulunmayan komut dosyaları, arka plan iş parçacığında yürütülmek için iyi birer aday olabilir. Bu tür komut dosyalarını bir web çalışanına ayırmak için hafif bir üçüncü taraf kitaplığı olan PartyTown kullanılabilir.
Next.js komut dosyası bileşeninin mevcut uygulamasıyla, stratejiyi afterInteractive veya lazyOnload olarak ayarlayarak bu komut dosyalarını ana iş parçacığında ertelemenizi öneririz. Gelecekte, Next.js'nin web çalışanlarında 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 olan 'worker''i kullanıma 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ştirmeleri, geç yükleme yapıldığında düzen kaymalarına neden olabilir. Bu durum, kullanıcı deneyimini ve sayfanın Cumulative Layout Shift (CLS) metriğini etkiler. Yerleştirmenin yükleneceği kapsayıcının boyutu belirtilerek CLS 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 sunmak için bu özelliği geliştirmeyi düşünüyoruz. Bu, komut dosyası bileşeninin içinde veya tamamlayıcı bir bileşen olarak sunulabilir.
Sarmalayıcı bileşenler
Google Analytics veya Google Etiket Yöneticisi (GTM) gibi popüler üçüncü taraf komut dosyalarını eklemeye yönelik söz dizimi ve yükleme stratejisi genellikle sabittir. Bunlar, her komut dosyası türü için ayrı sarmalayıcı bileşenlerinde daha fazla kapsüllenebilir. Geliştiriciler, uygulamaya özgü özelliklerin yalnızca minimum düzeyde bir grubuna (ör. izleme kimliği) erişebilir. Sarmalayıcı bileşenler, geliştiricilere şu konularda yardımcı olur:
- Popüler komut dosyası etiketlerini eklemelerini kolaylaştırıyoruz.
- Çerçevenin arka planda en uygun stratejiyi kullanmasını sağlama
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 bunu varsayılan olarak yapar. Geliştiriciler, beforeInteractive stratejisini açıkça uygulamadıkları sürece dahil edilen komut dosyalarının kritik işlevleri geciktirmeyeceğinden emin olabilir. Next.js Script bileşeninde olduğu gibi, çerçeve geliştiriciler de bu özellikleri diğer çerçevelerde oluşturmayı düşünebilir. Nuxt.js ekibiyle benzer bir bileşen oluşturmak için aktif olarak çalışıyoruz. Geri bildirimlere dayanarak, komut dosyası bileşenini ek kullanım alanlarını kapsayacak şekilde daha da geliştirmeyi umuyoruz.
Teşekkür
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.