Popraw szybkość witryny dzięki audytom reklam wydawcy dla Lighthouse

Ten post został ostatnio zaktualizowany 6 września 2021 r

Wzrosła liczba próśb wydawców dotyczących szybkości wczytywania ich stron i ogólnego zachowania ich witryn. W dzisiejszym poście przyjrzymy się niektórym pytaniom podnoszonym przez wydawców, a później pokażemy, jak tworzyć własne raporty i lepiej oceniać ładowanie strony.

#1 – Witryna ładuje się wolno i ma niski wynik w narzędziach do raportowania

Ważne jest, aby zrozumieć, że ostateczne zachowanie witryny jest wypadkowąkilku czynników : technologii użytej do zbudowania strony, liczby elementów wyświetlanych w witrynie, sposobu ich przechowywania, obliczeń dokonywanych w czasie wykonywania itp. Narzędzia raportowania ( takie jak LightHouse, którą omówimy później) wskaże te kwestie.Zauważ, że te problemy nie są związane z naszym kodem, ponieważ są konsekwencją budowy witryny.

#2 – Kod MonetizeMore spowolnił witrynę

Im większa liczba jednostek reklamowych na stronie, tym więcej elementów należy załadować, dlatego zawsze należy wziąć pod uwagękompromis między szybkością strony a przychodami .Wydawcy muszą być tego świadomi przez cały czas. Nasz kod nie wpływa znacząco na wydajność witryny.Skrypt reklamowy MonetizeMore działa asynchronicznie , co oznacza, że ​​podczas trwania procesu licytacji w nagłówku reszta witryny ładuje się tak samo, jak bez naszego kodu.Podczas ustalania stawek w nagłówku nieuniknione jest, że skrypt wczytywania reklamy opóźnia renderowanie reklamy do momentu osiągnięcia limitu czasu ustalania stawki, co jest kolejnym kompromisem, który należy rozwiązać. Domyślny zalecany limit czasu to 2000 ms, aby uzyskać zdrową równowagę między szybkością wczytywania strony a dobrymi wskaźnikami wypełniania stawek w nagłówku. Obniżenie tego limitu czasu może pomóc w skróceniu czasu ładowania, tylko jeśli strona ładuje się szybciej niż ustawiony limit czasu. Zmniejszenie limitu czasu licytacji w nagłówku zwiększa prawdopodobieństwo, że aukcja licytacji w nagłówku zakończy się, zanim wszyscy skonfigurowani licytanci zwrócą swoje ostateczne oferty.

Latarnia morska

Będziemy korzystać z audytów reklam wydawcy dla Lighthouse, które znajdziesz tutaj: https://developers.google.com/publisher-ads-audits

Chociaż nasz skrypt może nie być głównym winowajcą wydajności strony, wydajność strony ma wpływ na ruch, dlatego staje się dla nas ważną kwestią. Dokonaj własnej oceny witryny i spróbuj odnieść się do sugestii/ostrzeżeń.

Z Chrome:

1.- Otwórz docelową stronę internetową

2.- Kliknij prawym przyciskiem myszy i wybierz Inspekcja

3.- Wśród narzędzi deweloperskich poszukaj ostatniego, zwanego Audits

4.- Wybierz odpowiednie kategorie i kliknij „Generuj raport”. Po kilku odświeżeniach strony zostanie wygenerowany i wyświetlony raport.

Zostanie wyświetlonych kilka kategorii, w których strona została oceniona:

• Wydajność: techniczna realizacja strony, która obejmuje interaktywność, szybkość i kodowanie.
• Dostępność: elementy projektu, które pozwalają osobom z określonymi niepełnosprawnościami na wygodniejsze korzystanie z treści
• Najlepsze praktyki: ogólne zalecenia, głównie w celu poprawy nawigacji i bezpieczeństwa
• SEO: optymalizacje dla wyszukiwarek w celu interakcji z witryną
• Progressive Web App: PWA to specyficzny typ strony, która bardzo przypomina aplikację mobilną, w prezentacji i pod maską. Oto sugestie optymalizacji dla tego typu witryn.

Większość tych informacji jest dość prosta. Jedną, na którą powinniśmy zwrócić szczególną uwagę, jest wydajność -> Diagnostyka, gdzie możemy zobaczyć wydajność kodów js, aw szczególności naszego.

Na powyższym obrazku (Diagnostyka -> Zmniejsz wpływ kodu strony trzeciej) widzimy, że nasz kod blokuje mniej niż jedną trzecią sekundy w głównym wątku (wątku odpowiedzialnym za ładowanie strony). Żaden z tych kodów nie blokuje zbytnio głównego wątku, ale cała grupa kodów stron trzecich wykorzystuje całą sekundę głównego wątku, czego ostatecznie doświadczają użytkownicy.

Na powyższym obrazku (Diagnostyka -> Skróć czas wykonania JavaScript) widzimy, że nasz kod wypada w czasie wykonania zgodnie z resztą kodów. Nawet jeśli czas wykonania był dłuższy, odbywa się to asynchronicznie w innym wątku, więc nie wpływa to na wydajność.

Rozważania

• Możesz przeprowadzić prosty test, uruchamiając ten raport bez naszych tagów, a następnie dodając nasze tagi i ponownie uruchamiając raport. Jak wspomniano, kompromisy spowodują spadek całkowitego wyniku, ale należy się tego spodziewać.
• Większość testów/wyników szybkości strony nie uwzględnia wymaganego opóźnienia podczas ustalania stawek za nagłówek i służy do oceny zakodowanych na stałe tagów reklam. Dlatego podczas wyświetlania na stronie z aktywną funkcją określania stawek w nagłówku nie uwzględniają funkcji niestandardowych i obniżają za to ocenę.
• Twoje własne wtyczki Chrome mogą znacznie zmienić wydajność samego raportu. Możesz spróbować przetestować stronę w czystszym środowisku:
  • Przejdź do następującej strony: https://developers.google.com/publisher-ads-audits.
  • Wklej adres strony
  • W Ustawieniach zaawansowanych aktywuj Uruchom dodatkowe audyty Lighthouse.
  • Kliknij Generuj raport
  • *Ten raport zawiera również raport dotyczący reklam wydawcy. Jeśli witryna jest skonfigurowana poprawnie, wynik powinien być wysoki, więc może to być dobry sposób na pokazanie wydawcom, że problem z wydajnością prawdopodobnie leży gdzie indziej
• Jeśli poprawa wydajności jest koniecznością, możesz rozważyć:
  • Zmniejszenie liczby jednostek reklamowych na stronie
  • Przeniesienie wywołania skryptu MonetizeMore na koniec strony lub wyżej, w oparciu o implementację innych ciężkich wywołań JS/resource
  • Skróć limit czasu licytacji w nagłówku do wartości, przy której nie ma znaczących strat w przychodzących ofertach (Można przetestować za pomocą PGAI: na karcie licytujących kodowanie kolorami otrzymanych ofert)
  • Leniwe ładowanie wszystkich pozycji reklam na wszystkich stronach. (Włącz SPA w dbAdmin i przełącz DIV na leniwy format)

Inne, bardziej techniczne sugestie mogą być następujące:

• Popraw ładowanie JavaScript: pojedyncze wywołanie ciężkiego skryptu lub wiele wywołań małych skryptów wpłynie negatywnie na wydajność. Zachowaj równowagę między zadaniami a połączeniami w JS. Można to zrobić tylko za pomocą plików JS, którymi pub może manipulować (nie na przykład naszego opakowania, GA lub skryptu Facebooka)
• Upewnij się, że każdy skrypt, który może działać asynchronicznie, robi to. Nasz skrypt już to robi
• Upewnij się, że zasoby (zdjęcia, filmy) są kodowane najnowszymi technologiami. Dzięki temu elementy mogą być kompresowane podczas podróży i dekompresowane podczas ładowania na stronie.

Potrzebujesz więcej pomocy? Zarejestruj konto Professional w MonetizeMore już dziś!