W przypadku odświeżonej witryny widoczność reklam przekracza 75%, współczynniki odrzuceń zmniejszyły się o 50%, a liczba wyświetleń stron wzrosła o 27%.
Gdy firma Google ogłosiła wprowadzenie podstawowych wskaźników internetowych, niemiecki wydawca Netzwelt szybko zdał sobie sprawę z potencjału tych nowych danych, który umożliwił zwiększenie wygody korzystania ze stron i zwiększenie przychodów z reklam. Firma postanowiła ponownie uruchomić witrynę, stosując typowe sprawdzone metody dotyczące skuteczności oraz równolegle optymalizując tagi reklam i miejsca docelowe. Dbanie o wygodę użytkowników i szybkie strony to ścieżka prowadząca do optymalizacji zaangażowania i przychodów z reklam: wzrost liczby wyświetleń strony o 27%, widoczność reklam o ponad 75% i przychody z reklam 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ł trudności ze znalezieniem równowagi między optymalizacją wygody użytkowników a szybkością stron przy jednoczesnym zachowaniu wysokich przychodów z reklam. Największe problemy:
- Wysokie skumulowane przesunięcie układu (CLS) z powodu przesunięć układu wywołanych przez reklamy, zwłaszcza z boksów o wielu rozmiarach i górnych banerów.
- Największe wyrenderowanie treści (LCP) pojawia się późno ze względu na największe wyrenderowanie reklam lub wykorzystanie przepustowości podczas wczytywania banera powitalnego.
- Wysokie opóźnienie przy pierwszym działaniu (FID) spowodowane przez kod JavaScript innej firmy potrzebny do wyświetlania reklam, określania stawek przez kod w nagłówku i innych celów.
- Skutki uboczne w zakresie podstawowych wskaźników internetowych związane z oknami z prośbą o zgodę na przetwarzanie danych kontrolowanymi przez dostawców zewnętrznych, które również przyczyniły się do zmian 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 Netzwelt zaczął pracować nad podstawowymi wskaźnikami internetowymi, szybko zauważył, że optymalizacja tych wskaźników nie musi negatywnie wpływać na reklamę, ale może posłużyć do jej poprawy. Zespół ds. weryfikacji treści pod kątem zgodności z ustawą Netzwelt zoptymalizował więc podstawowe wskaźniki internetowe, zwiększając widoczność reklam na poziomie powyżej 75%, aby wyświetlać reklamy o wyższej wartości (średnia globalna dla reklam displayowych jest niższa niż 50%).
Optymalizuję CLS
Reklamy często ładują się z opóźnieniem (czasami świadomie przez leniwe ładowanie), a ich rzeczywisty rozmiar często nie jest znany z wyprzedzeniem ze względu na wiele rozmiarów i płynne miejsca docelowe reklam.
Problem ten można podzielić na 2 grupy: reklamy w części strony widocznej na ekranie i w części strony widocznej po przewinięciu.
Reklamy w części strony widocznej na ekranie mogą powodować ogromne skoki układu z powodu opóźnionego wczytywania o nieznanych rozmiarach. Zablokowanie największej ilości miejsca może pogorszyć wrażenia użytkowników, a prośby o ustalenie rozmiarów mogą zmniejszyć przychody z reklam. Netzwelt rozwiązał ten problem, ustawiając przyklejoną górną reklamę i usuwając niektóre z większych dozwolonych rozmiarów banerów. Nakładająca się reklama zapobiega wyświetlaniu skoków układu w przypadku reklam o różnych rozmiarach. Choć zmniejszona liczba odpowiednich rozmiarów wpływa na sprzedaż reklam, większa różnica w widoczności jest łatwo dostępna.
Dane historyczne i testy A/B pomogły Netzwelt określić właściwy rozmiar i pozycjonowanie dla różnych urządzeń i ekranów oraz wykorzystać reguły multimediów CSS do rezerwowania miejsca.
Reklamy w części strony widocznej po przewinięciu można znacznie poprawić:
- Baner, który nie jest widoczny, ale wczytany, zmniejsza widoczność reklamy i pogarsza jakość strony.
- Baner, który jest wczytywany w momencie, gdy użytkownik przewinie nad nim, może zawierać dodatkowe treści.
Aby utrzymać wysoką jakość strony i wysoką widoczność reklam, Netzwelt wdrożył leniwe ładowanie i zarezerwowano miejsce na rozmiar najniższego wspólnego mianownika. W strefie wielu rozmiarów banery były żądane w rozmiarach od 300 x 250 do 300 x 600, zarezerwowane w wysokości 250 pikseli. Wyeliminowało to przesunięcie układu w przypadku mniejszych banerów i znacznie je zredukowało w przypadku większych banerów. To podejście nie jest optymalne, ale stanowi początek i dobry kompromis.
W celu dalszej optymalizacji firma Netzwelt wykorzystała interfejsy Intersection Observer i Network Information API do kontrolowania miejsc docelowych reklam i ograniczania przesunięć układu. Używane są różne pozycje reklam i strategie leniwego ładowania w zależności od pozycji przewijania i jakości połączenia sieciowego, a rozmiary reklam mogą się zmieniać z kilku na stały. Celem algorytmu jest zawsze maksymalizacja widoczności reklam przy minimalizacji przesunięcia układu. Przeglądarki, które nie obsługują interfejsu NetworkInfo API, korzystają z wartości serwera proxy określanej na podstawie połączenia typu sieci pochodzącego z urządzenia i adresu IP. Ta strategia wczytywania adaptacyjnego obniża zwłaszcza CLS w przypadku użytkowników z wolnym połączeniem internetowym.
Optymalizuję FID
Problem z opóźnieniem przy pierwszym działaniu może wydawać się wydawcom wiadomości, ponieważ reklamy często zawierają wiele dodatkowych bibliotek JavaScript. Dane laboratoryjne, takie jak Lighthouse, mogą mieć negatywny wpływ na te dane. Dane z almanaku internetowego z 2020 r. pokazują jednak, że wiele witryn szybko reaguje. Wynika to m.in. z opóźnienia wczytywania kodu JavaScript reklam (po pierwszym wpisaniu danych), dobrego buforowania (np. przez obsługę buforowania kodu V8) lub dobrego optymalizowania przez dostawców reklam. Moduły do śledzenia widoczności dostawców unikają długich zadań, więc nawet wtedy, gdy suma czasu działania jest długa, nie ma to wpływu na całkowity czas blokowania (TBT) ani FID. Chociaż FID nie stanowił większego problemu dla Netzwelt, trzeba było jeszcze wprowadzić pewne optymalizacje:
- Zmniejsz liczbę skryptów reklamowych i dostawców, w miarę możliwości skupiając się na jednym stosie.
- Wczytuję wszystkie skrypty z opóźnieniem lub asynchronicznym.
- Używanie pakietu internetowego lub podobnych technologii do potrząsania drzew i rozwalniania drzew.
- Zastosowanie prostych reguł CSS przypominających BEM.
- Unikaj długotrwałych zadań i używania wzorca nieczynnego do pilnego.
- Praca z elementem RequestAnimationFrame w każdym miejscu, w którym występuje problem z układem.
Optymalizacja LCP
Na wielkość największego wyrenderowania treści mogą wpływać reklamy na 2 sposoby – bezpośrednio przez rozpoznanie reklamy jako największego wyrenderowania, a pośrednio przez obciążenie przepustowości sieci lub wpływ na ścieżkę krytyczną. Dzięki temu największe wyrenderowanie treści (np. baner powitalny) nie załaduje się z wystarczającą szybkością.
Firma Netzwelt usunęła już reklamy w formacie średniego prostokąta z górnych boksów reklamowych, optymalizując je pod kątem CLS. Miało to dodatkową zaletę tego, że reklamy nie stały się największym elementem.
Netzwelt przestrzega rygorystycznych zasad, które powodują, że treści mają priorytet nad reklamami. Netzwelt postawił na główne obrazy i czcionki w części strony widocznej na ekranie. Zoptymalizował ścieżkę krytyczną, aby miały pierwszeństwo przed skryptami i reklamami reklamowymi. Dzięki temu reklamy nie miały wpływu na LCP.
Poza tymi optymalizacjami Netzwelt stosował też inne sprawdzone metody:
- Oddzielny kod CSS dla krytycznej ścieżki renderowania i umieść go w nagłówku.
- Wstępnie wczytano najważniejsze czcionki, skrypty i obrazy.
- Uniknięto leniwego ładowania obrazów w części strony widocznej na ekranie.
- Używano
font-display="swap".
Zgoda na wykorzystywanie danych (RODO) a podstawowe wskaźniki internetowe
Okna z prośbą o zgodę na przetwarzanie danych osobowych często mają negatywny wpływ na podstawowe wskaźniki internetowe. Podobnie jak w przypadku reklam, okno z prośbą o zgodę na przetwarzanie danych może wpływać na podstawowe wskaźniki internetowe na 2 sposoby:
- Wyraźnie, jeśli zostanie wykryte jako największe wyrenderowanie lub powoduje przesunięcie układu.
- Ogólnie rzecz biorąc, przechwytując przepustowość z największego wyrenderowania, blokując ścieżkę krytyczną do największego wyrenderowania lub opóźniając wyświetlanie reklam do momentu uzyskania zgody użytkownika, co z kolei może powodować przesunięcia układu.
Netzwelt współpracuje z zewnętrznym dostawcą zgody na wykorzystanie danych, który również wdrożył optymalizacje. Najpierw Netzwelt uniknął tych prostych błędów:
- Skrypty do uzyskiwania zgody są wczytywane asynchronicznie, dzięki czemu nie blokują kluczowych zasobów.
- Zgoda jest sformatowana w taki sposób, że duże elementy nie kwalifikują się jako największe elementy w LCP.
- Nakładka z prośbą o zgodę na przetwarzanie danych używa elementu
position: fixed, aby uniknąć zmian. - Reklamy wyświetlają się dopiero po uzyskaniu zgody użytkownika, jednak z wyprzedzeniem zachowany jest odpowiedni odstęp, aby uniknąć zmian układu podczas wczytywania reklam.
- Upewnij się, że wyświetlanie i pozycjonowanie okna z prośbą o zgodę na przetwarzanie danych nie powoduje przesunięcia układu. Jednym z problemów, który należał do dostawcy usług i naprawiono, była opcja blokady przewijania, która wyłączała przewijanie, gdy użytkownik wyświetla zgodę, przenosząc główną treść artykułu po przewinięciu, co powoduje przesunięcia układu.
Po wykonaniu tych czynności nadal występowały duże rozbieżności między CLS pól i modułów. Chociaż CLS modułu było bliski zera, wartości pól były znacznie wyższe niż progi. Po zbadaniu sprawy winą były przesunięcia układu w elemencie iframe z prośbą o zgodę na przetwarzanie danych, które obecnie są prawidłowo rejestrowane tylko w danych pól. Netzwelt cały czas współpracuje z zewnętrznym dostawcą zgody na wykorzystanie danych, by 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 sprawdza się w przypadku podstawowych wskaźników internetowych, ponieważ użytkownicy nie subskrybują stron o niskiej jakości. Poza tym subskrybenci nie spodziewają się, że w płatnych treściach będą wyświetlać się reklamy, ale ich ukrycie może spowodować przesunięcie układu. Witryna musi sprawdzić, czy użytkownicy mogą wyświetlać jej treść i czy wyświetlać w niej reklamy. W rezultacie mogą wystąpić dodatkowe opóźnienia, co z kolei może prowadzić do zmian treści lub pogorszenia wrażeń użytkowników.
Netzwelt stosuje model, w którym treści są zawsze bezpłatne, ale subskrybenci nie zobaczą reklam. Zespół zbadał różne sposoby wysyłania zapytań i przechowywania uprawnień w celu skrócenia opóźnień i przesunięć układu.
Początkowe zapytanie o uprawnienie zawsze powodowało opóźnienia, dlatego jeśli wysyłanie zapytań trwa zbyt długo, witryna wyświetli ostatni stan pamięci podręcznej. W przypadku nowych subskrybentów oznacza to niewielkie ryzyko, że płacący użytkownik zobaczy reklamę raz. Użytkownicy, którzy kończą subskrypcję, mogą zobaczyć jedno wczytanie bez reklam przed aktualizacją uprawnień zapisanych lokalnie. Gdy uprawnienia są znane, są one przechowywane lokalnie za pomocą interfejsu LocalStorage API, co pozwala uniknąć dodatkowych opóźnień i przesunięcia układu podczas nawigacji.
Wyniki optymalizacji
Wyniki optymalizacji Netzwelta mówią same za siebie. Ich wynik PageSpeed Insights jest bezkonkurencyjny wśród wydawców wiadomości na całym świecie:
Optymalizacje poprawiły jakość strony, ale zostały stworzone z myślą o firmie, a także polepszyły jej widoczność, widoczność i przychody. Po ponownym uruchomieniu zoptymalizowanej strony sieć Netzwelt odnotowała wzrost CPM o 20–30% i widoczność reklam powyżej 75%. Netzwelt zakłada jednak, że ogólny wzrost przychodów jest jeszcze wyższy. Ruch od czasu ponownego uruchomienia aplikacji zwiększył się. Prawdopodobnie wynikał z większego zaangażowania użytkowników i niższych współczynników odrzuceń w związku z większym zaangażowaniem. Trudno jest zmierzyć te skutki i uzależnione od ponownego uruchomienia aplikacji, ze względu na naturalne wahania natężenia ruchu oraz wpływ pandemii na świat. Te pośrednie skutki są jedną z powodów, dla których Netzwelt podczas sprawdzania witryny zawsze bierze pod uwagę wszystkie dane, a nie tylko CPM, co może wprowadzać w błąd. Podstawowe wskaźniki internetowe i UX w połączeniu ze wszystkimi danymi związanymi z reklamami dają prawdziwy obraz sytuacji.
Spojrzenie w przyszłość
Netzwelt uważa, że w przyszłości bez plików cookie innych firm kierowanie kontekstowe na podstawie treści w połączeniu z wygodą użytkowników i jakością strony (w tym z widocznością reklam) będzie kluczem do sukcesu wydawcy wiadomości.
Dlatego Netzwelt nie poprzestawia na podstawowych wskaźnikach internetowych, ale stale wdraża wiele nowoczesnych funkcji internetowych, takich jak progresywne aplikacje internetowe (PWA), treści offline, tryb ciemny, interfejs Web Share API i TWA za pomocą nowego interfejsu Digital Goods API.