Bir cihazda orantısız miktarda kaynak tüketen reklamlar, performansı düşürme gibi bariz etkilerden pilin tükenmesi veya bant genişliği izinlerinin tükenmesi gibi daha az görünür sonuçlara kadar kullanıcı deneyimini olumsuz yönde etkiler. Bu reklamlar, kripto para madencileri gibi aktif olarak kötü amaçlı olanlardan, istenmeyen hatalar veya performans sorunları içeren gerçek içeriklere kadar çeşitlilik gösterir.
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 kaldırılması için kullanılan mekanizma Ağır Reklamların Araya Girmesi'dir.
Ağır reklam ölçütleri
Kullanıcı reklamla etkileşime geçmediyse (ör. reklama dokunmadıysa 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 boyunca kullanır.
- 30 saniyelik herhangi bir zaman aralığında 15 saniyeden uzun süre boyunca ana ileti dizisini kullanır.
- 4 megabayttan fazla ağ bant genişliği kullanır
Reklam çerçevesinin alt öğesi olan tüm iFrame'ler tarafından kullanılan tüm kaynaklar, söz konusu reklama müdahale etme sınırlarını etkiler. Ana iş parçacığı zaman sınırlarının, reklamın yüklendiği andan itibaren geçen süreyle aynı olmadığını unutmayın. Sınırlar, CPU'nun reklamın kodunu yürütmesinin ne kadar sürdüğüyle ilgilidir.
Müdahaleyi test etme
Müdahale, Chrome 85'te kullanıma sunuldu ancak varsayılan olarak kullanıcı gizliliğini korumak için eşiklere biraz gürültü ve değişkenlik eklenir.
chrome://flags/#heavy-ad-privacy-mitigations ayarını Devre dışı olarak belirlediğinizde bu korumalar kaldırılır. Bu durumda kısıtlamalar, tamamen sınırlara göre belirlenmiş şekilde uygulanır. Bu, hata ayıklama ve test etme işlemlerini kolaylaştırır.
Müdahale tetiklendiğinde, ağır bir reklamın iframe'indeki 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 "Bu reklam cihazınız için çok fazla kaynak kullandığından Chrome tarafından kaldırıldı." mesajını görürsünüz.
Örnek içeriğe uygulanan müdahaleyi heavy-ads.glitch.me adresinde görebilirsiniz. Ayrıca, kendi içeriğinizi hızlı bir şekilde test etmek için rastgele bir URL yüklemek üzere bu test sitesini kullanabilirsiniz.
Test yaparken, 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 temizleyip sayfayı yeni bir sekmede açmak bu konuda yardımcı olabilir.
- Sayfanın odakta kalmasını sağlayın. Sayfayı arka plana aldığınızda (başka bir pencereye geçtiğinizde) sayfanın görev sıraları duraklatılır ve bu nedenle CPU müdahalesi tetiklenmez.
- 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çeriklere uygulanmaz.
Ne yapmanız gerekiyor?
Sitenizde üçüncü taraf sağlayıcının reklamlarını gösteriyorsanız
Herhangi bir işlem yapmanız gerekmez. Yalnızca kullanıcıların sitenizdeyken kaldırılan sınırları aşan reklamlar görebileceğini unutmayın.
Sitenizde birinci taraf reklamlar gösteriyor veya üçüncü taraf görüntülü reklamlar için reklam sağlıyorsanız
Ağır reklam müdahaleleri için Reporting API aracılığıyla gerekli izlemeyi uyguladığınızdan emin olmak üzere okumaya devam edin.
Reklam içeriği oluşturuyor veya reklam içeriği oluşturmaya yönelik bir araç sağlıyorsanız
İçeriğinizi performans ve kaynak kullanımı sorunları açısından nasıl test edeceğinizi öğrenmek için okumaya devam edin. Ek teknik tavsiyeler veya kısıtlamalar sunabilecekleri için tercih ettiğiniz reklam platformlarıyla ilgili yönergelere de bakmanız gerekir. Örneğin, Google Görüntülü reklam öğeleriyle ilgili yönergeler'e bakın. Düşük performans gösteren reklamların yayınlanmasını önlemek için doğrudan içerik üretme araçlarınıza yapılandırılabilir eşikler ekleyebilirsiniz.
Bir reklam kaldırıldığında ne olur?
Chrome'da yapılan müdahaleler, intervention rapor türüne sahip, uygun şekilde adlandırılmış Reporting API üzerinden raporlanır. Raporlama API'sini kullanarak, bir raporlama uç noktasına POST isteği göndererek veya JavaScript'inizden müdahaleler hakkında bildirim alabilirsiniz.
Bu raporlar, reklam etiketli kök iFrame'de ve tüm alt öğeleriyle (ör. müdahale tarafından boşaltılan her çerçeve) birlikte tetiklenir. Bu, bir reklam üçüncü taraf kaynağından (ör.siteler arası bir iFrame) geliyorsa raporun bu üçüncü tarafça (ör. reklam sağlayıcı) 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 arama işlevini tetiklemek üzere kullanılabilecek bir observe() yöntemi sağlar. Bu, hata ayıklama işlemine yardımcı olmak 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ğı için sayfa tamamen kaybolmadan önce raporun kesinlikle yakalanmasını sağlamak için bir güvenlik önlemi eklemeniz gerekir (ör. 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ı kısıtladığını unutmayın. Örneğin, raporlarla birlikte bir fetch() isteği göndermeye çalışmak, söz konusu isteğin iptal edilmesine neden olur.
Bu raporu göndermek için navigator.sendBeacon() kullanmanız gerekir. Bu durumda bile, tarayıcı tarafından yalnızca en iyi çaba gösterilir ve garanti verilmez.
JavaScript'ten elde edilen JSON, POSTisteğ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, 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ştirmeler hakkında satır içi rehberlik sağlar. web.dev/fast koleksiyonuna da göz atabilirsiniz.
Reklamınızı daha izole bir bağlamda test etmeniz yararlı 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. İçeriğin reklam olarak etiketlendiğini doğrulamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz. Oluşturma panelinde (üç nokta ⋮ menüsü ve ardından Diğer Araçlar > Oluşturma'ya giderek erişilebilir) "Reklam Çerçevelerini Vurgulayın"ı seçin. İçerik üst düzey pencerede veya reklam olarak etiketlenmediği başka bir bağlamda test ediliyorsa müdahale tetiklenmez ancak eşikleri manuel olarak kontrol edebilirsiniz.
Bir çerçevenin reklam durumu, <iframe> açılış etiketinden sonra ad ek açıklamanın eklendiği Öğeler bölmesinde de gösterilir. Bu durum, reklam etiketli çerçevelerin "Reklam Durumu" özelliğini içereceği Çerçeveler bölümünün altındaki Uygulama panelinde de görülebilir.
Ağ kullanımı
Reklamın 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şaretlendiğinden emin olun.
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 en üstteki Filtre girişini kullanabilirsiniz.
Reklamın ilk isteğini (ör. iFrame'in kaynağı) bulursanız tetiklediği tüm istekleri görmek için istekteki Başlatıcı sekmesini de kullanabilirsiniz.
Genel istek listesini boyuta göre sıralamak, çok büyük kaynakları tespit etmenin iyi bir yoludur. Optimizasyon yapılmamış resimler ve videolar, bu sorunun yaygın nedenlerindendir.
Ayrıca, ada göre sıralama, tekrarlanan istekleri tespit etmenin iyi bir yolu olabilir. Müdahaleyi tetikleyen tek bir büyük kaynak değil, 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 menüsünü kullanın. CPU müdahalelerinin, yüksek kaliteli geliştirme makinelerine kıyasla daha 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 biraz zaman alabileceğinden, ne zaman ve ne kadar süreyle kayıt yapacağınız konusunda denemeler yapabilirsiniz. Kayıt yüklendikten sonra üstteki zaman çizelgesini kullanarak kaydın bir bölümünü seçebilirsiniz. Komut dosyası oluşturma, oluşturma ve boyama işlemlerini gösteren, grafikteki düz sarı, mor veya yeşil alanlara odaklanın.
Alt kısımdaki Aşağıdan Yukarı, Çağrı Ağacı ve Etkinlik Günlüğü sekmelerini keşfedin. Bu sütunları Kendi Zaman ve Toplam Zaman'a göre sıralamak, koddaki darboğazları belirlemenize yardımcı olabilir.
İlişkili kaynak dosyası da burada bağlantılıdı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 tetikleyen kötü optimize edilmiş animasyonlar veya dahil edilen bir kitaplıkta gizlenen 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 etiketlendiyse filtreleme kurallarıyla eşleşmesini önlemek için bu kodu değiştirebilirsiniz. Bir müdahalenin yanlış uygulandığından şüpheleniyorsanız bu şablonu kullanarak sorun bildirebilirsiniz. Lütfen müdahale raporu örneği ve sorunu yeniden oluşturmak için örnek bir URL sağladığınızdan emin olun.