Czym są zasoby blokujące renderowanie i jak rozwiązać problemy z blokowaniem renderowania

Zasoby blokujące renderowanie to jedna z najczęstszych przyczyn powolnego wczytywania stron internetowych. A jeśli Twoja witryna nie jest wystarczająco szybka, nie tylko szkodzi to wrażeniom użytkowników, ale także pozycji w wyszukiwarce. Zła wiadomość jest taka, że ​​jeśli Twoja witryna działa wolno, tracisz klientów i przychody.

Jednak jest też dobra wiadomość – możesz poprawić szybkość swojej witryny, eliminując zasoby blokujące renderowanie. W tym artykule wyjaśnimy, jak zasoby blokujące renderowanie wpływają na czas ładowania i pokażemy, jak je naprawić.

Co to są zasoby blokujące renderowanie?

Najpopularniejszymi zasobami blokującymi renderowanie są pliki JavaScript i CSS, które znajdują się w nagłówku Twojej strony internetowej. Wczytują się nad obszarem składania (lub obszarem, który zwykle widzisz na stronie internetowej przed przewinięciem w dół, aby zobaczyć resztę treści) i są częścią krytycznej ścieżki renderowania używanej przez przeglądarkę internetową.

Mówiąc językiem laika, oznacza to, że pewne zdarzenia muszą się wydarzyć, aby Twoja przeglądarka poprawnie wyświetlała (renderowała) początkowy widok dowolnej strony internetowej. Oto przykład działania podstawowej ścieżki renderowania:

• Przeglądarka pobiera stronę internetową składającą się z pliku HTML zawierającego strukturę strony internetowej
• Następnie przeglądarka odczytuje kod HTML i zauważa 3 dodatkowe pliki: plik css, plik javascript i obraz
• Przeglądarka najpierw pobierze obraz
• Przeglądarka uświadamia sobie, że nie może kontynuować wyświetlania strony bez przechwycenia CSS i JavaScript
• Przeglądarka pobiera plik CSS i odczytuje go, aby upewnić się, że nic innego nie jest wywoływane
• Przeglądarka pobiera plik JavaScript i odczytuje go, aby upewnić się, że nic innego nie jest wywoływane
• Przeglądarka może wreszcie wyświetlić stronę internetową

Podczas gdy przeglądarka jest zajęta ładowaniem i odczytywaniem każdego z plików CSS i JavaScript, odwiedzający wpatrują się w pusty ekran, czekając na załadowanie witryny. Jeśli używasz systemu CMS takiego jak WordPress, Twoja przeglądarka może być zajęta przez dłuższy czas, ponieważ będzie musiała załadować nie tylko pliki stylów i skryptów Twojego motywu, ale także pliki skryptów i stylów, które są dostarczane z samym WordPressem, a także te, które są dostarczane ze wszystkimi wtyczkami i widżetami, których używasz.

Jeśli chodzi o optymalizację szybkości witryny, pierwszym zadaniem na liście powinno być skrócenie czasu potrzebnego użytkownikom na przeglądanie treści i interakcję z nimi. Najprostszym sposobem na to jest zoptymalizowanie krytycznej ścieżki renderowania.

Jak naprawić problemy z blokowaniem renderowania

Teraz, gdy wiesz, co powoduje problemy z blokowaniem renderowania i jak wpływają one na szybkość Twojej witryny, porozmawiajmy o tym, jak je rozwiązać.

CSS blokujący renderowanie

Istnieją trzy sposoby rozwiązania problemów CSS blokujących renderowanie:

• Właściwie wywołuj swoje pliki CSS – Twój plik CSS powinien być połączony w pliku HTML w następujący sposób: <link rel="style.css" href=“style.css"> zamiast polegać na użyciu metody @import . Metoda @import zwykle będzie znajdować się w górnej części zwykłego arkusza stylów i spowoduje, że przeglądarka cofnie się i odnajdzie zaimportowany plik, zanim będzie mogła odczytać resztę pliku CSS, co spowoduje jeszcze większe opóźnienie w renderowaniu Twojej strony internetowej
• Zmniejsz liczbę plików CSS w ścieżce krytycznej – jeśli to w ogóle możliwe, połącz wszystkie różne pliki CSS w jeden i usuń wywołanie tych plików z kodu HTML

JavaScript blokujący renderowanie

Aby usunąć kod JavaScript blokujący renderowanie, musisz wiedzieć, ile plików JavaScript zostało załadowanych i gdzie są one wywoływane w kodzie HTML. Dobrym sposobem na sprawdzenie tego jest skorzystanie z narzędzia Google PageSpeed ​​Insights. Kiedy australijska firma sprzątająca This Is Neat Cleaning budowała swoją witrynę, wykorzystała Google PageSpeed ​​Insights jako punkt odniesienia, testując różne scenariusze, aby dowiedzieć się dokładnie, czego potrzebują zarówno w przypadku urządzeń mobilnych, jak i komputerów stacjonarnych.

Z testów wynikało, że wstawienie większości skryptów na dole plików HTML dało najlepsze rezultaty. Głównym powodem jest to, że przenoszenie skryptów na dół strony zostało usunięte, co powoduje, że blokowanie javascriptu nie opóźnia wrażenia użytkownika. Ponieważ krytyczny CSS wciąż był ładowany w części strony widocznej na ekranie, użytkownik nadal mógł zasadniczo korzystać z witryny, podczas gdy interakcje i funkcje nadal były ładowane w tle.

Korzystanie z wtyczki

Oczywiście, tak jak w przypadku wszystkiego, co związane z WordPressem, możesz użyć wtyczki, aby naprawić problemy z blokowaniem renderowania. Przy ponad milionie aktywnych instalacji było oczywiste, że This is Neat Cleaning użyje W3 Total Cache do buforowania, minifikacji i optymalizacji wydajności.

Oto, w jaki sposób możesz użyć W3 Total Cache, aby naprawić problemy z blokowaniem renderowania.

Na pulpicie WordPress przejdź do Wydajność > Ustawienia i przewiń w dół do sekcji Minifikuj . Zaznacz pole Włącz , a następnie wybierz Ręcznie z menu rozwijanego obok trybu minifikacji. Zapisz ustawienia . Następnie musisz dodać wszystkie skrypty i style, które chcesz zminimalizować.

Aby dowiedzieć się, gdzie znajdują się skrypty i arkusze stylów, które blokują renderowanie, przejdź do narzędzia Google Page Speed ​​Insights i przeanalizuj swoją witrynę. Następnie spójrz na kartę sugestii i znajdź sekcję o treści: Wyeliminuj kod JavaScript i CSS blokujący renderowanie w treści strony widocznej na ekranie . Kliknij Pokaż, jak naprawić i wybierz i skopiuj adres URL pliku.

Wróć do pulpitu WordPress i przejdź do W3 Total Cache > Performance > Minify . Przewiń w dół do sekcji JavaScript i w sekcji Operacje w obszarach upewnij się, że typ osadzania jest ustawiony na Bez blokowania, używając odroczenia dla sekcji <head> . Następnie kliknij przycisk Dodaj skrypt i wklej adres URL skopiowany z narzędzia Google PageSpeed.

Po dodaniu wszystkich plików skryptów przewiń w dół do sekcji CSS , kliknij Dodaj arkusz stylów i dodaj adresy URL plików arkuszy stylów skopiowanych z Google PageSpeed ​​Insights.

Po zakończeniu kliknij przycisk Zapisz ustawienia i wyczyść pamięć podręczną .

Końcowe przemyślenia

Zasoby blokujące renderowanie mogą powodować chaos, jeśli chodzi o szybkość witryny. Na szczęście istnieje kilka sposobów rozwiązania tych problemów, więc skorzystaj z podanych tutaj wskazówek, aby poprawić szybkość witryny i zapewnić użytkownikom jak najlepsze wrażenia z użytkowania.