Przesunięcie układu występuje, gdy widoczny element na stronie zmienia swoją pozycję lub rozmiar, wpływając na pozycję treści wokół niego. Czasami zmiana jest zamierzona, np. gdy kontener rozszerza się w wyniku działania użytkownika. Jednak dynamiczny charakter reklam może prowadzić do nieoczekiwanych zmian układu, które mają negatywny wpływ na wrażenia użytkownika i mogą powodować poważne problemy z użytecznością.
Z tego przewodnika dowiesz się, jak mierzyć przesunięcie układu i jak je minimalizować podczas korzystania z tagów wydawcy Google (GPT).
Jak reklamy powodują przesunięcie układu
Żądania reklam są zazwyczaj żądania asynchroniczne i dynamicznie dodają treść do strony podczas wczytywania strony lub po jej wczytaniu. Podczas pobierania reklam reszta strony jest wczytywana, a treści, które nie są reklamami, mogą stać się widoczne dla użytkownika. Jeśli nie zarezerwujesz wystarczająco dużo miejsca na wczytywane reklamy, mogą one wypchnąć widoczne treści, które nie są reklamami, gdy zostaną ostatecznie dodane do strony.
Podczas pracy z tagami Google Publisher Tag występuje kilka punktów w cyklu życia reklamy, w których może nastąpić zmiana układu:
- Gdy wywoływana jest funkcja
display(). Przedział może się rozwijać lub zwijać w zależności od jego konfiguracji. - Podczas renderowania treści reklamy. Rozmiar boksu może zostać zmieniony, jeśli wyświetliła się reklama elastyczna lub gdy brakuje miejsca. W tym miejscu może się on też rozwinąć lub zwinąć, w zależności od jego konfiguracji.
- Po wyrenderowaniu treści reklamy. Niektóre typy kreacji są zaprojektowane tak, aby po wyświetleniu na stronie się rozwijały.
Pamiętaj, że im wyżej w widocznym obszarze znajduje się boks reklamowy, tym więcej treści może on potencjalnie zastąpić. Szczególną uwagę zwróć na boksy reklamowe znajdujące się u góry początkowo widocznego obszaru strony (powyżej linii zagięcia). Te miejsca mogą powodować nieproporcjonalne przesunięcia układu, ponieważ są bardziej widoczne, gdy wczytują treści reklamy.
Pomiar przesunięcia układu
Skumulowane przesunięcie układu (CLS) to wskaźnik podstawowych wskaźników internetowych, którego możesz używać do ilościowego określenia wpływu przesunięć układu na Twoją stronę, zarówno w laboratorium, jak i w warunkach rzeczywistych.
W laboratorium
Narzędzia laboratoryjne mierzą CLS w sposób syntetyczny. Oznacza to, że nie wymagają one prawdziwej interakcji użytkownika, co sprawia, że nadają się do stosowania w ciągu ciągłej integracji i w procesach programowania lokalnego. Jednak te narzędzia zwykle mierzą tylko wydajność podczas wczytywania strony i mają ograniczone możliwości symulowania warunków, więc podawane wartości mogą być niższe niż te, które odczuwałby prawdziwy użytkownik.
Publisher Ads Audits for Lighthouse to narzędzie, które umożliwia pomiar CLS w przypadku reklam tagów wydawcy Google. Szczegółowe informacje znajdziesz w dokumentacji dotyczącej audytu ograniczania przesunięcia układu związanego z reklamą.
Narzędzie deweloperskie Chrome można też skonfigurować tak, aby podświetlało zmiany układu podczas poruszania się po witrynie. Pozwala to ręcznie identyfikować przesunięcia układu, które mają miejsce w pobliżu boksów reklamowych na stronie.
W terenie
Narzędzia w polu mierzą CLS w przypadku prawdziwych użytkowników, którzy wchodzą w interakcję z Twoją witryną. Ten proces jest powszechnie znany jako monitorowanie rzeczywistych użytkowników (RUM). RUM umożliwia obserwowanie wpływu czynników rzeczywistych (takich jak możliwości urządzenia, warunki sieci, interakcje użytkownika i personalizacja strony), które często trudno jest symulować za pomocą testów syntetycznych.
Minimalizowanie przesunięcia układu
Jedynym gwarantowanym sposobem uniknięcia przesunięcia układu jest zarezerwowanie odpowiedniej ilości miejsca dla danego boksu reklamowego za pomocą CSS. Najskuteczniejszym sposobem jest ustawienie stałej wysokości i szerokości bezpośrednio w boksie reklamy div. Chociaż takie rozwiązanie sprawdza się w przypadku statycznych, stałych rozmiarów miejsc reklamowych, bardziej skomplikowane scenariusze mogą wymagać bardziej zróżnicowanego podejścia. W kolejnych sekcjach
omówiliśmy kilka typowych scenariuszy.
Boksy reklamowe o różnych rozmiarach
W przypadku miejsc reklamowych, które obsługują wiele rozmiarów, zalecamy 1 z tych podejść:
- Zarezerwuj miejsce na największy skonfigurowany rozmiar do wyświetlania reklam.
- Zarezerwuj miejsce na najmniejszy rozmiar obrazu skonfigurowany do wyświetlania.
- Rezerwowanie miejsca na rozmiar, który najprawdopodobniej będzie wyświetlany, na podstawie danych o wypełnianiu z raportów Google Ad Managera.
Wybór odpowiedniego podejścia
Zarezerwowanie miejsca dla największego skonfigurowanego rozmiaru do wyświetlenia to najskuteczniejszy sposób uniknięcia przesunięć układu. Ta metoda może jednak spowodować, że wokół reklamy pojawi się dodatkowa pusta przestrzeń, jeśli wyświetlana jest kreacja mniejsza niż zarezerwowany rozmiar. Zmniejszenie boksu reklamowego do rozmiaru wyświetlanej kreacji spowoduje zmianę układu, dlatego zalecamy, aby tego unikać. Zamiast tego można zastosować wyśrodkowanie w pionie i w poziomie, aby zmniejszyć wizualny efekt nadmiernych pustych przestrzeni.
Z drugiej strony, zarezerwowanie miejsca na najmniejszy rozmiar skonfigurowany do wyświetlania pozwala uniknąć nadmiernego pustego miejsca wokół reklamy. Może to być dobry wybór, jeśli boks reklamowy jest często wypełniany mniejszymi kreacjami lub jeśli wszystkie obsługiwane przez niego rozmiary są podobne. Jednak ta metoda powoduje zmianę układu w przypadku wyświetlenia kreacji o większym rozmiarze niż zarezerwowany (chociaż takie zmiany są zazwyczaj mniejsze niż w przypadku braku rezerwacji miejsca).
Aby zachować równowagę między pustą przestrzenią a zmianami układu, możesz zarezerwować „średnią” ilość miejsca na swoje szale reklamowe. Na przykład rezerwacja 100px
w pionie powoduje powstanie niewielkiej pustej przestrzeni podczas wyświetlania kreacji 320x50, ale zmniejsza wynik CLS w porównaniu z brakiem rezerwacji miejsca. Musisz eksperymentować z różnymi rozmiarami, aby znaleźć najlepszy rozmiar dla swojej witryny.
Podczas ustalania, ile miejsca zarezerwować dla danego boksu, warto przyjrzeć się historycznym danym wypełnienia z raportów Google Ad Managera, które może pomóc w podjęciu bardziej świadomej decyzji. Najlepiej wyjaśnić to na przykładach.
Przykład 1
| Wymiar kreacji (wyświetlone) | Wyświetlenia z serwera reklam (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
W takim przypadku rezerwowanie 250px w orientacji pionowej może znacznie zmniejszyć CLS, ponieważ większość wyświetlanych kreacji to 300x250.
Przykład 2
| Wymiar kreacji (wyświetlone) | Wyświetlenia z serwera reklam (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
W tym przypadku większość reklam ma wysokość maksymalnie 90px, więc zarezerwowanie 90px
w kierunku pionowym powinno w większości przypadków zapobiegać zmianie układu.
Jak zarezerwować miejsce
Zalecamy rozwiązanie tego problemu przez określenie rozmiaru miejsca na reklamę za pomocą właściwości CSS min-height i min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Użycie atrybutów min-height i min-width pozwala zarezerwować minimalną ilość miejsca na boks reklamowy, a jednocześnie umożliwia przeglądarce zwiększenie rozmiaru kontenera w razie potrzeby. Dzięki temu żadne treści nie zostaną obcięte, jeśli wyświetlana jest większa kreacja.
Możesz ją połączyć z zapytaniami o media CSS, by określić różne wartości minimalne dla różnych rozmiarów ekranów:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Nie zalecamy rezerwowania miejsca za pomocą kodu JavaScript, ponieważ może to spowodować przesunięcie układu podczas wczytywania skryptu. Rezerwowanie miejsca za pomocą kodu CSS pozwala uniknąć tego ryzyka.
Elastyczne boksy reklamowe
Elastyczne boksy reklamowe nie określają stałego zestawu rozmiarów, które obsługują. Zamiast tego automatycznie dostosowują swój rozmiar do wyświetlanych w nich treści kreacji, co pozwala na obsługę kreacji o nieokreślonym rozmiarze. W związku z tym nie można zarezerwować miejsca na te boksy przed przesłaniem treści reklamy, a reklamy o płynnej wielkości zawsze powodują przesunięcia układu.
Aby ograniczyć wpływ przesunięcia układu podczas pracy z elastycznymi boksami reklamowymi, zalecamy wykonanie tych czynności:
- Rozmiaru
fluidużywaj tylko w przypadku boksów w części strony widocznej po przewinięciu. - Pobieraj elastyczne boksy jak najwcześniej, aby zminimalizować ryzyko, że użytkownik przewinie je do widocznego obszaru, zanim zmieni się ich rozmiar.
Zwijanie i rozwijanie boksów reklamowych
Metoda collapseEmptyDivs() pozwala zwinąć elementy div boksu reklamowego, aby nie zajmowały miejsca na stronie, gdy nie ma treści reklamy do wyświetlenia. Należy jednak zachować ostrożność podczas korzystania z tej funkcji, ponieważ może ona powodować niezamierzone zmiany układu. Jak już wspomnieliśmy w poprzedniej sekcji, zwijanie i rozwijanie boksów reklamowych może powodować zmiany układu w 2 różnych momentach cyklu życia reklamy.
Jeśli chcesz korzystać z tej funkcji, możesz ograniczyć wpływ zmian układu, korzystając z historycznych danych o wypełnianiu z raportów Ad Managera, aby wdrożyć te sprawdzone metody:
- Miejsca, które prawdopodobnie zostaną wypełnione, powinny być zawsze rozwinięte.
- Miejsca, które prawdopodobnie nie zostaną wypełnione, powinny być zawsze zwinięte.
Przykładowa implementacja znajdziesz w przykładzie Zwijania pustych boksów reklamowych.