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.
Web'in en büyük güçlerinden biri olan birleşebilirlik, muhteşem yeni ürünler oluşturmak için üçüncü taraflarca oluşturulan hizmetlerle kolayca entegrasyon sağlamamıza olanak tanır. composable'ın dezavantajlarından biri, kullanıcı deneyimi üzerinde ortak bir sorumluluk duygusu doğurmasıdır. Entegrasyon optimum düzeyde değilse kullanıcı deneyimi olumsuz yönde etkilenir.
Düşük performansın bilinen nedenlerinden biri, sayfaların içinde document.write() kullanımı, özellikle de komut dosyaları yerleştiren kullanımlardır. Aşağıdaki gibi zararsız olsa da, 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 öncelikle 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 edebilmesi için komut dosyasını durdurması ve yürütmesi gerekir. Komut dosyası başka bir komut dosyasını dinamik olarak yerleştirirse 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ğ döngüsüne neden olabilir ve sayfanın ilk kez oluşturulması gecikebilir
2G gibi yavaş bağlantılara sahip kullanıcılar için, document.write() aracılığıyla dinamik olarak yerleştirilen harici komut dosyaları, ana sayfa içeriğinin gösterilmesini onlarca saniye geciktirebilir veya sayfaların yüklenmemesine ya da kullanıcının işlem yapmayı bırakmasına neden olabilir. Chrome'daki araçlara dayanarak, document.write() aracılığıyla eklenen üçüncü taraf komut dosyalarını içeren sayfaların, 2G kullanan diğer sayfalara göre genellikle iki kat daha yavaş yüklendiğini öğrendik.
2G bağlantı kullanıcıları ile sınırlı olmak üzere, Chrome kararlı kullanıcılarının% 1'i üzerinde 28 günlük bir saha denemesinden veri topladık. 2G üzerinden yapılan tüm sayfa yüklemelerinin% 7,6'sının, üst düzey dokümana document.write() aracılığıyla eklenmiş en az bir adet siteler arası, ayrıştırıcı engelleme komut dosyası içerdiğini gördük. Bu komut dosyalarının yüklenmesini engellemenin sonucunda, söz konusu yüklemelerde aşağıdaki iyileşmeleri gördük:
- İlk zengin içerikli boyamaya %10 daha fazla sayfa yükleme işlemi (kullanıcının sayfanın etkili bir şekilde yüklendiğine dair görsel bir onay), tamamen ayrıştırılmış duruma ulaşana kadar %25 daha fazla sayfa yüklemesi ve %10 daha az yeniden yükleme işlemi, kullanıcıların hayal kırıklığını azalttığına işaret ediyor.
- İlk zengin içerikli boyamaya kadar geçen ortalama sürede (bir saniyeden fazla daha hızlı) %21 azalma
- Bir sayfayı ayrıştırmak için gereken ortalama süre %38 oranında kısaldı. Bu yaklaşık altı saniyelik bir iyileşmeye işaret ederek kullanıcı için önemli olan bilgileri göstermek için gereken süreyi önemli ölçüde kısalttı.
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).
Özellikle Chrome, aşağıdaki koşulların tümü karşılandığında document.write() aracılığıyla yerleştirilen <script> öğelerini yürütmez:
- Kullanıcının bağlantısı yavaştır (özellikle 2G'yi kullanıyorsa). (Gelecekte değişiklik, yavaş 3G veya yavaş kablosuz bağlantı gibi yavaş bağlantılara sahip diğer kullanıcılara da uygulanabilir.)
document.write(), üst düzey bir dokümanda. Müdahale, ana sayfanın oluşturulmasını engellemediğinden iframe'lerdeki document.yazılı komut dosyaları için geçerli değildir.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.- 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ına (ör. www.example.org adresine eklenmiş js.example.org'da barındırılan bir komut dosyası) müdahale etmez.
- Komut dosyası, tarayıcının HTTP önbelleğinde mevcut değil. Önbellekteki komut dosyaları, ağ gecikmesine neden olmaz ve yine de yürütülmeye devam eder.
- Sayfa isteği, yeniden yükleme değil. Kullanıcı yeniden yüklemeyi tetiklerse Chrome müdahale etmez ve sayfayı normal şekilde yürütür.
Üçüncü taraf snippet'leri, komut dosyalarını yüklemek için bazen 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?
Bu basit cevap, document.write() kullanarak komut dosyası yerleştirmemektir. 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, sayfanıza eşzamansız olarak komut dosyaları yükleme özelliğini desteklemiyorsa kendileriyle iletişime geçmenizi ve bize ve sağlayıcınızın bu durumdan nasıl etkileneceğini öğrenmenizi öneririz.
Sağlayıcınız document.write() içeren bir snippet sağlarsa komut dosyası öğesine async özelliği eklemeniz mümkün olabilir ya da komut dosyası öğelerini document.appendChild() veya parentNode.insertBefore() gibi DOM API'leri ile eklemeniz mümkün olabilir.
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?
2G kullanan kullanıcılar algılanıyor
Bu değişikliğin olası etkilerini anlamak için öncelikle kullanıcılarınızın kaç tanesinin 2G ile karşılaşacağını anlamanız gerekir. Chrome'da sunulan Network Information API'yi kullanarak kullanıcının geçerli ağ türünü ve hızını tespit edebilir ve 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
Geliştirici Araçları, Chrome 53 sürümünden itibaren sorunlu document.write() ifadeleri için uyarı yayınlamaktadır. Özellikle, bir document.write() isteği 2 ile 5 arasındaki ölçütleri karşılıyorsa (Chrome bu uyarıyı gönderirken bağlantı ölçütlerini yoksayar) uyarı şöyle görünür:
Chrome Geliştirici Araçları'nda uyarılar görmek harika bir şey. Peki bu geniş ölçekte nasıl algılanır? Müdahale gerçekleştiğinde sunucunuza gönderilen HTTP üstbilgilerini kontrol edebilirsiniz.
Komut dosyası kaynağındaki HTTP başlıklarınızı kontrol edin
document.write aracılığıyla eklenen bir komut dosyası engellendiğinde Chrome, aşağıdaki başlığı istenen kaynağa gönderir:
Intervention: <https://shorturl/relevant/spec>;
document.write aracılığıyla eklenen bir komut dosyası bulunduğunda ve farklı durumlarda engellenebilirse Chrome şunları gönderebilir:
Intervention: <https://shorturl/relevant/spec>; level="warning"
Müdahale başlığı, komut dosyası için GET isteğinin bir parçası olarak gönderilir (gerçek bir müdahale durumunda eşzamansız olarak).
Gelecek ne getirecek?
İlk plan, kriterlerin karşılandığını tespit ettiğimizde bu müdahaleyi yürütmektir. Chrome 53 sürümünde Geliştirici Konsolu'nda yalnızca bir uyarı göstermeye başladık. (Beta sürümü Temmuz 2016'da kullanıma sunuldu. Mevcut Ürün'ün Eylül 2016'da tüm kullanıcılar için kullanıma sunulacağını tahmin ediyoruz.)
Ekim 2016 ortasında tüm kullanıcılar için kararlı bir sürümde olacağı tahmin edilen Chrome 54'ten itibaren, 2G kullanıcıları için yerleştirilen komut dosyalarını geçici olarak engellemeye çalışacağız. 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 şu ek kaynaklara göz atın: