Jak wyeliminować zasoby blokujące renderowanie w WordPress (bardzo łatwo)
Renderowanie zasobów blokujących może być dużym problemem dla blogerów. Google ostrzega, aby je wyeliminować. Istnieje wiele sposobów na ich usunięcie, ale tutaj jest bardzo prosty sposób, który nie wymaga kodowania.
Posiadanie szybkiego bloga lub strony internetowej jest bardzo ważne. To ważne, jeśli chcesz zająć wysoką pozycję w wyszukiwarkach. Jeśli Twoja witryna działa bardzo wolno, z pewnością zaszkodzi to Twojemu SEO.
Ponadto powolna witryna może spowodować wysoki współczynnik odrzuceń, co z technicznego punktu widzenia pod wieloma względami zaszkodzi Twojej marce. Powolna witryna może mieć wpływ na przychody i konwersję.
Większość użytkowników jest niecierpliwa, jeśli ładowanie Twojej witryny trwa zbyt długo, porzucą ją i przejdą do szybszej alternatywy. Oznacza to, że zniknął potencjalny klient lub czynnik zwiększający przychody.
Jeśli próbujesz przyspieszyć swoją witrynę i korzystasz z narzędzia testowego, takiego jak Google PageSpeed Insight, jednym z ostrzeżeń, jakie możesz prawdopodobnie otrzymać, będzie wyeliminowanie zasobów blokujących renderowanie.
W tym artykule dowiesz się, jak łatwo wyeliminować zasoby blokujące renderowanie.
Co to są zasoby blokujące renderowanie?
Zasoby blokujące renderowanie to CSS i JavaScript, które spowalniają czas ładowania witryny internetowej, ponieważ musi ona zostać pobrana przez przeglądarkę internetową, zanim zawartość strony będzie mogła zostać wyrenderowana.
Kiedy odwiedzający próbuje uzyskać dostęp do strony internetowej, przeglądarka natychmiast rozpoczyna czytanie strony od góry do dołu. Jeśli istnieją jakieś CSS lub JavaScript, przeglądarka przestanie czytać, dopóki nie pobierze i nie przetworzy plików. Zanim przeglądarka będzie mogła wyrenderować zawartość strony widocznej na ekranie, musi pobrać pliki CSS lub JavaScript.
Wtyczki lub motywy, które instalujesz, mogą dodawać niektóre z tych CSS i JS. Niektóre nie muszą być ładowane najpierw, można je załadować później. Ale ponieważ są na górze, spowalniają Twoją witrynę.
Zatem to, co Google rozumie przez „wyeliminowanie zasobów blokujących renderowanie”, oznacza usunięcie niepotrzebnych zasobów z góry witryny, ponieważ spowalnia to ładowanie zawartości witryny.
Jak znaleźć zasoby blokujące renderowanie
Zanim będziesz mógł rozwiązać problem blokowania renderowania, musisz wiedzieć, skąd pochodzi. Możesz dowiedzieć się, które zasoby blokują renderowanie, uruchamiając test Google PageSpeed Insight or Web.Zmierz.
Aby znaleźć zasoby blokujące renderowanie, wykonaj poniższe czynności:
1. Odwiedzić Google PageSpeed Insight
2. Wpisz adres swojej witryny i kliknij analizuj
3. Przewiń w dół i zwróć uwagę na ostrzeżenie o wyeliminowaniu zasobów blokujących renderowanie.
Sprawdź to zarówno w trybie mobilnym, jak i stacjonarnym.
Dla litu szacuje się Narzędzia do blogowania, nie mamy problemów z blokowaniem renderowania na komputerach stacjonarnych, ale występują na urządzeniach mobilnych. W tym celu będziemy używać urządzeń mobilnych, jak widać poniżej.
Jak widać powyżej, w przypadku urządzeń mobilnych mamy dwa problemy z blokowaniem renderowania. Z wynikiem 2. Wynik był wyższy, ale na potrzeby tego wpisu musiałem dezaktywować wtyczkę Autoptimize.
BloggingTools.org osiągnął ten wynik bez optymalizacji, ponieważ używamy bardzo szybkiego i lekkiego motywu o nazwie GeneratePress. Hostujemy również na bardzo szybkim hoście internetowym znanym jako Cloudways.
Note: nie powinieneś mieć obsesji na punkcie uzyskania 100 punktów w rankingu PageSpeed. To tylko przewodnik. Zazwyczaj średni wynik od 65 do 80 jest w porządku dla większości ludzi. Nie usuwaj plików niezbędnych dla Twojej firmy.
Zaletą WordPressa jest to, że nie musisz robić wszystkiego ręcznie. Istnieje kilka dobrze zakodowanych wtyczek, które mogą pomóc.
Jak rozwiązać problem z eliminowaniem zasobów blokujących renderowanie w WordPress
Wykonaj poniższe kroki, aby rozwiązać problem z zasobami blokującymi renderowanie:
1. Zainstaluj i aktywuj funkcję Autoptimize
Istnieje wiele wtyczek WordPress, które mogą to zrobić, na przykład W3 Total Cache, WP Rocket itd. Ale z mojego doświadczenia z wieloma stronami internetowymi wynika, że Autoptimize zawsze radzi sobie z tym o wiele lepiej niż jakakolwiek inna. Co wspaniałe, Autoptimize jest kompatybilny z niemal wszystkimi wtyczkami do buforowania WordPressa i jest darmowy.
Przejdź do katalogu wtyczek WordPress, aby zainstaluj i aktywuj Autoptimize
2. Odwiedź ustawienia Autoptimize
Jeśli kiedykolwiek będziesz potrzebować znaleźć ustawienia Autoptimize, na pulpicie nawigacyjnym WordPress kliknij ustawienia, a następnie kliknij Autoptimize.
3. Zoptymalizuj JavaScript
W opcjach JavaScript wybierz Optymalizuj kod skryptu, a także wybierz zagregowane pliki JS. Poniżej znajdziesz ustawienia, których używam w BloggingTools.
4. Zoptymalizuj CSS
W opcjach Optymalizuj CSS wybierz Optymalizuj kod CSS. Wybierz także zagregowane pliki CSS i „Agreguj również wbudowany CSS”. Zobacz opcje, których używam w narzędziach BloggingTools poniżej.
5. Zoptymalizuj HTML
Jeśli chcesz lepszej wydajności, możesz także użyć Autoptimize do optymalizacji HTML. W obszarze Opcje HTML wybierz opcję Optymalizuj kod HTML. Poniżej możesz zobaczyć ustawienia, których używam w BloggingTools.
6. Sprawdź różne opcje
Możesz sprawdzić różne opcje i dostosować niektóre ustawienia, tak jak Ci odpowiadają. Poniżej znajdziesz ustawienia narzędzia BloggingTools.
7. Zapisz i opróżnij pamięć podręczną.
Następnie kliknij Zapisz i opróżnij pamięć podręczną. To wszystko!
Po tym wszystkim możesz ponownie sprawdzić swoją witrynę w Google PageSpeed Insight. W przypadku narzędzia BloggingTools natychmiast po wykonaniu tej czynności nasz wynik wzrósł do 95, a wszystkie ostrzeżenia dotyczące eliminacji zasobów blokujących renderowanie zniknęły całkowicie. Zobacz poniżej.
Pamiętaj, że w zależności od tego, ile masz zasobów blokujących renderowanie i jak ważne są one dla Twojej witryny, kilka z nich może pozostać. Nie próbuj ich usuwać.
Jeśli chcesz dalej eliminować, możesz użyć Asynchroniczny JavaScript, wtyczka tego samego autora co Autoptimize. Oni pracują razem. Nie polecam tego, ponieważ może to spowodować uszkodzenie Twojej witryny. Sama funkcja Autoptimize jest w porządku!
Wniosek
Szybkość jest ważna, a wyeliminowanie zasobów blokujących renderowanie może pomóc w szybszym ładowaniu witryny i zapewnić jej lepszy wynik w narzędziach do testowania szybkości. Ale nigdy nie powinieneś mieć obsesji na punkcie tych wyników, ponieważ służą one jedynie jako wskazówka.
Jeśli po tym Twoja witryna nadal działa bardzo wolno. Trzy najbardziej prawdopodobne problemy mogą dotyczyć złego motywu lub hosta internetowego albo zainstalowania złych wtyczek. polecam Coudways jako najlepszy host internetowy i GeneratePress jako najlepszy temat. Jeśli jesteś początkujący, BlueHost poradzi sobie, ale jeśli możesz sobie na to pozwolić, Cloudways jest najlepszy. Możesz zacząć bezpłatnie. Używam GeneratePress i Coudways dla TargetTrend
Przeczytaj także:
Jak zrobić WordPress bardzo szybko
Powiązane artykuły
