TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak uzyskać wynik 100/100 w Google PageSpeed ​​Insights dla witryny WordPress?

34

Google ogłosił niedawno, że jakość strony będzie jednym z czynników algorytmu, który wpłynie na pozycje w rankingu wyszukiwania. Nowy termin Core Web Vitals, który widzisz w Google Search Console, staje się ważnym czynnikiem określającym przyszłość sieci. Zmusza to wszystkich webmasterów do zapewnienia szybkości ładowania witryny zgodnie z wymaganiami Google, aby uzyskać dobrą pozycję w wynikach wyszukiwania. Jeśli używasz WordPressa do hostowania swojej witryny, w rzeczywistości łatwo jest uzyskać wynik 100/100 w narzędziu Google PageSpeed ​​Insights.

To studium przypadku z własnym doświadczeniem. Dlatego wyraźnie wspominamy o wtyczkach / motywach / nazwach firm hostingowych. Co ważne, nie zawsze trzeba patrzeć na wynik PageSpeed, jeśli masz wyraźny obraz tego, co robisz. Na przykład możesz użyć płatnych reklam lub marketingu społecznościowego, aby promować swoją witrynę, która ma niski wynik szybkości strony. Dlatego kontekst tego artykułu ma zastosowanie dla blogerów, którzy chcą uzyskać wyższy wynik szybkości, zwiększając w ten sposób szansę na wyższy ranking w wyszukiwarkach i lepsze wrażenia użytkownika.

Statystyki Google PageSpeed

Jest kilka narzędzi; możesz użyć do monitorowania szybkości witryny WordPress. Google PageSpeed ​​Insights, Pingdom, GTmetrix i WebPage Test to jedne z najczęściej używanych narzędzi na liście. Ponieważ wyniki wyszukiwania Google decydują o ruchu w wielu witrynach, dobrze jest użyć narzędzia PageSpeed ​​Insights jako odniesienia.

Możesz przejść do narzędzia PageSpeed i wprowadzić dowolny adres URL strony, aby uzyskać wynik szybkości. Na wynik ma wpływ wiele czynników, które można przeczytać w oficjalnej witrynie programisty Google. Poniżej znajduje się podsumowanie czynników wpływających na wynik, który widzisz.

Czynnik Waga
Pierwsza pełna treści farba 15%
Indeks prędkości 15%
Największa zawartość farby 25%
Czas na interaktywność 15%
Całkowity czas blokowania 25%
Łączna zmiana układu 5%

Po przeanalizowaniu strony Google poda wynik w skali 100-punktowej. Poniżej znajdują się trzy zakresy wskazujące pozycję szybkości analizowanej strony.

  • 0-49: Słaba
  • 50-79: Wymaga poprawy
  • 80-100: dobry

Dlatego wynik 100/100 w Google PageSpeed ​​wskazuje, że Twoja witryna ładuje się bardzo szybko, oczywiście Google i użytkownicy pokochają szybkie ładowanie stron internetowych. Możesz skorzystać z kalkulatora punktacji Lighthouse, aby sprawdzić różne parametry wymagane do dynamicznej poprawy prędkości.

Pamiętaj, że oprócz wyżej wymienionych czynników, Google zasugeruje również możliwości, takie jak usunięcie nieużywanych skryptów lub usunięcie nieużywanego CSS. Są to jednak zalecenia i NIE będą miały wpływu na Twój wynik, nawet jeśli ciężko pracujesz, aby przeszły audyt. Mówimy o tym wyraźnie, ponieważ wielu blogerów uważa, że ​​usunięcie jQuery pomoże uzyskać wyższy wynik.

Wynik i rozmiar naszej strony internetowej

Zanim wyjaśnimy, jak uzyskać 100/100, chcemy pokazać wynik naszej strony głównej. Jak widać, otrzymujemy 100 zarówno na urządzenia mobilne, jak i stacjonarne.

Jak uzyskać wynik 100/100 w Google PageSpeed ​​Insights dla witryny WordPress?

Wynik strony głównej

Pamiętaj, że mówimy o tej stronie na żywo, która ma prawie 2000 postów na blogu i korzysta z około 20 wtyczek. Jeśli uda nam się uzyskać pełny wynik, jest to bardzo możliwe w przypadku witryn z mniejszą liczbą postów i wtyczek.

5 czynników, aby uzyskać wynik 100/100 w Google PageSpeed

Poniżej znajduje się 5 najważniejszych czynników, które szczegółowo omówimy, które uważamy za ważne dla uzyskania wyniku 100/100 w Google PageSpeed.

  1. Zdobądź dobrą firmę hostingową
  2. Brak kodów reklamowych
  3. Użyj lekkiego motywu
  4. Usuń ciężkie wtyczki
  5. Użyj wtyczki buforującej

Kilka innych czynników, takich jak czyszczenie bazy danych i CDN, może również pomóc w zależności od Twojej sytuacji. Omówimy również te aspekty.

1 Dobry hosting

Założyliśmy tę stronę na Weebly i przenieśliśmy się na WordPress z Bluehost. Później przenieśliśmy witrynę do planu SiteGround GoGeek, a następnie do SiteGround Cloud VPS w 2016 May. Od tego czasu nie było już odwrotu ani spędzania czasu na kwestiach związanych z hostingiem.

Niedawno SiteGround przeniósł swoją infrastrukturę, aby korzystać z platformy Google Cloud. To bardzo pomaga w uzyskaniu solidnego czasu pierwszej odpowiedzi z serwera. Nie używamy nawet Cloudflare ani żadnego innego CDN, aby uzyskać wynik 100/100 w Google PageSpeed. Chodzi o dobry hosting, którego używasz dla swojej witryny. Dlatego upewnij się, że kupiłeś plan hostingowy premium, taki jak SiteGround Cloud VPS lub podobny. Pomoże to zaoszczędzić mnóstwo czasu i skupić się na innych aspektach prowadzenia strony internetowej.

2 Brak kodów reklamowych

Prawie 90% blogerów zaczyna blogować w celu zarabiania pieniędzy w Internecie. Pierwszym wyborem dla nich jest zgłoszenie się do Google AdSense, a drugim wyborem jest wypróbowanie marketingu afiliacyjnego. Ponieważ marketing afiliacyjny potrzebuje witryny godnej zaufania, Google AdSense jest idealną opcją dla nowych blogerów.

Korzystamy z Google AdSense i jest to nasze główne źródło dochodu do prowadzenia tej witryny. Wyjaśniliśmy problemy z AdSense i szybkością strony w naszym artykule – AdSense vs Page Speed ​​an Irony. Strona, którą przetestowaliśmy w PageSpeed, jest stroną główną tej witryny. Powodem, dla którego otrzymujemy wynik 100/100 jest to, że nie używamy kodu AdSense na stronie głównej. Jednak w całej witrynie dostępne są automatyczne reklamy. Kiedy sprawdziliśmy stronę po sprawdzeniu wyniku PageSpeed, stwierdziliśmy, że na dole strony była wyświetlana jedna reklama. Strona ładuje się szybciej, gdy pojedyncza reklama pojawia się na dole.

Pozwól nam pokazać wynik losowej strony zawierającej 5 reklam AdSense w tej witrynie. Jak widać, wynik mieści się w przedziale 55/90. To spadek o 45/10% na urządzeniach mobilnych i stacjonarnych.

Jak uzyskać wynik 100/100 w Google PageSpeed ​​Insights dla witryny WordPress?

Mobilna prędkość losowej strony

Jak uzyskać wynik 100/100 w Google PageSpeed ​​Insights dla witryny WordPress?

Szybkość losowej strony na pulpicie

Jeśli zdecydujesz się skorzystać z AdSense lub podobnych programów reklamowych, zapomnij o szybkości strony. Google PageSpeed ​​pokaże Ci wiele problemów związanych z ładowaniem skryptów innych firm w Twojej witrynie. Niestety nie będziesz w stanie rozwiązać tych problemów bez usunięcia kodu skryptu reklamowego.

Jak uzyskać wynik 100/100 w Google PageSpeed ​​Insights dla witryny WordPress?

Wpływ AdSense na szybkość

3 Użyj lekkiego motywu

Używaliśmy motywu Highend przez 4 lata. To bardzo dobry motyw z dołączonymi funkcjami. Niestety, nie wykorzystaliśmy 90% funkcjonalności, takich jak mapy, FAQ, referencje itp. Jednak motyw ładuje zasoby CSS i JS potrzebne do wszystkich tych funkcji, niezależnie od tego, czy korzystasz na stronie, czy nie. To bez znaczenia, jak posiadanie dużego pałacu, ale wciąż mieszkanie w małej chatce poza pałacem.

Niestety zmiana motywu nie była łatwa ze względu na ścisłą integrację motywu Highend w całej witrynie. Na przykład motyw Highend ma opcję integracji Google Analytics za pomocą opcji motywu. Spędziliśmy więc dużo czasu, aby znaleźć motyw zastępczy, który ma minimalny charakter, ale oferuje podstawowe funkcje bez wtyczek.

Na szczęście bardzo niewiele tematów spełniało nasze kryteria. Aby być precyzyjnym, wybraliśmy motywy GeneratePress i Astra, a później zdecydowaliśmy się na zakup GeneratePress. Po sześciu miesiącach prac migracyjnych zmieniliśmy motyw w czerwcu 2020 r. i wynik PageSpeed ​​wzrósł o co najmniej 30% (z reklamami AdSense).

Pięć poprzednich lat zostało straconych przez wybór niewłaściwego motywu, którego nie potrzebowaliśmy. Upewnij się, że nie popełniłeś tego samego błędu i kup premium i minimalistyczny motyw, który zaspokoi Twoje potrzeby. Motyw GeneratePress oferuje haki wykorzystujące elementy, sekcje, typografię i inne podstawowe funkcje, których potrzebujemy. Do innych celów lepiej używać wtyczek, abyśmy nie musieli tracić kolejnych pięciu lat na zmianę tego motywu.

4 Usuń ciężkie wtyczki

Podobnie jak w motywie, istnieją ciężkie wtyczki, które spowalniają prędkość strony. Wcześniej używaliśmy na tej stronie wtyczek WPBakery Page Builder, WooCommerce i WP Review. Teraz przenieśliśmy wszystkie te wtyczki wraz z motywem Highend do podkatalogu. Spowodowało to dla nas dużą utratę ruchu wraz z aktualizacjami algorytmu Google w maju 2020 r. Jednak musimy iść dalej z ~30% wzrostem prędkości.

Jeśli używasz lub planujesz znaleźć narzędzie do tworzenia stron lub podobne wtyczki, zatrzymaj się i pomyśl dwa razy.

  • Przekonwertowaliśmy układ WPBakery Page Builder i użyliśmy domyślnego Gutenberga do zbudowania naszej strony głównej. Nawet GeneratePress oferuje układy Elementora i własny program do tworzenia mini stron, jednak możesz na pewno tworzyć przyzwoite układy z nagłówkami jumbotron i bohaterami o pełnej szerokości za pomocą bloku Gutenberg Group.
  • Unikaj nadużywania wtyczek, takich jak WP Review – nadal używa niesamowitej czcionki 4.7 w cenie 97 USD (licencja na 3 witryny). To jest absolutnie absurdalne, ładując wersję 4.7 na każdej pojedynczej stronie, gdy wersja 6 jest uruchamiana. Pamiętaj, mówimy o 2000 stron, z których tylko 70 korzysta z szablonu recenzji z wtyczki. Jest to rodzaj kompromisu, o którym powinieneś pomyśleć przed zainstalowaniem jakiejkolwiek wtyczki na swojej stronie.
  • WooCommerce to kolejna wtyczka, która zabije Twoją witrynę, dodając wywołania administracyjne AJAX dla koszyka. Ponownie, 50 produktów na 2000 postów nie jest dobrym sposobem na trzymanie ich razem zarówno z punktu widzenia ruchu, jak i przychodów.

To są trudne sposoby uczenia się, których zrozumienie zajęło nam lata. Mam nadzieję, że zrozumiesz i użyjesz tylko wymaganych wtyczek na swojej stronie.

5 Użyj wtyczki buforującej

Używamy WP Rocket od ponad roku. Najlepszą częścią wtyczki jest to, że generuje krytyczne CSS dla każdego typu postu w Twojej witrynie. Wraz z buforowaniem i wstępnym ładowaniem krytyczny CSS zwiększy szybkość Twojej witryny do maksimum. Uwaga, używaliśmy również WP Rocket na motywie Highend z WooCommerce i innymi wtyczkami o dużej wadze, jak wyjaśniono powyżej. Jednak wynik to 30/60 w Google PageSpeed.

Wynika więc z tego, że wtyczka buforująca działa najlepiej z najlepiej zakodowanym motywem/wtyczkami. W przeciwnym razie będziesz mieć niewłaściwą kombinację bez większego wzrostu prędkości. Uwaga, SiteGround oferuje domyślne buforowanie serwera za pomocą wtyczki SG Optimizer. Jednak to nie działa dla nas nawet z prostym motywem GeneratePress. Ponieważ chcemy zachować pamięć podręczną niezależną od hostingu, WP Rocket lub podobna wtyczka była dla nas najlepszą opcją. Poniżej znajduje się buforowanie i inne funkcje, które otrzymasz dzięki WP Rocket:

  • Buforowanie przeglądarki, kompresja GZIP, usuwanie ciągu zapytania i optymalizacja czcionek Google.
  • Wyłącz osadzanie, emotikony i kontroluj interfejs API pulsu.
  • Generowanie krytycznego kodu CSS dla każdego typu posta ze wstępnym ładowaniem adresów URL na podstawie mapy witryny XML.
  • Hostuj jQuery Migrate, Google Analytics i Facebook Pixels, aby zwiększyć szybkość.
  • Połącz i minifikuj CSS i JS.
  • Czyszczenie zbędnych wpisów w bazie danych, takich jak stany nieustalone, poprawki i autozapisy.
  • Leniwe ładowanie obrazów, filmów i ramek.
  • Oddzielna pamięć podręczna dla urządzeń mobilnych i komputerów stacjonarnych, jeśli potrzebujesz.

Możesz także kupić CDN i użyć wtyczki do optymalizacji obrazu za dodatkową opłatą (nie korzystamy z tych funkcji).

Inne czynniki

Cóż, w całym Internecie znajdziesz słowo „CDN" mówiąc o szybkości witryny WordPress. SiteGround oferuje również bezpłatną integrację CDN z Cloudflare. O ile nie masz docelowych odbiorców w krajach zablokowanych w Internecie, takich jak Chiny, nie uważamy, że CDN może faktycznie drastycznie zwiększyć prędkość. W przypadku witryny takiej jak nasza pomoże to szybciej wyświetlać pliki statyczne, takie jak duże obrazy. Jednak SiteGround wprowadził Narzędzia witryny (zastępując cPanel ), które automatycznie generują obrazy WebP za pomocą wtyczki SG Optimizer. Nadal nie używamy dzięki tej funkcji możesz użyć dowolnej wtyczki WebP do obsługi lekkich obrazów w obsługiwanych przeglądarkach zamiast formatu PNG/JPEG.

Innym czynnikiem jest oczyszczenie bazy danych i witryny. Jak wspomniano, WP Rocket oferuje opcję czyszczenia bazy danych, którą można okresowo planować. Jednak to nie jest sprzątanie, o którym tutaj mówimy.

  • Czy wiesz, że wtyczka WooCommerce doda ponad 25 tabel do Twojej bazy danych? Jak wyjaśniliśmy tutaj, domyślna instalacja WordPressa będzie miała tylko 12 tabel dla jednej witryny. Spędziliśmy dużo czasu na migracji zamówień, produktów i plików WooCommerce. Musimy również usunąć miniatury WooCommerce, aby wyczyścić przestrzeń dyskową. Dowiedz się więcej o tym, jak całkowicie usunąć WooCommerce ze swojej witryny.
  • Wtyczka WP Review Pro doda ~ 25 niestandardowych pól do każdego tworzonego posta. Wszystko to nadyma postmeta tabeli. Wygeneruje również 2 dodatkowe miniatury dla każdego przesłanego obrazu.
  • WP Bakery i wiele innych wtyczek będzie mieć CSS, JS i inne zasoby w osobnym katalogu w folderze przesyłania. Skrypty te spowolnią działanie Twojej witryny, ładując się na wszystkich stronach.
  • Motyw Highend wygeneruje ~10 miniatur (zależy to od rozmiaru obrazu i opcji) dla każdego przesłanego obrazu.

Teraz, gdy zwykła zmiana motywu na GeneratePress i migracja ciężkich wtyczek do podkatalogu, nie pomoże w uporządkowaniu obecnego bałaganu. Jeśli zmieniasz motyw lub usuwasz wtyczki, usuń wszystkie ślady, które pozostawiają w tabelach wp_postmeta i wp_options. Pomoże to zwiększyć szybkość ładowania strony poprzez skrócenie czasu wykonywania zapytań do bazy danych.

Ostatnie słowa

Celowo napisaliśmy ten artykuł w taki sposób, czego NIE robić, aby uzyskać wynik 100/100 w narzędziu Google PageSpeed ​​Insights. To jest dla tych blogerów, którzy są w trakcie blogowania, próbując poprawić szybkość. Jeśli jednak jesteś nowym blogerem, powinno to dać ci jasne wyobrażenie o wpływie wyboru opcji, takich jak AdSense i ciężkich motywów z narzędziami do tworzenia stron. Jak mówi popularne przysłowie: „Prostota jest najwyższym wyrafinowaniem”, wybór tego, czego potrzebujesz, pomoże Ci uzyskać wysoki wynik, a także zaoszczędzić mnóstwo czasu.

Źródło nagrywania: www.webnots.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów