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 używasz narzędzia testowego, np. Google PageSpeed Insight , prawdopodobnie pojawi się ostrzeżenie nakazujące 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 rozwiążesz problem blokowania renderowania, musisz ustalić jego przyczynę. Możesz dowiedzieć się, które zasoby blokują renderowanie, uruchamiając test w Google PageSpeed Insight lub Web.Measure.
Aby znaleźć zasoby blokujące renderowanie, wykonaj poniższe czynności:
1. Odwiedź 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.
W przypadku BloggingTools nie mamy problemów z blokowaniem renderowania na komputerach stacjonarnych, ale na urządzeniach mobilnych już tak. Dlatego w tym przypadku użyjemy wersji mobilnej, 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ż korzystamy z bardzo szybkiego i lekkiego motywu o nazwie GeneratePress . Hostujemy również na bardzo szybkim hostingu znanym jako Cloudways.
Uwaga : Nie powinieneś obsesyjnie dążyć do uzyskania 100 punktów w PageSpeed Insight. To tylko wskazówka. Zazwyczaj średni wynik od 65 do 80 punktów jest wystarczający dla większości użytkowników. Nie usuwaj plików, które są niezbędne 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 do WordPressa, które to umożliwiają, takich jak W3 Total Cache, WP Rocket i tak dalej. Jednak z mojego doświadczenia z wieloma stronami internetowymi wynika, że Autoptimize zawsze radzi sobie z tym znacznie lepiej niż którakolwiek z nich. Co najlepsze, Autoptimize jest kompatybilny z niemal wszystkimi wtyczkami do buforowania WordPressa i jest darmowy.
Przejdź do katalogu wtyczek WordPress, aby zainstalować i aktywować 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 jeszcze bardziej ograniczyć liczbę błędów, możesz użyć Async JavaScript , wtyczki tego samego autora co Autoptimize. Działają one razem. Nie polecam tego, ponieważ może to uszkodzić Twoją witrynę. Samo 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 wykonaniu tych kroków Twoja strona nadal działa bardzo wolno, trzy najczęstsze problemy to: słaby motyw, słaby hosting lub zainstalowane złe wtyczki. Polecam Coudways jako najlepszego hostingodawcę i GeneratePress jako najlepszy motyw. Jeśli jesteś początkujący, Bluehost da radę, ale jeśli Cię na to stać, Cloudways jest najlepszy. Możesz zacząć za darmo. Używam GeneratePress i Coudways do TargetTrend.
Przeczytaj także:
Jak zrobić WordPress bardzo szybko
Powiązane artykuły
