Jak zoptymalizować swoją witrynę pod kątem podstawowych wskaźników internetowych (Adsense)

Wyścig w celu ulepszenia Core Web Vitals nie jest łatwy. Robi się trudniej, jeśli polegasz na programie reklamowym, takim jak Google AdSense, do zarabiania na swojej witrynie.

Witryny korzystające z Google AdSense są 10 razy bardziej narażone na niepowodzenie testu Core Web Vitals niż ta sama witryna bez Google AdSense. Wynika to głównie z liczby żądań i zasobów stron trzecich, które Google AdSense dodaje do Twojej witryny. Większość z tych zasobów jest niezoptymalizowana, duża i nieprzyjazna dla użytkownika.

Poza AdSense i platformami reklamowymi, jeśli masz dużo niezoptymalizowanych obrazów, kodu JavaScript i CSS, zwłaszcza w części strony widocznej na ekranie, jest bardzo prawdopodobne, że nie zdasz testu Core Web Vitals.

Jeśli masz problemy z przejściem testu Core Web Vitals i poprawą swojego potencjału w rankingu wyszukiwarek, w tym artykule znajdziesz praktyczne rozwiązania.

Co to są kluczowe wskaźniki internetowe?

Podstawowe wskaźniki internetowe to wskaźniki oparte na Google Lighthouse, które określają, w jaki sposób witryna zapewnia dobre wrażenia na stronie. Chociaż podczas uruchamiania testu istnieje wiele metryk, najważniejszymi metrykami są Największe wyrenderowanie treści (LCP), Opóźnienie pierwszego wejścia (FID) i Kumulatywne przesunięcie układu (CLS).

Google ogłosił, że od maja 2021 r. wskaźniki te staną się częścią ich sygnałów rankingowych wykorzystywanych do określania pozycji stron internetowych w wynikach wyszukiwania.

Podsumowując, można powiedzieć, że Core Web Vitals nie miało być postrachem dla webmasterów, ale środkiem do poprawy jakości stron internetowych.

Największe wyrenderowanie treści (LCP) : LCP mierzy czas potrzebny do załadowania największego widocznego obrazu lub bloku tekstu na stronie internetowej. Jeśli największy widoczny tekst lub obraz ładuje się szybko, można zauważyć, że reszta obrazów i tekstu ładuje się szybko. Wymagany czas ładowania to 2,5 sekundy .

Opóźnienie pierwszego wejścia (FID) : FID mierzy interaktywność strony internetowej. Jest to określane przez czas potrzebny przeglądarce na rozpoczęcie przetwarzania modułów obsługi zdarzeń po kliknięciu przez użytkownika witryny. Jest to powszechnie nazywane pierwszym wrażeniem Twojej witryny. Wymagany czas do przejścia to 100 milisekund .

Kumulatywne przesunięcie układu (CLS) : CLS mierzy przesunięcie układu, które ma miejsce na stronie internetowej. Kiedy strona ładuje się, a potem nagle coś pojawia się lub znika, a strona musi dostosować się do tego, by była większa lub mniejsza, mierzy się to przesunięcie. To jest straszne dla doświadczenia użytkownika i zgadzam się. Wynik, który powinieneś zdać, to 0,1 .

Jak zoptymalizować swoją stronę internetową pod kątem Core Web Vitals

Wykonaj następujące kroki, aby zoptymalizować swoją witrynę:

1. Zacznij od szybkiego hosta internetowego

Jeśli masz hosta internetowego z okropnym czasem reakcji, każda inna rzecz, którą tutaj wymienię, może nie dać pożądanych rezultatów. Im szybciej serwer odpowiada na żądania, tym lepiej.

Dlaczego host internetowy z szybkim czasem do pierwszego bajtu (TTFB) jest ważny? Niektórzy twierdzą, że TTFB nie ma znaczenia, ale ma. To jest podstawa wszystkiego innego. Jeśli masz użytkowników w miastach z wolnym internetem, to, jak szybko Twój host internetowy może odpowiedzieć, będzie miało znaczenie. Każdy host internetowy może dobrze działać, jeśli masz użytkowników głównie z miast z superszybkim internetem.

Spróbuj przetestować, jak Twój usługodawca hostingowy będzie odpowiadał na 3G lub 2G zamiast na 4G. Ponieważ jeśli masz wielu użytkowników łączących się przez 3G lub 2G, sumuje się to do twojego wyniku Core Web Vitals. Tak więc liczy się każda milisekunda. Różnica między uzyskaniem 100 ms w FID a uzyskaniem 101 ms polega na tym, że przy 100 ms pasujesz, ale przy 101 ms zawodzisz. Tak więc, jeśli ktoś powie Ci, że 1 ms nie ma znaczenia, może się mylić.

Wybierając hosta internetowego, zawsze upewnij się, że centrum danych znajduje się bliżej większości użytkowników Twojej witryny. Możesz znaleźć ich lokalizacje, przeglądając swoje statystyki. Skąd pochodzi większość Twoich użytkowników? Wybierz centrum danych bliżej nich. Im bliżej, tym lepiej.

Osobiście zauważyłem znaczną zmianę w danych terenowych dotyczących podstawowych wskaźników internetowych witryny po zmianie hosta internetowego. Nie zrobiłem nic więcej.

Jeśli szukasz szybkiego hosta internetowego, istnieje wiele rekomendacji, które są kierowane wyłącznie przez partnerów bez szczerości. Jeśli korzystasz z WordPressa i możesz sobie na to pozwolić, gorąco polecam Kinsta. Są najlepsze dla WordPressa. Jeśli potrzebujesz czegoś tańszego lub nie korzystasz z WordPressa, Cloudways również jest bardzo skuteczny.

2. Użyj lekkiego i zoptymalizowanego pod kątem szybkości motywu

Ta wskazówka jest szczególnie przydatna dla osób niebędących koderami, a nawet dla koderów, którzy mają mniej czasu. Zwłaszcza jeśli korzystasz z WordPressa, gdzie jest tak wiele opcji, upewnij się, że używasz lekkiego i zoptymalizowanego pod względem szybkości motywu.

Ponieważ motyw jest jak szkielet Twojej witryny, jeśli szkielet jest uszkodzony, ciało zostanie zerwane. To jest właśnie to.

Istnieje długa lista najlepszych praktyk, których należy szukać w motywie. Niektóre z najczęstszych złych praktyk są nadmiernie zależne od JQuery, ładując zbyt wiele CSS/JS, gdy nie są potrzebne, duży rozmiar motywu i nie tylko. Zawsze możesz użyć narzędzia takiego jak Yellow labs, aby przetestować demo.

Jeśli korzystasz z WordPressa, możesz sprawdzić listę najszybszych motywów WordPress.

3. Zoptymalizuj swoje obrazy

Obrazy są fajne. Sprawiają, że treść jest tak atrakcyjna. Ale mogą być ciężarem, jeśli nie są zoptymalizowane. Posiadanie dużych obrazów, takich jak 3 MB, z pewnością wpłynie na szybkość. A jeśli te obrazy są widoczne, gdy Twoja witryna jest odwiedzana przed przewijaniem, z pewnością wpłyną one na Twoje dane LCP.

Prawda jest taka, że ​​niezoptymalizowane obrazy zwiększają rozmiar Twojej strony. Im większy rozmiar strony, tym dłużej trwa ładowanie.

Osobiście wolę optymalizować każdy obraz przed jego przesłaniem. Nie korzystam z żadnych zewnętrznych usług do optymalizacji obrazu. Jeśli jednak korzystasz z WordPressa lub podobnego CMS, istnieją wtyczki i rozwiązania do automatycznej optymalizacji obrazów. Istnieją również rozwiązania chmurowe niezależnie od tego, z czego korzystasz.

4. Usuń lub zmniejsz rozmiar obrazów tła

Obrazy tła są zwykle bardzo duże. I może spowolnić czas ładowania, ponieważ musi zostać załadowany przed wyświetleniem znaczącej treści.

Możesz całkowicie usunąć obraz tła, aby mieć szybszą stronę internetową. Jeśli są tak ważne, rozważ zoptymalizowanie ich do najmniejszego możliwego rozmiaru lub użycie wzorów zamiast obrazów.

5. Użyj pamięci podręcznej przeglądarki

Jeśli masz wielu lojalnych czytelników, powinieneś rozważyć buforowanie przeglądarki. Gdy użytkownik odwiedza Twoją witrynę po raz pierwszy, przeglądarka zapisuje tę witrynę w pamięci podręcznej. Przy każdej kolejnej wizycie ładuje się natychmiast. Może to znacznie poprawić FID i LCP od drugiej wizyty w górę.

W przypadku użytkowników WordPress większość wtyczek do buforowania może pomóc w osiągnięciu tego celu.

6. Zminimalizuj JavaScript i odłóż nieużywany JavaScript

Chociaż JavaScript jest niesamowity, często blokuje renderowanie. Oznacza to, że może to wpłynąć na czas ładowania, a ostatecznie na FID.

Spróbuj zminimalizować JavaScript, usuwając spacje i komentarze, aby zmniejszyć rozmiar pliku. Upewnij się również, że odkładasz niekrytyczny JavaScript. To powinno poprawić twój FID.

Dla użytkowników WordPress istnieją wtyczki, takie jak Autoptimize, WP Rocket i inne, które mogą to zrobić za Ciebie.

7. Ustaw atrybut rozmiaru AdSense

Jeśli korzystasz z AdSense w swojej witrynie i zmagasz się z CLS, może to rozwiązać wszystkie Twoje problemy. Zrobiło to dla mnie i powinno dla Ciebie.

Jeśli masz jednostkę reklamową w pobliżu nagłówka, która jest widoczna podczas wizyty użytkownika, jednym z problemów jest to, że reklama może nie wczytać się od razu. Może się załadować po załadowaniu strony, a kiedy to zrobi, następuje przesunięcie w układzie. Jest to bardzo częste w przypadku elastycznych jednostek reklamowych. W takim przypadku nie można przejść metryki CLS.

Najlepszym sposobem na poradzenie sobie z tym jest niewielka edycja kodu AdSense. Bez obaw, to jest bardzo uzasadnione. Wystarczy określić atrybut rozmiaru reklamy, zwłaszcza wysokość. Po wykonaniu tej czynności nie zauważysz już zmiany układu podczas wczytywania reklamy.

Poniżej znajduje się przykład elastycznej jednostki reklamowej, której użyłem na moim blogu tuż pod nagłówkiem. Zamieniłem swój identyfikator wydawcy i boks reklamowy na XXXXXX. Zauważyłem, że dodałem atrybut wysokości (min-wysokość: 300px). W chwili, gdy to zrobiłem, wszystkie problemy z CLS zniknęły na zawsze.

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Header ad --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

To, co robi, to zarezerwowanie tego rozmiaru na stronie. Dlatego za każdym razem, gdy wyświetlają się reklamy, nie ma zmiany układu, ponieważ już ustawiłeś rozmiar.

8. Ustaw atrybut rozmiaru dla swoich obrazów i innych mediów

Podobnie jak w przypadku reklam, obrazy i inne media mogą powodować zmiany układu, gdy są ładowane do Twojej witryny. Być może po prostu coś czytasz, a potem ładuje się obraz i nagle następuje przesunięcie układu, to, co czytasz, jest poza zasięgiem wzroku i widzisz tylko coś innego lub nawet przez pomyłkę klikasz coś innego.

Możesz tego uniknąć, ustawiając atrybut rozmiaru na pliki multimedialne. Twoja metryka CLS będzie zadowolona, ​​że ​​tak zrobiłeś.

9. Lazy Load obrazy.

Być może znasz porady dotyczące PageSpeed ​​Insight dotyczące odkładania obrazów poza ekranem. Oznacza to po prostu leniwe ładowanie obrazów.

To, co robi leniwe ładowanie, to zmniejszenie rozmiaru strony, a także skrócenie czasu ładowania strony, gdy użytkownik ją odwiedza. Co jest dobre dla metryk CWV.

Pomoże to w szczególności ulepszyć LCP.

10. Optymalizuj CSS, minimalizując i generując krytyczne CSS

CSS sprawia, że ​​witryna wygląda fajnie, ale duży plik CSS może być dużym problemem, ponieważ opóźni renderowanie strony dla użytkownika.

Gdy użytkownik odwiedza Twoją witrynę, przeglądarka, zachowując się normalnie, opóźnia renderowanie Twojej strony internetowej użytkownikowi, dopóki nie zostanie załadowana, przeanalizowana i wykona wszystkie CSS, do których odwołuje się nagłówek Twojej strony internetowej. Jeśli masz duży plik CSS, może to być duży problem. Spowolni to twoją stronę.

Krytyczny CSS może pomóc, ładując tylko CSS, który jest niezbędny do załadowania strony. Podczas gdy reszta CSS może być ładowana asynchronicznie.

Pomocne może być również zminimalizowanie kodu CSS poprzez usunięcie spacji i komentarzy w celu zmniejszenia rozmiaru pliku.

Możesz także usunąć nieużywany CSS. Jeśli usługa, z której korzystasz, wypycha nieużywane CSS, możesz je bezpiecznie usunąć.

Jeśli korzystasz z WordPressa, istnieją wtyczki, takie jak WP Rocket, LiteSpeed ​​Cache, FlyingPress i inne, które mogą Ci w tym pomóc.

11. Zaimplementuj inteligentne ładowanie AdSense

Ta metoda może prawie całkowicie wyeliminować wszystkie wyzwania, jeśli AdSense jest odpowiedzialny za spowolnienie Twojej witryny.

Chodzi o ładowanie AdSense w inteligentny sposób. AdSense nie zostanie załadowany, dopóki użytkownik nie wykona czynności, takiej jak przewijanie lub klikanie. To znacznie skróci czas ładowania i skróci wszystkie kluczowe wskaźniki internetowe, na które ma wpływ AdSense.

Istnieje wiele wtyczek WordPress, które mogą Ci w tym pomóc, na przykład WP Rocket i Flying Scripts. Ta metoda, o ile wiem, nie narusza zasad Google AdSense.

Uwaga: ta metoda może pomóc poprawić postrzeganą szybkość i wyniki stron, ale może mieć wpływ na przychody z AdSense. Polecam przeprowadzić eksperyment, aby upewnić się, czy jest tego wart

12. Użyj czcionki System Stack, jeśli możesz

Czcionki wydłużają czas ładowania w dowolnej witrynie. W przypadku stron internetowych bez obrazów blok tekstowy może odpowiadać za ocenę LCP. W takim przypadku Twój wynik LCP będzie bezpośrednio zależał od czcionki.

Chociaż Google Font i Font Awesome wciąż się poprawiają, użycie czcionki stosu systemowego zapewnia znaczną poprawę. Chociaż nie tak fantazyjne, w zależności od urządzenia.

13. Użyj CDN

Jeśli masz użytkowników z różnych części świata, korzystanie z sieci CDN może pomóc w zwiększeniu szybkości i pośrednio w metrykach Core Web Vitals.

CDN w prostym wyjaśnieniu tworzy wiele kopii Twojej witryny i przechowuje je w różnych punktach obecności (POP) w różnych częściach świata. Gdy ktoś prosi o Twoją witrynę, wyświetla Twoją witrynę z najbliższej lokalizacji.

Na przykład, jeśli Twoja witryna jest hostowana w Stanach Zjednoczonych, a użytkownik z Wielkiej Brytanii, zamiast pobierać witrynę ze Stanów Zjednoczonych, CDN będzie obsługiwać Twoją witrynę z Wielkiej Brytanii. Efektem tego będzie szybka dostawa. Prędkość.

Możesz sprawdzić najlepsze sieci CDN.

14. Skonfiguruj wstępne pobieranie DNS

Jeśli korzystasz z usługi zewnętrznej, takiej jak CDN, do dostarczania swojej witryny, może być konieczne skonfigurowanie wstępnego pobierania DNS, aby zminimalizować opóźnienia spowodowane wyszukiwaniem DNS.

Wstępne pobieranie DNS spowoduje wstępne pobranie DNS przed jego wywołaniem. Tak, że ładuje się natychmiast po wywołaniu.

15. Zoptymalizuj skrypty innych firm

Sprawdź, czy niektóre usługi, z których korzystasz w Twojej witrynie, nie dodają skryptów innych firm, które mogą spowalniać Twoje witryny.

Możesz zastąpić rozwiązanie żądaniami innych firm, które spowalniają Twoją witrynę, lepszym rozwiązaniem.

Jeśli chodzi o Google AdSense, kolejny skrypt innej firmy, niewiele możesz zrobić. Najlepszą praktyką jest użycie maksymalnie 3 reklam zjednoczonych na stronie. Unikaj dopasowanych treści, ponieważ przynosi to niskie dochody, ale wydłuża czas ładowania.

16. Usuń AdSense z górnej części ekranu

Ta rada opiera się na eksperymentach. Jeśli wszystkie dane w raporcie konsoli wyszukiwania są prawidłowe, z wyjątkiem LCP, najpierw upewnij się, że Twoje obrazy i czcionki są zoptymalizowane. Jeśli są zoptymalizowane i nadal nie udaje Ci się LCP, może być za nie odpowiedzialny AdSense.

Jeśli możesz sobie na to pozwolić, usuń AdSense z górnej części ekranu na miesiąc i sprawdź, czy problem zniknie.

Jeśli nie chcesz go usuwać, możesz opóźnić to ręcznie lub za pomocą wtyczki, takiej jak Flying Scripts.

17. Przełącz na AMP

AMP oznacza przyspieszone strony mobilne. Ideą AMP jest optymalizacja stron internetowych, aby szybciej ładowały się na urządzeniach mobilnych. I oczywiście projekt open source AMP został zapoczątkowany przez Google.

Chociaż AMP pierwotnie miał na celu przyspieszenie stron mobilnych, może również przyspieszyć strony na komputery.

Strony AMP są stale szybsze niż strony mobilne lub komputerowe, a według naszych obserwacji czasami o ponad 100%.

Jeśli jedyną strategią zarabiania w Twojej witrynie jest Google AdSense, możesz rozważyć zmianę całej witryny na AMP. Osobiście zauważyłem, że na moim blogu AdSense na stronach AMP czasami konwertuje więcej niż na urządzeniach mobilnych i stacjonarnych!

Wniosek

Podstawowe informacje o sieci Web mogą pomóc ulepszyć witrynę dla użytkowników, nie tylko dla Google. Bardzo często zdarza się, że wynik testu danych laboratoryjnych jest dobry, ale zły wynik danych terenowych.

Wynika to ze składu Twoich użytkowników. Jeśli większość Twoich użytkowników pochodzi z miejsc z wolnym internetem, być może wykonałeś dobrą robotę optymalizując, ale nadal nie udaje Ci się uzyskać danych terenowych.