Bir cihazda orantısız miktarda kaynak tüketen reklamlar, kullanıcı deneyimini olumsuz etkiler. Performanstaki düşüşün bariz etkileri, pilin bitmesi veya bant genişliği izinlerini tüketme gibi daha az gözle görülür sonuçlar doğurabilir. Bu reklamlar, kripto para birimi madencileri gibi aktif olarak zararlı içeriklerden, yanlışlıkla hatalara veya performans sorunlarına sahip gerçek içeriklere kadar uzanır.
Chrome, bir reklamın kullanabileceği kaynaklar için sınırlar belirler ve sınırlar aşılırsa söz konusu reklamı kaldırır. Daha fazla bilgi için Chromium blogundaki duyuruyu okuyabilirsiniz. Reklamların yüklemesini kaldırmak için kullanılan mekanizma Yoğun Reklam Müdahalesi'dir.
Yoğun Reklam ölçütleri
Bir reklam kullanıcıyla etkileşimde bulunmadıysa (örneğin, reklama dokunmadıysa veya tıklamadıysa) ve aşağıdaki ölçütlerden herhangi birini karşılıyorsa söz konusu reklam ağır olarak kabul edilir:
- Ana iş parçacığını toplamda 60 saniyeden uzun bir süre kullanır
- Ana iş parçacığını herhangi bir 30 saniyelik pencerede 15 saniyeden uzun bir süre kullanır
- 4 megabayttan fazla bant genişliği kullanır
Reklam çerçevesinin alt iframe'leri tarafından kullanılan tüm kaynaklar, söz konusu reklama müdahale etme sınırlarına dahil edilir. Ana iş parçacığı süre sınırlarının, reklamın yüklenmesinden itibaren geçen süre ile aynı olmadığını unutmamak önemlidir. Sınırlar, CPU'nun reklam kodunu yürütme süresiyle ilgilidir.
Müdahaleyi test etme
Müdahale Chrome 85 sürümünde sunulmuştur. Ancak varsayılan olarak, kullanıcı gizliliğini korumak için eşiklere biraz gürültü ve değişkenlik eklenmiştir.
chrome://flags/#heavy-ad-privacy-mitigations politikasını Devre Dışı olarak ayarlamak bu korumaları kaldırır. Diğer bir ifadeyle, kısıtlamalar yalnızca sınırlara göre belirli bir şekilde uygulanır. Bu sayede hata ayıklama ve test işlemleri daha kolay hale gelecektir.
Müdahale tetiklendiğinde, yoğun bir reklamın iframe'deki içeriğinin Reklam kaldırıldı mesajıyla değiştirildiğini görürsünüz. Eklenen Ayrıntılar bağlantısına giderseniz şu mesajı görürsünüz: "Bu reklam, cihazınız için çok fazla kaynak kullandığından Chrome tarafından kaldırıldı."
Müdahalenin heavy-ads.glitch.me adresinde örnek içeriğe uygulandığını görebilirsiniz. Kendi içeriğinizi test etmenin hızlı bir yolu olarak rastgele bir URL yüklemek için bu test sitesini de kullanabilirsiniz.
Test yaparken bir müdahalenin uygulanmasını önleyebilecek çok sayıda neden olduğunu unutmayın.
- Aynı reklamın aynı sayfa içinde yeniden yüklenmesi, bu kombinasyonun müdahaleden muaf tutulmasını sağlar. Tarama geçmişinizi temizlemek ve sayfayı yeni bir etikette açmak bu noktada yardımcı olabilir.
- Sayfanın odakta kaldığından emin olun. Sayfanın arka plana alınması (başka bir pencereye geçmek) sayfanın görev sıralarının duraklatılmasına neden olur ve CPU müdahalesini tetiklemez.
- Test sırasında reklam içeriğine dokunmadığınızdan veya reklam içeriğini tıklamadığınızdan emin olun. Müdahale, kullanıcı etkileşimi alan içeriğe uygulanmaz.
Ne yapmanız gerekiyor?
Sitenizde üçüncü taraf bir sağlayıcıya ait reklamlar gösteriyorsanız
Herhangi bir işlem yapmanız gerekmez. Ancak kullanıcıların, sitenizde kaldırılan sınırları aşan reklamlar görebileceğini hatırlatmak isteriz.
Sitenizde birinci taraf reklamlar gösteriyor veya üçüncü taraf görüntülü reklamlar için reklam sunuyorsanız
Yoğun Reklam Müdahaleleri için Reporting API aracılığıyla gerekli izlemeyi uyguladığınızdan emin olmak amacıyla okumaya devam edin.
Reklam içeriği oluşturuyorsunuz veya reklam içeriği oluşturmak için bir araç kullanıyorsunuz
İçeriğinizi performans ve kaynak kullanımı sorunları açısından nasıl test edeceğinizi bildiğinizden emin olmak için okumaya devam edin. Ayrıca, ek teknik tavsiyeler veya kısıtlamalar sağlayabilecekleri için seçtiğiniz reklam platformlarıyla ilgili kılavuzlara da başvurmanız gerekir. Örneğin, Google Görüntülü reklam öğelerine ilişkin Google yönergeleri bölümüne bakın. Yetersiz performans gösteren reklamların kullanıcıların arasına girmesini önlemek için yazma araçlarınıza doğrudan yapılandırılabilir eşikler oluşturmayı düşünün.
Reklam kaldırıldığında ne olur?
Chrome'da bir müdahale, uygun şekilde adlandırılmış ve intervention rapor türünde olan Reporting API aracılığıyla bildirilir. Raporlama uç noktasına yapılan POST isteği veya JavaScript'iniz içinden müdahaleler hakkında bildirim almak için Reporting API'yi kullanabilirsiniz.
Bu raporlar, kök reklam etiketli iframe'de, tüm alt öğeleri ile birlikte (yani müdahale tarafından yüklenmeyen her çerçeve) tetiklenir. Diğer bir deyişle, bir reklam üçüncü taraf bir kaynaktan (yani siteler arası bir iframe'den) geliyorsa raporu işleme sorumluluğu üçüncü tarafa (ör. reklam sağlayıcı) bağlıdır.
Sayfayı HTTP raporları için yapılandırmak üzere yanıtta Report-To üst bilgisi bulunmalıdır:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
Tetiklenen POST isteği aşağıdakine benzer bir rapor içerir:
POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report
[{
"type": "intervention",
"age": 60,
"url": "https://example.com/url/of/ad.html",
"body": {
"sourceFile": null,
"lineNumber": null,
"columnNumber": null,
"id": "HeavyAdIntervention",
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
}
}]
JavaScript API, ReportingObserver özelliğine müdahalelerde sağlanan bir geri çağırmayı tetiklemek için kullanılabilen observe() yöntemi sağlar. Bu, hata ayıklamaya yardımcı olması için rapora ek bilgiler eklemek istiyorsanız yararlı olabilir.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json via your own reporting process
navigator.sendBeacon('https://report.example/your-endpoint', report);
}
}
// create the observer with the callback
const observer = new ReportingObserver(
(reports, observer) => {
sendReports(reports);
},
{ buffered: true }
);
// start watching for interventions
observer.observe();
Ancak müdahale, sayfayı tam anlamıyla iframe'den kaldıracağından, raporun (ör. iframe içindeki bir reklam) sayfa tamamen kaldırılmadan önce kesinlikle yakalandığından emin olmak için bir hata güvenliği eklemeniz gerekir. Bu nedenle, aynı geri aramanızı pagehide etkinliğine bağlayabilirsiniz.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Kullanıcı deneyimini korumak için pagehide etkinliğinin, kullanıcı deneyimini korumak amacıyla yapılacak iş miktarını kısıtladığını unutmayın. Örneğin, raporlarla birlikte bir fetch() isteği gönderilmeye çalışıldığında bu istek iptal edilir.
Bu raporu göndermek için navigator.sendBeacon() kullanmalısınız, hatta o zaman bile tarayıcının en iyi çabayı yapacağının garantisi yoktur.
JavaScript'ten oluşturulan JSON, POST isteği üzerinde gönderilene benzer:
[
{
type: 'intervention',
url: 'https://example.com/url/of/ad.html',
body: {
sourceFile: null,
lineNumber: null,
columnNumber: null,
id: 'HeavyAdIntervention',
message:
'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
},
},
];
Müdahalenin nedenini teşhis etme
Reklam içeriği yalnızca web içeriğidir. Bu nedenle, içeriğinizin genel performansını denetlemek için Lighthouse gibi araçlardan yararlanın. Sonuç olarak ortaya çıkan denetimler, iyileştirmeler hakkında satır içi rehberlik sağlar. web.dev/fast koleksiyonuna da bakabilirsiniz.
Reklamınızı daha yalıtılmış bir bağlamda test etmeniz faydalı olabilir. Bunu hazır, reklam etiketli bir iframe ile test etmek için https://heavy-ads.glitch.me adresindeki özel URL seçeneğini kullanabilirsiniz. Chrome Geliştirici Araçları'nı kullanarak içeriğin reklam olarak etiketlendiğini doğrulayabilirsiniz. Oluşturma panelinde (üç nokta ⋮ menüsü ve ardından Diğer Araçlar > Oluşturma menüsünden erişilebilir) "Reklam Çerçevelerini Vurgula"yı seçin. İçeriği üst düzey pencerede veya reklam olarak etiketlenmemiş başka bir bağlamda test ederseniz müdahale tetiklenmez ancak yine de eşikleri manuel olarak kontrol edebilirsiniz.
Bir çerçevenin reklam durumu, <iframe> açılış etiketinden sonra bir ad notunun eklendiği Öğeler bölmesinde de gösterilir. Bu ayrıca, Çerçeveler bölümünün altındaki Uygulama panelinde de görülebilir. Reklam etiketli çerçeveler, "Reklam Durumu" özelliğini içerir.
Ağ kullanımı
Reklamla ilgili genel ağ etkinliğini görmek için Chrome Geliştirici Araçları'ndaki Ağ panelini açın. Yinelenen yüklemeler üzerinde tutarlı sonuçlar almak için "Önbelleği devre dışı bırak" seçeneğinin işaretlendiğinden emin olmanız gerekir.
Sayfanın alt kısmındaki aktarılan değer, sayfanın tamamı için aktarılan tutarı gösterir. İstekleri yalnızca reklamla ilgili olanlarla kısıtlamak için üst kısımdaki Filtre girişini kullanabilirsiniz.
Reklama ilişkin ilk isteği (örneğin, iframe'in kaynağı) bulursanız isteğin tetiklediği tüm istekleri görmek için isteğin içindeki Başlatan sekmesini de kullanabilirsiniz.
Genel istek listesini boyuta göre sıralamak, aşırı büyük kaynakları tespit etmek için iyi bir yöntemdir. Bu durumun yaygın nedenleri arasında optimize edilmemiş resimler ve videolar yer alır.
Ayrıca, tekrar eden istekleri tespit etmek için ada göre sıralama yapmak iyi bir yöntem olabilir. Müdahaleyi tetikleyen tek bir büyük kaynak değil, kademeli olarak sınırı aşan çok sayıda tekrarlanan istek olabilir.
CPU kullanımı
Geliştirici Araçları'ndaki Performans paneli, CPU kullanımı sorunlarının teşhis edilmesine yardımcı olur. İlk adım Yakalama Ayarları menüsünü açmaktır. CPU'yu mümkün olduğunca yavaşlatmak için CPU açılır listesini kullanın. CPU müdahalelerinin, ileri teknoloji geliştirme makinelerine kıyasla düşük güçlü cihazlarda tetiklenme olasılığı çok daha yüksektir.
Ardından, etkinliği kaydetmeye başlamak için Kaydet düğmesini tıklayın. Uzun bir izlemenin yüklenmesi uzun sürebileceği için, ne zaman ve ne kadar kayıt yapacağınızla ilgili denemeler yapabilirsiniz. Kayıt yüklendikten sonra kaydın bir bölümünü seçmek için üstteki zaman çizelgesini kullanabilirsiniz. Grafikte komut dosyası oluşturma, oluşturma ve boyama işlemlerini temsil eden düz sarı, mor veya yeşil alanlara odaklanın.
En alttaki Aşağıdan Yukarıya, Çağrı Ağacı ve Etkinlik Günlüğü sekmelerini keşfedin. Bu sütunları Otomatik Süre ve Toplam Süre'ye göre sıralamak, koddaki performans sorunlarını belirlemenize yardımcı olabilir.
İlişkili kaynak dosyanın bağlantısı da burada bulunur. Böylece, her satırın maliyetini incelemek için Kaynaklar paneline gidebilirsiniz.
Burada genellikle bakılması gereken sorunlar, dahil edilen bir kitaplıkta gizli olan sürekli düzeni ve boyama ya da maliyetli işlemleri tetikleyen kötü şekilde optimize edilmiş animasyonlardır.
Yanlış müdahaleleri bildirme
Chrome, kaynak isteklerini bir filtre listesiyle eşleştirerek içeriği reklam olarak etiketler. Reklam olmayan içerik etiketlenmişse filtreleme kurallarıyla eşleşmemek için bu kodu değiştirebilirsiniz. Bir müdahalenin yanlış uygulandığından şüpheleniyorsanız bu şablonu kullanarak sorun bildirebilirsiniz. Lütfen müdahale raporunun bir örneğini aldığınızdan ve sorunu yeniden oluşturmak için örnek bir URL'ye sahip olduğunuzdan emin olun.