Üçüncü taraf JavaScript'i yükleme

Addy Osmani

Arthur Evans

Kodunuzu optimize ettiğiniz halde siteniz hâlâ çok yavaş yükleniyorsa bunun nedeni muhtemelen üçüncü taraf komut dosyalarıdır.

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

• Sitenizin performansını yavaşlatabilirler.
• Gizlilik veya güvenlik sorunlarına neden olabilirler.
• Öngörülemez olabilirler 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'i yüklemeyle ilgili sorunları nasıl bulup düzelteceğinizi ve kullanıcılarınız için riskleri nasıl en aza indireceğinizi ele alacağız.

Üçüncü taraf komut dosyaları nedir?

Üçüncü taraf JavaScript, genellikle doğrudan üçüncü taraf satıcıdan herhangi bir siteye yerleştirilebilen komut dosyalarını ifade eder. Örnekler:

• Sosyal medya 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çimlendirme, animasyon veya işlevsel kitaplıklar gibi yardımcı kitaplıklar

Aşağıdaki kod kullanılarak sayfaya eklenebilecek örnek bir YouTube videosu yerleştirmesi.

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

Maalesef üçüncü taraf komut dosyalarını yerleştirmek, genellikle hızlı çalışmak ve sayfalarımızı yavaşlatmamak için onlara güvendiğimiz anlamına gelir. Üçüncü taraf komut dosyaları, site sahibinin kontrolü dışındaki kaynaklardan kaynaklanan performans yavaşlamalarının yaygın bir nedenidir. Bu sorunlar arasında şunlar yer alır:

• Birden fazla sunucuya çok fazla ağ isteği gönderme. Bir sitenin yapması gereken istek sayısı ne kadar fazlaysa yüklenmesi o kadar uzun sürebilir.

• Ana iş parçacığını meşgul eden çok fazla JavaScript gönderme. Çok fazla JavaScript, DOM oluşturmayı engelleyerek sayfa oluşturmayı geciktirebilir. CPU yoğun komut dosyası ayrıştırma ve yürütme, kullanıcı etkileşimini geciktirebilir ve pilin tükenmesine neden olabilir.

• Büyük, optimize edilmemiş resim dosyaları veya videolar göndermek veri tüketebilir ve kullanıcılara maliyet getirebilir.

• Sayfanız bir komut dosyasını dikkatli olmadan yüklerse tek hata noktası (SPOF) olarak işlev görebilecek güvenlik sorunları.

• HTTP önbelleğe alma yetersiz olduğundan tarayıcı, kaynakları getirmek için daha fazla ağ isteği göndermek zorunda kalıyor.

• Yeterli sunucu sıkıştırması olmaması, kaynakların yavaş yüklenmesine neden olur.

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

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

• Aşırı DOM öğeleri veya pahalı CSS seçiciler.

• Birden fazla üçüncü taraf yerleşik öğe eklemek, birden fazla çerçeve ve kitaplığın birkaç kez çekilmesine neden olarak kaynakları boşa harcar ve mevcut performans sorunlarını daha da kötüleştirir.

• Üçüncü taraf komut dosyaları, yerleştirme işlemi eş zamansız veya ertelenmiş olsa bile sunucuları yavaş yanıt verirse window.onload'ı engelleyebilecek yerleştirme tekniklerini kullanır.

Üçüncü taraf komut dosyalarıyla ilgili sorunları düzeltme beceriniz, sitenize ve üçüncü taraf kodunu yükleme şeklinizi yapılandırma becerinize bağlı olabilir. Neyse ki üçüncü taraf kaynaklarla ilgili sorunları bulup düzeltmek için çeşitli çözümler ve araçlar mevcuttur.

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

Sitenizdeki üçüncü taraf komut dosyalarını belirlemek ve bunların performans üzerindeki etkisini saptamak, optimizasyonun ilk adımıdır. 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ülmesinin en uzun sürdüğünü gösteren zengin teşhis bilgileri sunar.

WebPageTest'in şelale görünümü, yoğun üçüncü taraf komut dosyası kullanımının etkisini vurgulayabilir. Tags Gone Wild'dan alınan 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 adı dökümü, üçüncü taraf kaynaklardan ne kadar içerik geldiğini görselleştirmek için de yararlı olabilir. Bu döküm hem toplam bayt hem de istek sayısına göre yapılır:

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

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

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ına ihtiyacı 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 yapın.

Lighthouse başlatma süresi denetimi

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

Başlatma süresi denetimi, en uzun sürede yüklenen komut dosyalarını gösterir.

Lighthouse ağ yükleri denetimi

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

Ağ yükleri denetimi, en çok zaman alan ve en fazla veri getiren ağ isteklerini gösterir.

Chrome Geliştirici Araçları ağ isteğ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. Bu işlem, sayfanızdan tek tek üçüncü taraf kaynaklarını kaldırmanın etkisini ölçmeye yardımcı olabilecek bir özellik olan ağ isteği engelleme ile yapılır.

İ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 bir istek engelleme sekmesi gösterilir. Bu sekmede, hangi isteklerin engellendiğini yönetebilirsiniz.

Sayfanızın ağ istekleri olmadan nasıl davrandığı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ı belirlemenize 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ı sekmesine gidin.
4. Ürüne göre gruplandırma ölçütü'ı tıklayın ve sayfanızın üçüncü taraf komut dosyalarını yükleme süresine göre sıralayın.

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

Sayfa yükleme performansını analiz etmek için Chrome Geliştirici Araçları'nı kullanma hakkında daha fazla bilgi edinmek istiyorsanız Ç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 yüklenme süresini ölçmek için Ağ panelini kullanın.
   • Gerçek koşulları taklit etmek için ağ sınırlama ve CPU sınırlama'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ı belirleme 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çmeniz önerilir. Bu, her sayfa yüklemesinde farklı kaynaklar getiren bazı üçüncü taraf komut dosyalarından kaynaklanır. Geliştirici Araçları Performans paneli, bu konuda yardımcı olmak için birden fazla kaydı destekler.

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

WebPageTest, Gelişmiş Ayarlar > Engelle bölümünde, isteklerin etkisini ölçmek için tek tek isteklerin yüklenmesini engellemeyi destekler. Reklam alanları gibi engellenecek alanların listesini belirtmek için bu özelliği kullanın.

Bu panelde engellemek istediğiniz alanları listeleyin.

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

1. Üçüncü tarafları engellemeden bir sayfayı test edin.
2. Bazı üçüncü taraflar engellenmişken testi tekrarlayın.
3. Test Geçmişi'nden iki sonuç 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 film şeridi özelliği, etkin üçüncü taraf kaynakları olan ve olmayan sayfaların yükleme sıralarını karşılaştırıyor. Sayfanızın performansını en çok hangi alanların etkilediğini belirlemek için üçüncü taraf kaynakların testlerinde bu değeri kontrol etmenizi öneririz.

Üçüncü taraf kaynakları engellemenin etkisi, Üçüncü Taraf Etiketlerinin Etkisini Ölçmek İçin WebPageTest'i Kullanma Andy Davies tarafından.

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

• blockDomains engellenecek alanların listesini alır.
• blockDomainsExcept, bir alan adı listesi alır ve listede olmayan her şeyi engeller.

WebPageTest'te, bir kaynağın yüklenmesinde zaman aşımı veya tam hata simülasyonu yapmanıza olanak tanıyan bir tek hata noktası (SPOF) sekmesi de bulunur. Alan engellemenin aksine, SPOF'un zaman aşımı yavaş gerçekleşir. Bu sayede, üçüncü taraf hizmetleri yoğun yük altındayken veya geçici olarak kullanılamıyorken sayfalarınızın nasıl davrandığını test etmek için kullanışlı olabilir.

Belirtilen alan adlarının başarısızlığını simüle etmek için SPOF test özelliğini kullanın.

Uzun süren görevleri kullanarak maliyetli iframe'leri tespit etme

Üçü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 süren görevler, etkinlik işleyicilerin yavaş çalışmasına veya karelerin düşmesine neden olarak kullanıcı deneyimini olumsuz etkileyebilir.

Gerçek Kullanıcı İzleme (RUM) için uzun süren görevleri tespit etmek istiyorsanız longtask girişlerini gözlemlemek üzere JavaScript PerformanceObserver API'yi kullanın. Bu girişler, uzun süren göreve hangi çerçeve bağlamının neden olduğunu belirlemek için kullanabileceğiniz bir ilişkilendirme özelliği içerir.

Aşağıdaki kod, "pahalı" bir iframe için olan da dahil olmak üzere konsola longtask giriş 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 süren görevleri izleme hakkında daha fazla bilgi edinmek için Kullanıcı Merkezli Performans Metrikleri başlıklı makaleyi inceleyin.

Üçüncü taraf komut dosyalarını verimli bir şekilde nasıl yüklersiniz?

Üçüncü taraf komut dosyası sayfa yüklemenizi yavaşlatıyorsa performansı iyileştirmek için birkaç seçeneğiniz vardır:

• Belge ayrıştırmanın engellenmesini önlemek için komut dosyasını async veya defer özelliğini kullanarak yükleyin.
• Üçüncü taraf sunucusu yavaşsa komut dosyasını kendiniz barındırabilirsiniz.
• Sitenize net bir değer katmıyorsa komut dosyasını kaldırın.
• Üçüncü taraf komut dosyalarını barındıran alanlar için DNS araması yapmak üzere <link rel=preconnect> veya <link rel=dns-prefetch> gibi kaynak ipuçları kullanın.

async veya defer kullanın

JavaScript yürütme, ayrıştırıcıyı engeller. Tarayıcı bir komut dosyasıyla karşılaştığında DOM oluşturma işlemini duraklatması, komut dosyasını JavaScript motoruna iletmesi ve DOM oluşturma işlemine devam etmeden önce komut dosyasının yürütülmesine izin vermesi gerekir.

async ve defer özellikleri bu davranışı aşağıdaki gibi değiştirir:

• async, tarayıcının HTML belgesini ayrıştırmaya devam ederken 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 engellenir.

• defer, tarayıcının HTML belgesini ayrıştırmaya devam ederken komut dosyasını eşzamansız olarak indirmesine ve belge ayrıştırma işlemi tamamlanana kadar komut dosyasını çalıştırmayı beklemesine neden olur.

Komut dosyası kritik oluşturma yolu için gerekli olmadığı sürece üçüncü taraf komut dosyaları için her zaman async veya defer kullanın. Komut dosyasının yükleme sürecinin başlarında çalıştırılması önemliyse (ör. bazı analiz komut dosyaları için) async kullanın. Kullanıcının ilk başta göreceği kısımdan daha aşağıda oluşturulan videolar gibi daha az kritik kaynaklar için defer kullanın.

Önceliğiniz performanssa eşzamansız komut dosyalarını sayfanızın kritik içeriği yüklendikten sonra eklemenizi öneririz. jQuery gibi temel kitaplıklar için async kullanılmasını önermiyoruz.

Not: Chrome ve diğer Blink tabanlı tarayıcılarda async ve defer, kaynaklar için ağ isteğinin önceliğini düşürür. Bu nedenle, engelleyici bir komut dosyası olarak yükleneceğinden çok daha geç yüklenmesine neden olabilir. Bu, özellikle analiz komut dosyaları için yararlı bir bilgidir.

Bazı komut dosyaları, özellikle de sitenizin önemli parçaları olanlar, async veya defer olmadan yüklenmelidir. Bunlar arasında, sitenizin çalışması için gerekli olan kullanıcı arayüzü kitaplıkları veya içerik yayınlama ağı (CDN) çerçeveleri yer alır.

Diğer komut dosyaları ise eşzamansız olarak yüklendiklerinde çalışmaz. Kullandığınız komut dosyalarının belgelerini kontrol edin ve eşzamansız olarak yüklenemeyen komut dosyalarını, yüklenebilen alternatiflerle değiştirin. Bazı üçüncü tarafların, eşzamansız olarak da aynı şekilde çalışacak olsa bile komut dosyalarının eşzamanlı olarak çalıştırılmasını önerdiğini unutmayın.

async her şeyi düzeltmez. Sayfanızda reklam amaçlı izleme komut dosyaları gibi çok sayıda komut dosyası varsa bunları eşzamansız olarak yüklemek, sayfa yükleme hızını yavaşlatmalarını engellemez.

Bağlantı kurulum süresini azaltmak için kaynak ipuçlarını kullanma

Üçüncü taraf kaynaklara bağlantı oluşturmak, özellikle yavaş ağlarda uzun sürebilir. Bunun nedeni, ağ isteklerinin DNS aramaları ve yönlendirmeler gibi birden fazla karmaşık bileşene sahip olmasıdır. Sayfa yükleme işleminin başlarında üçüncü taraf komut dosyalarını barındıran alanlar için DNS aramaları yapmak üzere gibi kaynak ipuçlarını kullanabilirsiniz. Böylece ağ isteğinin geri kalanı daha sonra daha hızlı ilerleyebilir:

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

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

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

Komut dosyalarını iframe ile "korumalı alana alma"

Üçüncü taraf komut dosyasını doğrudan bir iFrame'e yüklerseniz ana sayfanın yürütülmesi engellenmez. AMP, JavaScript'i kritik yolun dışında tutmak için bu yaklaşımı kullanır. Bu yaklaşımın onload etkinliğini engellemeye devam ettiğini unutmayın. Bu nedenle, kritik özellikleri onload etkinliğ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ı (eski adıyla Özellik Politikası) da destekler. Üçüncü taraf içeriklerin bir siteye istenmeyen davranışlar eklemesini önlemek için bu politikayı kullanabilirsiniz.

Üçüncü taraf komut dosyalarını kendi sunucunuzda barındırma

Kritik bir komut dosyasının nasıl yüklendiği üzerinde daha fazla kontrol sahibi olmak istiyorsanız (ör. DNS süresini azaltmak veya HTTP önbelleğe alma üst bilgilerini iyileştirmek için) komut dosyasını kendiniz barındırabilirsiniz.

Ancak kendi sunucunuzda barındırma, özellikle komut dosyalarını güncelleme konusunda kendi sorunlarını da beraberinde getirir. Kendi barındırdığınız komut dosyaları, API değişiklikleri veya güvenlik düzeltmeleri için otomatik güncellemeler 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 getirileceği üzerinde daha fazla kontrol sahibi olmak için hizmet çalışanlarını kullanarak üçüncü taraf komut dosyalarını önbelleğe alabilirsiniz. Sayfanız önemli bir kullanıcı anına ulaşana kadar gerekli olmayan üçüncü taraf isteklerini kısıtlayan yükleme stratejileri oluşturmak için hizmet çalışanlarını da kullanabilirsiniz.

Daha küçük kullanıcı örnekleriyle A/B testi yapma

A/B testi (veya split 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 sitenizin trafiğinin farklı örneklerine sunar ve analizlerden hangi sürümün daha iyi bir dönüşüm oranı sağladığını belirler.

Ancak A/B testi, hangi denemenin etkin olması gerektiğine karar vermek için oluşturmayı geciktirir. JavaScript genellikle kullanıcılarınızdan herhangi birinin bir A/B testi denemesine ait olup olmadığını kontrol etmek ve ardından doğru varyantı etkinleştirmek için kullanılır. Bu süreç, denemenin parçası olmayan kullanıcılar için bile deneyimi 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 sayfanın hangi sürümünün sunucu tarafında 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ü bir şekilde oluşturulduğunda sayfa hızının yavaşlamasına önemli ölçüde katkıda bulunabilir. Geç yükleme, yerleştirilmiş kaynakları yalnızca gerektiğinde yüklemek için kullanılabilir. Örneğin, sayfa altbilgisindeki reklamları sunmak için kullanıcı onları görecek kadar aşağı kaydırana kadar beklenebilir. Ayrıca, ana sayfa içeriği yüklendikten sonra ancak kullanıcının sayfayla etkileşime girmesinden önce üçüncü taraf içeriğini geç yükleyebilirsiniz.

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

Kaynakları geç yüklerken dikkatli olun. Bu işlem genellikle güvenilir olmayan ağ bağlantılarından etkilenebilecek JavaScript kodu içerir.

Not: LazySizes, resimleri ve iframe'leri geç yüklemek için kullanılan popüler bir JavaScript kitaplığıdır. YouTube yerleştirmelerini ve widget'ları destekler.

DoubleClick'in resmi belgelerinde reklamların geç yüklenmesiyle ilgili yönergeler bulunur.

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 etme yöntemleri hataya açıktı ve genellikle tarayıcıyı yavaşlatıyordu. Bu verimsiz yöntemler genellikle scroll veya resize etkinliklerini dinler, 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 çı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 analizleri

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şlatmak için kullanabileceğiniz stratejiler vardır.

Phil Walton'ın Oluşturduğum Her Sitede Kullandığım Google Analytics Kurulumu başlıklı blog yayını, Google Analytics için böyle bir stratejiyi ele alıyor.

Üçü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 bilgiler verilmektedir.

document.write() kullanmayın

Üçüncü taraf komut dosyaları, özellikle eski hizmetler için bazen komut dosyalarını eklemek ve yüklemek için document.write() kullanır. document.write() tutarsız davrandığı ve hatalarında hata ayıklama yapmak zor olduğu için bu bir sorundur.

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() öğesinin sorunlu kullanımıyla ilgili uyarıları konsola kaydeder:

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

Bu hatayı alırsanız tarayıcınıza gönderilen HTTP üstbilgilerine bakarak sitenizde document.write() kullanılıp kullanılmadığını kontrol edebilirsiniz. Lighthouse, document.write() kullanmaya devam eden üçüncü taraf komut dosyalarını da vurgulayabilir.

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

Etiket yöneticilerini dikkatli kullanın

Etiket, dijital pazarlama ekiplerinin veri toplamasına, çerezleri ayarlamasına veya sosyal medya widget'ları gibi üçüncü taraf içerikleri bir siteye entegre etmesine olanak tanıyan bir kod snippet'idir. Bu etiketler sayfanıza ağ istekleri, JavaScript bağımlılıkları ve sayfanın performansını etkileyebilecek diğer kaynakları ekler. Daha fazla etiket eklendikçe bu etkinin kullanıcılarınız üzerindeki etkisini en aza indirmek daha zor hale gelir.

Sayfanın hızlı yüklenmesini sağlamak için Google Etiket Yöneticisi (GTM) gibi bir etiket yöneticisi kullanmanızı öneririz. GTM, etiketleri eşzamansız olarak dağıtmanıza olanak tanır. Böylece etiketler birbirlerinin yüklenmesini engellemez, tarayıcının etiketleri yürütmek için yapması gereken ağ çağrılarının sayısını azaltır ve etiket verilerini Veri Katmanı kullanıcı arayüzünde toplar.

Etiket yöneticilerini kullanmanın riskleri

Etiket yöneticileri sayfa yüklemeyi kolaylaştırmak için tasarlanmış olsa da, bunları dikkatsizce kullanmak sayfa yüklemeyi aşağıdaki şekillerde yavaşlatabilir:

• Etiket yöneticinizde aşırı sayıda etiket ve otomatik etkinlik işleyici bulunması, tarayıcının normalde ihtiyaç duyacağından daha fazla ağ isteği yapmasına neden olur ve kodunuzun etkinliklere hızlı yanıt verme yeteneğini azaltır.
• Kimlik bilgilerine ve erişime sahip olan herkes, Etiket Yöneticinize JavaScript ekleyebilir. Bu durum, sayfanızı yüklemek için gereken maliyetli ağ isteklerinin sayısını artırmakla kalmaz, aynı zamanda gereksiz komut dosyalarından kaynaklanan güvenlik riskleri ve diğer performans sorunlarına da yol açabilir. Bu riskleri azaltmak için Etiket Yöneticisi'ne erişimi sınırlandırmanızı öneririz.

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

Üçüncü taraf komut dosyaları, sayfanızı beklenmedik şekilde bozacak her türlü davranışta bulunabilir:

• JavaScript bağımlılıklarını yükleyen komut dosyaları, kodunuzla kötü etkileşim kuran kodlarla global kapsamı kirletebilir.
• Beklenmedik güncellemeler, zarar veren değişikliklere neden olabilir.
• Üçüncü taraf kodları, sayfanızın test edilmesi ve dağıtılması arasında farklı davranacak şekilde 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. Sayfanızı güvende tutmak için kendi kendine test, alt kaynak bütünlüğü ve üçüncü taraf kodunun güvenli aktarımını da uygulayabilirsiniz.

Risk azaltma stratejileri

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

• HTTPS: HTTPS kullanan siteler, HTTP kullanan üçüncü taraflara bağlı olmamalıdır. Daha fazla bilgi için Karma İçerik başlıklı makaleyi inceleyin.

• Korumalı alan oluşturma: Komut dosyalarının gerçekleştirebileceği işlemleri kısıtlamak için üçüncü taraf komut dosyalarını sandbox özelliğine sahip iframe'lerde çalıştırmayı düşünebilirsiniz.

• İçerik Güvenliği Politikası (İGP): Siteniz için güvenilir komut dosyası davranışları tanımlamak ve siteler arası komut dosyası çalıştırma (XSS) gibi bazı saldırıların etkilerini tespit edip azaltmak için sunucunuzun yanıtında HTTP üstbilgilerini kullanabilirsiniz.

Aşağıda, bir sayfanın izin verilen JavaScript kaynaklarını belirtmek için İGP'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 edinmek için aşağıdakileri okumanızı öneririz:

• Performans ve Esneklik: Üçüncü Taraflara Stres Testi Uygulama
• JavaScript ile etkileşim ekleme
• Üçüncü taraf komut dosyalarıyla ilgili olası tehlikeler
• Üçüncü taraf komut dosyaları web'de nasıl performanslı vatandaşlar olabilir?
• Why Fast Matters - CSS Wizardry
• The JavaScript Supply Chain Paradox: SRI, CSP and Trust in Third Party Libraries
• Üçüncü taraf CSS güvenli değil

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