Przesunięcie układu ma miejsce, gdy widoczny element na stronie zmienia położenie lub rozmiar, co wpływa na położenie treści wokół niego. Czasami zmiana jest zamierzona, np. gdy kontener rozwija się w wyniku działania użytkownika. Dynamiczny charakter reklam może jednak powodować nieoczekiwane przesunięcia układu, co negatywnie wpływa na wrażenia użytkowników i może spowodować poważne problemy z obsługą.
Z tego przewodnika dowiesz się, jak mierzyć i minimalizować przesunięcie układu podczas pracy z tagami wydawcy Google (GPT).
Jak reklamy powodują przesunięcie układu
Żądania reklam są zazwyczaj wysyłane asynchronicznie i dynamicznie dodają treść do strony w trakcie jej wczytywania lub po jej wczytaniu. Podczas pobierania reklam reszta strony wciąż się wczytuje, a treści niebędące reklamami mogą być widoczne dla użytkownika. Jeśli nie zarezerwujesz wystarczającej ilości miejsca na wczytywane reklamy, po dodaniu do strony treści, które nie są reklamami, mogą zostać usunięte.
W przypadku korzystania z tagów wydawcy Google w kilku etapach cyklu życia reklamy może nastąpić przesunięcie układu:
- Kiedy następuje wywołanie
display(). Przedział może się rozwijać lub zwijać w zależności od konfiguracji. - Podczas renderowania treści reklamy. Rozmiar boksu może się zmienić, jeśli wyświetla się reklama elastyczna lub jeśli z innego powodu jest za mało miejsca. W tym momencie boks może się rozwinąć lub zwinąć.
- Po wyrenderowaniu treści reklamy Niektóre typy kreacji rozwijają się po wyświetleniu na stronie.
Pamiętaj, że im wyżej w widocznym obszarze znajduje się boks reklamowy, tym więcej treści może on przenieść. Zachowaj szczególną ostrożność, umieszczając boksy w górnej części początkowego widocznego obszaru (w części strony widocznej na ekranie). Boksy te mogą powodować nieproporcjonalne przesunięcie układu, bo zwiększa się prawdopodobieństwo ich widoczności podczas wczytywania treści reklamy.
Pomiar przesunięcia układu
Skumulowane przesunięcie układu (CLS) to podstawowe wskaźniki internetowe, które pozwalają mierzyć wpływ przesunięcia układu w witrynie – zarówno w laboratorium, jak i w terenie.
W laboratorium
Narzędzia laboratoryjne mierzą CLS syntetycznie. Oznacza to, że nie polegają na prawdziwej interakcji użytkownika, dzięki czemu doskonale nadają się do stosowania w procesach ciągłej integracji i lokalnych przepływów pracy. Narzędzia te mierzą jednak zwykle wydajność tylko podczas wczytywania strony i są ograniczone w warunkach, które można symulować, więc raportowane wartości mogą być niższe niż rzeczywiste.
Publisher Ads Audits for Lighthouse to narzędzie służące do pomiaru CLS, które można przypisać konkretnie do reklam GPT. Więcej informacji znajdziesz w dokumentacji kontroli ograniczania przesunięcia układu związanego z reklamami.
Narzędzia deweloperskie w Chrome można też skonfigurować tak, aby podświetlać zmiany układu, gdy poruszasz się po witrynie. Pozwala to ręcznie zidentyfikować przesunięcia układu występujące w pobliżu boksów reklamowych na stronie.
W polu
Narzędzia terenowe mierzą wskaźnik CLS widoczny dla rzeczywistych użytkowników podczas interakcji z Twoją witryną. Ten proces jest znany pod nazwą rzeczywistego monitorowania użytkowników (RUM). RUM pozwala obserwować, jak na wartość CLS wpływają czynniki rzeczywiste (takie jak możliwości urządzeń, warunki sieci, interakcje użytkowników i personalizacja strony), które są często trudne lub niemożliwe do symulacji 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 reklamowym div. Mimo że ta metoda sprawdza się w przypadku statycznych boksów reklamowych o stałym rozmiarze, bardziej złożone scenariusze mogą wymagać bardziej szczegółowego podejścia. W kolejnych sekcjach opisujemy niektóre typowe scenariusze.
Boksy reklamowe o wielu rozmiarach
W przypadku boksów reklamowych, które akceptują wiele rozmiarów, zalecamy stosowanie jednej z tych metod:
- Zarezerwuj miejsce na największy rozmiar skonfigurowany do wyświetlania.
- Zarezerwuj miejsce na najmniejszy rozmiar skonfigurowany do wyświetlania.
- Zarezerwuj miejsce na rozmiar, który ma największe szanse na wyświetlenie reklamy, określony na podstawie historycznych danych o wypełnieniu z raportów Google Ad Managera.
Wybór odpowiedniego podejścia
Zarezerwowanie miejsca dla największego rozmiaru skonfigurowanego do wyświetlania to najskuteczniejszy sposób na wyeliminowanie przesunięć układu. Ta metoda może jednak spowodować, że wokół reklamy pojawi się dodatkowe puste miejsce, jeśli wyświetli się kreacja o rozmiarze mniejszym niż zarezerwowana. Zmniejszenie boksu reklamowego w celu dopasowania do rozmiaru wyświetlanej kreacji spowoduje dodatkowe przesunięcie układu, więc jest zalecane, by tego uniknąć. Zamiast tego można użyć wyśrodkowania w pionie i poziomie, aby ograniczyć wizualny efekt nadmiernego pustego miejsca.
Z drugiej strony zarezerwowanie miejsca dla najmniejszego rozmiaru skonfigurowanego do wyświetlania pozwala uniknąć niepotrzebnego pustego obszaru wokół reklamy. Może to być dobre rozwiązanie, jeśli Twój boks reklamowy jest zazwyczaj wypełniany mniejszymi reklamami lub gdy wszystkie rozmiary obsługiwane przez boks są podobne. Powoduje to jednak przesunięcie układu w sytuacji, gdy wyświetlana jest kreacja o rozmiarze większym niż zarezerwowana (chociaż takie zmiany są zwykle mniejsze w porównaniu z brakiem zarezerwowania miejsca).
Aby zachować równowagę między pustymi obszarami a przesunięciami układu, możesz zarezerwować „średnią” ilość miejsca na boksy reklamowe. Na przykład zarezerwowanie elementu 100px w pionie powoduje, że podczas wyświetlania kreacji 320x50 zostanie wyświetlona niewielka pusta przestrzeń, ale zmniejszy się wynik CLS w porównaniu z rezerwacją miejsca. Aby znaleźć optymalną równowagę w witrynie, musisz eksperymentować z różnymi rozmiarami.
Aby podjąć bardziej świadomą decyzję, przy określaniu ilości miejsca na dane przedziały czasu możesz podjąć przemyślaną decyzję, analizując historyczne dane wypełnienia pochodzące z raportów Google Ad Managera. Pokazuję to najlepiej na kilku przykładach.
Przykład 1
| Wymiar kreacji (wyświetlone) | Wyświetlenia z serwera reklam (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
W tym przypadku zarezerwowanie wartości 250px w pionie 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 nie więcej niż 90px, więc zarezerwowanie obrazu 90px w pionie powinno przez większość czasu uniknąć przesunięcia układu.
Jak zarezerwować miejsce
Aby rozwiązać ten problem, określ rozmiar boksu reklamowego 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żliwić przeglądarce zwiększanie rozmiaru kontenera w razie potrzeby. Dzięki temu żadna treść nie zostanie ucięta przy wyświetleniu większej kreacji.
Możesz łączyć tę metodę z zapytaniami o media CSS, by określać różne wartości minimalne dla różnych rozmiarów ekranów:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Nie należy rezerwować miejsca za pomocą JavaScriptu, ponieważ może to spowodować przesunięcie układu podczas wczytywania skryptu. Zarezerwowanie miejsca w CSS pozwala uniknąć tego ryzyka.
Elastyczne boksy reklamowe
Elastyczne boksy reklamowe nie mają ustalonego zestawu rozmiarów, które obsługują. Zamiast tego boksy te automatycznie zmieniają rozmiar, by dopasować się do wyświetlanych w nich treści kreacji, co umożliwia obsługę kreacji o nieokreślonych rozmiarach. W efekcie nie można zarezerwować miejsca na te boksy przed wysłaniem żądania treści reklamy, a reklamy o rozmiarach elastycznych zawsze powodują przesunięcie układu.
Aby ograniczyć skutki przesunięcia układu podczas pracy z elastycznymi boksami reklamowymi, zalecamy wykonanie tych czynności:
- W boksie w części strony widocznej po przewinięciu użyj tylko rozmiaru
fluid. - Pobieraj przedziały elastyczne jak najszybciej, aby zminimalizować ryzyko, że użytkownik przewinie je do widoku, zanim rozmiar boksu zostanie zmieniony.
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 spowodować niezamierzone przesunięcia układu. Jak wspomnieliśmy w poprzedniej sekcji, zwijanie i rozwijanie boksów reklamowych może powodować przesunięcia układu w 2 różnych momentach cyklu życia reklamy.
Jeśli chcesz skorzystać z tej funkcji, możesz ograniczyć wpływ przesunięcia układu, korzystając z historycznych danych o wypełnieniu pochodzących z raportów Ad Managera, aby wdrożyć te sprawdzone metody:
- Boksy, które prawdopodobnie będą wypełnione, powinny zawsze być rozwinięte.
- Boksy, które prawdopodobnie nie zostaną wypełnione, powinny zawsze być zwinięte.
Przykład implementacji znajdziesz w przykładzie Zwijanie pustych boksów reklamowych.