Reklamy, które zużywają nieproporcjonalną ilość zasobów na urządzeniu, 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 przepustowości. 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 używanym 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 wszedł z nią w interakcję (np. nie kliknął jej) i spełnia co najmniej 1 z tych kryteriów:
- Używa wątku głównego przez ponad 60 sekund
- korzysta z 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
Interwencja przeprowadzona w Chrome 85, ale domyślnie wartości progowe są uzupełniane o pewny szum i zmienność, 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 powinna zostać 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ę dotyczącą próbek treści możesz zobaczyć na stronie heavy-ads.glitch.me. Możesz też skorzystać z tej witryny testowej, aby wczytać dowolny adres URL i umożliwić szybkie przetestowanie 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 zwolnienie tej kombinacji z interwencji. 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 w swojej witrynie reklamy zewnętrznego dostawcy,
Nie musisz podejmować żadnych działań, ale pamiętaj, że użytkownicy mogą widzieć reklamy, które przekraczają limity usunięte z Twojej witryny.
Wyświetlasz w swojej witrynie reklamy własne lub dostarczasz reklamy displayowe firmy zewnętrznej
Czytaj dalej, aby dowiedzieć się, jak wdrożyć niezbędny monitoring za pomocą interfejsu Reporting API w przypadku interwencji dotyczącej reklam z dużą liczbą wyświetleń.
tworzysz treść reklamy lub zarządzasz narzędziem do tworzenia treści reklamy,
Czytaj dalej, aby dowiedzieć się, jak testować treści pod kątem 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 treści, 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. Interfejs API do raportowania pozwala otrzymywać powiadomienia o interwencjach w postaci żądania POST wysyłanego do punktu końcowego raportowania lub kodu 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 zewnętrzna (np. dostawca reklam) musi się zająć zgłoszeniem.
Aby można było skonfigurować stronę pod kątem 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. Jest to przydatne, gdy chcesz dołączyć do raportu dodatkowe informacje, które pomogą w debugowaniu.
// 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 zostanie całkowicie usunięta. 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 wygodnej obsługi zdarzenie pagehide ogranicza ilość pracy, jaką można w nim wykonać. Na przykład próba wysłania fetch() z raportami spowoduje anulowanie tej prośby.
Aby wysłać raport, użyj navigator.sendBeacon(). Pamiętaj, że przeglądarka dokłada wszelkich starań, ale nie może zagwarantować, że raport zostanie wysłany.
Wynikowy obiekt JSON z JavaScriptu 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 reklam 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ż zapoznać się z kolekcją web.dev/fast.
Możesz też przetestować reklamę w bardziej odizolowanym kontekście. Możesz użyć opcji niestandardowego adresu URL na https://heavy-ads.glitch.me, aby przetestować to ustawienie za pomocą gotowego elementu iframe z tagami reklamy. 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 Ramki, gdzie ramki z reklamami mają 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, upewnij się, że zaznaczone jest pole wyboru „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 poeksperymentować z czasem i czasem nagrywania, ponieważ wczytywanie długiego logu czasu może zająć dużo czasu. Po załadowaniu nagrania możesz użyć górnej osi czasu, aby wybrać fragment nagrania. Skoncentruj się na obszarach wykresu w kolorze jednolitym żółtym, fioletowym lub zielonym, które reprezentują scenariusz, renderowanie i malowanie.
Kliknij karty Od dołu, Drzewo wywołań i Dziennik zdarzeń u dołu. Sortowanie tych kolumn według wartości Self Time i Total Time może pomóc zidentyfikować wąskie gardła 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 to słabo zoptymalizowane animacje, które wyzwalają ciągły układ i malowanie lub powodują kosztowne operacje, które są ukryte w uwzględnionej 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.