Jak wyeliminować zasoby blokujące renderowanie w WordPress (bardzo łatwe)

Posiadanie szybkiego bloga lub strony internetowej jest bardzo ważne. To ważne, jeśli chcesz mieć wysoką pozycję w wyszukiwarkach. Jeśli Twoja witryna działa bardzo wolno, na pewno zaszkodzi to Twojemu SEO.

Ponadto powolna strona internetowa może zwiększyć współczynnik odrzuceń, co technicznie zaszkodzi Twojej marce na wiele sposobów. Powolna strona internetowa może wpłynąć na dochód i konwersję.

Większość użytkowników jest niecierpliwa, jeśli Twoja witryna ładuje się zbyt długo, porzucą ją i przejdą na szybszą alternatywę. To zniknął potencjalny klient lub wzmacniacz przychodów.

Jeśli próbujesz przyspieszyć swoją witrynę i korzystasz z narzędzia testowego, takiego jak Google PageSpeed ​​Insight, jednym z możliwych ostrzeżeń jest 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 wczytywania witryny, ponieważ musi zostać pobrana przez przeglądarkę internetową przed renderowaniem zawartości strony.

Gdy odwiedzający próbuje uzyskać dostęp do strony internetowej, przeglądarka natychmiast zaczyna czytać stronę od góry do dołu. Jeśli istnieje jakiś CSS lub JavaScript, przeglądarka przestanie czytać, dopóki nie pobierze i nie przetworzy plików. Zanim przeglądarka będzie mogła renderować 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ą ładować się najpierw, mogą załadować się później. Ale ponieważ są tam na górze, spowalniają Twoją witrynę.

Więc to, co Google rozumie przez „wyeliminowanie zasobów blokujących renderowanie”, polega na tym, że usuwasz niepotrzebne zasoby z górnej części witryny, ponieważ spowalnia to ładowanie treści witryny.

Jak znaleźć zasoby blokujące renderowanie

Zanim rozwiążesz problem z blokowaniem renderowania, musisz wiedzieć, skąd się on bierze. 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 strony i kliknij analizuj

3. Przewiń w dół i poszukaj ostrzeżenia o wyeliminowaniu zasobów blokujących renderowanie.

Sprawdź to zarówno w telefonie komórkowym, jak i stacjonarnym.

W przypadku BloggingTools nie mamy problemów z blokowaniem renderowania w przypadku komputerów stacjonarnych, ale mamy je w przypadku urządzeń mobilnych. Dlatego w tym celu użyjemy Mobile, jak widać poniżej.

W przypadku urządzeń mobilnych, jak widać powyżej, mamy 2 problemy z blokowaniem renderowania. Z wynikiem 93. Wynik był wyższy, ale ze względu na ten post musiałem dezaktywować wtyczkę Autoptimize.

BloggingTools.org osiągnął ten wynik bez optymalizacji, ponieważ używamy bardzo szybkiego i lekkiego motywu o nazwie GeneratePress. Prowadzimy również hosting na bardzo szybkim hoście internetowym znanym jako Cloudways.

Uwaga : nie powinieneś mieć obsesji na punkcie uzyskania 100 w wyniku analizy PageSpeed. To tylko przewodnik. Zazwyczaj średni wynik od 65 do 80 jest wystarczający dla większości ludzi. Nie usuwaj plików, które są niezbędne dla Twojej firmy.

Dobrą rzeczą w WordPressie jest to, że nie musisz robić wszystkiego ręcznie. Istnieje kilka dobrze zakodowanych wtyczek, które mogą pomóc.

Jak naprawić problem z zasobami blokującymi renderowanie w WordPressie

Wykonaj poniższe czynności, aby rozwiązać problem z zasobami blokującymi renderowanie:

1. Zainstaluj i aktywuj Autooptymalizację

Istnieje wiele wtyczek WordPress, które mogą to zrobić, takie jak całkowita pamięć podręczna W3, WP Rocket i tak dalej. Ale z mojego doświadczenia z wieloma stronami internetowymi, Autoptimize zawsze radzi sobie z tym znacznie lepiej niż którykolwiek z nich. Wspaniałą rzeczą jest to, że Autoptimize jest kompatybilny z prawie wszystkimi wtyczkami do buforowania WordPress i jest bezpłatny.

Udaj się do katalogu wtyczek WordPress, aby zainstalować i aktywować Autooptimize

2. Odwiedź Ustawienia autooptymalizacji

Jeśli kiedykolwiek będziesz potrzebować, gdzie znaleźć ustawienia Autooptymalizacji, na pulpicie WordPress kliknij ustawienia, a następnie kliknij Autooptymalizuj.

3. Zoptymalizuj JavaScript

W obszarze Opcje JavaScript wybierz Optymalizuj kod skryptu, a także wybierz agregowane pliki JS. Poniżej znajdziesz ustawienia, których używam dla BloggingTools.

4. Zoptymalizuj CSS

W opcjach Optymalizuj CSS wybierz Optymalizuj kod CSS. Wybierz także agregowanie plików CSS i „Agregacja wbudowanego CSS”. Zobacz opcje, których używam dla BloggingTools poniżej.

5. Zoptymalizuj HTML

Jeśli chcesz uzyskać lepszą wydajność, możesz również użyć funkcji Autooptimize, aby zoptymalizować kod HTML. W obszarze Opcje HTML wybierz zoptymalizuj kod HTML. Poniżej możesz zobaczyć ustawienia, których używam dla BloggingTools.

6. Sprawdź różne opcje

Możesz sprawdzić różne opcje i dostosować niektóre ustawienia, ponieważ działa to dla Ciebie. Poniżej znajdziesz ustawienia dla BloggingTools.

7. Zapisz i opróżnij pamięć podręczną.

Następnie po prostu 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 BloggingTools natychmiast po wykonaniu tej czynności nasz wynik wzrósł do 95, a wszystkie ostrzeżenia dotyczące usuwania 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 wyeliminować, możesz użyć Async JavaScript, wtyczki tego samego autora, co Autoptimize. Oni pracują razem. Nie polecam tego, ponieważ może to spowodować uszkodzenie witryny. Sama optymalizacja jest w porządku!

Wniosek

Szybkość jest ważna, a wyeliminowanie zasobów blokujących renderowanie może przyspieszyć ładowanie witryny i poprawić jej wynik w narzędziach do testowania szybkości. Ale nigdy nie powinieneś mieć obsesji na punkcie tych wyników, ponieważ są one tylko po to, aby poprowadzić.

Jeśli po tym Twoja witryna nadal działa bardzo wolno. Trzy najbardziej prawdopodobne problemy mogą polegać na tym, że Twój motyw lub host internetowy jest zły lub masz zainstalowane złe wtyczki. Polecam Coudways jako najlepszego hosta internetowego i GeneratePress jako najlepszy motyw. Jeśli jesteś początkującym, 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 sprawić, by WordPress był bardzo szybki

Jak przyciągnąć ruch do swojego bloga

Jak zarabiać na blogach

Jak założyć bloga