Üçüncü Taraf JavaScript Yükleme

Addy Osmani

Arthur Evans

Kodunuzu optimize etmenize rağmen siteniz hâlâ çok yavaş yükleniyorsa sorun büyük olasılıkla üçüncü taraf komut dosyalarındandır.

Üçüncü taraf komut dosyaları, web'i daha dinamik, etkileşimli ve bağlantılı hale getiren çeşitli faydalı özellikler sağlar. Hatta bazıları web sitenizin işlevi veya gelir akışı için çok önemli olabilir. Ancak bunları kullanmak riskli bir durumdur:

• Sitenizin performansını yavaşlatabilirler.
• Gizlilik veya güvenlik sorunlarına neden olabilirler.
• Bu davranışlar tahmin edilemez ve davranışları istenmeyen sonuçlara yol açabilir.

İdeal olarak, üçüncü taraf komut dosyalarının sitenizin kritik oluşturma yolunu etkilemediğinden emin olmanız gerekir. Bu kılavuzda, üçüncü taraf JavaScript yüklemesiyle ilgili sorunları nasıl bulup düzelteceğiniz ve kullanıcılarınız için oluşturabileceğiniz riskleri nasıl en aza indireceğiniz adım adım açıklanmıştır.

Üçüncü taraf komut dosyaları nedir?

Üçüncü taraf JavaScript genellikle, doğrudan bir üçüncü taraf tedarikçi firmasından herhangi bir siteye yerleştirilebilecek komut dosyalarını belirtir. Örnekler:

• Sosyal paylaşım düğmeleri (Facebook, X, LinkedIn, Mastodon)

• Video oynatıcı yerleştirmeleri (YouTube, Vimeo)

• Reklam iframe'leri

• Analiz ve metrik komut dosyaları

• Denemeler için A/B testi komut dosyaları

• Tarih biçimlendirmesi, animasyon veya işlevsel kitaplıklar gibi yardımcı kitaplıklar

Aşağıdaki kod kullanılarak sayfaya eklenebilen bir YouTube videosu yerleştirme örneği.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mo8thg5XGV0"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
>
</iframe>

Ne yazık ki, üçüncü taraf komut dosyalarını yerleştirmek, hızlı bir şekilde çalışmaları ve sayfalarımızı yavaşlatmamaları için genellikle bunlara güvendiğimiz anlamına geliyor. Üçüncü taraf komut dosyaları, aşağıdaki sorunlar dahil olmak üzere site sahibinin kontrolü dışındaki kaynaklardan kaynaklanan performans yavaşlamalarının yaygın bir nedenidir:

• Birden çok sunucuya çok fazla ağ isteği tetikleniyor. Bir sitenin ne kadar çok istekte bulunması gerekirse yüklenmesi o kadar uzun sürer.

• Ana iş parçacığını meşgul edecek çok fazla JavaScript göndermek. Çok fazla JavaScript, DOM oluşturma işlemini engelleyebilir ve bu da sayfanın oluşturulmasını geciktirir. CPU'yu yoğun olarak kullanan komut dosyası ayrıştırma ve yürütme işlemleri, kullanıcı etkileşimini geciktirebilir ve pilin hızlı tükenmesine neden olabilir.

• Büyük boyutlu, optimize edilmemiş resim dosyaları veya videolar göndermek veri tüketebilir ve kullanıcıların para kaybetmesine neden olabilir.

• Sayfanız bir komut dosyasını dikkatli bir şekilde yüklemezse tek hata noktası (SPOF) olarak değerlendirilebilecek güvenlik sorunları.

• HTTP önbelleğe almanın yetersiz olması, tarayıcıyı kaynakları getirmek için daha fazla ağ isteği göndermeye zorlama.

• Sunucu sıkıştırmanın yeterli olmaması kaynakların yavaş yüklenmesine neden olur.

• İşlenmesi tamamlanana kadar içeriğin görüntülenmesi engelleniyor. Bu, eşzamansız A/B testi komut dosyaları için de geçerli olabilir.

• Kullanıcı deneyimine zarar verdiği bilinen eski API'lerin (ör. document.write()) kullanımı.

• Çok fazla DOM öğesi veya pahalı CSS seçiciler.

• Birden fazla üçüncü taraf yerleştirmesi dahil etmek, birden fazla çerçevenin ve kitaplığın birkaç kez çekilmesine, kaynakların boşa harcanmasına ve mevcut performans sorunlarının daha da kötüleşmesine neden olabilir.

• Üçüncü taraf komut dosyaları genellikle, yerleştirme işlemi eşzamansız veya erteleme işlevi kullansa bile sunucuları yavaş yanıt veriyorsa window.onload öğesini engelleyebilen yerleştirme tekniklerini kullanır.

Üçüncü taraf komut dosyalarıyla ilgili sorunları düzeltebilmeniz, sitenize ve üçüncü taraf kodunu nasıl yükleyeceğinizi yapılandırabilme becerinize bağlı olabilir. Neyse ki, üçüncü taraf kaynaklarıyla ilgili sorunları bulup düzeltmenizi sağlayacak pek çok çözüm ve araç mevcuttur.

Bir sayfadaki üçüncü taraf komut dosyasını nasıl tanımlarsınız?

Sitenizdeki üçüncü taraf komut dosyalarını tanımlamak ve bunların performans etkisini belirlemek, bunları optimize etmenin ilk adımıdır. Yüksek maliyetli komut dosyalarını belirlemek için Chrome Geliştirici Araçları, PageSpeed Insights ve WebPageTest gibi ücretsiz web hız testi araçlarını kullanmanızı öneririz. Bu araçlar, sitenizin kaç tane üçüncü taraf komut dosyası kullandığını ve hangilerinin yürütülmesi en çok zaman aldığını size söyleyebilecek zengin teşhis bilgileri görüntüler.

WebPageTest'in şelale görünümü, yoğun üçüncü taraf komut dosyası kullanımının etkisini vurgulayabilir. Etiketleri Çılgın Hale Getiren aşağıdaki resimde, izleme ve pazarlama komut dosyalarının aksine bir sitenin ana içeriğini yüklemek için gereken ağ isteklerinin örnek bir diyagramı gösterilmektedir.

Bu sayfadaki komut dosyalarının yüklenmesi, sayfanın kendisinden daha uzun sürüyor.

WebPageTest'in alan dökümü, ne kadar içeriğin üçüncü taraf kaynaklardan geldiğini görselleştirmek için de yararlı olabilir. Bu değer, toplam bayt sayısına ve istek sayısına göre bölümlere ayrılır:

Alan dökümü grafikleri, bir sayfadaki içeriğin ne kadarının üçüncü taraflardan geldiğini gösterir.

Üçüncü taraf komut dosyasının sayfam üzerindeki etkisini nasıl ölçerim?

Sorunlara neden olan bir komut dosyası gördüğünüzde, komut dosyasının ne yaptığını öğrenin ve sitenizin çalışması için bu komut dosyasının gerekli olup olmadığını belirleyin. Gerekirse algılanan değer ile temel kullanıcı etkileşimi veya performans metrikleri üzerindeki etkisi arasında denge kurmak için bir A/B testi çalıştırın.

Lighthouse Açılış Süresi Denetimi

Lighthouse JavaScript başlatma süresi denetimi, maliyetli komut dosyası ayrıştırma, derleme veya değerlendirme süresine sahip komut dosyalarını vurgular. Bu, CPU yoğun üçüncü taraf komut dosyalarını tanımlamanıza yardımcı olabilir.

Başlatma süresi denetimi, hangi komut dosyalarının yüklenmesinin en uzun sürdüğünü gösterir.

Lighthouse Ağ Yükleri Denetimi

Lighthouse Network Payloads Audit, sayfa yükleme süresini yavaşlatan ve kullanıcıların mobil veride beklediklerinden fazla harcama yapmasına neden olan üçüncü taraf ağ istekleri dahil olmak üzere ağ isteklerini tanımlar.

Ağ Yükleri Denetimi, hangi ağ isteklerinin en fazla zaman aldığını ve en fazla veriyi getirdiğini gösterir.

Chrome Geliştirici Araçları Ağ İsteği Engelleme

Chrome Geliştirici Araçları, belirli bir komut dosyası, stil sayfası veya başka bir kaynak kullanılamadığında sayfanızın nasıl davrandığını görmenizi sağlar. Bunun için ağ isteğini engelleme özelliği kullanılır. Bu özellik, sayfanızdan bağımsız üçüncü taraf kaynakları kaldırmanın etkisini ölçmeye yardımcı olabilir.

İstek engellemeyi etkinleştirmek için Ağ panelindeki herhangi bir isteği sağ tıklayın ve İstek URL'sini Engelle'yi seçin. Ardından, Geliştirici Araçları çekmecesinde hangi isteklerin engellendiğini yönetebileceğiniz bir istek engelleme sekmesi görüntülenir.

Sayfaların bu istekler olmadan nasıl davranacağını görmek için ağ isteklerini tek tek engelleyin.

Chrome Geliştirici Araçları Performans Paneli

Chrome Geliştirici Araçları'ndaki Performans paneli, sayfanızın web performansıyla ilgili sorunları tanımlamanıza yardımcı olur.

1. Kaydet'i tıklayın.
2. Sayfanızı yükleyin. Geliştirici Araçları, sitenizin yükleme süresini nasıl harcadığını gösteren bir şelale diyagramı gösterir.
3. Performans panelinin alt kısmındaki Aşağıdan yukarı'ya gidin.
4. Ürüne göre gruplandır'ı tıklayın ve sayfanızın üçüncü taraf komut dosyalarını yükleme süresine göre sıralayın.

Üçüncü taraf komut dosyaları, en uzun yükleme süresinden başlayarak ürüne göre sıralanır.

Sayfa yükleme performansını analiz etmek amacıyla Chrome Geliştirici Araçları'nı kullanma hakkında daha fazla bilgi edinmek için Çalışma zamanı performansını analiz etmeye başlama başlıklı makaleyi inceleyin.

Üçüncü taraf komut dosyalarının etkisini ölçmek için önerdiğimiz iş akışı aşağıda verilmiştir:

1. Sayfanızın ne kadar sürede yüklendiğini ölçmek için Ağ panelini kullanın.
   • Gerçek dünya koşullarının emülasyonunu yapmak için ağ kısıtlama ve CPU kısıtlama'yı etkinleştirmenizi öneririz. Kullanıcılarınızın laboratuvar koşullarında pahalı komut dosyalarının etkisini azaltan hızlı ağ bağlantılarına ve masaüstü donanımlarına sahip olma olasılığı düşüktür.
2. Sorun olduğunu düşündüğünüz üçüncü taraf komut dosyalarından sorumlu URL'leri veya alanları engelleyin (maliyetli komut dosyalarını tanımlama konusunda rehberlik için Chrome Geliştirici Araçları Performans Paneli'ne bakın).
3. Sayfayı yeniden yükleyin ve yükleme süresini tekrar ölçün.
   • Daha doğru veriler için yükleme sürenizi en az üç kez ölçmek isteyebilirsiniz. Bu, her sayfa yüklemesinde farklı kaynaklar getiren bazı üçüncü taraf komut dosyalarını dikkate alır. Geliştirici Araçları Performans Paneli bu konuda yardımcı olması için birden fazla kaydı destekler.

Üçüncü taraf komut dosyalarının etkisini WebPageTest ile ölçün

WebPageTest, Gelişmiş Ayarlar > Engelle'ye giderek isteklerin etkisini ölçmek için tek tek isteklerin yüklenmesini engellemeyi destekler. Engellenecek alanların (ör. reklam alanları) listesini belirtmek için bu özelliği kullanın.

Engellemek istediğiniz alan adlarını bu panelde listeleyin.

Bu özelliği kullanmak için aşağıdaki iş akışını öneririz:

1. Bir sayfayı üçüncü tarafları engellemeden test edebilirsiniz.
2. Bazı üçüncü taraflar engellenmiş olarak testi tekrarlayın.
3. Test geçmişinizdeki iki sonucu seçin.
4. Karşılaştır'ı tıklayın.

Karşılaştırılacak yük testi sonuçlarını seçin.

Aşağıdaki resimde, WebPageTest'in, etkin üçüncü taraf kaynakları olan ve olmayan sayfaların yükleme dizilerini karşılaştıran film şeridi özelliği gösterilmektedir. Sayfanızın performansını en çok hangi alanların etkilediğini belirlemek için, bunu bağımsız üçüncü taraf kaynakların testlerinde kontrol etmenizi öneririz.

Üçüncü taraf kaynaklarını engellemenin etkisi, Andy Davies'in WebPageTest To Ölçmek için Üçüncü Taraf Etiketlerinin Etkisini Ölçmek başlıklı makaleden alınmıştır.

WebPageTest, alan adlarını engellemek için DNS düzeyinde çalışan iki komutu da destekler:

• blockDomains, engellenecek alan adlarının listesini alır.
• blockDomainsExcept alan adı listesini alır ve listede olmayan öğeleri engeller.

WebPageTest'te ayrıca, bir kaynağın yüklenmesinde zaman aşımı veya tam hata simülasyonu yapmanızı sağlayan tek bir hata noktası (SPOF) sekmesi bulunur. Alan engellemenin aksine SPOF yavaşça zaman aşımına uğrar. Bu, üçüncü taraf hizmetler ağır yük altında olduğunda veya geçici olarak kullanılamadığında sayfalarınızın nasıl davrandığını test etmek için faydalı olabilir.

Belirtilen alanların hatasını simüle etmek için SPOF test özelliğini kullanın.

Uzun Görevleri kullanarak pahalı iframe'leri algılama

Üçüncü taraf iframe'lerdeki komut dosyalarının çalışması uzun sürdüğünde, ana iş parçacığını engelleyebilir ve diğer görevleri geciktirebilirler. Bu uzun görevler, etkinlik işleyicilerin yavaş çalışmasına veya karelerin düşmesine, dolayısıyla kullanıcı deneyimini kötüleştirmesine neden olabilir.

Gerçek Kullanıcı İzleme (RUM) için uzun görevleri algılamak amacıyla uzun görev girişlerini gözlemlemek için JavaScript PerformanceObserver API'sini kullanın. Bu girişler, hangi çerçeve bağlamının uzun göreve neden olduğunu belirlemek için kullanabileceğiniz bir ilişkilendirme özelliği içerir.

Aşağıdaki kod, "pahalı" iframe için olanlar da dahil olmak üzere longtask girişlerini konsola kaydeder:

<script>
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Attribution entry including "containerSrc":"https://example.com"
      console.log(JSON.stringify(entry.attribution));
    }
  });

  observer.observe({entryTypes: ['longtask']});
</script>

<!-- Imagine this is an iframe with expensive long tasks -->
<iframe src="https://example.com"></iframe>

Uzun Görevleri izleme hakkında daha fazla bilgi edinmek için Kullanıcı Merkezli Performans Metrikleri'ne bakın.

Üçüncü taraf komut dosyasını verimli bir şekilde nasıl yüklüyorsunuz?

Üçüncü taraf bir komut dosyası sayfanızın yükleme hızını yavaşlatıyorsa performansı artırmak için birkaç seçeneğiniz vardır:

• Doküman ayrıştırma işleminin engellenmesini önlemek için async veya defer özelliğini kullanarak komut dosyasını yükleyin.
• Üçüncü taraf sunucu yavaşsa, komut dosyasını kendi bünyesinde barındırmayı düşünebilirsiniz.
• Komut dosyası sitenize net bir değer katmıyorsa kaldırın.
• Üçüncü taraf komut dosyaları barındıran alanlar için DNS araması gerçekleştirmek üzere <link rel=preconnect> veya <link rel=dns-prefetch> gibi Kaynak İpuçları'nı kullanın.

async veya defer kullanın

JavaScript'in çalıştırılması ayrıştırıcı engelliyor. Tarayıcı bir komut dosyasıyla karşılaştığında, DOM oluşturma işlemini duraklatmalı, komut dosyasını JavaScript motoruna aktarmalı ve DOM oluşturmaya devam etmeden önce komut dosyasının yürütülmesine izin vermelidir.

async ve defer özellikleri bu davranışı şu şekilde değiştirir:

• async, HTML dokümanını ayrıştırmaya devam ederken tarayıcının komut dosyasını eşzamansız olarak indirmesine neden olur. Komut dosyasının indirilmesi tamamlandığında, komut dosyası yürütülürken ayrıştırma işlemi engellenir.

• defer, tarayıcının, HTML dokümanını ayrıştırmaya devam ederken komut dosyasını eşzamansız olarak indirmesine neden olur. Ardından, doküman ayrıştırma işlemi tamamlanana kadar komut dosyasını çalıştırmayı bekler.

Kritik oluşturma yolu için komut dosyası gerekli olmadığı sürece üçüncü taraf komut dosyalarında her zaman async veya defer kullanın. Komut dosyasının, bazı Analytics komut dosyaları gibi yükleme işleminin daha erken aşamalarında çalıştırılması önemliyse async kullanın. Sayfada kullanıcının başlangıçta göreceğinden daha alt konumda oluşturulan videolar gibi daha az kritik kaynaklar için defer kullanın.

Asıl endişeniz performans ise sayfanızdaki kritik içerik yüklenene kadar eşzamansız komut dosyaları eklemeyi beklemenizi öneririz. jQuery gibi temel kitaplıklar için async kullanmanızı önermeyiz.

Not: Chrome'da ve Blink tabanlı diğer tarayıcılarda async ile defer, kaynaklar için ağ isteğinin önceliğini düşürür. Böylece, ağ isteğinin, engelleme komut dosyası olarak olduğundan çok daha geç yüklenmesine neden olabilir. Özellikle analiz komut dosyaları hakkında bilgi edinmek yararlıdır.

Bazı komut dosyalarının, özellikle de sitenizin önemli parçaları olan async veya defer olmadan yüklenmesi gerekir. Bunlar arasında, sitenizin onlar olmadan çalışamayacağı kullanıcı arayüzü kitaplıkları veya içerik yayınlama ağı (CDN) çerçeveleri bulunur.

Diğer komut dosyaları ise eşzamansız olarak yüklendiklerinde çalışmaz. Kullandığınız komut dosyaları için belgeleri kontrol edin ve eşzamansız olarak yüklenemeyen komut dosyalarını bu komut dosyalarını kullanabilecek alternatiflerle değiştirin. Bazı üçüncü tarafların, eşzamansız olarak eşit derecede iyi çalışabilecek olsalar bile komut dosyalarını eşzamanlı olarak çalıştırmayı önerdiğini unutmayın.

async yönteminin her şeyi düzeltmediğini unutmayın. Sayfanızda, reklam amaçlı izleme komut dosyaları gibi çok sayıda komut dosyası varsa, bunların eşzamansız olarak yüklenmesi sayfanın yüklenmesini yavaşlatmaz.

Bağlantı kurulum süresini kısaltmak için Kaynak İpuçlarını kullanın

Ağ isteklerinin, DNS aramaları ve yönlendirmeleri dahil birden fazla karmaşık bileşeni olduğundan, üçüncü taraf kaynaklara bağlantı kurmak, özellikle yavaş ağlarda uzun zaman alabilir. Üçüncü taraf komut dosyalarını barındıran alanlar için sayfa yükleme işleminin başlarında DNS aramaları gerçekleştirmek üzere gibi Kaynak İpuçları'nı kullanabilirsiniz. Böylece, ağ isteğinin geri kalanı daha sonra daha hızlı devam edebilir:

<link rel="dns-prefetch" href="http://example.com" />

Bağlandığınız üçüncü taraf alan HTTPS kullanıyorsa hem DNS aramaları yapan hem de TCP döngülerini çözen ve TLS anlaşmalarını işleyen aracını da kullanabilirsiniz. Bu diğer adımlar SSL sertifikalarının doğrulanmasını içerdiklerinden çok yavaş olabilir. Bu nedenle, önceden bağlanma yükleme süresini önemli ölçüde azaltabilir.

<link rel="preconnect" href="https://cdn.example.com" />

Bir iframe'i olan "Sandbox" komut dosyaları

Üçüncü taraf bir komut dosyasını doğrudan bir iframe'e yüklerseniz ana sayfanın yürütülmesini engellemez. AMP, JavaScript'i kritik yolun dışında tutmak için bu yaklaşımı kullanır. Bu yaklaşımın onload etkinliğini hâlâ engellediğini unutmayın. Bu nedenle, önemli özellikleri onload özelliğine eklememeye çalışın.

Chrome, geliştiricilerin belirli tarayıcı özelliklerine erişimi seçerek devre dışı bırakmasına olanak tanıyan bir dizi politika olan İzin Politikası'nı da (eski adıyla Özellik Politikası) destekler. Üçüncü taraf içeriğinin bir sitede istenmeyen davranışlara neden olmasını önlemek için bunu kullanabilirsiniz.

Üçüncü taraf komut dosyalarını kendi kendine barındıran

DNS süresini azaltmak veya HTTP önbelleğe alma üst bilgilerini iyileştirmek gibi önemli bir komut dosyasının yüklenme şekli üzerinde daha fazla kontrol sahibi olmak istiyorsanız bu komut dosyasını kendiniz barındırabilirsiniz.

Ancak, kendi kendine barındırma, özellikle komut dosyalarını güncellemek söz konusu olduğunda kendiliğinden sorunlarla birlikte gelir. Kendiliğinden barındırılan komut dosyaları, API değişiklikleri veya güvenlik düzeltmeleri için otomatik güncelleme almaz. Bu durum, komut dosyanızı manuel olarak güncelleyene kadar gelir kayıplarına veya güvenlik sorunlarına yol açabilir.

Alternatif olarak, komut dosyalarının ağdan ne sıklıkta alındığı üzerinde daha fazla kontrol sahibi olmak için Service Worker'ları kullanarak üçüncü taraf komut dosyalarını önbelleğe alabilirsiniz. Service Worker'ları, sayfanız kullanıcının önemli bir anına ulaşana kadar zorunlu olmayan üçüncü taraf isteklerini kısıtlayan yükleme stratejileri oluşturmak için de kullanabilirsiniz.

Daha küçük kullanıcı örneklerine A/B Testi uygulama

A/B testi (veya bölünmüş testi), kullanıcı deneyimini ve davranışını analiz etmek için bir sayfanın iki sürümüyle deneme yapma tekniğidir. Sayfa sürümlerini web sitesi trafiğinizin farklı örneklerine sunar ve hangi sürümün daha iyi bir dönüşüm oranı sağladığını Analytics'ten belirler.

Ancak A/B testi, tasarımı gereği hangi denemenin etkin olması gerektiğine karar vermek için oluşturmayı geciktirir. JavaScript, genellikle kullanıcılarınızdan herhangi birinin A/B testi denemesinde yer alıp almadığını kontrol etmek ve ardından doğru varyantı etkinleştirmek için kullanılır. Bu süreç, denemeye katılmayan kullanıcıların bile deneyimini kötüleştirebilir.

Sayfa oluşturmayı hızlandırmak için A/B testi komut dosyalarınızı kullanıcı tabanınızın daha küçük bir örneğine göndermenizi ve sunucu tarafında sayfanın hangi sürümünün gösterileceğine karar veren kodu çalıştırmanızı öneririz.

Üçüncü Taraf Kaynaklarını geç yükleme

Reklamlar ve videolar gibi yerleştirilmiş üçüncü taraf kaynakları, kötü yapılandırıldıklarında sayfa hızının düşmesine önemli ölçüde katkıda bulunabilir. Yerleştirilmiş kaynakları yalnızca gerektiğinde yüklemek için geç yükleme kullanılabilir. Örneğin, kullanıcılar reklamları görecek kadar ileri kaydırana kadar reklamların sayfa altbilgisinde sunulmasını beklerler. Ayrıca, ana sayfa içeriği yüklendikten sonra, ancak kullanıcı sayfayla etkileşimde bulunmadan önce üçüncü taraf içeriğini geç yükleyebilirsiniz.

Sayfa yüklendiğinde kullanıcının hemen görmeyeceği öğeleri geç yükleyebilirsiniz.

Genellikle stabil olmayan ağ bağlantılarından etkilenebilecek JavaScript kodu içerdiğinden, kaynakları geç yüklerken dikkatli olun.

Not: LazySizes, görselleri ve iframe'leri geç yükleme için kullanılan popüler bir JavaScript kitaplığıdır. YouTube'daki yerleştirmeleri ve widget'ları destekler.

DoubleClick'in resmi belgelerinde reklamların geç yüklemeyle ilgili yol gösterici bilgileri bulunmaktadır.

Intersection Observer ile verimli geç yükleme

Geçmişte, bir öğenin geç yükleme amacıyla görüntü alanında görünür olup olmadığını tespit etmeye yönelik yöntemler hataya açıktı ve genellikle tarayıcıyı yavaşlatırdı. Bu verimsiz yöntemler genellikle scroll veya resize etkinliklerini izler, ardından öğelerin görüntü alanına göre nerede olduğunu hesaplamak için getBoundingClientRect() gibi DOM API'lerini kullanır.

IntersectionObserver: sayfa sahiplerinin, gözlemlenen bir öğenin tarayıcının görüntü alanına ne zaman girdiğini veya buradan çıktığını verimli bir şekilde algılamasını sağlayan bir tarayıcı API'sidir. LazySizes, IntersectionObserver için isteğe bağlı destek de sunar.

Geç yükleme analizi

Analiz komut dosyalarınızın yüklenmesini çok uzun süre ertelerseniz değerli analiz verilerini kaçırabilirsiniz. Neyse ki, erken sayfa yükleme verilerini korurken analizleri geç başlatmaya yönelik stratejiler vardır.

Phil Walton'un Oluşturduğum Her Sitede Kullandığım Google Analytics Kurulumu blog yayını, Google Analytics için bu tür bir stratejiyi ele almaktadır.

Üçüncü taraf komut dosyalarını güvenli bir şekilde yükleme

Bu bölümde, üçüncü taraf komut dosyalarını mümkün olduğunca güvenli bir şekilde yüklemeyle ilgili yol gösterici bilgiler sağlanmaktadır.

document.write() kullanmaktan kaçının

Üçüncü taraf komut dosyaları, özellikle eski hizmetler için bazen komut dosyalarını eklemek ve yüklemek için document.write() kullanır. Bu bir sorundur, çünkü document.write() tutarsız davranır ve hata ayıklamaları zordur.

document.write() sorunlarının çözümü, bu yöntemi kullanmamaktır. Chrome 53 ve sonraki sürümlerde Chrome Geliştirici Araçları, document.write() ürününün sorunlu kullanımına ilişkin uyarıları konsola kaydeder:

Chrome Geliştirici Araçları, document.write() kullanımını işaretler.

Bu hatayı alırsanız tarayıcınıza gönderilen HTTP üst bilgilerini arayarak sitenizde document.write() kullanımını kontrol edebilirsiniz. Lighthouse, hâlâ document.write() kullanmakta olan üçüncü taraf komut dosyalarını da vurgulayabilir.

Hangi komut dosyalarının document.write() kullandığını gösteren Lighthouse raporu.

Etiket Yöneticilerini dikkatli kullanın

Etiket, dijital pazarlama ekiplerinin veri toplamasına, çerez oluşturmasına veya sosyal medya widget'ları gibi üçüncü taraf içeriklerini bir siteye entegre etmesine olanak tanıyan bir kod snippet'idir. Bu etiketler; ağ isteklerini, JavaScript bağımlılıklarını ve sayfanızın performansını etkileyebilecek diğer kaynakları sayfanıza ekler. Daha fazla etiket eklendikçe kullanıcılarınız için bu etkiyi en aza indirmek zorlaşır.

Sayfanın hızlı yüklenmesini sürdürmek için Google Etiket Yöneticisi (GTM) gibi bir etiket yöneticisi kullanmanızı öneririz. Google Etiket Yöneticisi, birbirlerinin yüklenmesini engellememeleri için etiketleri eşzamansız olarak dağıtmanıza olanak tanır, bir tarayıcının etiketleri yürütmek için ihtiyaç duyduğu ağ çağrılarının sayısını azaltır ve etiket verilerini Veri Katmanı kullanıcı arayüzünden toplar.

Etiket yöneticilerini kullanmanın riskleri

Etiket yöneticileri sayfanın yüklenmesini kolaylaştırmak için tasarlanmış olsa da, bunların dikkatsiz kullanılması sayfanın aşağıdaki şekillerde yavaş yüklenmesini sağlayabilir:

• Etiket yöneticinizdeki aşırı sayıda etiket ve otomatik etkinlik işleyici, tarayıcının normalde ihtiyaç duyacağından daha fazla ağ isteği oluşturmasına neden olur ve kodunuzun etkinliklere hızlı yanıt verme becerisini azaltır.
• Kimlik bilgileri ve erişimi olan herkes etiket yöneticinize JavaScript ekleyebilir. Bu durum, sayfanızı yüklemek için gereken maliyetli ağ isteklerinin sayısını artırmanın yanı sıra, gereksiz komut dosyalarından kaynaklanan güvenlik riskleri ve diğer performans sorunları da doğurabilir. Bu riskleri azaltmak için etiket yöneticinize erişimi sınırlandırmanızı öneririz.

Global kapsamı kirleten komut dosyalarından kaçının

Üçüncü taraf komut dosyaları, sayfanızı beklenmedik bir şekilde bozan her türlü şekilde davranabilir:

• JavaScript bağımlılıklarını yükleyen komut dosyaları, kodunuzla kötü etkileşim kuran kodla genel kapsamı kirletebilir.
• Beklenmedik güncellemeler, zarar veren değişikliklere neden olabilir.
• Sayfanızın test edilmesi ve dağıtılması arasında farklı davranışlar sergileyecek şekilde üçüncü taraf kodu, aktarım sırasında değiştirilebilir.

Kötü niyetli kişileri kontrol etmek için yüklediğiniz üçüncü taraf komut dosyalarını düzenli olarak denetlemenizi öneririz. Ayrıca sayfanızı güvende tutmak için kendi kendine test özelliğini, alt kaynak bütünlüğünü ve üçüncü taraf kodun güvenli iletimini uygulayabilirsiniz.

Risk azaltma stratejileri

Üçüncü taraf komut dosyalarının sitenizin performansı ve güvenliği üzerindeki etkisini en aza indirmek için bazı büyük ölçekli stratejiler aşağıda verilmiştir:

• HTTPS: HTTPS kullanan siteler, HTTP kullanan üçüncü taraflara bağımlı olmamalıdır. Daha fazla bilgi için Karma İçerik bölümüne bakın.

• Korumalı alana alma: Komut dosyalarının kullanabileceği işlemleri kısıtlamak için iframe'lerde sandbox özelliğiyle üçüncü taraf komut dosyaları çalıştırmayı düşünebilirsiniz.

• İçerik Güvenliği Politikası (İGP): Siteniz için güvenilir komut dosyası davranışlarını tanımlamak ve Siteler Arası Komut Dosyası Çalıştırma (XSS) gibi bazı saldırıların etkilerini tespit edip azaltmak amacıyla sunucunuzun yanıtında HTTP üst bilgilerini kullanabilirsiniz.

Aşağıda, bir sayfanın izin verilen JavaScript kaynaklarını belirtmek için CSP'nin script-src yönergesinin nasıl kullanılacağına dair bir örnek verilmiştir:

// Given this CSP header Content-Security-Policy: script-src
https://example.com/ // The following third-party script will not be loaded or
executed

<script src="https://not-example.com/js/library.js"></script>

Daha fazla bilgi

Üçüncü taraf JavaScript'i optimize etme hakkında daha fazla bilgi için aşağıdakileri okumanızı öneririz:

• Performans ve Esneklik: Stres Testi Yapan Üçüncü Taraflar
• JavaScript ile etkileşim özelliği ekleme
• Üçüncü Taraf Komut Dosyaları ile ilgili olası tehlikeler
• Üçüncü Taraf Komut Dosyaları nasıl web'de etkili kullanıcılar olabilir?
• Neden Hızlı Önemlidir? - CSS Sihirbazlığı
• JavaScript Tedarik Zinciri Paradoksu: SRI, CSP ve Üçüncü Taraf Kitaplıklarında Güven
• Üçüncü taraf CSS güvenli değil

Yorumları için Kenji Baheux, Jeremy Wagner, Pat Meenan, Philip Walton, Jeff Posnick ve Cheney Tsai'ye teşekkür ederiz.