Son zamanlarda Chrome'daki Geliştirici Konsolunuzda aşağıdakine benzer bir uyarıyla karşılaştınız mı ve bunun 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.
Düzenlenebilirlik, web'in muhteşem güçlerinden biridir. Bu özellik, muhteşem yeni ürünler oluşturmak için üçüncü taraflarca oluşturulan hizmetlerle kolayca entegrasyon gerçekleştirmemize olanak sağlar. Birleştirilebilirliğin dezavantajlarından biri, kullanıcı deneyimi üzerinde ortak bir sorumluluk gerektirmesidir. Entegrasyon yetersiz olursa kullanıcı deneyimi olumsuz etkilenir.
Düşük performansın bilinen bir nedeni, sayfaların içinde, özellikle de komut dosyalarını yerleştiren document.write() kullanımıdır. Aşağıdakiler görünse de 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 etmeden önce durdurması ve yürütmesi gerekir. 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 da bir veya daha fazla ağ döngüsüne neden olabilir ve sayfanın ilk kez oluşturulmasına kadar olan süreyi geciktirebilir.
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üklenememesine ya da kullanıcının işlem yapmaktan caydığı süre kadar uzun sürmesine neden olabilir. Chrome'daki araçlara dayanarak, document.write() aracılığıyla eklenen üçüncü taraf komut dosyalarını içeren sayfaların 2G'deki diğer sayfalara göre genellikle iki kat daha yavaş yüklendiğini öğrendik.
Kararlı Chrome kullanıcılarının% 1'iyle ilgili 28 günlük bir saha denemesinden veri topladık. Bu veri, 2G bağlantısı olan kullanıcılarla sınırlıdır. 2G üzerindeki tüm sayfa yüklemelerinin% 7,6'sında, üst düzey dokümana document.write() aracılığıyla eklenmiş en az bir siteler arası, ayrıştırıcı engelleyici komut dosyası içerdiğini gördük. Bu komut dosyalarının yüklenmesini engellemenin sonucunda bu yüklemelerde aşağıdaki iyileşmeleri gördük:
- İlk zengin içerikli boyamaya ulaşan sayfa yüklemelerinde %10 artış (kullanıcı için sayfanın etkili bir şekilde yüklendiğine dair görsel bir onay), tam olarak ayrıştırılmış duruma ulaşan sayfa yükleme sayısında %25 ve kullanıcıların hayal kırıklığında azalmaya işaret eden %10 daha az yeniden yükleme işlemi.
- İlk zengin içerikli boyamaya kadar ortalama sürede 21% azalma (bir saniyeden fazla daha hızlı)
- Bir sayfayı ayrıştırmak için gereken ortalama sürede 38% azalma. Bu da yaklaşık altı saniyelik bir iyileşme anlamına geliyor. Böylece, kullanıcı için önemli olan verileri görüntülemek için gereken süre önemli ölçüde azaltılıyor.
Chrome, bu verileri göz önünde bulundurarak sürüm 55'ten itibaren, bilinen bu kötü kalıbı tespit ettiğimizde document.write() öğesinin Chrome'da işlenme şeklini değiştirerek tüm kullanıcılar adına etkileşimde bulunur (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şsa, özellikle de 2G kullanıyorsa. (Gelecekte, bu değişiklik yavaş 3G veya yavaş kablosuz bağlantı gibi yavaş bağlantıları olan diğer kullanıcıları da kapsayacak şekilde genişletilebilir.)
document.write()üst düzey bir dokümanda. Müdahale, ana sayfanın oluşturulmasını engellemediğinden iframe'lerdeki document.write komut dosyaları için geçerli değildir.document.write()içindeki komut dosyası ayrıştırıcı engelliyor. "async" veya "defer" özelliklerine sahip komut dosyaları yürütülmeye devam eder.- Komut dosyası aynı sitede barındırılmıyorsa. Diğer bir deyişle, Chrome eşleşen eTLD+1'e sahip komut dosyalarına (ör. www.example.org'a eklenmiş js.example.org'da barındırılan bir komut dosyası) müdahale etmez.
- Komut dosyası zaten tarayıcının HTTP önbelleğinde değildir. Önbellekteki komut dosyaları ağ gecikmesine neden olmaz ve çalışmaya devam eder.
- Sayfayla ilgili istek 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'ler bazen komut dosyalarını yüklemek için document.write() kullanır.
Neyse ki çoğu üçüncü taraf, eşzamansız yükleme alternatifleri sağlar. Bunlar, üçüncü taraf komut dosyalarının, içeriğin geri kalanının sayfada görüntülenmesini engellemeden yüklenmesine olanak tanır.
Bu sorunu nasıl çözebilirim?
Bu basit yanıt, 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 hizmetler sunuyoruz.
Sağlayıcınız listede yoksa ve eşzamansız komut dosyası yüklemeyi destekliyorsa lütfen tüm kullanıcılara yardımcı olmak için sayfayı güncellememiz için lütfen bize bildirin.
Sağlayıcınız, komut dosyalarını sayfanıza eşzamansız olarak yükleme özelliğini desteklemiyorsa bu durumdan nasıl etkileneceğini bize ve ilgili sağlayıcıya bildirmeniz önerilir.
Sağlayıcınız document.write() içeren bir snippet sağlarsa komut dosyası öğesine bir async özelliği eklemeniz veya komut dosyası öğelerini document.appendChild() ya da parentNode.insertBefore() gibi DOM API'leriyle eklemeniz mümkün olabilir.
Sitenizin ne zaman etkilendiğini nasıl anlarsınız?
Kısıtlamanın uygulanıp uygulanmadığını belirleyen çok sayıda kriter vardır. Öyleyse kısıtlamanın etkilenip etkilenmediğini nasıl anlarsınız?
Kullanıcının 2G kullandığını algılama
Bu değişikliğin potansiyel etkisini anlamak için öncelikle kullanıcılarınızın kaçının 2G'de olacağını bilmeniz gerekiyor. Chrome'da bulunan Network Information API'yi kullanarak kullanıcının mevcut 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'ten beri sorunlu document.write() ifadeleri için uyarı verir. Ö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ı şuna benzer:
Chrome Geliştirici Araçları'nda uyarılar görmek harika bir şey. Peki, bunu geniş ölçekte nasıl tespit edebilirsiniz? Müdahale gerçekleştiğinde sunucunuza gönderilen HTTP üst bilgilerini kontrol edebilirsiniz.
Komut dosyası kaynağındaki HTTP üstbilgilerinizi kontrol edin
document.write aracılığıyla eklenen bir komut dosyası engellendiğinde, Chrome istenen kaynağa aşağıdaki üstbilgiyi gönderir:
Intervention: <https://shorturl/relevant/spec>;
document.write aracılığıyla eklenen bir komut dosyası bulunduğunda ve farklı durumlarda engellenebileceğinde 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, bu müdahaleyi, ölçütlerin karşılandığını belirlediğimizde gerçekleştirmektir. Chrome 53'te Developer Console'da sadece bir uyarı görüntülemeyle başladık. (Beta, Temmuz 2016'da kullanıma sunulmuştur. Kararlı sürümünün Eylül 2016'da tüm kullanıcılar için kullanıma sunulacağını tahmin ediyoruz.)
Ekim 2016'nın ortalarında, tüm kullanıcılara kararlı bir sürümde olacağı tahmin edilen Chrome 54'ten itibaren geçici olarak 2G kullanıcıları için yerleştirilen komut dosyalarını engellemek üzere müdahalede bulunacağız. Daha fazla güncelleme için Chrome Durumu girişine bakın.
Zaman içinde, kullanıcılar yavaş bağlantısı (örneğin, yavaş 3G veya kablosuz ağ) olduğunda 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 bakın: