document.write() yöntemine müdahale etme

Paul Kinlan

Son zamanlarda Chrome'daki Geliştirici Konsolunuzda aşağıdaki gibi bir uyarı gördünüz mü ve ne olduğunu merak ettiniz mi?

(index):34 A Parser-blocking, cross-origin script,
https://paul.kinlan.me/ad-inject.js, is invoked via document.write().
This may be blocked by the browser if the device has poor network connectivity.

Karmaşıklık, web'in en büyük güçlerinden biridir ve harika yeni ürünler geliştirmek için üçüncü taraflarca oluşturulan hizmetlerle kolayca entegrasyon sağlamamıza olanak tanır. Bileşenlenebilirliğin dezavantajlarından biri, kullanıcı deneyimi konusunda paylaşılan bir sorumluluk içermesidir. Entegrasyon optimal değilse kullanıcı deneyimi olumsuz etkilenir.

Düşük performansın bilinen nedenlerinden biri, sayfalarda document.write() kullanımıdır (özellikle de komut dosyası yerleştiren kullanımlar). Aşağıdakiler ne kadar zararsız görünse de kullanıcılar için gerçek sorunlara neden olabilir.

document.write('<script src="https://example.com/ad-inject.js"></script>');

Tarayıcının bir sayfayı oluşturabilmesi için HTML işaretlemesini ayrıştırarak DOM ağacını oluşturması gerekir. Ayrıştırıcı, bir komut dosyasıyla karşılaştığında HTML'yi ayrıştırmaya devam edebilmek için durmalı ve komut dosyasını çalıştırmalıdır. Komut dosyası dinamik olarak başka bir komut dosyası eklerse ayrıştırıcı, kaynağın indirilmesi için daha da uzun süre beklemek zorunda kalır. Bu durum, bir veya daha fazla ağ gidiş gelişine neden olabilir ve sayfanın ilk kez oluşturulma süresini uzatabilir.

document.write() kullanılarak dinamik olarak enjekte edilen harici komut dosyaları, yavaş bağlantıya sahip kullanıcılar için ana sayfa içeriğinin gösterilmesini onlarca saniye geciktirebilir veya sayfaların yüklenememesine ya da çok uzun sürede yüklenerek kullanıcının sayfayı yüklemekten vazgeçmesine neden olabilir. Chrome'daki enstrümantasyona göre, document.write() aracılığıyla eklenen üçüncü taraf komut dosyalarının yer aldığı sayfaların 2G'de genellikle diğer sayfalardan iki kat daha yavaş yüklendiğini öğrendik.

Chrome'un kararlı kullanıcılarının% 1'inde 28 günlük bir saha denemesinden veri topladık. Bu deneme, 2G bağlantısı olan kullanıcılarla sınırlıydı. 2G'de tüm sayfa yüklemelerinin% 7,6'sında, üst düzey belgeye document.write() aracılığıyla eklenen en az bir siteler arası, ayrıştırıcıyı engelleyen komut dosyasının yer aldığını tespit ettik. Bu komut dosyalarının yüklenmesi engellendiğinde, bu yüklemelerde aşağıdaki iyileştirmeler görüldü:

  • İlk zengin içerikli boyama (kullanıcıya sayfanın etkili bir şekilde yüklendiğini gösteren görsel bir onay) aşamasına ulaşan sayfa yükleme sayısı %10 arttı, tamamen ayrıştırılmış duruma ulaşan sayfa yükleme sayısı %25 arttı ve yeniden yükleme sayısı %10 azaldı. Bu da kullanıcıların rahatsızlık düzeyinde düşüş olduğunu gösteriyor.
  • İlk zengin içerikli boyama süresine kadar ortalama sürede %21 düşüş (bir saniyeden fazla daha hızlı)
  • Bir sayfayı ayrıştırmak için gereken ortalama süre %38 azaltıldı. Bu, yaklaşık altı saniyelik bir iyileşme anlamına geliyor ve kullanıcı için önemli olan öğelerin gösterilmesi için gereken süreyi önemli ölçüde azaltıyor.

Bu verileri göz önünde bulundurarak, 55 sürümünden itibaren Chrome, bilinen kötü bir kalıbı algıladığında document.write() ürününün Chrome'da işlenme şeklini değiştirerek tüm kullanıcılar adına müdahale eder (bkz. Chrome Durumu). Daha açık belirtmek gerekirse Chrome, aşağıdaki koşulların tümü karşılandığında document.write() aracılığıyla enjekte edilen <script> öğelerini yürütmez:

  1. Kullanıcı yavaş bir bağlantı kullanıyorsa (özellikle 2G kullanıyorsa). (Gelecekte, bu değişiklik yavaş 3G veya yavaş kablosuz bağlantı gibi yavaş bağlantılara sahip diğer kullanıcıları da kapsayabilir.)
  2. document.write() üst düzey bir belgededir. Ana sayfanın oluşturulmasını engellemedikleri için bu müdahale, iframe'lerdeki document.written komut dosyaları için geçerli değildir.
  3. document.write() içindeki komut dosyası ayrıştırıcıyı engelliyor. "async" veya "defer" özelliklerine sahip komut dosyaları yürütülmeye devam eder.
  4. Komut dosyası aynı sitede barındırılmamalıdır. Diğer bir deyişle, Chrome, eşleşen bir eTLD+1'e sahip komut dosyalarında (ör. js.example.org'da barındırılan ve www.example.org'a eklenen bir komut dosyası) müdahale etmez.
  5. Komut dosyası tarayıcı HTTP önbelleğine eklenmemiş. Önbelleğe alınan komut dosyaları ağ gecikmesine neden olmaz ve çalışmaya devam eder.
  6. Sayfa isteği bir yeniden yükleme değildir. Kullanıcı yeniden yükleme işlemini tetiklerse Chrome müdahale etmez ve sayfayı normal şekilde yürütür.

Üçüncü taraf snippet'leri bazen komut dosyalarını yüklemek için document.write() kullanır. Neyse ki çoğu üçüncü taraf, üçüncü taraf komut dosyalarının sayfadaki içeriğin geri kalanının görüntülenmesini engellemeden yüklenmesine olanak tanıyan eşzamansız yükleme alternatifleri sunar.

Bu sorunu nasıl çözebilirim?

Basit bir yanıt olarak, document.write() kullanarak komut dosyası eklemeyin diyebiliriz. Kontrol etmeye devam etmenizi önerdiğimiz bir dizi eşzamansız yükleyici desteği için bilinen hizmetleri sağlıyoruz.

Sağlayıcınız listede yoksa ve eşzamansız komut dosyası yüklemeyi destekliyorsa lütfen bize bildirin. Bu durumda sayfayı güncelleyip tüm kullanıcılara yardımcı olabiliriz.

Sağlayıcınız, komut dosyalarını sayfanıza eşzamansız olarak yükleme özelliğini desteklemiyorsa sağlayıcınızla iletişime geçerek bu durumdan nasıl etkileneceğini bize ve kendisine bildirin.

Sağlayıcınız size document.write() içeren bir snippet sağlarsa komut dosyası öğesine async özelliği ekleyebilir veya komut dosyası öğelerini document.appendChild() ya da parentNode.insertBefore() gibi DOM API'leriyle ekleyebilirsiniz.

Sitenizin etkilendiğini belirleme

Kısıtlamanın uygulanıp uygulanmayacağını belirleyen çok sayıda ölçüt vardır. Peki, bu durumdan etkilenip etkilenmediğinizi nasıl anlarsınız?

Kullanıcının 2G'de olduğunu algılama

Bu değişikliğin olası etkisini anlamak için öncelikle kullanıcılarınızın kaçının 2G'de olacağını anlamanız gerekir. Chrome'da bulunan Network Information API'yi kullanarak kullanıcının mevcut ağ türünü ve hızını algılayabilir, ardından analiz veya gerçek kullanıcı metrikleri (RUM) sistemlerinize uyarı gönderebilirsiniz.

if(navigator.connection &&
    navigator.connection.type === 'cellular' &&
    navigator.connection.downlinkMax <= 0.115) {
    // Notify your service to indicate that you might be affected by this restriction.
}

Chrome Geliştirici Araçları'ndaki uyarıları yakalama

Chrome 53'ten beri DevTools, sorunlu document.write() ifadeleriyle ilgili uyarılar veriyor. Daha açık belirtmek gerekirse, bir document.write() isteği 2 ila 5 numaralı ölçütleri karşılıyorsa (Chrome bu uyarıyı gönderirken bağlantı ölçütlerini yoksayar) uyarı şu şekilde görünür:

Belge yazma uyarısı.

Chrome Geliştirici Araçları'nda uyarıları görmek harikadır ancak bu uyarıları geniş ölçekte nasıl tespit edersiniz? Müdahale gerçekleştiğinde sunucunuza gönderilen HTTP üst bilgilerini kontrol edebilirsiniz.

Komut dosyası kaynağındaki HTTP üst bilgilerinizi kontrol etme

document.write aracılığıyla eklenen bir komut dosyası engellendiğinde Chrome, istenen kaynağa aşağıdaki üstbilgeyi gönderir:

Intervention: <https://shorturl/relevant/spec>;

document.write aracılığıyla yerleştirilmiş bir komut dosyası bulunduğunda ve farklı durumlarda engellenebilir olduğunda Chrome şunları gönderebilir:

Intervention: <https://shorturl/relevant/spec>; level="warning"

Müdahale başlığı, komut dosyası için GET isteği kapsamında gönderilir (gerçek bir müdahale söz konusu olduğunda eşzamansız olarak).

Gelecek ne getirecek?

İlk plan, ölçütlerin karşılandığını tespit ettiğimizde bu müdahaleyi uygulamaktır. Chrome 53'te Geliştirici Konsolu'nda yalnızca bir uyarı göstermeye başladık. (Beta sürümü Temmuz 2016'da kullanıma sunulmuştur. Stable sürümün Eylül 2016'da tüm kullanıcılara sunulmasını bekliyoruz.)

2G kullanıcıları için eklenmiş komut dosyalarını engellemek üzere, Ekim 2016'nın ortalarında tüm kullanıcılar için kararlı sürüm olarak kullanıma sunulması beklenen Chrome 54'ten itibaren müdahale edeceğiz. Daha fazla güncelleme için Chrome Durumu girişine göz atın.

Zaman içinde, bağlantısı yavaş olan (ör.yavaş 3G veya kablosuz ağ) kullanıcılara müdahale etmeye çalışıyoruz. Bu Chrome Durumu girişini takip edin.

Daha fazla bilgi edinmek ister misiniz?

Daha fazla bilgi edinmek için aşağıdaki ek kaynaklara göz atın: