Po ponownym uruchomieniu witryna osiągnęła widoczność reklam na poziomie ponad 75%, współczynnik odrzuceń obniżył się o 50%, a liczba odsłon wzrosła o 27%.
Gdy Google ogłosił inicjatywę dotyczącą podstawowych wskaźników internetowych, niemiecki wydawca Netzwelt szybko zrozumiał potencjał tych nowych danych w zakresie zapewniania wysokiej jakości stron i zwiększania przychodów z reklamy. Firma ta wprowadziła na rynek nową wersję swojej witryny, stosując typowe sprawdzone metody zwiększania skuteczności, a zarazem optymalizując tagi reklam i miejsca docelowe. Poświęcenie się na rzecz świetnego UX i szybkich stron okazało się skuteczną drogą do optymalizacji zaangażowania i przychodów z reklam. Liczba wyświetleń strony wzrosła o 27%, współczynnik widoczności reklam przekroczył 75%, a przychody z reklam wzrosły o 18%.
27%
Wzrost liczby wyświetleń strony
18%
wzrost przychodów z reklam,
75%
Widoczność reklamy
Wyzwanie
Podobnie jak wielu innych wydawców wiadomości, Netzwelt miał problemy ze znalezieniem odpowiedniej równowagi między optymalizacją wrażeń użytkowników a szybkością strony przy jednoczesnym zachowaniu wysokiego przychodu z reklam. Główne problemy, z którymi się spotkali, to:
- Wysokie skumulowane przesunięcie układu (CLS) spowodowane przesunięciami układu wywołanymi przez reklamy, zwłaszcza z boksów o różnych rozmiarach i banerów górnych.
- Największe wyrenderowanie treści (LCP) następuje późno, ponieważ reklamy są największym elementem treści lub zajmują przepustowość potrzebną do wczytania obrazu nagłówkowego.
- Wysokie opóźnienie przy pierwszym działaniu (FID) spowodowane przez kod JavaScript firmy zewnętrznej potrzebny do wyświetlania reklam, określania stawek w nagłówku i do innych celów.
- Skutki uboczne dla podstawowych wskaźników internetowych wynikające z dialogów dotyczących zgody kontrolowanych przez zewnętrznych dostawców, które również przyczyniają się do przesunięć układu i mogą być wykrywane jako późne największe wyrenderowania.
Optymalizacja witryny z wiadomościami pod kątem podstawowych wskaźników internetowych
Gdy firma zaczęła pracować nad podstawowymi wskaźnikami internetowymi, szybko zauważyła, że ich optymalizacja nie musi negatywnie wpływać na reklamy, ale może być wykorzystana do zwiększenia widoczności reklam. Dlatego zespół Netzwelt zoptymalizował podstawowe wskaźniki internetowe, aby zwiększyć widoczność reklam powyżej 75% i przyciągnąć reklamodawców o większej wartości (średnia widoczność reklam displayowych wynosi mniej niż 50%).
Optymalizacja CLS
Reklamy często wczytują się późno (czasem świadomie, za pomocą leniwego wczytywania), a ich rzeczywisty rozmiar często nie jest znany z wyprzedzeniem z powodu elastycznych miejsc docelowych reklam i miejsc docelowych reklam o wielu rozmiarach.
Problem można podzielić na 2 części: reklamy widoczne na ekranie i po jego przewinięciu.
Reklamy powyżej zagięcia mogą powodować duże przeskakiwanie układu z powodu wczytywania o nieznanej wielkości. Blokowanie największej przestrzeni, której mogą potrzebować, może prowadzić do niekorzystnego UX, a proszenie reklamodawców o stałe rozmiary może zmniejszyć przychody z reklam. Firma Netzwelt rozwiązała ten problem, ustawiając przypinanie górnej reklamy i usuwając niektóre większe dozwolone rozmiary banerów. Nakładka reklamowa zapobiega przeskakiwaniu układu w przypadku reklam o różnych rozmiarach. Chociaż zmniejszenie liczby dostępnych rozmiarów ma wpływ na sprzedaż reklam, większa widoczność łatwo to zrównoważy.
Dane historyczne i testy A/B pomogły firmie Netzwelt znaleźć odpowiedni rozmiar i pozycjonowanie dla różnych urządzeń i rozmiarów ekranu, a reguły multimediów CSS zostały wykorzystane do rezerwacji miejsca.
Reklamy w części strony widocznej po przewinięciu dają możliwość znacznej poprawy:
- Baner, który jest załadowany, ale nie jest widoczny, powoduje niską widoczność reklamy i pogarsza wrażenia użytkownika ze strony.
- Baner wczytywany w momencie, gdy użytkownik przewija stronę, może powodować dodatkowe przeskakiwanie treści.
Aby zapewnić użytkownikom dobre wrażenia i wysoką widoczność reklam, firma Netzwelt wdrożyła wczytywanie opóźnione i zarezerwowała miejsce na potrzeby rozmiaru wspólnego mianownika. W strefie wielu rozmiarów banery o wymiarach od 300 x 250 do 300 x 600 mają wysokość 250 pikseli. Dzięki temu wyeliminowaliśmy przesunięcia układu w przypadku mniejszych rozmiarów, a także znacznie je ograniczyliśmy w przypadku większych banerów. To podejście nie jest optymalne, ale stanowi dobry początek i kompromis.
Aby jeszcze bardziej zoptymalizować wyniki, Netzwelt używał Intersection Observer i Network Information API do kontrolowania miejsc docelowych reklam i zmniejszania zmian układu. W zależności od pozycji przewijania i jakości połączenia z siecią używane są różne pozycje reklam i strategie ładowania opóźnionego. Reklamy mogą też być zmieniane z wielu na rozmiary stałe. Celem algorytmu jest zawsze maksymalizacja widoczności reklamy przy jednoczesnym minimalizowaniu przesunięć układu. Przeglądarki, które nie obsługują interfejsu NetworkInfo API, używają wartości serwera proxy na podstawie kombinacji typu sieci pochodzącej z urządzenia i adresu IP. Ta strategia ładowania adaptacyjnego zmniejsza CLS zwłaszcza w przypadku użytkowników z wolnym połączeniem internetowym.
Optymalizacja FID
Opóźnienie pierwszego wejścia może być problemem dla wydawców wiadomości, ponieważ reklamy często zawierają wiele dodatkowych bibliotek JavaScript. Wygląda na to, że ma to negatywny wpływ na dane laboratoryjne, takie jak Lighthouse. Jednak na podstawie danych z Almanachu internetowego na rok 2020 można stwierdzić, że wiele witryn ma wystarczająco szybki czas odpowiedzi. Wynika to częściowo z tego, że kod JavaScript reklam jest wczytywany późno (po pierwszym wprowadzeniu danych), dobrze się buforuje (np. korzysta z buforowania kodu v8) lub jest dobrze zoptymalizowany przez dostawców reklam. Śledzenie widoczności dostawcy zapobiega długim zadaniom, więc nawet jeśli suma czasu działania jest długa, Całkowity czas blokowania (TBT) i FID nie są na to narażone. W przypadku Netzwelt FID nie był dużym problemem, ale i tak trzeba było wprowadzić pewne optymalizacje:
- Zmniejsz liczbę skryptów reklamowych i usługodawców, a jeśli to możliwe, skup się na jednym pakiecie.
- wczytywanie wszystkich skryptów z opóźnieniem lub asynchronicznie;
- Używanie webpacka lub podobnych technologii do usuwania niepotrzebnego kodu i rozbijana pakietów.
- Używanie prostych reguł CSS podobnych do BEM.
- Unikaj długotrwałych zadań i używanie wzorca nieaktywny do momentu pilności.
- Praca z metodą RequestAnimationFrame w przypadku elementów, na które wpływa układ.
Optymalizacja LCP
Największe wyrenderowanie treści może być w różny sposób zależne od reklam: bezpośrednio, gdy reklama jest rozpoznawana jako największy element, oraz pośrednio, gdy reklama wpływa na przepustowość sieci lub ścieżkę krytycznego znaczenia, co powoduje, że rzeczywisty największy element (np. obraz nagłówka) nie wczytuje się wystarczająco szybko.
W ramach optymalizacji pod kątem CLS firma Netzwelt usunęła już reklamy w formacie prostokąt średni z boksów reklamowych u góry strony. Dzięki temu reklamy nie stają się największym elementem.
Netzwelt przestrzega ścisłych zasad, które stawiają treści ponad reklamy. Netzwelt nadał priorytet obrazom i fontom używanym w ramach obszaru widocznego na ekranie oraz zoptymalizował ścieżkę krytycznego znaczenia, aby miała pierwszeństwo przed skryptami reklamowymi i reklamami. Dzięki temu priorytetowi reklamy nie miały wpływu na LCP.
Oprócz tych optymalizacji Netzwelt zastosował też inne sprawdzone metody:
- oddziel CSS na potrzeby ścieżki renderowania newralgicznego i umieścić go w nagłówku.
- wstępnie wczytać najważniejsze czcionki, skrypty i obrazy;
- Unikaj leniwego ładowania obrazów powyżej części strony widocznej na ekranie.
- Używano
font-display="swap".
Zgoda na wykorzystanie danych zgodnie z RODO i podstawowe wskaźniki internetowe
Dialogi dotyczące zgody często negatywnie wpływają na wskaźniki Core Web Vitals. Podobnie jak w przypadku reklam, okno z prośbą o zgodę może wpływać na wskaźniki Core Web Vitals na 2 sposoby:
- Wyraźnie, jeśli jest wykrywany jako największy element, lub powoduje przesunięcia układu.
- Domyślnie, przez kradzież przepustowości z rzeczywistego największego wyrenderowania, blokowanie ścieżki krytycznej do największego wyrenderowania lub opóźnianie wyświetlania reklam do momentu uzyskania zgody, co może z kolei powodować zmiany układu.
Netzwelt współpracuje z zewnętrznym dostawcą zgody, który wdrożył też optymalizacje. Najpierw firma Netzwelt uniknęła oczywistych pułapek:
- Skrypty dotyczące zgody na wykorzystanie danych są ładowane asynchronicznie, aby nie blokować krytycznych zasobów.
- Formatowanie zgody jest tak zaprojektowane, aby duże elementy nie były uznawane za największy element w LCP.
- Przesłonecie zgody używa elementu
position: fixed, aby uniknąć przesunięć. - Reklamy są wyświetlane dopiero po wyrażeniu zgody, ale wcześniej zachowujemy odpowiednią ilość pustego miejsca, aby uniknąć przesuwania się elementów układu podczas wczytywania reklam.
- Upewnij się, że wyświetlanie i umieszczenie okna z prośbą o zgodę nie powoduje zmian w układzie. Jednym z problemów, który udało się rozwiązać, była opcja blokady przewijania dostawcy usługi, która wyłączała przewijanie podczas wyświetlania zgody przez przeniesienie głównej treści artykułu podczas przewijania, co powodowało zmiany układu.
Mimo to nadal występowały duże rozbieżności między wartościami CLS uzyskanymi w warunkach rzeczywistych a w laboratorium. Chociaż CLS laboratoryjny był bliski zeru, wartości pól były znacznie wyższe od wartości progowych. Po zbadaniu sprawy okazało się, że winowajcą była zmiana układu w ramce iframe zgody, która jest obecnie prawidłowo rejestrowana tylko w danych polowych. Netzwelt nadal współpracuje z zewnętrznym dostawcą zgody, aby rozwiązać ten problem.
Modele subskrypcji wiadomości i podstawowe wskaźniki internetowe
Wydawcy wiadomości przechodzą na modele subskrypcji, aby finansować dziennikarstwo. Ten model jest istotny w przypadku podstawowych wskaźników internetowych, ponieważ użytkownicy nie będą subskrybować witryn, które nie zapewniają dobrego działania. Subskrybenci nie oczekują reklam w płatnych treściach, ale ukrywanie reklam może powodować zmiany w układzie. Witryna musi sprawdzić, czy użytkownicy mają prawo do wyświetlania treści i czy należy wyświetlić reklamy. Te kontrole mogą powodować dodatkowe opóźnienia, które mogą skutkować przesunięciem treści lub pogorszeniem komfortu użytkowników.
Netzwelt stosuje model, w którym treści są zawsze bezpłatne, ale subskrybenci nie widzą reklam. Zespół badał różne sposoby wysyłania zapytań i przechowywania uprawnień w celu zmniejszenia opóźnień i zmian układu.
Początkowe zapytanie dotyczące uprawnień zawsze powodowało opóźnienia, dlatego jeśli zapytanie o uprawnienia trwa zbyt długo, strona wyświetli ostatni stan z pamięci podręcznej. W przypadku nowych subskrybentów oznacza to niewielkie ryzyko, że płacący użytkownik zobaczy reklamę tylko raz. Użytkownicy, którzy właśnie zakończyli subskrypcję, mogą zobaczyć jeden film bez reklam, zanim zaktualizują uprawnienia zapisane lokalnie. Gdy uprawnienia zostaną ustalone, są one przechowywane lokalnie za pomocą interfejsu LocalStorage API, aby uniknąć dodatkowych opóźnień i zmian układu podczas dalszej nawigacji.
Wyniki optymalizacji
Wyniki optymalizacji Netzwelt mówią same za siebie. Ich wynik w PageSpeed Insights jest niedościgniony wśród wydawców wiadomości na całym świecie:
Optymalizacje poprawiły wrażenia użytkownika, ale zostały wprowadzone z myślą o firmie i polegały na zwiększeniu widoczności reklam, a także na poprawie wrażeń z reklam i ich przychodów. Po ponownym uruchomieniu zoptymalizowanej strony CPM w Netzwelt wzrósł o 20–30%, a widoczność reklam przekroczyła 75%. Jednak Netzwelt zakłada, że wzrost całkowitych przychodów będzie jeszcze większy. Od czasu ponownego uruchomienia witryny ruch w niej wzrósł, prawdopodobnie ze względu na większe zaangażowanie użytkowników i niższy współczynnik odrzuceń spowodowany lepszym UX. Te efekty są trudne do zmierzenia i związania z ponownym uruchomieniem, ponieważ ruch naturalnie się waha, a dodatkowo mamy do czynienia z efektami globalnej pandemii. Te pośrednie efekty są jedną z przyczyn, dla których Netzwelt zawsze sprawdza wszystkie liczby na swojej stronie, a nie tylko CPM, który może być mylący. Podstawowe wskaźniki internetowe i dane dotyczące UX w połączeniu ze wszystkimi danymi związanymi z reklamami dają prawdziwy obraz.
Wyglądanie w przyszłość
Netzwelt uważa, że w przyszłości bez plików cookie innych firm kluczem do sukcesu wydawcy wiadomości jest kierowanie kontekstowe na podstawie treści w połączeniu z dobrą użytecznością i wrażeniami użytkownika (w tym widocznością reklam).
Dlatego Netzwelt nie ogranicza się do Core Web Vitals, ale idzie o krok dalej, wdrażając wiele nowoczesnych funkcji internetowych, takich jak progresywne aplikacje internetowe (PWA), treści offline, tryb ciemny, interfejs Web Share API i zaufane działania internetowe (Trusted Web Activities, TWA) za pomocą nowego interfejsu Digital Goods API.