Reklamy, które zużywają nieproporcjonalnie dużo zasobów urządzenia, negatywnie wpływają na komfort użytkownika – od oczywistych skutków, takich jak pogorszenie wydajności, po mniej widoczne konsekwencje, takie jak wyczerpywanie baterii czy zużywanie limitu przepustowości. Są to zarówno reklamy aktywnie szkodliwe, np. koparki kryptowalut, jak i reklamy z prawdziwymi treściami, które zawierają niezamierzone błędy lub problemy z wydajnością.
Chrome określa limity zasobów, których może używać reklama, i zwalnia ją, jeśli limity zostaną przekroczone. Więcej informacji znajdziesz w 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 reklam zużywających dużo zasobów
Reklama jest uznawana za obciążającą, jeśli użytkownik nie wszedł z nią w interakcję (np. nie kliknął jej ani nie dotknął) i spełnia którekolwiek z tych kryteriów:
- Używa głównego wątku przez ponad 60 sekund.
- Korzysta z głównego wątku przez ponad 15 sekund w dowolnym 30-sekundowym przedziale czasu.
- Zużywa ponad 4 MB przepustowości sieci
Wszystkie zasoby używane przez dowolne podrzędne ramki iframe ramki reklamy są wliczane do limitów interwencji w tej reklamie. Pamiętaj, że limity czasu wątku głównego nie są takie same jak czas, który upłynął od załadowania reklamy. Limity określają czas, w którym procesor wykonuje kod reklamy.
Testowanie interwencji
Interwencja została wprowadzona w Chrome 85, ale domyślnie do progów dodawany jest szum i zmienność, aby chronić prywatność użytkowników.
Ustawienie wartości chrome://flags/#heavy-ad-privacy-mitigations na Wyłączone usuwa te zabezpieczenia, co oznacza, że ograniczenia są stosowane w sposób deterministyczny, wyłącznie zgodnie z limitami. Ułatwi to debugowanie i testowanie.
Gdy interwencja zostanie uruchomiona, treść w ramce iframe w przypadku reklamy o dużej wadze zostanie zastąpiona komunikatem Reklama została usunięta. Jeśli klikniesz link Szczegóły, zobaczysz komunikat: „Ta reklama używa zbyt wielu zasobów Twojego urządzenia, dlatego została usunięta przez Chrome.”
Przykładowe treści, do których zastosowano interwencję, możesz zobaczyć na stronie heavy-ads.glitch.me. Możesz też użyć tej strony testowej, aby wczytać dowolny adres URL i szybko przetestować własne treści.
Pamiętaj, że podczas testowania może wystąpić wiele przyczyn, które uniemożliwiają zastosowanie interwencji.
- Ponowne wczytanie tej samej reklamy na tej samej stronie spowoduje wyłączenie tej kombinacji z interwencji. W tym przypadku może pomóc wyczyszczenie historii przeglądania i otwarcie strony w nowej karcie.
- Upewnij się, że strona pozostaje aktywna – przeniesienie jej na drugi plan (przełączenie się na inne okno) spowoduje wstrzymanie kolejek zadań na stronie, a tym samym nie wywoła interwencji procesora.
- Podczas testowania nie klikaj treści reklamy – interwencja nie zostanie zastosowana do treści, z którymi użytkownik wchodzi w interakcję.
Co trzeba zrobić?
Wyświetlasz w swojej witrynie reklamy dostawcy zewnętrznego.
Nie musisz nic robić. Pamiętaj tylko, że użytkownicy mogą zobaczyć w Twojej witrynie reklamy, które przekraczają limity, a następnie zostaną usunięte.
Wyświetlasz w swojej witrynie reklamy własne lub udostępniasz reklamy do wyświetlania w sieciach reklamowych innych firm.
Czytaj dalej, aby dowiedzieć się, jak wdrożyć niezbędne monitorowanie za pomocą interfejsu Reporting API w przypadku interwencji dotyczących reklam o dużym rozmiarze.
tworzysz treść reklamy lub masz narzędzie do tworzenia treści reklam,
Czytaj dalej, aby dowiedzieć się, jak testować treści pod kątem wydajności i problemów z wykorzystaniem zasobów. Zapoznaj się też z wytycznymi dotyczącymi wybranych przez Ciebie platform reklamowych, ponieważ mogą one zawierać dodatkowe porady techniczne lub ograniczenia. Przykładowo zapoznaj się z wytycznymi Google dotyczącymi kreacji displayowych. Warto wbudować konfigurowalne progi bezpośrednio w narzędzia do tworzenia, aby zapobiec wyświetlaniu słabo działających reklam.
Co się dzieje po usunięciu reklamy?
Interwencja w Chrome jest zgłaszana za pomocą interfejsu Reporting API o odpowiedniej nazwie z interventionrodzajem raportu. Za pomocą interfejsu Reporting API możesz otrzymywać powiadomienia o interwencjach – wysyłając POSTżądanie do punktu końcowego raportowania lub w ramach kodu JavaScript.
Te raporty są wywoływane w głównym elemencie iframe z tagiem reklamy wraz ze wszystkimi jego elementami podrzędnymi, czyli w każdej ramce, która została zwolniona przez interwencję. Oznacza to, że jeśli reklama pochodzi ze źródła zewnętrznego, np.z elementu iframe w innej witrynie, to za obsługę zgłoszenia odpowiada ta firma zewnętrzna (np. dostawca reklam).
Aby 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 będzie 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 obiekt ReportingObserver z metodą observe(), której można użyć do wywoływania podanego wywołania zwrotnego w przypadku interwencji. Może to być przydatne, jeśli 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();
Ponieważ interwencja dosłownie usunie stronę z elementu iframe, warto dodać zabezpieczenie, aby mieć pewność, że raport zostanie zarejestrowany, zanim strona całkowicie zniknie. Może to być np. reklama w elemencie iframe. W tym celu możesz podłączyć to samo wywołanie zwrotne do zdarzenia pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Pamiętaj, że aby chronić wygodę użytkowników, zdarzenie pagehide ogranicza ilość pracy, jaką można w nim wykonać. Na przykład próba wysłania fetch()żądania z raportamifetch() spowoduje anulowanie tego żądania.
Aby wysłać ten raport, użyj navigator.sendBeacon(). Nawet wtedy przeglądarka będzie się starać, ale nie ma gwarancji, że się to uda.
Wynikowy kod JSON ze skryptu JavaScript jest podobny do tego, który jest wysyłany w żądaniu 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 reklamowe to po prostu treści internetowe, więc korzystaj z narzędzi takich jak Lighthouse, aby sprawdzać ogólną wydajność swoich treści. Wyniki audytów zawierają wbudowane wskazówki dotyczące ulepszeń. Możesz też zapoznać się z kolekcją web.dev/fast.
Może się okazać, że warto przetestować reklamę w bardziej odizolowanym kontekście. Aby to sprawdzić, możesz użyć opcji niestandardowego adresu URL na stronie https://heavy-ads.glitch.me z gotową ramką iframe z tagami reklamowymi. Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić, czy treści zostały oznaczone jako reklama. W panelu Renderowanie (dostępnym po kliknięciu menu z 3 kropkami ⋮, a następnie Więcej narzędzi > Renderowanie) wybierz „Wyróżnij 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 wywołana, ale nadal możesz ręcznie sprawdzić, czy nie przekraczają one progów.
Stan reklamy w ramce jest też widoczny w panelu Elementy, w którym po otwierającym tagu <iframe> dodawana jest adnotacja ad. Jest to również widoczne w panelu Aplikacja w sekcji Ramki, gdzie ramki z tagami reklamowymi będą zawierać atrybut „Stan reklamy”.
Wykorzystanie sieci
Otwórz panel Sieć w Narzędziach deweloperskich w Chrome, aby zobaczyć ogólną aktywność sieciową reklamy. Aby uzyskać spójne wyniki przy wielokrotnym wczytywaniu, upewnij się, że opcja „Wyłącz pamięć podręczną” jest zaznaczona.
Przeniesiona wartość u dołu strony pokazuje kwotę przeniesioną dla całej strony. Możesz użyć pola Filtr u góry, aby ograniczyć żądania tylko do tych, które są związane z reklamą.
Jeśli znajdziesz pierwsze żądanie reklamy, np. źródło elementu iframe, możesz też użyć karty Inicjator w żądaniu, aby wyświetlić wszystkie żądania, które ono wywołuje.
Posortowanie całej listy żądań według rozmiaru to dobry sposób na wykrycie zbyt dużych zasobów. Częstymi przyczynami są obrazy i filmy, które nie zostały zoptymalizowane.
Sortowanie według nazwy może też pomóc w wykryciu powtarzających się żądań. Interwencję może wywołać nie pojedynczy duży zasób, ale duża liczba powtarzających się żądań, które stopniowo przekraczają limit.
Wykorzystanie procesora
Panel Wydajność w Narzędziach deweloperskich pomoże Ci zdiagnozować problemy z użyciem procesora. Pierwszym krokiem jest otwarcie menu Ustawienia przechwytywania. Użyj menu CPU, aby jak najbardziej spowolnić procesor. Interwencje dotyczące procesora są znacznie bardziej prawdopodobne na urządzeniach o mniejszej mocy niż na zaawansowanych maszynach deweloperskich.
Następnie kliknij przycisk Nagrywaj, aby rozpocząć rejestrowanie aktywności. Możesz eksperymentować z czasem i długością nagrywania, ponieważ wczytanie długiego śladu może zająć sporo czasu. Po wczytaniu nagrania możesz użyć górnej osi czasu, aby wybrać jego fragment. Skup się na obszarach wykresu w kolorze żółtym, fioletowym lub zielonym, które reprezentują skryptowanie, renderowanie i rysowanie.
U dołu znajdziesz karty Od dołu do góry, Drzewo wywołań i Dziennik zdarzeń. Sortowanie tych kolumn według wartości Self Time (Czas własny) i Total Time (Czas całkowity) może pomóc w identyfikacji wąskich gardeł w kodzie.
Jest tam też link do powiązanego pliku źródłowego, dzięki czemu możesz przejść do panelu Źródła i sprawdzić koszt każdej linii.
Typowe problemy, na które warto zwrócić uwagę, to słabo zoptymalizowane animacje, które powodują ciągłe zmiany układu i rysowanie, lub kosztowne operacje ukryte w dołączonej bibliotece.
Jak zgłaszać nieprawidłowe interwencje
Chrome oznacza treści jako reklamy, dopasowując żądania zasobów do listy filtrów. Jeśli treści inne niż reklamy zostały otagowane, rozważ zmianę tego kodu, aby uniknąć dopasowania do reguł filtrowania. Jeśli podejrzewasz, że interwencja została zastosowana nieprawidłowo, możesz zgłosić problem za pomocą tego szablonu. Upewnij się, że masz przykład raportu o interwencji i przykładowy adres URL, który pozwoli odtworzyć problem.