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

Paul Kinlan

Yakın zamanda Chrome'daki Developer Console'da aşağıdaki gibi bir uyarı gördünüz ve ne anlama geldiğini 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.

Web'in en büyük güçlerinden biri olan bileşenlenebilirlik, üçüncü tarafların oluşturduğu hizmetlerle kolayca entegrasyon yaparak yeni ve harika ürünler oluşturmamı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ı oluşturmaktan 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 veriler göz önünde bulundurularak, Chrome 55 sürümünden itibaren, bilinen kötü bir kalıp algıladığında document.write() değerinin Chrome'da işlenmesini değiştirerek tüm kullanıcılar adına müdahale eder (Chrome Durumu'na bakın). 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ı çalışmaya devam eder.
  4. Komut dosyası aynı sitede barındırılmıyor. 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, 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. Eşzamansız yükleyici desteği sunan bilinen hizmetler listemizi düzenli olarak kontrol etmenizi öneririz.

Sağlayıcınız listede yoksa ve asenkron komut dosyası yüklemeyi destekliyorsa lütfen bize bildirin. Tüm kullanıcılara yardımcı olmak için sayfayı güncelleyebiliriz.

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 etkilenip etkilenmediğini nasıl anlarsınız?

Kısıtlamanın uygulanıp uygulanmayacağını belirleyen çok sayıda kriter 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 DevTools'da 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:

Doküman 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, kullanıcıların bağlantısı yavaş olduğunda (ör.yavaş 3G veya kablosuz bağlantı) müdahale etmeyi planlı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: