Son zamanlarda Geliştirici Konsolunuzda aşağıdakine benzer bir uyarı: 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. Karmaşıklık, birçok harika yeni ürünler geliştirmek için üçüncü taraflarca geliştirilen hizmetlerle entegre edebilirsiniz! Bir olumsuz yanlarından biri de, ortak bir sorumluluk duygusu olmasıdır. çok önemli bir parçasıdır. Entegrasyon optimum düzeyde değilse kullanıcı deneyimi bundan olumsuz etkilenecek.
Düşük performansın bilinen nedenlerinden biri, sayfalarda document.write() kullanılmasıdır.
özellikle de komut dosyası yerleştiren kullanıcıları
göz önünde bulundurmak gerekir. Göründüğü kadarıyla zahmetsizdir,
kullanıcılar için gerçekten sorunlara yol açabilir.
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, devam etmeden önce komut dosyasını durdurup yürütmelidir. için de geçerli olur. Komut dosyası dinamik olarak başka bir komut dosyası eklerse ayrıştırıcı, beklemeye zorlanır kaynağın indirilmesi daha da uzun sürer (bu da bir veya daha fazla ağ döngüsü ve sayfanın ilk oluşturulma süresini geciktir
2G gibi yavaş bağlantılara sahip kullanıcılar için, harici komut dosyaları dinamik olarak
document.write() aracılığıyla yerleştirilen reklamlar, şunun için ana sayfa içeriğinin görüntülenmesini geciktirebilir:
veya sayfaların yüklenmemesine ya da çok uzun sürmesine neden olabilir.
vazgeçtiğini düşünelim. Chrome'daki araçlara dayanarak şunları öğrendik:
document.write() aracılığıyla eklenen üçüncü taraf komut dosyalarını içeren sayfalar
genellikle 2G ile bağlanan diğer sayfalara göre iki kat daha yavaş yüklenir.
Chrome'un% 1'inde 28 günlük saha denemesinden veri topladık
kararlı kullanıcılar, 2G bağlantısı kullananlarla sınırlıdır. Tüm sayfa yüklemelerinin% 7,6'sının
2G'ye geliştirilmiş olan en az bir siteler arası, ayrıştırıcı engelleyici komut dosyası
üst düzey dokümana document.write() aracılığıyla eklendi. Engelleme sonucunda
bu komut dosyalarının yüklendiğini düşünerek bu yüklemelerde aşağıdaki iyileşmeleri gördük:
- %10 daha fazla sayfa yükleme erişimi ilk zengin içerikli boyama (kullanıcıya sayfanın etkili şekilde yüklendiğine dair görsel bir onay), Tamamen ayrıştırılmış duruma ulaşana kadar %25 daha fazla sayfa yükleme ve %10 daha az yeniden yükleme işlemi Bu da kullanıcının hayal kırıklığını azalttığına işaret eder.
- %21 oranında azalma (bir saniyeden fazla daha hızlı) ilk zengin içerikli boyama
- Bir sayfayı ayrıştırmak için gereken ortalama sürenin %38 oranında düşmesi yaklaşık altı saniyelik bir iyileşme sağlayarak süreyi önemli ölçüde kısaltıyor. kullanıcılara önemli şeyleri göstermektir.
Bu veriler ışığında, Chrome sürüm 55'ten itibaren
müdahalede
kullanıcı davranışına yönelik olarak document.write() davranışını değiştirerek
(bkz. Chrome Durumu).
Özellikle Chrome, aracılığıyla yerleştirilen <script> öğelerini yürütmez
Aşağıdaki koşulların tümü karşılandığında document.write():
- Kullanıcının bağlantısı yavaştır (özellikle 2G'yi kullanıyorsa). ( Değişiklik, bağlantıları yavaş olan diğer kullanıcılara da yansıtılabilir. Yavaş 3G veya yavaş kablosuz bağlantı gibi.)
document.write(), üst düzey bir dokümanda. Müdahale, iframe'ler içindeki document.yazılı komut dosyalarına uygulanır, çünkü bu komut dosyaları ana sayfanın oluşturulması.document.write()içindeki komut dosyası ayrıştırıcıyı engelliyor. Şunlarla komut dosyaları: "async" veya "defer" özellikleri yürütülmeye devam eder.- Komut dosyası aynı sitede barındırılmıyor. Başka bir deyişle Chrome, Eşleşen bir eTLD+1'e sahip komut dosyalarına (ör. www.example.org adresine eklenen js.example.org).
- Komut dosyası, tarayıcının HTTP önbelleğinde mevcut değil. Önbellekteki komut dosyaları ağ gecikmesine neden olmaz ve yürütülmeye devam eder.
- Sayfa isteği, yeniden yükleme değil. Chrome, kullanıcı yeniden yüklemeyi tetikler ve sayfayı normal şekilde çalıştırır.
Üçüncü taraf snippet'leri, komut dosyalarını yüklemek için bazen document.write() kullanır.
Neyse ki çoğu üçüncü taraf,
eşzamansız yükleme alternatiflerinin
üçüncü taraf komut dosyalarının, komut dosyasının
geri kalanının görüntülenmesini engellemeden
emin olun.
Bu sorunu nasıl çözebilirim?
Bu basit cevap, document.write() kullanarak komut dosyası yerleştirmemektir. Biz
Eşzamansız yükleyici desteği için bilinen hizmetler grubunu yönetme
kontrol etmenizi öneririz.
Sağlayıcınız listede yoksa ve eşzamansız komut dosyası yüklemeyi destekliyorsa Ardından, tüm kullanıcılara yardımcı olmak için sayfayı güncelleyebilmemiz için lütfen bize bildirin.
Sağlayıcınız, komut dosyalarını eşzamansız olarak yükleme özelliğini desteklemiyorsa sayfanıza eklemeniz yeterli. Daha sonra da onlarla iletişime geçip bunu bilmesini sağlayın nasıl etkileneceklerini göstermektir.
Sağlayıcınız size document.write() içeren bir snippet sağlarsa
komut dosyası öğesine bir async özelliği eklemeniz mümkün olabilir veya
komut dosyası öğelerini document.appendChild() gibi DOM API'leriyle eklemeniz için
veya parentNode.insertBefore().
Sitenizin etkilendiğini belirleme
Kısıtlamanın uygulanıp uygulanmayacağını belirleyen çok sayıda ölçüt vardır Peki, 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 neleri anlamanız gerekir? kullanıcılarınızın kaçının 2G'yi kullanacağını anlayabilirsiniz. Kullanıcının geçerli ağ türünü tespit edebilirsiniz Network Information API ile hız ve performans ve ardından analitik veya Gerçek Kullanıcı Metriklerinize uyarı göndererek (RUM) sistemleri.
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() için uyarı yayınlamaktadır
açıklamalarına dikkat edin. Özellikle, document.write() isteği 2 ile 5 arasındaki kriterleri karşılıyorsa
(Chrome bu uyarıyı gönderirken bağlantı ölçütlerini yok sayar)
aşağıdaki gibi görünebilir:
Chrome Geliştirici Araçları'nda uyarılar görmek harika bir şey ancak bunu şu sayfada nasıl tespit edersiniz: ölçeklendirmek ister misiniz? anlamına gelir.
Komut dosyası kaynağındaki HTTP başlıklarınızı kontrol edin
document.write aracılığıyla eklenen bir komut dosyası engellendiğinde Chrome,
istenen kaynağa aşağıdaki üstbilgiyi ekleyin:
Intervention: <https://shorturl/relevant/spec>;
document.write aracılığıyla eklenen ve şurada engellenebilecek bir komut dosyası bulunduğunda:
farklı koşullarda, Chrome şunları gönderebilir:
Intervention: <https://shorturl/relevant/spec>; level="warning"
Müdahale başlığı, komut dosyasına yönelik GET isteğinin bir parçası olarak gönderilir (gerçek bir müdahale durumunda eşzamansız olarak).
Gelecek ne getirecek?
İlk plan, ölçütleri tespit ettiğimizde bu müdahaleyi uygulamaktır. bir duygudur. 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 Birleşik Krallık'taki tüm kullanıcılara sunulmasını bekliyoruz. Eylül 2016.)
Şu andan itibaren, 2G kullanıcılarının yerleştirilen komut dosyalarını geçici olarak engellemeye çalışacağız. Chrome 54'ün tüm kullanıcılar için kararlı bir sürümde olacağı tahmin ediliyor. 2016 Ekim ortası olarak kabul edilir. Şu bölüme göz atın: Chrome durumu girişi daha fazla güncelleme için.
Zaman içinde, bağlantısı yavaş olan (ör. Yavaş 3G veya Kablosuz). 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: