Addy Osmani

Üçüncü taraf kaynakları (yer paylaşımları ve komut dosyaları gibi) günümüzde web'de yaygın olarak kullanılmaktadır. Sosyal medya, videolar, analizler, canlı sohbet, reklamcılık, A/B testi, kişiselleştirme ve diğer özellikleri yerleştirmek için hazır çözümler sunar. Üçüncü taraf yerleşimleri, site sahiplerinin temel becerilerine odaklanmasına olanak tanıyan ve standart ancak kritik işlevleri harici sağlayıcılara aktaran modern web sitelerinin gerekli bir parçasıdır.

Bir web sayfasındaki hem birinci taraf hem de üçüncü taraflar uyumlu bir şekilde çalıştığında sayfanın mükemmel bir kullanıcı deneyimi sunması mümkün olur. Ancak bu, hem mühendislik hem de işletme ekiplerinden önemli ölçüde çaba gerektirir ve genellikle göz ardı edilir. Bu da düşük performanslı web sayfalarına ve Core Web Vitals gibi kullanıcı odaklı metriklerde negatif bir etkiye neden olur. Bu durum hem taraflar için zararlı hem de işletmelerde fırsatların kaçmasına neden olur. Burada daha iyisini yapabilir miyiz?

Üçüncü taraf komut dosyalarının ve kaynaklarının, tarayıcıda bunları kullanan web sitelerinin performansında veya kullanıcı deneyiminde minimum düzeyde gerilemeyle amaçlanan işletme değerini sağladığı bir web geleceği vizyonumuz var. Bu sayede kullanıcılar daha hızlı sayfa yükleme deneyimi yaşayabilir.

Geçtiğimiz yıl, kullanıcı deneyimini üçüncü taraf komut dosyalarının zararlı etkilerinden koruyabilecek ve site sahipleri için ticari değerini azaltmayacak birçok olasılığı değerlendirdik, tartıştık ve denedik.

Bu gönderide, denemelerimizden bazıları hakkında bilgi paylaşmak istiyoruz. Bu sürecin, kullanıcı aracıları, işletmeler ve üçüncü taraf sağlayıcılar arasında şeffaflığı ve görünürlüğü teşvik edecek ve daha hızlı bir web'e giden yolu açacak bir sürecin başlangıcı olmasını umuyoruz.

Üçüncü taraflara daha ayrıntılı bakış

Üçüncü taraf, sitenin dışındaki bir sağlayıcı tarafından sunulan bir kaynaktır. Doğrudan site sahiplerinin kontrolü altında değildir ancak onaylarıyla sunulur. Üçüncü taraf kaynakları şunlardır:

• Birincil site kaynağından farklı bir ortak ve herkese açık kaynakta barındırılır.
• Bir site sahibi tarafından yazılmamış veya etkilenmemiş olmalıdır.
• Çeşitli siteler tarafından yaygın olarak kullanılır.

Üçüncü taraflar, gelir elde etmenize (reklamlar aracılığıyla) yardımcı olmaktan daha iyi pazarlama fırsatları sunmaya (sosyal medya yerleşimleri) kadar çeşitli işletme hedeflerine hizmet eder. Üçüncü tarafların yaygın kategorileri şunlardır:

Kaynak: Kategoriye göre üçüncü taraflar.

Bu üçüncü taraf komut dosyaları ve kitaplıkları, web geliştiricilerine tekerleği yeniden icat etmek yerine standart özellikleri uygulamak için denenmiş ve test edilmiş çözümlerden yararlanma olanağı tanır. Bu sayede üçüncü taraflar, geliştirme süresini kısaltarak işletmelerin ürünlerini daha hızlı kullanıma sunmasına veya yükseltmesine yardımcı olur. Bu nedenle, masaüstü ve mobil cihazlarda tüm web sitelerinin% 94'ünden fazlasının üçüncü taraflar kullanması şaşırtıcı değildir.

Üçüncü taraflar performansı nasıl etkiler?

İdeal olarak, üçüncü taraf geliştiriciler, sağladıkları belirli özellikler konusunda uzman olmalıdır. En popüler üçüncü taraflar birkaç iterasyondan geçmiştir ve bu tarafların kodlarının kendi iş hedefleri için optimize edilmesi beklenebilir. Bu hedefler, bu tarafların kullanıldığı sayfaların performansını içerebilir veya içermeyebilir. Ancak en iyi optimize edilmiş üçüncü tarafların bile performansı etkilediğini biliyoruz. Bu etkinin başlıca nedenleri şunlardır:

1. Boyut ve Komut Dosyası Çalıştırma Maliyeti: Üçüncü taraflar genellikle sayfanıza "yalnızca" bir <script> veya <iframe> öğesi ekleyerek önemli işlevler sunmayı amaçlar. Bu öğeler daha sonra, boyutları önemli olan ve indirilip çalıştırılmaları daha uzun süren komut dosyalarını ve kaynakları getirir. Çok fazla JavaScript, ana ileti dizisini daha uzun süre meşgul eder, oluşturmayı engeller ve kullanıcı etkileşimlerini geciktirir. En popüler üçüncü taraflardan bazılarının, analiz edilen sitelerin% 50'sinden fazlasında ana iş parçacığını 42 ms ila 1,6 saniye boyunca engellediği bilinmektedir. Engellenen bir ana iş parçacığı, sitenin performans puanını etkileyen metriklerden biri olan Total Blocking Time (TBT) değerinin yüksek olmasına neden olur. Ayrıca, kullanıcı etkileşimlerine verilen yanıtı geciktirir ve web sitelerinin duyarlılığını ölçmek için kullanılan Interaction to Next Paint (INP) metriğini düşürür. Bu nedenle, komut dosyası yürütme maliyetleri performansı önemli ölçüde etkiler.

2. Sayı: Web siteleri, mobil cihazlarda ve web'de ortalama 21 farklı üçüncü taraf kullanır. Üçüncü taraf etiketleri genellikle teknik/geliştirme ekipleri tarafından doğrudan kontrol edilmeyen etiket yönetimi araçları tarafından eklenir. Gerekli olmayan etiketler, inceleme süreci olmadan diğer ekipler tarafından eklenebilir ve hiçbir zaman kaldırılmaz. Bunlar kullanıcı deneyimini, sayfa ağırlığını veya CPU kullanımını önemli ölçüde etkileyebilir. Bir yönetim süreci oluşturmak bu tür durumları ele alabilir ve geliştiricilerin her sağlayıcının etkisini denetlemesine olanak tanıyabilir. Geliştiricilerin, belirli bir işlevi sağlayan tüm üçüncü taraflar için performans etkisi, avantajları ve karşılaştırma için avantajları ve dezavantajları içeren hazır verilere sahip olması yararlı olur. Ekiplerin karşılaştığı bir diğer zorluk da birçok sitede üçüncü taraf etiketlerinin yalnızca üretim ortamlarında çalıştırılması ve geliştirme ortamlarında çalışmamasıdır. Bu durum, geliştiricilerin etiketleri test etmesini zorlaştırır.

3. Ağ: Üçüncü taraflar farklı kaynaklarda barındırıldığı için tarayıcıların bu kaynaklardan içerik indirmek için daha fazla bağlantı kurması gerekir. Farklı bağlantılar, indirme işlemini önceliğe göre koordine edemediğinde ağ çekişmesi yaşanır. Doğru optimizasyonlar dikkate alınmazsa bu durum sayfanın yüklenmesini daha da geciktirebilir.

4. Sıralama: Üçüncü taraflar ana ileti dizisini engelleyebilir ve daha kritik kaynaklar için bant genişliğiyle mücadele edebilir. Bununla birlikte, bazı durumlarda sayfayı oluşturmak için üçüncü taraflar gerekli kritik kaynaklardır. Web siteleri birden fazla üçüncü taraf kullandığında birinci taraf ve üçüncü taraf kaynaklarının optimum şekilde sıralanmasına ihtiyaç duyulur. Web geliştiricileri, sıralamayı optimize etmek için kullanılabilen farklı seçeneklerden haberdar olmalıdır.

Yukarıdakilerin bir sonucu olarak üçüncü taraflar, Önemli Web Verileri'nin herhangi bir bileşenini veya tüm bileşenlerini etkileyebilir. Üçüncü tarafların çoğu Largest Contentful Paint (LCP) ve First Input Delay (FID) metriklerini olumsuz etkiler. YouTube yerleşik öğeleri, ana mesaj dizisini engelliyor. Bu durum, mobil cihazlarda ziyaret edilen web sitelerinin% 10'unda 4,5 saniye, incelenen web sitelerinin% 50'sinde ise en az 1,6 saniye sürüyor. Yavaş bir bağlantıda bu tür 20 komut dosyasının bulunduğu bir sayfayla karşılaşan bir kullanıcının ne kadar can sıkıcı bir durumla karşılaşacağını düşünün. thirdpartyweb.today'dan alınan aşağıdaki görselleştirmede, şu anda performans üzerinde en büyük etkiye sahip üçüncü taraflar gösterilmektedir.

"Yaklaşık 4 milyon sitenin en üst kısmında, yaklaşık 2.700 kaynak tüm komut dosyası yürütme süresinin yaklaşık% 57'sini oluşturuyor. En üstteki 50 öğe ise yaklaşık %47'sini oluşturuyor." - third-party-web

Hızlı bir şekilde oluşturulan ve makul bir zaman aralığında etkileşime açık hale gelen sayfalar, Core Web Vitals tarafından ölçülen iyi bir kullanıcı deneyimi için çok önemlidir. İyi bir kullanıcı deneyimi, genellikle web siteleri için iyi bir iş anlamına gelir. Bu da kullanılan üçüncü taraflar için iyi bir iş anlamına gelebilir. Üçüncü tarafların etkisini azaltmak için birlikte çalışmak, zincirdeki herkes için kazançlı olabilir.

Google'ın, Google Etiket Yöneticisi, YouTube yerleşimleri ve ReCaptcha gibi yaygın olarak kullanılan çeşitli üçüncü taraf komut dosyaları sağladığını kabul ediyoruz. Komut dosyalarımızın bazılarının Önemli Web Verileri üzerinde daha az performans etkisi olabileceğinin farkındayız ve mümkün olduğunda bu etkiyi iyileştirmenin yollarını aramaya kararlıyız.

Chrome nasıl yardımcı olabilir?

Üçüncü taraf kaynaklarının performans açısından zayıf olması, geliştiriciler için düzenli olarak karşılaşılan bir zorluktur ve temel ekosistem dinamiklerinde bir adım değişikliği gerektirir. Chrome, aşağıdaki sonuçları elde etmek için bu alanı keşfetmek istiyor:

1. Kullanıcı deneyimini veya işletme sonuçlarını olumsuz etkilemeden web'de üçüncü taraf kaynaklarını yüklemenin daha iyi yollarını bulun.

   İş ortakları, işletmeler, üçüncü taraflar ve geliştiricilerle işbirliği yapmadan bu konuda çok fazla ilerleyemeyeceğimizin farkındayız. Herkese açık açıklama ve spesifikasyonlar aracılığıyla olasılıkları tartışmak ve fikir alışverişinde bulunmak için açık bir alan oluşturmak istiyoruz. Geliştiriciler, geri bildirimde bulunma ve bu tekliflerin çoğunun etkisini test etme zamanına sahip olacak.

2. Üçüncü taraf komut dosyası kullanıcılarının, araç ve sahadaki maliyetleri için daha iyi ilişkilendirme, kullanımları için net ve iyi hazırlanmış yollar ve varsayılan olarak en uygun şekilde kullanılmasını sağlamak için içerik oluşturma sırasında daha iyi teşvikler elde etmesini sağlayın.

   Üçüncü tarafların performans üzerindeki etkisini azaltmak için kullanıcı aracıları, çerçeveler ve üçüncü taraf komut dosyaları gibi tüm katmanları iyileştirmek istiyoruz. Ayrıca, site sahiplerinin yerleşik her komut dosyasıyla ilgili en iyi uygulamaları kullanmasına yardımcı olacak yeterli analizler de sunmayı amaçlıyoruz. Uygun olduğunda daha hızlı alternatifler de bu analizler arasında yer alacaktır.

Önerilen Yaklaşım

Bu sonuçlara ulaşmak için üç yönlü bir yaklaşım öneriyoruz...

1. **RUM ve Chrome'un geliştirici araçları aracılığıyla geliştiricilere üçüncü taraf etkisi başına daha ayrıntılı ilişkilendirme sunun.**

   RUM, web performansı izleme API'leri aracılığıyla kullanılabilen gerçek kullanıcı metrikleri verilerini (alan verileri olarak da bilinir) ifade eder. Chrome'un geliştirici araçları arasında Lighthouse, Chrome Geliştirici Araçları ve Chrome Kullanıcı Deneyimi Raporu yer alır. Site geliştiricilerin, kullandıkları her üçüncü tarafın her sayfa üzerindeki etkisini anlayabilmesi için mevcut API'leri ve araçları geliştirmeyi öneriyoruz. Bu araçlar, etkiyi azaltmak için yapabilecekleri işlemler (ör. geciktirmek veya hafif bileşenler kullanmak) hakkında da bilgi verir ve diğer potansiyel çözümleri (diğer üçüncü taraflar veya kendin yap) keşfetmelerine olanak tanır. Web performansı izleme API'leri için, kullanıcılarımızın gizliliğinden ve güvenliğinden ödün vermeden kaynak ötesi kaynakların kapsamını genişletmenin yollarını araştırıyoruz.

2. **İşletmelere üçüncü taraf kaynaklarını verimli bir şekilde yüklemek için iyi aydınlatılmış bir yol gösterin.**

   Kullanıcılar için daha iyi bir yükleme deneyimi sunmak amacıyla tarayıcıların, birinci taraf ve üçüncü taraf kaynaklarının yüklenmesi arasında daha akıllıca seçimler yapmasını teşvik eden yeni standartlar önermek istiyoruz. Daha sonra, varsayılan olarak üçüncü taraf yerleşimlerini yavaş yükleme veya kullanıcıların en çok önemsediği ilk içerik için o kadar kritik olmayabilecek üçüncü taraf kaynaklarına farklı kaynak önceliği uygulama gibi bu önerilerden bazılarını öne çıkaracağız. Bunlar, bu alanda değerlendirdiğimiz fikirlerden sadece birkaçı. Bu çalışmayı şekillendirmek için hem web performansı uzmanlarıyla hem de daha geniş bir toplulukla birlikte çalışmaktan memnuniyet duyarız.

   Benzer şekilde, JavaScript çerçevelerinde ve uygun olduğu durumlarda içerik yönetim sistemlerinde (İYS) bu tür sorunları ele almak istiyoruz. Aurora ve WordPress Performans Ekibi gibi projeler, bilinen yükleme sorunlarını çözen yerleşik varsayılanların önemini bize öğretti. Çerçevelere ve içerik yönetim sistemlerine yerleştirilmiş varsayılan değerler, işletmeleri aydınlık bir yolda yönlendirir. Ayrıca, sayfa yükleme ve CWV'yi optimize etmek için sezgisel yöntemler uygulamasını sağlayan ipuçları olarak kullanıcı aracısına (ör. Chrome) yardımcı olabilirler. Bu tür ipuçları, kullanıcı aracısının belirli üçüncü tarafların sayfa yaşam döngüsünde ne zaman ve nasıl yükleneceğine karar vermesine yardımcı olabilir. (Örneğin, Next.js komut dosyası bileşeninde, sayfa etkileşimli hale geldikten sonra üçüncü taraf komut dosyalarını yüklemek için yerleşik bir varsayılan ayar bulunur.)

3. **Daha iyi şeffaflık çalışmalarıyla performans üzerindeki etkilerini azaltmaları için üçüncü taraflara teşvikler verin.**

   Üçüncü taraf geliştiriciler, komut dosyalarının siteler üzerindeki etkisini anlamak için gerekli görünürlükten şu anda yoksun. Bu sorunu gidermeyi ve bu sağlayıcılara, etkilerini analiz edip pazardaki aynı değeri sunan diğer ürünlerle karşılaştırabilecekleri araçlar sunmayı planlıyoruz. Ayrıca, etkiyi azaltmak için yukarı akışta etkiyi neyin tetiklediğini teşhis etmek amacıyla verileri kullanmalarına yardımcı olmak istiyoruz. Başarılı olmak için Google tarafından yazılanlar da dahil olmak üzere tüm üçüncü tarafları çağırmamız gerekecek.

Meydan okumalar

Bu büyüklükte bir çalışmanın zorlukları da vardır. Dikkate almamız gereken önemli zorluklardan bazıları şunlardır:

• Üçüncü taraflar; reklamlar, analizler, etiket yönetimi, yardımcı programlar ve daha birçok şeyi kapsayan kesişimsel bir sorundur. Her alan için benzersiz bir dizi koşul ve değiş tokuş dikkate alınmalıdır. Örneğin:
  • Reklamların yüklenmesini optimize etme kararı, gelir ve kullanıcı deneyimi arasındaki dengeye bağlıdır. Çok erken gösterilirse değerli içerikler engellenir, çok geç gösterilirse kullanıcı bunları görmez.
  • Analytics komut dosyaları sayfa ağırlığını artırır ancak işletmeye kullanıcı işlemleri hakkında değerli veriler sağlar.

Çeşitli kategorilerdeki üçüncü taraflarla iş ortaklığı yapmak, ilgili nüansları kavramak, dengeleri çözmek ve herkes için işe yarayan teşvikler geliştirmeyi umuyoruz. Stratejimizin etkili olması için her alandaki tüzel kişilerle ayrı ayrı çalışmamız gerektiğinin farkındayız. Google Etiket Yöneticisi, Google Ads ve YouTube gibi dahili iş ortaklarımız da buna dahildir.

1. Hem site geliştiricilere hem de üçüncü taraf geliştiricilere daha ayrıntılı ilişkilendirme sunmak istiyoruz. Bunun için, etkiyi ölçmede en alakalı verilerin hangileri olduğunu belirlediğimiz, bu verileri doğru ve ayrıntılı bir şekilde ilişkilendirdiğimiz ve doğru yolu sunduğumuz bilinçli bir çaba gerekir. Sonuç olarak, belirli bir üçüncü tarafın rakiplerine kıyasla nasıl performans gösterdiğine dair hesaplama herkese açık olmalıdır.

2. Chrome'u, birinci taraf ve üçüncü taraf kaynaklarının yüklenmesine öncelik verme konusunda doğru dengeyi bulmaya yardımcı olacak optimizasyonlar uygulayabilecek şekilde geliştirmeyi öneriyoruz. Değerli bir değişiklik, tüm tarayıcılarda standart olarak kullanıma sunulur ancak bu süreç zaman alır. Örneğin, <img> ve <iframe> öğeleri için loading özelliği 2019'dan beri Chrome/Edge'de kullanılabilir durumdadır ancak Safari'de yalnızca 2022'de kullanıma sunulmuştur. Bir özellik standart hale gelene kadar üçüncü taraf kaynaklarının kullanıcılarının diğer tarayıcılar için de optimize ettiklerini doğrulamaları gerekir. Bu konuyu, alakalı olduğu durumlarda yol gösterici içeriklerimizde vurgulayarak size yardımcı oluruz.

3. Bu projeyi hayata geçirmek için iş ortakları ve geliştiricilerle etkileşime geçmemiz gerekecek. Böylece, hem belirli şartları anlamamıza yardımcı olacak hem de deneysel çözümleri geniş ölçekte test edecek, geri bildirim verecek, gerektiğinde tekrar deneyecek ve doğaçlama yapacağız. Değişikliklerin, test ve değerlendirme için makul bir zaman aralığı sağlayacak şekilde planlanması gerekir.

İlk Standart Önerileri

Üçüncü taraf yükleme sürecini optimize etmek için etkinleştirilebilecek özellikler geliştirmek amacıyla bazı ilk denemeler yaptık. Elde edilen sonuçlardan memnunuz ve şu anda bu özelliklerden ikisini ele alabiliriz.

LazyEmbeds

Chrome, daha önce basit mod kullanıcılarımız için ekran dışındaki <img> ve <iframe> öğelerini gecikmeli olarak yüklerdi. Bu özellik, üçüncü taraf yerleşik olarak belirlenen <iframe> öğelerinin yüklenmesi kullanıcı ekranı kaydırana kadar ertelemek için tüm kullanıcılara sunulabilir. Bu, sayfanın diğer bölümlerinin yüklenmesini hızlandırabilir, Core Web Vitals'ı iyileştirebilir, bellek kullanımını azaltabilir ve veri tasarrufu sağlayabilir.

YouTube videolarını bir sayfaya yavaş yüklemek için LazyEmbeds'in kullanıldığı bir demoyu burada bulabilirsiniz. Tek bir YouTube videosu yerleştirmesi genellikle sayfaya 500-600 KB JavaScript ekler. LazyEmbeds'i kullanarak 14 adet bu tür video yerleştirmesi içeren bir blog yayınını optimize etmeyi denedik. Elde edilen sonuçlar, sayfa yükleme süresi ve veri tasarrufu açısından umut vericiydi.

Bu çalışma hakkında daha fazla bilgi edinmek için açıklamamıza ve blink-dev deneme yapma isteği ileti dizisine ve deneme uzantısına göz atın.

Hedeflenen üçüncü taraf tarama hızı sınırlaması

Üçüncü taraf komut dosyaları genellikle çeşitli ekipler tarafından bütünsel gözetim süreçleri olmadan eklenir. The Telegraph'un mühendislik ekibi, "herkesin, kuruluşa para kazandıracak bir sayfada "o etiketi" istediğini" belirtti. Bu durum, performans üzerindeki etkiyi yönetme yükünü sürekli olarak artırabilir.

Hedeflenen üçüncü taraf komut dosyası azaltma, etkilerini azaltmak için çok belirli türde üçüncü tarafları azaltmayı önerir. Bu sayede tarayıcılar, önemli içerikleri ve kritik üçüncü tarafları erken yükleyebilir. Daha sonra yüklenmeleri güvenli olan kaynaklar ise sınırlandırılır.

RUM API'lerini geliştirme

Ayrıca, RUM API'lerini üçüncü taraf performansını değerlendirmede alakalı olacak bilgileri içerecek şekilde geliştirmeyi de düşünüyoruz. İyileştirmeler arasında şunlar yer alır:

1. <iframe> raporlama: Çerçeveler arası raporlama için Performans Zaman Çizelgesi API'sinden yararlanabilecek çözümler üzerinde çalışıyoruz. Bu sayede, üst düzey sayfanın yazarları, sayfaya yerleştirilmiş işbirliği yapan bir üçüncü taraf iframe'inin performans verilerini inceleyebilir.

2. Uzun görev ilişkilendirmesi: RUM'daki Long Tasks API, site sahiplerinin ana ileti dizisini uzun süre meşgul eden ve etkileşimi geciktiren uzun görevleri belirlemesine yardımcı olur.

Diğer güncellemeler

Bu tür birçok fikri denemeye devam ediyoruz. Çalışmalarımız ilerledikçe değişikliklerle ilgili GitHub açıklamaları ve spesifikasyon taslakları yayınlamayı umuyoruz. Bizimle iş ortaklığı yapmak veya geri bildirimde bulunmak isteyen üçüncü taraflar ve site sahipleri bu platformlar üzerinden tartışmalara katkıda bulunabilir. Üçüncü taraflar da Core Web Vitals/INP verilerinin kötü olmasının kendileriyle ilişkilendirilmediğinden emin olmak için Core Web Vitals ve INP metrikleri için optimizasyona odaklanmaya başlayabilir. Şu anda güncellemeler için aktif olarak arama yapanlar blink-dev grubundaki yayınları inceleyebilir.

Bu sorun alanını daha ayrıntılı bir şekilde incelemeyi ve edindiğimiz bilgileri toplulukla paylaşmayı heyecanla bekliyoruz.

Özel teşekkürler: Leena Sohoni-Kasture, Jeremy Wagner, Gilberto Cocchi, Kenji Baheux, Kouhei Ueno, Kentaro Hara, Alex N. Jose, Melissa Mitchell, Yoav Weiss, Shunya Shishido ve Minoru Chikamune'ye geri bildirimleri ve katkıları için teşekkür ederiz.