Üçüncü taraf komut dosyalarının yüklenmesini optimize etmek için yerleşik bir çözüm sunan Next.js Komut Dosyası bileşeninin arkasındaki vizyonu anlayın.
Mobil ve masaüstü cihazlarda sunulan web sitelerinden gelen isteklerin yaklaşık 45%'i üçüncü taraf istekleridir. Bunların % 33'ü komut dosyasıdır. Üçü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, olası performans sorunlarını anında ele alırken, geliştiricilerin uygulamalarında üçüncü taraf komut dosyalarını kullanmalarına yardımcı olan varsayılan en iyi uygulamalarla birlikte gelir.
Üçüncü taraf komut dosyaları ve bunların performans üzerindeki etkisi
Üçüncü taraf komut dosyaları, web geliştiricilerinin yaygın ö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, web sitelerinin performans üzerindeki etkisini dikkate almaya teşvik edecek herhangi bir teşvik yoktur. Bu komut dosyaları, onları kullanan geliştiriciler için de bir kara kutudur.
Komut dosyaları, farklı üçüncü taraf istek kategorilerinde web siteleri tarafından indirilen önemli miktarda üçüncü taraf baytını hesaba katar. Varsayılan olarak tarayıcı, komut dosyalarına dokümanda bulundukları yere göre öncelik verir. Bu durum, kullanıcı deneyimi için kritik olan komut dosyalarının bulunmasını veya yürütülmesini geciktirebilir.
Düzen için gereken üçüncü taraf kitaplıkları, sayfayı oluşturmak üzere erken yüklenmelidir. İlk oluşturma için gerekli olmayan üçüncü taraflar, ana iş parçacığında diğer işlemleri engellememeleri için ertelenmelidir. Lighthouse, oluşturma 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 azaltmaya yönelik en iyi uygulamalar olsa da herkes, bunları kullandıkları her üçüncü taraf için nasıl uygulayacağını bilmiyor olabilir. Bu durum aşağıdaki nedenlerle karmaşık olabilir:
- Web siteleri, mobil ve masaüstü cihazlarda komut dosyaları da dahil olmak üzere ortalama 21 ila 23 farklı üçüncü taraf kullanır. Kullanım ve öneriler her uygulama için farklılık gösterebilir.
- 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 sunulmuştur.
- Aynı üçüncü tarafla ilgili iş gereksinimlerinin değişmesi, geliştiricilerin bu üçüncü taraf kullanımını standartlaştırmasını zorlaştırır.
Aurora'nın üçüncü taraf senaryoları
Aurora'nın açık kaynak web çerçeveleri ve araçlarıyla ortak çalışmasının bir parçası da geliştiricilerin, kullanıcı deneyimini performans, erişilebilirlik, güvenlik ve mobil kullanıma hazırlık gibi özellikleri iyileştirmesine yardımcı olmak için güçlü varsayılanlar ve özenli araçlar sunmaktır. 2021'de, çerçeve yığınlarının kullanıcı deneyimini ve Önemli Web Verileri metriklerini iyileştirmesine yardımcı olmaya odaklandık.
Çerçeve performansını iyileştirme hedefimize ulaşmamızdaki en önemli adımlardan biri, Next.js'de üçüncü taraf komut dosyalarının ideal yükleme sırasını araştırmayı içeriyordu. Next.js gibi çerçeveler, üçüncü taraflar da dahil olmak üzere geliştiricilerin kaynakları verimli bir şekilde yüklemesine yardımcı olacak yararlı varsayılanlar ve özellikler sağlamak üzere benzersiz bir konumdadır. Farklı çerçevelerde oluşturulmayı en çok engelleyen üçüncü tarafları bulmak için kapsamlı HTTP Arşivi ve Lighthouse verilerini inceledik.
Bir uygulamada kullanılan üçüncü taraf komut dosyalarını engelleyen ana iş parçacığı sorununu gidermek için Komut Dosyası bileşenini oluşturduk. Bileşen, üçüncü taraf komut dosyası yüklemesi için geliştiricilere daha iyi kontroller sağlamak amacıyla dizi özellikleri içerir.
Çerçeve bileşeni olmadan üçüncü taraf komut dosyalarını sıralama
Oluşturma engelleme komut dosyalarının etkisini azaltmak için sunulan kılavuzda, üçüncü taraf komut dosyalarının verimli bir şekilde yüklenmesi ve sıralanması için aşağıdaki yöntemler sunulmaktadır:
Tarayıcının, doküman ayrıştırıcıyı engellemeden kritik olmayan üçüncü taraf komut dosyalarını yüklemesini
<script>etiketleriyle birlikteasyncveyadeferözelliğini kullanın. İlk sayfa yüklemesinde veya ilk kullanıcı etkileşiminde 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 önceden getirme özelliklerini kullanarak gerekli kaynaklara erken bağlantılar oluşturun. Bu sayede önemli komut dosyaları daha erken indirilmeye başlar.
<head> <link rel="preconnect" href="http://PreconnThis.com"> <link rel="dns-prefetch" href="http://PrefetchThis.com"> </head>Üçüncü taraf kaynakları ve ana sayfa içeriğinin yüklenmesi bittikten sonra veya kullanıcı sayfanın dahil edildiği bölüme doğru aşağı kaydırdığında üçüncü taraf kaynakları ve yerleştirmeleri geç yükle.
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 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://polyfill.io/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 yeten diğer JavaScript'lerden ö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 strateji için uygundur.afterInteractive: Bu varsayılan strateji uygulanır ve erteleme özelliğine sahip bir komut dosyası yüklemeye eşdeğerdir. Bu parametre, sayfa etkileşimli hale geldikten sonra tarayıcının çalıştırabileceği komut dosyaları (ör. Analytics komut dosyaları) için kullanılmalıdır. Next.js, bu komut dosyalarını istemci tarafına ekler ve sayfa sulandıktan sonra çalışır. Dolayısıyla, aksi belirtilmedikçe, Komut Dosyası bileşeni kullanılarak tanımlanan tüm üçüncü taraf komut dosyaları, Next.js tarafından ertelenir ve dolayısıyla güçlü bir varsayılan sağlar.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 sunduğu 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ı anlatabilirler. 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 uygulamada herhangi bir yere ve kritik komut dosyaları için doküman düzeyinde bir üçüncü taraf komut dosyası yerleştirebilir. Bu, Komut Dosyası bileşeninin komut dosyası kullanılarak bileşenle aynı konuma getirilebileceği anlamına gelir. Sıvı alımından sonra komut dosyası, kullanılan stratejiye bağlı olarak, başlangıçta oluşturulan belgenin başına veya gövdenin alt kısmına eklenir.
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'nun şablonlarını kullandık. Google Etiket Yöneticisi ve sosyal medya yerleştirmeleri için yaygın olarak kullanılan üçüncü taraflar, başlangıçta doğrudan bu uygulamaların sayfalarına ve daha sonra Komut Dosyası bileşeni aracılığıyla dahil ediliyordu. Daha sonra bu sayfaların performansını WebPageTest'te karşılaştırdık.
Next.js ticari uygulamasındaki üçüncü taraf komut dosyaları
Üçüncü taraf komut dosyaları, demo için ticari uygulama şablonuna aşağıda gösterildiği gibi eklendi.
Aşağıdaki karşılaştırmada Next.js commerce başlangıç kiti'nin her iki sürümünün görsel ilerlemesi 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 blogunda üçüncü taraf komut dosyaları
Üçüncü taraf komut dosyaları, demo blog uygulamasına aşağıda gösterildiği gibi eklendi.
| Önce | Sonra |
|---|---|
| Eş zamansız Google Etiket Yöneticisi | Stratejili komut dosyası bileşeni = dört komut dosyasının her biri için lazyonload |
| Eş zamansız Twitter Takip düğmesi | |
| Eş zamansız veya ertelenemeyen YouTube Abone Ol düğmesi | |
| Eş zamansız veya erteleme özelliği olmayan LinkedIn Takip düğmesi |
Videoda görüldüğü gibi, İlk Zengin İçerikli Boyama (FCP) sayfada Komut Dosyası bileşeni olmadan 0,9. saniyede, Komut Dosyası bileşeninde ise 0,4 saniyede gerçekleşiyor.
Komut Dosyası bileşeni için sırada ne var?
afterInteractive ve lazyOnload strateji seçenekleri, oluşturmayı engelleyen komut dosyaları üzerinde önemli kontrol olanağı sağlasa da Komut Dosyası bileşeninin daha kullanışlı olmasını sağlayacak diğer seçenekleri de araştırıyoruz.
Web çalışanlarını kullanma
Web çalışanları, arka plan ileti dizilerinde 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ığını boşaltabilir. Web İşçileri, ana iş parçacığının kullanıcı arayüzü işi yerine JavaScript işlemesini devre dışı bırakmak 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 iş parçacığında yürütülmeye uygun olabilir. Bu tür komut dosyalarını bir web çalışanına ayırmak 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'nin web çalışanları üzerinde komut dosyaları çalıştırmak için PartyTown veya özel bir çözüm kullanmasına olanak tanıyan 'worker' adlı yeni bir strateji seçeneğini kullanıma sunmanızı öneririz. Geliştiricilerden, bu RFC ile ilgili yorumlar almaktan memnuniyet duyarız.
CLS'yi en aza indirme
Reklamlar, video veya sosyal medya feed'i yerleştirmeleri gibi üçüncü taraf yerleştirmeleri, geç yüklendiğinde düzen kaymasına neden olabilir. Bu, kullanıcı deneyimini ve sayfa için Cumulative Layout Shift (CLS) metriğini etkiler. CLS, yerleştirmenin yükleneceği container'ın boyutu belirtilerek en aza indirilebilir.
Komut dosyası bileşeni, düzen kayması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 planı genişletmeyi düşünüyoruz. Bu, Komut Dosyası bileşeninin kendisinde veya bir 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 bir komut dosyası türü için bağımsız sarmalayıcı bileşenlerine daha ayrıntılı bir şekilde yerleştirilebilir. Geliştiriciler, yalnızca uygulamaya özgü çok az sayıda özelliği (izleme kimliği gibi) kullanabilir. Sarmalayıcı bileşenleri, 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 kullanmasını sağlamak.
Sonuç
Üçüncü taraf komut dosyaları genellikle içeriği tüketen web sitesindeki belirli özellikleri içerecek şekilde oluşturulur. Kritik olmayan komut dosyalarının etkisini azaltmak için bunları ertelemenizi öneririz. Bunu, Next.js Komut Dosyası bileşeni varsayılan olarak yapar. Geliştiriciler, eklenen komut dosyalarının beforeInteractive stratejisini açıkça uygulamadıkları sürece kritik işlevleri geciktirmeyeceğini garanti ederler. 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 birlikte benzer bir bileşeni kullanıma sunmak için aktif olarak çalışıyoruz. Geri bildirimler doğrultusunda, Komut Dosyası bileşenini diğer 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.