Reklamy, które zużywają nieproporcjonalnie dużo zasobów urządzenia, negatywnie wpływają na komfort użytkownika – od oczywistych skutków w postaci spadku wydajności po mniej widoczne konsekwencje, takie jak szybsze wyczerpywanie się baterii czy szybsze zużycie limitu transmisji danych. Te reklamy obejmują aktywnie złośliwe treści, takie jak koparki kryptowalut, oraz autentyczne treści z przypadkowymi błędami lub problemami z wydajnością.
Chrome określa limity zasobów, których może używać reklama, i odczytuje reklamę, jeśli przekroczy te limity. Więcej informacji znajdziesz w tym ogłoszeniu na blogu Chromium. Mechanizmem służącym do wyładowywania reklam jest interwencja związana z reklamami wykorzystującymi dużo zasobów.
Kryteria reklamy zużywającej dużo zasobów
Reklama jest uważana za ciężką jeśli użytkownik nie wejdzie z nią w interakcję (np. nie kliknie jej) i spełnia co najmniej 1 z tych kryteriów:
- Używa wątku głównego przez ponad 60 sekund
- Używanie głównego wątku przez ponad 15 sekund w dowolnym 30-sekundowym oknie
- Korzystanie z ponad 4 megabajtów przepustowości sieci
Wszystkie zasoby używane przez wszystkie potomne ramki iframe reklamy są wliczane do limitów interwencji dotyczących tej reklamy. Pamiętaj, że limity czasu wątku głównego nie są takie same jak czas od załadowania reklamy. Limity te określają czas potrzebny procesowi na wykonanie kodu reklamy.
Testowanie interwencji
Ta interwencja została wdrożona w Chrome 85, ale domyślnie do progów dodano pewien poziom szumu i zmienności, aby chronić prywatność użytkowników.
Ustawienie chrome://flags/#heavy-ad-privacy-mitigations na Wyłączone powoduje usunięcie tych zabezpieczeń, co oznacza, że ograniczenia są stosowane deterministycznie, wyłącznie zgodnie z limitami. Powinno to ułatwić debugowanie i testowanie.
Gdy zostanie uruchomiona interwencja, treść w ramce iframe reklamy o dużej wielkości zostanie zastąpiona komunikatem Reklama została usunięta. Jeśli klikniesz link Szczegóły, zobaczysz komunikat: „Ta reklama używa zbyt wiele zasobów Twojego urządzenia, dlatego została usunięta przez Chrome”.
Interwencję zastosowaną do przykładowych treści możesz zobaczyć na stronie heavy-ads.glitch.me. Możesz też użyć tej strony testowej, aby wczytać dowolny adres URL, co jest szybkim sposobem testowania własnych treści.
Pamiętaj, że podczas testowania może wystąpić wiele przyczyn, które uniemożliwiają zastosowanie interwencji.
- Ponowne załadowanie tej samej reklamy na tej samej stronie spowoduje, że ta kombinacja nie będzie już objęta interwencją. Możesz wyczyścić historię przeglądania i otworzyć stronę w nowym tagu.
- Upewnij się, że strona pozostaje w centrum uwagi – przeniesienie strony na drugi plan (przejście do innego okna) spowoduje wstrzymanie kolejek zadań na stronie i w ten sposób nie spowoduje interwencji procesora.
- Podczas testowania nie dotykaj ani nie klikaj treści reklamy, ponieważ interwencja nie zostanie zastosowana do treści, które są przedmiotem interakcji użytkownika.
Co trzeba zrobić?
wyświetlasz reklamy od zewnętrznego dostawcy w swojej witrynie;
Nie musisz podejmować żadnych działań. Pamiętaj tylko, że użytkownicy mogą widzieć reklamy, które przekraczają limity usunięte z Twojej witryny.
wyświetlasz w swojej witrynie reklamy własne lub udostępniasz reklamy displayowe innych firm;
Czytaj dalej, aby dowiedzieć się, jak wdrożyć niezbędny monitoring za pomocą interfejsu Reporting API w przypadku interwencji dotyczącej dużej liczby reklam.
tworzysz treść reklamy lub zarządzasz narzędziem do tworzenia treści reklamy,
Czytaj dalej, aby dowiedzieć się, jak sprawdzić, czy Twoje treści nie mają problemów z wydajnością i wykorzystaniem zasobów. Zapoznaj się też ze wskazówkami dotyczącymi wybranych platform reklamowych, które mogą zawierać dodatkowe porady techniczne lub ograniczenia. Zapoznaj się na przykład z wytycznymi Google dotyczącymi kreacji displayowych. Zastanów się nad skonfigurowaniem progów bezpośrednio w narzędziach do tworzenia, aby zapobiec wyświetlaniu reklam o niskiej skuteczności.
Co się dzieje, gdy reklama zostanie usunięta?
Interwencja w Chrome jest zgłaszana za pomocą odpowiedniego interfejsu Reporting API z typem raportu intervention. Za pomocą interfejsu Reporting API możesz otrzymywać powiadomienia o interwencjach za pomocą żądania POST do punktu końcowego raportowania lub w kodzie JavaScript.
Te raporty są wywoływane w przypadku głównego elementu iframe z tagiem reklamowym oraz wszystkich jego potomków, czyli każdego obrazu, który został zwolniony przez interwencję. Oznacza to, że jeśli reklama pochodzi ze źródła zewnętrznego, np.z ramki iframe w witrynie, to właśnie ta firma (np. dostawca reklam) musi się zająć zgłoszeniem.
Aby skonfigurować stronę do raportów HTTP, odpowiedź powinna zawierać nagłówek Report-To:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
Wywołane żądanie POST zawiera raport podobny do tego:
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"
}
}]
Interfejs JavaScript API udostępnia obiektowi ReportingObserver metodę observe(), której można użyć do wywołania podanego wywołania zwrotnego w przypadku interwencji. Może to być przydatne, jeśli chcesz dołączyć do raportu dodatkowe informacje, które ułatwią debugowanie.
// 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();
Jednak ponieważ interwencja spowoduje usunięcie strony z ramki iframe, musisz dodać zabezpieczenie, aby mieć pewność, że raport zostanie z pewnością przechwycony, zanim strona zniknie całkowicie. Może to być na przykład reklama w ramce iframe. W tym celu możesz podłączyć tę samą funkcję wywołania zwrotnego do zdarzenia pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Pamiętaj, że w celu zapewnienia użytkownikom wygody zdarzenie pagehide ogranicza ilość pracy, jaką można w nim wykonać. Na przykład próba wysłania fetch() z raportami spowoduje anulowanie prośby.
Aby wysłać raport, użyj navigator.sendBeacon(). Nawet wtedy przeglądarka zrobi, co w jej mocy, ale nie ma gwarancji, że uda się to.
Wynikowy obiekt JSON z skryptu JavaScript jest podobny do tego wysyłanego w ramach żądania POST:
[
{
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',
},
},
];
Diagnozowanie przyczyny interwencji
Treści reklamy to po prostu treści internetowe, więc do oceny ogólnej skuteczności swoich treści możesz używać narzędzi takich jak Lighthouse. W wyniku tych audytów otrzymasz wskazówki dotyczące ulepszeń. Możesz też skorzystać z kolekcje web.dev/fast.
Możesz też przetestować reklamę w bardziej odizolowanym kontekście. Aby przetestować to rozwiązanie, możesz użyć opcji niestandardowego adresu URL na stronie https://heavy-ads.glitch.me, gdzie znajdziesz gotowy iframe z tagami reklamowymi. Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić, czy treści zostały oznaczone jako reklama. W panelu Wyświetlanie (dostępny w menu z 3 kropkami ⋮, a następnie Więcej narzędzi > Wyświetlanie) wybierz „Zaznacz ramki reklam”. Jeśli testujesz treści w oknie najwyższego poziomu lub w innym kontekście, w którym nie są one oznaczone jako reklama, interwencja nie zostanie uruchomiona, ale nadal możesz ręcznie sprawdzić, czy nie przekraczają one wartości progowych.
Stan reklamy w ramce jest też wyświetlany w panelu Elementy, w którym po otwierającym tagu <iframe> dodana jest adnotacja ad. Jest to też widoczne w panelu Aplikacja w sekcji Kadry, gdzie kadry z tagami reklamy będą zawierać atrybut „Stan reklamy”.
Wykorzystanie sieci
Otwórz panel Sieć w Narzędziach deweloperskich w Chrome, aby sprawdzić ogólną aktywność sieci związaną z reklamą. Aby uzyskać spójne wyniki podczas wielokrotnego wczytywania, zaznacz opcję Disable cache (Wyłącz pamięć podręczną).
Wartość przeniesiona u dołu strony pokazuje kwotę przeniesioną z całej strony. Użyj u góry pola Filtr, aby ograniczyć żądania tylko do tych, które są związane z reklamą.
Jeśli znajdziesz początkowe żądanie reklamy, np. źródło iframe, możesz też użyć karty Initiator (Inicjator) w ramach żądania, aby zobaczyć wszystkie żądania, które je wywołują.
Posortowanie ogólnej listy żądań według rozmiaru to dobry sposób na znalezienie zbyt dużych zasobów. Najczęstszą przyczyną są obrazy i filmy, które nie zostały zoptymalizowane.
Sortowanie według nazwy może być też dobrym sposobem na wykrycie powtarzających się żądań. Nie musi to być pojedynczy duży zasób, który powoduje interwencję, ale duża liczba powtarzających się żądań, które stopniowo przekraczają limit.
Wykorzystanie procesora
Panel Wydajność w Narzędziach deweloperskich pomoże zdiagnozować problemy z wykorzystaniem procesora. Pierwszym krokiem jest otwarcie menu Ustawienia nagrywania. Użyj menu Procesor, aby maksymalnie spowolnić procesor. Interwencje dotyczące procesora są znacznie bardziej prawdopodobne na słabszych urządzeniach niż na zaawansowanych maszynach programistycznych.
Następnie kliknij przycisk Nagrywanie, aby rozpocząć nagrywanie aktywności. Możesz eksperymentować z czasem i długością nagrywania, ponieważ wczytywanie długiego śledzenia może zająć trochę czasu. Po załadowaniu nagrania możesz użyć górnej osi czasu, aby wybrać fragment nagrania. Zwróć uwagę na obszary na wykresie w kolorze żółtym, fioletowym lub zielonym, które odpowiadają skryptowi, renderowaniu i malowaniu.
Powyżej znajdziesz karty Od dołu, Drzewo wywołań i Dziennik zdarzeń. Posortowanie tych kolumn według kolumn Czas wykonania i Całkowity czas może pomóc w zidentyfikowaniu wąskich gardeł w kodzie.
Powiązany plik źródłowy jest też do niego dołączony, więc możesz go otworzyć w panelu Źródła, aby sprawdzić koszt każdej linii.
Typowe problemy, na które warto zwrócić uwagę, to źle zoptymalizowane animacje, które powodują ciągłe układanie i rysowanie lub kosztowne operacje ukryte w zawartej bibliotece.
Jak zgłaszać nieprawidłowe interwencje
Chrome oznacza treści jako reklamy, dopasowując żądania zasobów do listy filtrów. Jeśli tagi zostały dodane do treści, które nie są reklamami, rozważ zmianę kodu, aby uniknąć dopasowania do reguł filtrowania. Jeśli podejrzewasz, że interwencja została nieprawidłowo zastosowana, możesz zgłosić problem za pomocą tego szablonu. Pamiętaj, aby załączyć przykładowy raport interwencji i próbny adres URL, który pozwoli odtworzyć problem.