Reklamy, które zużywają nieproporcjonalnie dużo zasobów na urządzeniu, negatywnie wpływają na wrażenia użytkownika – od oczywistych skutków obniżenia wydajności po mniej widoczne, takie jak rozładowywanie baterii czy zużywanie limitu przepustowości. Mogą to być zarówno aktywnie szkodliwe treści, jak np. wydobycie kryptowalut, po oryginalne treści z nieumyślnymi błędami lub problemami z działaniem.
Chrome określa limity zasobów, z których może korzystać reklama, i usuwa ją po ich przekroczeniu. Więcej informacji znajdziesz na blogu Chromium. Mechanizmem służącym do wyładowywania reklam jest interwencja reklamowa.
Kryteria dotyczące reklam zużywających dużo zasobów
Reklama jest uznawana za ciężką, jeśli użytkownik nie wszedł z nią w interakcję (np. nie kliknął jej ani nie kliknął) i spełnia którekolwiek z tych kryteriów:
- Używa wątku głównego przez łącznie ponad 60 sekund
- Używa wątku głównego przez ponad 15 sekund w dowolnym 30-sekundowym oknie.
- Zużywa ponad 4 megabajty przepustowości sieci
Wszystkie zasoby używane przez podrzędne elementy iframe ramki reklamy wliczają się do limitów interwencji w tej reklamie. Pamiętaj, że limity czasu głównego wątku to nie to samo co czas, który upłynął od wczytania reklamy. Limity dotyczą czasu potrzebnego procesorowi na wykonanie kodu reklamy.
Testowanie interwencji
Interwencja została przeprowadzona w Chrome 85, ale domyślnie w celu ochrony prywatności użytkowników dochodzi do szumu i zmienności.
Jeśli zasada chrome://flags/#heavy-ad-privacy-mitigations ma wartość Wyłączona, te zabezpieczenia są usuwane, co oznacza, że ograniczenia są stosowane determinowo, wyłącznie zgodnie z limitami. Powinno to ułatwić debugowanie i testowanie.
Po uruchomieniu interwencji w elemencie iframe powinna pojawić się treść ciężkiej reklamy zamiast komunikatu Reklama usunięta. Po kliknięciu dołączonego linku Szczegóły pojawi się komunikat: „Ta reklama zużywa zbyt wiele zasobów na Twoim urządzeniu, dlatego została usunięta przez Chrome”.
Działanie zastosowane do przykładowych treści możesz zobaczyć na stronie heavy-ads.glitch.me. W tej witrynie testowej możesz też zobaczyć dowolny adres URL, by szybko przetestować własne treści.
Podczas testowania pamiętaj, że jest wiele powodów, które mogą uniemożliwiać zastosowanie interwencji.
- Ponowne wczytanie tej samej reklamy na tej samej stronie spowoduje wykluczenie tej kombinacji z interwencji. Pomóc może wyczyszczenie historii przeglądania i otwarcie strony w nowym tagu.
- Upewnij się, że strona pozostaje aktywna – przesunięcie jej w tle (przejście do innego okna) spowoduje wstrzymanie kolejek zadań na stronie i nie wywoła interwencji procesora.
- Pamiętaj, by podczas testowania nie klikać treści reklamy – interwencja nie zostanie zastosowana do treści, w przypadku których użytkownicy wchodzą w interakcję.
Co trzeba zrobić?
Wyświetlasz w swojej witrynie reklamy pochodzące od zewnętrznego dostawcy
Nie musisz nic robić. Pamiętaj tylko, że użytkownicy mogą zobaczyć reklamy, które przekraczają limity usunięte z Twojej witryny.
Wyświetlasz w swojej witrynie własne reklamy lub udostępniasz reklamy displayowe innych firm
Czytaj dalej, aby upewnić się, że wdrożysz niezbędne monitorowanie za pomocą interfejsu Reporting API w przypadku interwencji dotyczących zaawansowanych reklam.
Tworzysz treść reklamy lub korzystasz z narzędzia do tworzenia treści reklamy
Czytaj dalej, aby mieć pewność, że wiesz, 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, ponieważ mogą one zawierać dodatkowe porady techniczne lub ograniczenia, np. we wskazówkach Google dotyczących kreacji displayowych. Rozważ dodanie konfigurowalnych progów bezpośrednio w narzędziach do tworzenia treści, aby zapobiec pojawianiu się reklam o niskiej skuteczności.
Co się stanie po usunięciu reklamy?
Interwencja w Chrome jest zgłaszana za pomocą interfejsu Reporting API z typem raportu intervention. Interfejs API do raportowania pozwala otrzymywać powiadomienia o interwencjach za pomocą żądania POST wysyłanego do punktu końcowego raportowania lub kodu JavaScript.
Raporty te są wywoływane w głównej części elementu iframe z otagowanym tagiem reklamy i wszystkimi elementami podrzędnymi, tj. każda klatka wyładowana przez interwencję. Oznacza to, że jeśli reklama pochodzi ze źródła zewnętrznego, np.z elementu iframe z innych witryn, to ta firma (np. dostawca reklam) odpowiada za obsługę raportu.
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 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 interfejsowi ReportingObserver metodę observe(), która umożliwia wywołanie podanego wywołania zwrotnego po interwencjach. Może to być przydatne, jeśli chcesz dołączyć do raportu dodatkowe informacje ułatwiające 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ż ta interwencja spowoduje dosłowne usunięcie strony z elementu iframe, należy dodać zabezpieczenie, które ma zabezpieczyć raport (np. w elemencie iframe), zanim zostanie ono zarejestrowane. 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 ze względu na wygodę użytkowników zdarzenie pagehide ogranicza ilość pracy, którą można w nim wykonać. Próba wysłania z raportami żądania fetch() na przykład spowoduje anulowanie tego żądania.
Do wysyłania tego raportu należy używać narzędzia navigator.sendBeacon(). Jednak nie jest to gwarantowane.
Wynikowy plik JSON z JavaScriptu jest podobny do tego wysłanego 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ść reklamy to tylko treść internetowa, skorzystaj więc z narzędzi takich jak Lighthouse, by kontrolować ogólną skuteczność swoich treści. Wynikowe audyty zawierają wbudowane wskazówki na temat ulepszeń. Możesz też skorzystać z kolekcji web.dev/fast.
Warto przetestować reklamę w bardziej wyizolowanym kontekście. Aby przetestować gotowy element iframe z otagowanym tagiem, możesz użyć opcji niestandardowego adresu URL na stronie https://heavy-ads.glitch.me. Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić, czy treści są oznaczone jako reklamy. W panelu Renderowanie (dostępnym po kliknięciu menu z 3 kropkami ⋮, a następnie Więcej narzędzi > Renderowanie) wybierz „Podświetl ramki reklam”. Jeśli treści są testowane w oknie najwyższego poziomu lub w innym kontekście, w którym nie są oznaczone jako reklamy, interwencja nie zostanie wywołana, ale nadal możesz ręcznie sprawdzić, czy nie zostały przekroczone wartości progowe.
Stan reklamy ramki jest też wyświetlany w panelu Elementy, gdzie po otwierającym tagu <iframe> dodawana jest adnotacja ad. Jest ona też widoczna w panelu Aplikacja w sekcji Ramki, gdzie ramki z tagami reklam będą zawierały atrybut „Stan reklamy”.
Wykorzystanie sieci
Otwórz panel Sieć w Narzędziach deweloperskich w Chrome, aby zobaczyć ogólną aktywność sieciową związaną z reklamą. Upewnij się, że opcja „Wyłącz pamięć podręczną” jest zaznaczona, aby uzyskać spójne wyniki przy wielokrotnym wczytywaniu.
Przekazana wartość u dołu strony pokazuje kwotę przelaną dla całej strony. Możesz użyć u góry filtra, aby ograniczyć żądania tylko do tych związanych z reklamą.
Jeśli znajdziesz wstępne żądanie reklamy, np. źródło elementu iframe, możesz też wyświetlić w nim kartę Inicjator, by wyświetlić wszystkie wywoływane przez nie żądania.
Dobrym sposobem na wychwycenie zbyt dużych zasobów jest sortowanie ogólnej listy żądań według rozmiaru. Są to na przykład zdjęcia i filmy, które nie zostały zoptymalizowane.
Dobrym sposobem na wykrywanie powtarzających się żądań jest też sortowanie według nazwy. Nie musi to być jeden duży zasób aktywujący interwencję, ale duża liczba powtarzających się żądań, które stopniowo przekraczają limit.
Wykorzystanie procesora
Panel Wydajność w Narzędziach deweloperskich ułatwia diagnozowanie problemów z wykorzystaniem procesora. Najpierw otwórz menu Ustawienia przechwytywania. Aby maksymalnie spowalniać procesor, użyj menu CPU. Interwencje dotyczące procesora są znacznie częściej aktywowane na urządzeniach o niższej mocy niż na zaawansowanych komputerach dla programistów.
Następnie kliknij przycisk Nagraj, aby rozpocząć nagrywanie aktywności. Warto poeksperymentować z czasem i czasem trwania nagrywania, ponieważ ładowanie długiego śladu może zająć sporo czasu. Po wczytaniu nagrania możesz wybrać jego część na górnej osi czasu. Skup się na obszarach wykresu w kolorze jednolitym żółtym, fioletowym lub zielonym, które reprezentują skrypty, renderowanie i malarstwo.
Zapoznaj się z kartami Dół w górę, Drzewo wywołań i Dziennik zdarzeń u dołu. Posortowanie tych kolumn według czasu własnego i całkowitego czasu może pomóc w wykryciu wąskich gardła w kodzie.
Powiązany jest tam również powiązany plik źródłowy, dzięki czemu możesz przejść do panelu Źródła, aby sprawdzić koszt każdego wiersza.
Typowe problemy, na które należy zwrócić uwagę, to słabo zoptymalizowane animacje, które uruchamiają ciągły układ i malowanie, lub kosztowne operacje, które są ukryte w uwzględnionej bibliotece.
Zgłaszanie nieprawidłowych interwencji
Chrome oznacza treść jako reklamę, dopasowując żądania zasobów do listy filtrów. Jeśli otagowano treści niebędące reklamami, 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. Sprawdź, czy masz zapisany przykładowy raport interwencyjny i masz przykładowy adres URL, który umożliwi odtworzenie problemu.