Bir cihazda orantısız miktarda kaynak tüketen reklamlar, kullanıcının deneyimini olumsuz etkiler. Performansın düşmesi gibi belirgin etkilerin yanı sıra pilin boşalması veya bant genişliği izinlerinin tükenmesi gibi daha az görünür sonuçlar da ortaya çıkar. Bu reklamlar, kripto para madencileri gibi aktif olarak kötü amaçlı olanlardan, istemeden hatalar veya performans sorunları içeren gerçek içeriklere kadar çeşitlilik gösterir.
Chrome, bir reklamın kullanabileceği kaynaklara sınırlar koyar ve bu sınırlar aşılırsa reklamı kaldırır. Daha fazla bilgi için Chromium blogundaki duyuruyu inceleyebilirsiniz. Reklamları kaldırmak için kullanılan mekanizma Ağır Reklamların Araya Girmesi'dir.
Ağır reklam ölçütleri
Kullanıcı reklamla etkileşimde bulunmadıysa (örneğin, reklama dokunmadı veya reklamı tıklamadıysa) ve aşağıdaki ölçütlerden herhangi birini karşılıyorsa reklam ağır kabul edilir:
- Ana ileti dizisini toplamda 60 saniyeden uzun süre kullanıyor.
- 30 saniyelik herhangi bir pencerede 15 saniyeden uzun süre ana iş parçacığını kullanıyor.
- 4 megabayttan fazla ağ bant genişliği kullanma
Reklam çerçevesinin tüm 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ığı zaman sınırlarının, reklamın yüklenmesinden bu yana geçen süreyle aynı olmadığını unutmayın. Sınırlar, CPU'nun reklam kodunu yürütmesinin ne kadar sürdüğüyle ilgilidir.
Müdahale şeklini test etme
Bu müdahale Chrome 85'te kullanıma sunuldu ancak kullanıcı gizliliğini korumak için eşiklere varsayılan olarak biraz gürültü ve değişkenlik eklendi.
chrome://flags/#heavy-ad-privacy-mitigations ayarını Devre dışı olarak ayarlamak bu korumaları kaldırır. Bu durumda kısıtlamalar, yalnızca sınırlara göre deterministik olarak uygulanır. Bu sayede hata ayıklama ve test işlemleri kolaylaşır.
Müdahale tetiklendiğinde, iframe'deki içeriğin Reklam kaldırıldı mesajıyla değiştirildiğini görürsünüz. Eklenen Ayrıntılar bağlantısını tıklarsanız ş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ı."
heavy-ads.glitch.me adresinde örnek içeriklere uygulanan müdahaleyi görebilirsiniz. Ayrıca, kendi içeriğinizi hızlı bir şekilde test etmek için bu test sitesini kullanarak rastgele bir URL yükleyebilirsiniz.
Test sırasında, müdahalenin uygulanmasını engelleyebilecek çeşitli nedenler olduğunu unutmayın.
- Aynı reklamın aynı sayfada yeniden yüklenmesi, bu kombinasyonu müdahaleden muaf tutar. Tarama geçmişinizi temizlemek ve sayfayı yeni bir sekmede açmak bu durumda yardımcı olabilir.
- Sayfanın odakta kalmasını sağlayın. Sayfayı arka plana alma (başka bir pencereye geçme) sayfanın görev sıralarını duraklatır ve bu nedenle 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. Aksi takdirde, kullanıcı etkileşimi alan içeriklere müdahale uygulanmaz.
Ne yapmanız gerekiyor?
Sitenizde üçüncü taraf sağlayıcıdan gelen reklamlar gösteriyorsanız
Herhangi bir işlem yapmanız gerekmez. Yalnızca kullanıcıların sitenizde kaldırılan sınırları aşan reklamlar görebileceğini unutmayın.
Sitenizde birinci taraf reklamları gösteriyorsanız veya üçüncü taraf görüntüleme için reklamlar sağlıyorsanız
Ağır reklam müdahaleleri için gerekli izlemeyi Reporting API aracılığıyla uyguladığınızdan emin olmak için okumaya devam edin.
Reklam içeriği oluşturuyorsanız veya reklam içeriği oluşturmaya yönelik bir aracı yönetiyorsanız
İçeriğinizin performans ve kaynak kullanımı sorunları açısından nasıl test edileceğini öğrenmek için okumaya devam edin. Ayrıca, seçtiğiniz reklam platformlarındaki yönergeleri de incelemelisiniz. Bu platformlar, ek teknik tavsiyeler veya kısıtlamalar sunabilir. Örneğin, Google'ın Görüntülü reklam öğeleriyle ilgili yönergelerine göz atın. Kötü performans gösteren reklamların yayınlanmasını önlemek için yapılandırılabilir eşikleri doğrudan içerik oluşturma araçlarınıza eklemeyi düşünebilirsiniz.
Bir reklam kaldırıldığında ne olur?
Chrome'daki bir müdahale, intervention rapor türüyle Reporting API aracılığıyla bildirilir. Raporlama API'sini kullanarak POST raporlama uç noktasına istek göndererek veya JavaScript'inizde müdahaleler hakkında bildirim alabilirsiniz.
Bu raporlar, kök reklam etiketli iFrame'de ve tüm alt öğelerinde (yani müdahale tarafından kaldırılan her çerçeve) tetiklenir. Bu, bir reklam üçüncü taraf kaynaktan (ör.siteler arası iFrame) geliyorsa raporun bu üçüncü taraf (ör. reklam sağlayıcı) tarafından ele alınması gerektiği anlamına gelir.
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ğıdaki gibi 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 için müdahalelerde sağlanan geri çağırmayı tetiklemek üzere kullanılabilecek bir observe() yöntemi sağlar. Bu, hata ayıklamaya yardımcı olmak için rapora ek bilgiler eklemek istediğinizde 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ı iframe'den tamamen kaldıracağından sayfa tamamen kaybolmadan önce raporun kesinlikle yakalandığından emin olmak için bir yedekleme eklemeniz gerekir. Örneğin, iframe içindeki bir reklam. Bunun için aynı geri çağırma işlevinizi 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, içinde yapılabilecek iş miktarını sınırladığını unutmayın. Örneğin, raporlarla birlikte bir fetch()istek göndermeye çalışırsanız bu istek iptal edilir.
Bu raporu göndermek için navigator.sendBeacon() seçeneğini kullanmanız gerekir. Bu durumda bile, tarayıcı yalnızca en iyi sonucu hedefler ve garanti vermez.
JavaScript'ten elde edilen JSON, POST
isteğinde 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 elde edilen denetimler, iyileştirmelerle ilgili satır içi rehberlik sağlar. Ayrıca web.dev/fast koleksiyonuna da göz atabilirsiniz.
Reklamınızı daha izole bir bağlamda test etmek yararlı olabilir. Bunu hazır ve reklam etiketli bir iFrame ile test etmek için https://heavy-ads.glitch.me adresindeki özel URL seçeneğini kullanabilirsiniz. İçeriğin reklam olarak etiketlendiğini doğrulamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz. Oluşturma panelinde (üç noktalı ⋮ menüden Diğer Araçlar > Oluşturma'yı seçerek erişebilirsiniz) "Reklam Çerçevelerini Vurgula"yı seçin. En üst düzey pencerede veya reklam olarak etiketlenmediği başka bir bağlamda içerik test ediyorsanız müdahale tetiklenmez ancak eşiklere göre manuel olarak kontrol edebilirsiniz.
Bir karenin reklam durumu, açılış <iframe> etiketinden sonra ad
ek açıklama eklenen Öğeler bölmesinde de gösterilir. Bu durum, Application (Uygulama) panelindeki Frames (Çerçeveler) bölümünde de görünür. Reklam etiketli çerçeveler, "Ad Status" (Reklam Durumu) özelliğini içerir.
Ağ kullanımı
Reklamla ilgili genel ağ etkinliğini görmek için Chrome Geliştirici Araçları'nda Ağ panelini açın. Tekrarlanan yüklemelerde tutarlı sonuçlar elde etmek için "Önbelleği devre dışı bırak" seçeneğinin işaretli olduğundan emin olmanız gerekir.
Sayfanın alt kısmındaki aktarılan değer, tüm sayfa için aktarılan tutarı gösterir. İstekleri yalnızca reklamla ilgili olanlarla sınırlamak için en üstteki Filtre girişini kullanabilirsiniz.
Reklamla ilgili ilk isteği (ör. iframe kaynağı) bulursanız tetiklediği tüm istekleri görmek için istekteki Başlatan sekmesini de kullanabilirsiniz.
İsteklerin genel listesini boyuta göre sıralamak, çok büyük kaynakları tespit etmek için iyi bir yöntemdir. Genellikle optimize edilmemiş resimler ve videolar bu soruna neden olur.
Ayrıca, ada göre sıralama, tekrarlanan istekleri tespit etmek için iyi bir yöntem olabilir. Müdahaleyi tetikleyen tek bir büyük kaynak olmayabilir. Bunun yerine, sınırı kademeli olarak aşan çok sayıda tekrarlanan istek olabilir.
CPU kullanımı
Geliştirici Araçları'ndaki Performans paneli, CPU kullanımıyla ilgili sorunları teşhis etmenize yardımcı olur. İlk adım, Kayıt Ayarları menüsünü açmaktır. CPU'yu olabildiğince yavaşlatmak için CPU açılır listesini kullanın. CPU ile ilgili müdahalelerin, üst düzey geliştirme makinelerine kıyasla daha düşük güçteki cihazlarda tetiklenme olasılığı çok daha yüksektir.
Ardından, kayıt etkinliğini başlatmak için Kaydet düğmesini tıklayın. Uzun bir izlemenin yüklenmesi biraz zaman alabileceğinden, ne zaman ve ne kadar süreyle kayıt yapacağınız konusunda denemeler yapmak isteyebilirsiniz. Kayıt yüklendikten sonra üstteki zaman çizelgesini kullanarak kaydın bir bölümünü seçebilirsiniz. Grafikte komut dosyası oluşturma, oluşturma ve boyamayı temsil eden düz sarı, mor veya yeşil alanlara odaklanın.
Alt kısımdaki Bottom-Up (Aşağıdan Yukarıya), Call Tree (Çağrı Ağacı) ve Event Log (Etkinlik Günlüğü) sekmelerini inceleyin. Bu sütunları Self Time (Kendine Ait Süre) ve Total Time (Toplam Süre) değerine göre sıralamak, koddaki darboğazları belirlemeye yardımcı olabilir.
İlişkili kaynak dosyanın bağlantısı da burada yer alır. Böylece her satırın maliyetini incelemek için Kaynaklar paneline gidebilirsiniz.
Burada dikkat edilmesi gereken yaygın sorunlar arasında, sürekli düzen ve boyama işlemlerini tetikleyen kötü optimize edilmiş animasyonlar veya dahil edilen bir kitaplıkta gizli olan maliyetli işlemler yer alır.
Yanlış müdahaleleri bildirme
Chrome, kaynak isteklerini bir filtre listesiyle eşleştirerek içeriği reklam olarak etiketler. Reklam dışı içerik etiketlenmişse filtreleme kurallarıyla eşleşmeyi önlemek için bu kodu değiştirebilirsiniz. Bir müdahalenin yanlışlıkla uygulandığından şüpheleniyorsanız bu şablonu kullanarak sorunu bildirebilirsiniz. Lütfen müdahale raporunun bir örneğini aldığınızdan ve sorunu yeniden oluşturmak için örnek bir URL'niz olduğundan emin olun.