Jak wyeliminować zasoby blokujące renderowanie z witryny WordPress

Czy kiedykolwiek skończyłeś tworzyć witrynę WordPress, pokochałeś wszystko w niej i natychmiast zacząłeś jej nienawidzić po tym, jak zdałeś sobie sprawę, że ładowanie trwa wiecznie? Opanowanie eliminacji zasobów blokujących renderowanie pomoże zdiagnozować ten problem. Ale jak?

Niskie prędkości ładowania są nie tylko uciążliwe dla Ciebie i Twoich gości, ale mogą również znacznie kosztować, jeśli chodzi o SEO. Od 2010 roku algorytmy Google uwzględniają prędkość ładowania w decyzjach dotyczących rankingu, więc powolne strony pojawiają się niżej na stronach wyników.

Być może znasz typowe przyczyny słabej wydajności strony — nadmierna zawartość, nieskompresowane pliki obrazów, niewystarczający hosting i brak pamięci podręcznej, by wymienić tylko kilka. Ale w grze jest inny często pomijany sprawca: zasoby blokujące renderowanie.

Nie zrozum mnie źle — CSS i JavaScript są świetne. Bez CSS strony internetowe byłyby ścianami zwykłego tekstu. Bez Ja=ooovaScript nie bylibyśmy w stanie dodawać dynamicznych, interaktywnych i angażujących elementów do naszych stron internetowych. Ale jeśli zostaną wykonane w niewłaściwym czasie, zarówno CSS, jak i JavaScript mogą pogorszyć wydajność Twojej witryny.

Oto dlaczego: gdy przeglądarka internetowa po raz pierwszy ładuje stronę internetową, analizuje cały kod HTML strony przed wyświetleniem go na ekranie odwiedzającemu. Gdy przeglądarka napotka łącze do pliku CSS, pliku JavaScript lub skryptu wbudowanego (tj. kodu JavaScript w samym dokumencie HTML), wstrzymuje przetwarzanie kodu HTML w celu pobrania i wykonania kodu, co spowalnia wszystko.

Jeśli zoptymalizowałeś wydajność strony w WordPressie i nadal występują problemy, przyczyną mogą być zasoby blokujące renderowanie. Czasami ten kod jest ważny do uruchomienia przy pierwszym ładowaniu, ale przez większość czasu można go usunąć lub wypchnąć do samego końca kolejki.

W tym poście pokażemy, jak wyeliminować ten nieznośny kod ze swojej witryny WordPress i zwiększyć wydajność.

Jeśli wolisz śledzić film, zapoznaj się z tym przewodnikiem stworzonym przez WP Casts:

1. Zidentyfikuj zasoby blokujące renderowanie.

Przed wprowadzeniem jakichkolwiek zmian musisz najpierw zlokalizować zasoby blokujące renderowanie. Najlepszym sposobem na to jest skorzystanie z bezpłatnego testu szybkości online, takiego jak narzędzie Google PageSpeed ​​Insights. Wklej adres URL swojej witryny i kliknij Analizuj .

Po zakończeniu skanowania Google przypisuje Twojej witrynie zbiorczy wynik szybkości, od 0 (najwolniej) do 100 (najszybciej). Wynik w zakresie od 50 do 80 jest średni, więc będziesz chciał wylądować w górnej części tego zakresu lub powyżej.

Aby zidentyfikować pliki blokujące renderowanie, które spowalniają Twoją stronę, przewiń w dół do opcji Możliwości , a następnie otwórz akordeon Wyeliminuj zasoby blokujące renderowanie .

Źródło obrazu

Zobaczysz listę plików spowalniających „pierwsze malowanie” Twojej strony — pliki te wpływają na czas ładowania całej treści, która pojawia się w oknie przeglądarki podczas początkowego ładowania strony. Nazywa się to również treścią „na ekranie”.

Zwróć uwagę na wszystkie pliki z rozszerzeniami .css i .js, ponieważ to na nich chcesz się skupić.

2. Wyeliminuj zasoby blokujące renderowanie ręcznie lub za pomocą wtyczki.

Teraz, gdy zidentyfikowałeś problem, istnieją dwa sposoby rozwiązania go w WordPress: ręcznie lub za pomocą wtyczki. Najpierw omówimy rozwiązanie wtyczki.

Kilka wtyczek WordPress może zmniejszyć efekt zasobów blokujących renderowanie w witrynach WordPress. Omówię dwa popularne rozwiązania, Autoptimize i W3 Total Cache.

Jak wyeliminować zasoby blokujące renderowanie za pomocą wtyczki Autoptimize

Autoptimize to bezpłatna wtyczka, która modyfikuje pliki witryny, aby wyświetlać szybsze strony. Funkcja Autoptimize działa poprzez agregację plików, minimalizowanie kodu (tj. zmniejszanie rozmiaru pliku poprzez usuwanie zbędnych lub niepotrzebnych znaków) oraz opóźnianie ładowania zasobów blokujących renderowanie.

Ponieważ modyfikujesz zaplecze swojej witryny, pamiętaj, aby zachować ostrożność w przypadku tej wtyczki lub dowolnej podobnej wtyczki. Aby wyeliminować zasoby blokujące renderowanie za pomocą narzędzia Autoptimize:

1. Zainstaluj i aktywuj wtyczkę Autooptimize.

2. Z pulpitu nawigacyjnego WordPress wybierz Ustawienia > Autooptymalizacja .

3. W obszarze Opcje JavaScript zaznacz pole wyboru Zoptymalizować kod JavaScript? .

4. Jeśli pole obok Aggregate JS-files? jest zaznaczone, odznacz je.

5. W obszarze Opcje CSS zaznacz pole wyboru Zoptymalizować kod CSS? .

6. Jeśli pole obok Agreguj pliki CSS? jest zaznaczone, odznacz je.

7. U dołu strony kliknij opcję Zapisz zmiany i opróżnij pamięć podręczną .

8. Przeskanuj swoją witrynę za pomocą PageSpeed ​​Insights i sprawdź, czy nastąpiła poprawa.

9. Jeśli PageSpeed ​​Insights nadal zgłasza pliki JavaScript blokujące renderowanie, wróć do Ustawienia > Automatyczna optymalizacja i zaznacz pola wyboru Aggregate JS-files? i zagregować pliki CSS? . Następnie kliknij Zapisz zmiany i opróżnij pamięć podręczną i ponownie zeskanuj.

Jak wyeliminować zasoby blokujące renderowanie za pomocą wtyczki W3 Total Cache

W3 Total Cache to szeroko stosowana wtyczka do buforowania, która pomaga rozwiązać problem opóźnionego kodu. Aby wyeliminować JavaScript blokujący renderowanie za pomocą W3 Total Cache:

1. Zainstaluj i aktywuj wtyczkę W3 Total Cache.

2. Nowa opcja wydajności zostanie dodana do menu pulpitu nawigacyjnego WordPress. Wybierz Wydajność > Ustawienia ogólne.

3. W sekcji Pomniejsz zaznacz pole obok opcji Pomniejsz , a następnie ustaw Tryb pomniejszenia na Ręczny .

4. Kliknij opcję Zapisz wszystkie ustawienia u dołu sekcji Minify .

5. W menu pulpitu nawigacyjnego wybierz kolejno Wydajność > Minify .

6. W sekcji JS obok opcji JS minify settings upewnij się, że pole Enable jest zaznaczone. Następnie w obszarze Operacje na obszarach otwórz pierwsze menu rozwijane Typ osadzania i wybierz opcję Bez blokowania przy użyciu „odroczenia” .

7. W obszarze Zarządzanie plikami JS wybierz aktywny motyw z listy rozwijanej Motyw .

8. Wróć do wyników PageSpeed ​​Insights z poprzedniego skanowania. Dla każdego elementu w obszarze Wyeliminuj zasoby blokujące renderowanie kończące się na .js kliknij Dodaj skrypt . Następnie skopiuj pełny adres URL zasobu JavaScript z PageSpeed ​​Insights i wklej go w polu URI pliku .

9. Po wklejeniu wszystkich blokujących renderowanie zasobów JavaScript zgłoszonych przez PageSpeed ​​Insights kliknij Zapisz ustawienia i wyczyść pamięć podręczną u dołu sekcji JS .

10. W sekcji CSS obok ustawień minimalizacji CSS zaznacz pole obok ustawień minimalizacji CSS i upewnij się, że metoda Minify jest ustawiona na Combine & Minify .

11. W sekcji Zarządzanie plikami CSS wybierz aktywny motyw z listy rozwijanej Motyw .

12. Dla każdego elementu w obszarze Wyeliminuj zasoby blokujące renderowanie kończące się na .css w wynikach skanowania PageSpeed ​​Insights kliknij Dodaj arkusz stylów . Następnie skopiuj pełny adres URL zasobu CSS z PageSpeed ​​Insights i wklej go w polu File URI .

13. Po wklejeniu wszystkich blokujących renderowanie zasobów CSS zgłoszonych przez PageSpeed ​​Insights kliknij Zapisz ustawienia i wyczyść pamięć podręczną u dołu sekcji CSS .

14. Przeskanuj swoją witrynę za pomocą PageSpeed ​​Insights i sprawdź, czy nastąpiła poprawa.

Jak ręcznie wyeliminować JavaScript blokujący renderowanie

Wtyczki mogą obsłużyć backend za Ciebie. Z drugiej strony same wtyczki to po prostu więcej plików dodawanych do twojego serwera WWW. Jeśli chcesz ograniczyć te dodatkowe pliki lub wolisz samodzielnie zająć się programowaniem, możesz ręcznie zająć się JavaScriptem blokującym renderowanie.

Aby to zrobić, znajdź tagi <script> w plikach witryny dla zasobów zidentyfikowanych podczas skanowania PageSpeed ​​Insights. Będą wyglądać mniej więcej tak:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

Tagi <script> nakazują przeglądarce załadowanie i wykonanie skryptu identyfikowanego przez atrybut src (źródło). Problem z tym procesem polega na tym, że to ładowanie i wykonywanie opóźnia analizę strony internetowej przez przeglądarkę, co wpływa na ogólny czas ładowania:

Źródło obrazu

Aby rozwiązać ten problem, możesz dodać atrybut async (asynchroniczny) lub defer do znaczników script dla zasobów blokujących renderowanie. async i defer są umieszczane w następujący sposób:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Chociaż mają podobny wpływ na czas ładowania, te atrybuty nakazują przeglądarce robić różne rzeczy.

Atrybut async sygnalizuje przeglądarce ładowanie zasobu JavaScript podczas analizowania reszty strony i wykonuje ten skrypt natychmiast po załadowaniu. Wykonanie skryptu wstrzymuje parsowanie HTML:

Źródło obrazu

Skrypty z atrybutem defer są również ładowane podczas analizowania strony, ale ładowanie tych skryptów jest opóźnione do momentu pierwszego renderowania lub załadowania ważniejszych części:

Źródło obrazu

Atrybuty defer i async nie powinny być używane razem w tym samym zasobie, ale jeden z nich może być lepiej dopasowany do określonego zasobu niż drugi. Ogólnie rzecz biorąc, jeśli nieistotny skrypt polega na uruchomieniu skryptu przed nim, użyj defer . Atrybut odroczenia gwarantuje, że skrypt zostanie uruchomiony po poprzednim niezbędnym skrypcie. W przeciwnym razie użyj async .

3. Uruchom ponownie skanowanie witryny.

Po wprowadzeniu zmian przeprowadź ostatnie skanowanie witryny za pomocą PageSpeed ​​Insights i zobacz, jaki wpływ miały zmiany na Twój wynik.

Mamy nadzieję, że nastąpiła zauważalna poprawa, ale nie martw się, jeśli nie. Wydajność strony może być hamowana przez wiele czynników i być może trzeba będzie dokładniej poszukać, aby znaleźć źródło niskiej wydajności.

4. Sprawdź swoją witrynę pod kątem błędów.

Oprócz ponownego skanowania sprawdź swoje strony, aby upewnić się, że witryna działa. Czy strona ładuje się poprawnie? Czy wyświetlają się wszystkie elementy? Jeśli coś jest zepsute lub nie ładuje się poprawnie, cofnij zmiany i rozwiąż problem.

Jeśli osiągnąłeś punkt, w którym wielokrotnie próbowałeś różnych środków przy minimalnym wzroście prędkości, lepiej rozważyć inne sposoby przyspieszenia stron, zamiast ryzykować uszkodzenie witryny.

Optymalizacja witryny WordPress pod kątem wydajności

Na zadowolenie użytkowników z Twojej witryny wpływa wiele czynników, ale niewiele jest ważniejszych niż czas ładowania. Za każdym razem, gdy wprowadzasz duże zmiany w treści lub wyglądzie na swojej stronie WordPress, zawsze powinieneś rozważyć, jak takie zmiany wpływają na wydajność.

Teraz, gdy wyeliminowałeś zasoby blokujące renderowanie, powinieneś nadal optymalizować szybkość swojej witryny, analizując inne funkcje, o których wiadomo, że spowalniają wydajność. Spróbuj włączyć regularne testowanie szybkości do harmonogramu konserwacji witryny — wyprzedzanie potencjalnych problemów będzie miało kluczowe znaczenie dla Twojego sukcesu.