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.
- Ana iş parçacığını herhangi bir 30 saniyelik pencerede 15 saniyeden uzun bir süre boyunca kullanır.
- 4 megabayttan fazla ağ bant genişliği kullandığında
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 ileti dizisi süre 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ın kodunu yürütmesinin ne kadar sürdüğüyle ilgilidir.
Müdahaleyi test etme
Bu müdahale Chrome 85'te kullanıma sunuldu ancak kullanıcı gizliliğini korumak için varsayılan olarak eşiklere biraz gürültü ve değişkenlik eklenir.
chrome://flags/#heavy-ad-privacy-mitigations politikası, Devre dışı değerine ayarlanırsa bu korumalar kaldırılır. Bu durumda, kısıtlamalar tamamen sınırlara göre ve belirleyici bir şekilde uygulanır. Bu, hata ayıklama ve test etme işlemlerini kolaylaştırır.
Müdahale tetiklendiğinde, ağır bir reklama ait içeriğin iframe'de 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 olduğundan emin olun. Sayfanın arka plana alınması (başka bir pencereye geçilmesi), sayfa için 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ç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. Ancak, 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 performanslı reklamların kontrol altına alınmasını önlemek için doğrudan yazma araçlarınızda yapılandırılabilir eşikler oluşturabilirsiniz.
Bir reklam kaldırıldığında ne olur?
Chrome'da bir müdahale, uygun şekilde adlandırılmış Reporting API ve intervention rapor türüne sahip aracılığıyla 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, kök reklam etiketli iframe'de, bunun tüm alt öğeleriyle (ör. müdahale tarafından kaldırılan her kare) 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ıt, Report-To üst bilgisini içermelidir:
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, müdahalelerde sağlanan bir geri çağırmayı tetiklemek için kullanılabilecek bir observe() yöntemini ReportingObserver için 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ı yalnızca elinden geleni yapar ve bu bir garanti değildir.
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 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ş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. Üst düzey pencerede veya başka bir bağlamda test edilen ve reklam olarak etiketlenmeyen başka bir bağlamda müdahale tetiklenmez. Yine de eşik değerlerini 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, aşırı büyük kaynakları tespit etmek için iyi bir yöntemdir. Bunun yaygın nedenleri arasında, optimize edilmemiş resim ve videolar yer alır.
Ayrıca, ada göre sıralama yapmak tekrarlanan istekleri tespit etmek için de iyi bir yöntem 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 mümkün olduğunca yavaşlatmak için CPU açılır listesini 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, sürekli düzeni ve boyama işlemini veya dahil edilen bir kitaplıkta gizlenen yüksek maliyetli işlemleri tetikleyen kötü optimize edilmiş animasyonlardı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.