Optymalizacja Google PageSpeed jest istotną częścią rankingu każdego bloga lub strony internetowej w wynikach wyszukiwania Google. Oto mój przewodnik krok po kroku, jak zoptymalizować szybkość strony Twojego bloga WordPress i osiągnąć idealną wydajność 100 w Google PageSpeed Insights.
Szybkość ładowania Twojej witryny jest ważną częścią doświadczenie użytkownika na Twoim blogu. Dlatego posiadanie szybkiej strony internetowej jest niezbędne do odniesienia sukcesu, jeśli chcesz stworzyć blog.
Google klasyfikuje również strony internetowe na podstawie ich szybkości, korzystając z wyniku PageSpeed . Uzyskanie idealnego wyniku 100 w teście Google PageSpeed nie jest łatwe. Ale jestem tutaj, aby ci pomóc! Nie ma znaczenia, czy masz bloga, czy witrynę e-commerce, wyjaśnimy krok po kroku, jak podnieść swój wynik Google PageSpeed do 100.
Google PageSpeed Optimization: Jak zdobyć 100 punktów w PageSpeed Insights
Najpierw przejrzyjmy podstawy Google PageSpeed, a następnie zajmiemy się optymalizacją szybkości Twojego bloga.
Co to jest Google PageSpeed?
Szybkość strony to czas, w którym zawartość Twojej witryny dociera do przeglądarki użytkownika.
Jest to bardzo ważne, ponieważ użytkownicy odwiedzający Twoją witrynę nie chcą czekać na Twoje treści. Znasz to uczucie lub znajdujesz odpowiedź na swoje pytanie w Google, klikasz w link i w końcu się poddajesz, bo strona nie ładuje się szybko.
Google też to wie; dlatego szybkość Twojej witryny jest głównym czynnikiem rankingowym. Najpopularniejszym narzędziem do testowania szybkości witryny jest Google PageSpeed Insights . To najlepszy sposób, aby dowiedzieć się dokładnie, co Google myśli o Twojej witrynie pod względem szybkości strony.
Godne uwagi wskaźniki Google PageSpeed :
- Największa zawierająca treść farba (LCP): pomiar szybkości ładowania strony postrzeganej przez użytkowników. Głównie po załadowaniu zawartości powyżej strony zakładki.
- Opóźnienie pierwszego wejścia (FID) : mierzyć w sekundach opóźnienie, zanim użytkownik będzie mógł wejść w interakcję ze stroną internetową.
- Skumulowane przesunięcie układu (CLS) : mierzy w kilka sekund, aż układ strony przestanie się „zmieniać”. Na przykład ładowanie obrazu może spowodować zmiany układu witryny. Jest to ważne, ponieważ użytkownik może chcieć kliknąć coś w Twojej witrynie przed zakończeniem ładowania, co może skłonić go do kliknięcia czegoś innego.
- Pierwsza pełna zawartość farba (FCP): Miara czasu renderowania czegoś na ekranie.
- Interakcja z następną farbą (INP): Interaction to Next Paint obserwuje opóźnienie interakcji użytkownika ze stroną. Na przykład, jeśli użytkownik kliknie akordeon i nastąpi nieoczekiwane opóźnienie podczas otwierania.
- Czas do pierwszego bajtu (TTFB): mierzy czas do momentu otrzymania przez przeglądarkę odpowiedzi z serwera.
Te terminy są często używane w Google Search Console (raport Core Web Vitals), PageSpeed Insights i Chrome User Experience Report.
Dlaczego szybkość strony jest ważna?
Szybkość strony ma znaczenie ponieważ wpłynie to bezpośrednio natężenie ruchu et ile pieniędzy może zarobić Twój blog .
Studia (w języku angielskim) wykazały, że szybkość witryny wpływa bezpośrednio na współczynnik konwersji. Dane firmy Portent pokazują, że szybkość ładowania strony wynosząca 1 sekundę zamiast 5 sekund doprowadzi do prawie 50% spadku konwersji. Nie tylko czas ładowania Twojej witryny wpłynie na Twoje rankingi Google, ale także wpłynie na współczynnik konwersji.
Od Twojej pozycji w wynikach wyszukiwania Google po cierpliwość klientów — czas wczytywania strony w Twojej witrynie wpływa na każdy aspekt korzystania z niej przez użytkownika. Ponieważ użytkownicy korzystają głównie z urządzeń mobilnych, każdy kilobajt ładowany przez Twoją witrynę powinien być celowy.
Im dłużej użytkownik musi siedzieć i czekać na załadowanie strony, tym wyższy będzie również współczynnik odrzuceń. Szybkość Twojej witryny wpływa nie tylko na SERP Google, ale większość wyszukiwarek bierze pod uwagę szybkość strony. Dlatego posiadanie szybko ładującej się strony jest niezbędne w dzisiejszym internecie.
Na szczęście zbudowanie szybkiej strony nie jest zbyt trudne, jeśli korzystasz z nowoczesnych narzędzi i wiesz, co robić.
Jak przetestować szybkość swojej witryny
Jeśli nie znasz Google PageSpeed, jest to seria testów, które Google przeprowadza w Twojej witrynie, aby określić, jak szybko się ładuje. Gdy użytkownik w Google klika wynik wyszukiwania, oczekuje, że zostanie on szybko załadowany. Właśnie dlatego Google stworzył test Google PageSpeed Insights .
Otwórz Google PageSpeed Insights
Daje to właścicielom witryn narzędzia, dzięki którym dokładnie wiedzą, co spowalnia ich witrynę i jak to naprawić. Ponadto daje Google dane potrzebne do prawidłowego uszeregowania witryny w algorytmie wyszukiwarki.
Korzystanie z narzędzia jest tak proste, jak wpisanie adresu URL witryny i kliknięcie analizować. Test przebiegnie szybko i otrzymasz wiele kluczowych pomiarów. Ponadto, jeśli chcesz uruchomić test lokalny, możesz użyć lFlagowy produkt Google typu open source aby uzyskać podobne wyniki bezpośrednio w Twojej przeglądarce.
Innym sposobem sprawdzenia wydajności witryny jest skorzystanie z raportu synchronizacji strony z Google Analytics.
Prawdopodobnie nie będziesz musiał omawiać wszystkiego w tym artykule, ale omówię najczęstsze problemy z PageSpeed i sposoby ich naprawy.
Najlepsze praktyki PageSpeed: typowe problemy z Google PageSpeed i sposoby ich rozwiązywania
Większość porad w tej sekcji zakłada, że masz blog WordPress. Dołączyłem również bardziej szczegółowe instrukcje dla programistów dotyczące ręcznego rozwiązywania problemów.
Zdecydowanie najlepszym sposobem na poprawę szybkości ładowania witryny WordPress, jaki znalazłem, jest użycie WP Rocket . WP-Rocket to płatna wtyczka, ale warta swojej ceny, ponieważ od razu po wyjęciu z pudełka stosuje wiele najlepszych praktyk wydajnościowych. Aby rozwiązać większość problemów z szybkością strony, zaznaczę, czy WP-Rocket może pomóc i udostępnię darmową alternatywę, jeśli jest dostępna.
Twój motyw WordPress będzie również odgrywał ważną rolę w istotnych elementach sieci.
Przyspiesz czas odpowiedzi serwera
Szybki czas odpowiedzi serwera jest niezbędny do uzyskania świetnego wyniku Google PageSpeed. Zasadniczo czas odpowiedzi serwera to czas potrzebny serwerowi witryny do wygenerowania strony internetowej. Jest to jedna z najłatwiejszych rzeczy do naprawienia, jeśli widzisz to ostrzeżenie w raporcie PageSpeed .
Najczęstszym sposobem na wyeliminowanie tego problemu jest użycie buforowania strony. Oznacza to, że Twoja witryna będzie obsługiwać stronę internetową z pamięci podręcznej, więc sam serwer będzie musiał wykonać niewielką lub żadną pracę.
- Włącz buforowanie strony: gdy użytkownik żąda strony z Twojej witryny, musi ona zostać wyrenderowana i udostępniona. Ten proces można całkowicie pominąć za pomocą buforowania strony. Zasadniczo, gdy użytkownik odwiedza stronę w Twojej witrynie, zostanie ona zapisana dla następnego użytkownika w pamięci podręcznej, aby można ją było natychmiast zwrócić. Wiele firm hostingowych WordPress ma wbudowane buforowanie stron, ale jeśli widzisz długi czas odpowiedzi serwera, prawdopodobnie nie jest ono włączone. Niektóre z najlepszych rozwiązań do buforowania stron WordPress obejmują: WP Rocket , W3 Razem Cache et Cache Enabler.
- Użyj nowoczesnego stosu: wersje PHP i MySQL używane przez Twojego dostawcę usług hostingowych odgrywają ważną rolę w szybkości strony. Firmy hostingowe powinny zapewnić Ci ochronę po tej stronie. Jeśli jesteś programistą, oznacza to bycie na bieżąco z najnowszą wersją PHP i rozwiązań bazodanowych.
Włącz kompresję
Twoja witryna może skompresować zawartość i rozmiar strony przed wysłaniem jej do przeglądarki użytkownika za pomocą kompresji Brotli (nowszy, obsługiwany przez Chrome) lub GZIP. Te metody kompresji nie mają wpływu na wyświetlanie Twojej witryny, ponieważ przeglądarki użytkowników automatycznie obsługują skompresowaną zawartość.
Większość popularnych firm hostingowych WordPress automatycznie zastosuje dla Ciebie kompresję. Jeśli chcesz potwierdzić, że metoda kompresji jest włączona w Twojej witrynie, możesz użyć pliku a Test kompresji GZIP online .
Wtyczki do WordPressa popularne oprogramowanie do wydajności automatycznie skompresuje dla Ciebie GZIP, w tym WP Rocket , WP Super Cache (musi być włączony w ustawieniach) i W3 Razem Cache (musi być włączony w ustawieniach). WP-Rocket automatycznie zastosuje kompresję GZIP do Twojej witryny, jeśli używasz Apache bez żadnej konfiguracji.
Dla programistów: Aby włączyć kompresję Brotli lub GZIP na swoim serwerze, musisz wiedzieć, czy używasz Apache czy Nginx. Zamiast zarządzać konfiguracją serwera, polecam korzystanie z CloudFlare. CloudFlare zastosuje kompresję GZIP i Brotli w zależności od tego, co obsługuje przeglądarka użytkownika i jakie treści są obsługiwane automatycznie.
Minifikuj CSS, HTML i JavaScript
HTML, CSS i JavaScript wpływają na szybkość ładowania strony. Podczas pisania kodu większość programistów będzie umieszczać tabulatory, spacje i inny nieistotny kod, aby uczynić go czytelnym dla człowieka. Wszystkie te nieużywane znaki sumują się i mogą nieco spowolnić Twoją witrynę.
Na szczęście wszystkie te zasoby można łatwo zminimalizować bez wpływu na wrażenia użytkownika. WP Rocket oferuje stronę optymalizacji plików z opcjami minimalizacji dla CSS i JavaScript. Ponadto, jeśli buforowanie stron jest włączone w WP-Rocket, minimalizacja HTML zostanie zastosowana do stron. Bezpłatną opcją jest użycie wtyczki Autoptimize zminimalizować CSS/JS/HTML.
Pamiętaj, że zminimalizowanie kodu JavaScript może prowadzić do problemów z funkcjonalnością, więc pamiętaj o przetestowaniu go podczas aktywacji.
Dla programistów: wiele narzędzi programistycznych umożliwia programistom kompresowanie plików podczas pracy. Pakiety Node.js, takie jak Czysty CSS można dodać do przepływu pracy, aby skompresować zminimalizowane pliki podczas pracy nad nimi. Ponadto w przypadku mniejszych projektów istnieje wiele narzędzi online, które kompresują plik CSS , JS a nawet HTML . Jeśli używasz WordPressa, musisz po prostu wybrać wtyczkę, ponieważ zapewnią one te same wyniki przy znacznie mniejszym wysiłku.
Zmniejsz nieużywane CSS
Usunięcie nieużywanego CSS może być trudne. Reguły CSS na Twojej stronie, które nie są używane do stylizacji strony, są uważane za nieużywane CSS. Większość frameworków, motywów i wtyczek opuści Twoją witrynę z nieużywanym CSS.
Na przykład Twój motyw WordPress może zawierać stylizację strony kontaktowej, ale nie jest używany na wszystkich innych stronach w Twojej witrynie, ale nadal istnieje w arkuszu stylów.
Na szczęście, jeśli używasz WordPressa, istnieje kilka wtyczek, które automatycznie przycinają nieużywany CSS. WP-Rocket i Perfmatters wykona świetną robotę, usuwając nieużywany CSS z twojego bloga. Wtyczki te załadują twoje strony i upewnią się, że mają tylko CSS niezbędny do prawidłowego wyświetlenia strony, pozostawiając ci mniejszy plik CSS.
Dla programistów: aby wykonać ten proces ręcznie, programiści mogą pracować usuwanie liści styl witryny WordPress. Umożliwi to ręczne wybranie CSS, który chcesz dodać do arkusza stylów motywu. Istnieją również narzędzia online do znajdź nieużywane css w Twojej witrynie, ale prawdopodobnie nie nadają się do dużych witryn.
Skorzystaj z buforowania przeglądarki
Gdy użytkownicy odwiedzają wiele stron w Twojej witrynie, prawdopodobnie korzystają z tych samych zasobów. Często obrazy, CSS i JavaScript są udostępniane w całej witrynie. W tym miejscu pojawia się buforowanie przeglądarki, możesz powiedzieć przeglądarce użytkownika, aby zapisała zasoby do późniejszego wykorzystania. Większość WordPress wtyczki wydajność włączy reguły buforowania przeglądarki.
Dla programistów: W zależności od tego, czy używasz Apache, czy Ngnix, możesz dodać konfigurację serwera, aby nakazać przeglądarkom użytkownika buforowanie określonej zawartości. Zazwyczaj te metody buforowania przeglądarki są stosowane do CSS, JS i obrazów.
Wyeliminuj zasoby blokujące renderowanie
Gdy przeglądarka internetowa odczytuje kod Twojej witryny, określa, co pobrać i wyświetlić. Pliki JavaScript i CSS Twojego tagu <head> są uważane za zasoby blokujące renderowanie. Gdy przeglądarka próbuje zwrócić stronę użytkownikowi, powinna się zatrzymać, pobrać plik i ogólnie opóźnić wyświetlenie strony.
Jeśli Twoja witryna posiadała zasoby blokujące renderowanie, Google PageSpeed Insights wskaże Ci największe pliki i potencjalne oszczędności.
Na szczęście większość wtyczek zwiększających wydajność WordPressa pomoże Ci odroczyć lub zintegrować JavaScript i CSS. The WordPress wtyczki pomoże ci również przenieść niepotrzebne arkusze stylów i JS do załadowania na dół strony. WP-Rocket, Autoptimize (darmowy) i Perfmatters wszystkie wykonują zadanie wyeliminowania zasobów blokujących renderowanie.
Dla programistów: programiści mogą skorzystać z kilku funkcji przeglądarki, aby usprawnić ładowanie zasobów. Obejmuje to korzystanie z atrybut odroczenia na skryptach, przenosząc CSS/JS do stopki i umieszczając tylko krytyczne CSS w nagłówku.
Wydajne kodowanie obrazów
Algorytmy kompresji obrazu zapewniają niesamowite wyniki kompresji obrazów bez utraty postrzeganej jakości.
Ogólnie rzecz biorąc, obrazy JPG i PNG mogą wymagać dodatkowej kompresji podczas eksportu. Imagify, ShortPixel et Smush wszystkie są doskonałe WordPress wtyczki do automatycznej kompresji obrazów. Zasadniczo wtyczki te kompresują obrazy podczas ich przesyłania, co przyspiesza ładowanie strony. Można także wybrać poziom kompresji stosowanej do obrazów.
Ponieważ kompresja obrazów kosztuje moc obliczeniową, wiele z tych wtyczek pobiera opłaty za dużą liczbę obrazów. ShortPixel oferuje również wtyczka do kompresji obrazów w chmurze przy użyciu sieci dostarczania treści i interfejsu API. Jeśli Twoja witryna korzysta już z CloudFlare, możesz zarejestrować się w ich usłudze pro plan optymalizować obrazy w locie.
Dla programistów: dostępnych jest wiele narzędzi do optymalizacji obrazu, w tym narzędzia online, takie jak Image Compressor i aplikacje desktopowe jak Pichi. Będziesz musiał kompresować obrazy na dużą skalę, więc wolę używać CDN, który automatycznie kompresuje obrazy. Moim ulubionym jest Plan CloudFlare Pro (20 USD miesięcznie), która automatycznie kompresuje, a nawet serweruje obrazy webp. Możesz także przełączyć się na używanie SVG dla grafiki, takiej jak logo Twojej witryny. Dobrą zasadą jest również używanie plików JPEG do rzeczywistych zdjęć i plików SVG/PNG do grafiki. Użycie pliku PNG do zdjęcia spowoduje niepotrzebnie duży plik.
Odpowiednie rozmiary obrazów
Przykładem obrazów o nieprawidłowym rozmiarze jest duży obraz o wymiarach 2000 na 2000 pikseli w obszarze div o szerokości 800 pikseli. Ponieważ widocznych jest tylko 800 pikseli, przeglądarka musiała bez powodu wczytać większy obraz. Prowadzi to do wolniejszego ładowania strony i gorszego doświadczenia użytkowników. Większość Motywy WordPress dobrze zaprojektowane nie będą miały tego problemu.
Dla programistów: Jeśli tworzysz motyw WordPress, możesz ustawić domyślne rozmiary obrazów WordPress, aby odpowiednio pasowały do szerokości motywu. Będziesz musiał ponownie wygenerować miniatury WordPress po zmianie rozmiaru obrazu. Pamiętaj, że jeśli chcesz przesyłać strumieniowo obrazy na wyświetlacz Retina, powinieneś użyćatrybut srcset. WordPress ma również wbudowane funkcje do wyświetlania obrazów na ekranie o dużej gęstości pikseli.
Odłóż obrazy poza ekranem
Po załadowaniu strony internetowej, jeśli zawiera obrazy, wszystkie zostaną załadowane. Jest to marnowanie zasobów i wykorzystanie sieci, ponieważ obrazy są widoczne. Na szczęście publikowanie obrazów poza ekranem jest teraz łatwiejsze niż kiedykolwiek, ponieważ wszystkie główne przeglądarki obsługują tę funkcję lazy loading .
Domyślnie WordPress zastosuje ten atrybut loading="lazy" do obrazów, aby automatycznie odroczyć ładowanie obrazów poza ekranem, więc prawdopodobnie nie zobaczysz tego błędu. WP-Rocket zastosuje również leniwe ładowanie do obrazów, ramek iFrame i osadzonych w YouTube. Możesz także skorzystać z tzw darmowa wtyczka leniwego ładowania a3 zastosować leniwe ładowanie do elementów poza ekranem. Jeśli Twoja witryna zawiera wiele plików graficznych i gifów, jest to ważny aspekt poprawy wczytywania strony.
Dla programistów: Najłatwiejszym sposobem dodania leniwego ładowania do obrazu jest dodanie atrybutu loading="lazy" w latarni <img>. Jest też wielu Biblioteki JavaScript aby załadować leniwą zawartość.
Cały tekst pozostaje widoczny podczas ładowania czcionek internetowych
Kiedy wprowadzono czcionki internetowe, często ukrywano tekst przed załadowaniem czcionki. Jest to duże nie-nie, ponieważ użytkownicy chcą natychmiast zacząć czytać Twoją witrynę. WP-Rocket automatycznie zoptymalizuje wyświetlanie czcionek internetowych, gdy włączone są optymalizacje CSS. the WordPress Plugin wolny Zamień wyświetlanie czcionek Google doda również prawidłowe ustawienie czcionek Google dla Twojej witryny WordPress.
Dla programistów: prawdopodobnie używasz Google Fonts, co jest dość proste do rozwiązania tego problemu. Wszystko, co musisz zrobić, to dodać ciąg zapytania "&display=swap" do Twojego adresu URL czcionki Google; więcej szczegółów od Google .
Unikaj przekierowań na wiele stron
Jeśli Twoja witryna ma wiele przekierowań, będą one powoli zwiększać szybkość ładowania strony. Na przykład, jeśli Twoja strona główna przekierowuje do /home.html, spowoduje to opóźnienie w odpowiedzi użytkowników. Możesz zobaczyć ten błąd, jeśli masz pliki CSS lub JS, które również prowadzą do przekierowania.
Innym przykładem jest sytuacja, w której adres URL w menu nawigacji w nagłówku prowadzi do adresu URL, który przekierowuje. Są szanse, że Twoja witryna nie zostanie oznaczona za to, jeśli korzystasz z WordPress.
Często zadawane pytania dotyczące optymalizacji i statystyk Google PageSpeed
Oto najczęściej zadawane pytania dotyczące Google PageSpeed. Jeśli czegoś brakuje, zapytaj w komentarzach na końcu tego artykułu.
Co to jest test Google PageSpeed ?
Test podglądu Google PageSpeed służy do określenia wydajności strony internetowej. Wyniki testu dają wynik PageSpeed na 100.
Co to jest wynik Google PageSpeed ?
Wynik Google PageSpeed to test przeprowadzany przez Google, którego celem jest analiza wydajności strony internetowej. 100 to doskonały wynik, a 90 to dobry wynik. Podczas gdy wynik pomiędzy 50 a 90 wymaga poprawy, a wynik poniżej 50 jest słaby.
Czy szybkość strony wpływa na SEO?
Tak. Wynik Google PageSpeed Insights odgrywa ważny czynnik w SEO. Google wykorzystuje szybkość strony jako kluczowy czynnik w rankingu witryny.
Jak mogę poprawić swój wynik Google PageSpeed ?
Mam nadzieję, że ten artykuł pomógł poprawić Twój wynik Google PageSpeed . Podstawy obejmują usunięcie zasobów blokujących renderowanie, usunięcie nieużywanego CSS, optymalizację obrazów i skrócenie czasu do pierwszego bajtu.
Ostatnie przemyślenia na temat optymalizacji Google PageSpeed na Twoim blogu
Mam nadzieję, że te wskazówki dotyczące optymalizacji Google PageSpeed pomogą poprawić wydajność Twojego bloga i z czasem doprowadzą do zwiększenia ruchu organicznego. Wraz z rozwojem sieci i łatwiejszymi w użyciu narzędziami, przyspieszenie witryn WordPress będzie coraz łatwiejsze.
Jest mnóstwo rzeczy, które możesz zrobić, aby poprawić wynik Google PageSpeed , ale zalecam wykonanie testu pozytywnego.
Zaliczenie testu (wynik powyżej 90) będzie odgrywać ważną rolę w rankingu Twoich treści na najwyższych miejscach w bezpłatnych wynikach wyszukiwania Google. Pamiętaj jednak, że uzyskanie doskonałego wyniku 100 może stać się niekończącym się zadaniem, ponieważ zmieniają się standardy sieciowe, więc staraj się pozostać w tym zakresie 90+, a wszystko będzie dobrze.
