Jak usunąć blokujące renderowanie JS i CSS dla szybkości witryny?

Chociaż estetyka strony jest ważna, jej zawartość i szybkość ładowania sprawiają, że ludzie wracają. WordPress dostarcza użytkownikom wyrafinowany zestaw wtyczek i motywów do szybkiego tworzenia własnych, niestandardowych stron internetowych.

Jednak te motywy i wtyczki wymagają do działania JavaScript (JS) i kaskadowych arkuszy stylów (CSS). WordPress tworzy je automatycznie w postaci plików skryptowych. Często są słabo zoptymalizowane. W związku z tym mogą znacznie spowolnić Twoją witrynę.

To może być frustrujące dla czytelników. Dlatego w tym przewodniku dowiemy się, jak znaleźć i usunąć te skrypty blokujące renderowanie i pokażemy, jak zwiększyć szybkość ładowania witryny WordPress.

Czym są blokujące renderowanie skrypty JS i CSS i dlaczego są złe?

Większość stron internetowych w Internecie składa się z trzech kluczowych komponentów: JavaScript, CSS i Hypertext Markup Languages. HTML służy jako podstawa, a JavaScript i CSS są w nim osadzone. Jednak w dzisiejszych czasach osadzanie wywołań zewnętrznych skryptów w dokumencie HTML jest bardziej konwencjonalne.

Skrypty te są przechowywane w kolejce używanej przez przeglądarkę internetową do renderowania strony internetowej. Najłatwiejszym sposobem sprawdzenia, jakich skryptów używa strona internetowa bez patrzenia na kod źródłowy, jest pobranie go z przeglądarki internetowej (Ctrl + S). Przeglądarka internetowa pobierze dokument HTML wraz z folderem ze wszystkimi (lub większością) skryptów, obrazów i innych plików używanych przez stronę internetową.

Im bardziej złożone skrypty Twoja strona internetowa musi wywoływać z kolejki, tym dłużej zajmie renderowanie. Często przeglądarki internetowe pobierają zasoby stron internetowych, takie jak skrypty i obrazy, do lokalnej pamięci podręcznej, aby szybciej ładować strony internetowe. Chociaż użytkownicy po stronie klienta mogą przyspieszyć czas renderowania strony internetowej, wyłączając JavaScript, zwiększając rozmiar pamięci podręcznej i używając AdBlockerów, nie jest to idealne rozwiązanie. Obowiązek powinien leżeć po stronie programisty.

Jeśli otrzymasz skargi lub zauważysz, że Twoja witryna ma problemy z renderowaniem treści, nie jest za późno, aby to naprawić.

Jak zoptymalizować swoją witrynę, znajdując i naprawiając skrypty blokujące renderowanie

Przed podjęciem decyzji, które skrypty mają zostać zamknięte lub zoptymalizowane, musisz ocenić szybkość swojej witryny lub strony internetowej. Możesz skorzystać z platformy internetowej, takiej jak GTmetrix lub Google PageSpeed ​​Insights. Wszystko, co musisz zrobić, to wstawić adres URL witryny lub strony internetowej, którą chcesz przetestować, a narzędzie oceni go i dostarczy inne informacje.

Zaproponują również audyty, których możesz użyć, aby przyspieszyć swoją witrynę. Na przykład zaproponują, abyś używał mniej elementów na swojej stronie internetowej lub ograniczył nieużywany CSS i JavaScript. GTmetrix posunie się nawet do pokazania, które skrypty wymagają optymalizacji.

Możesz też użyć karty Coverage Chrome DevTools, aby wyświetlić dane dotyczące wykorzystania swoich skryptów. Po zidentyfikowaniu, które skrypty są nieoptymalne, możesz zrobić kilka rzeczy, aby je naprawić. Jednak te kroki będą wymagały sporej umiejętności kodowania, aby je pomyślnie wdrożyć. Będziesz potrzebować przynajmniej podstawowej wiedzy na temat funkcjonalnego programowania JavaScript.

Dołączenie do kursu kodowania (lub bootcampu) jest również dobrym pomysłem, aby dalej rozwijać swoje umiejętności. Przeciętnie szkolenie w zakresie kodowania może trwać do piętnastu tygodni i chociaż może to wydawać się długim czasem, warto, biorąc pod uwagę, jak ważna jest umiejętność czytania we współczesnym świecie. Niemniej jednak, oto pięć sposobów na naprawienie skryptów blokujących renderowanie i zwiększenie szybkości strony internetowej.

1. Zoptymalizuj kolejność ładowania

Sekcja head (</head></head> ) strony internetowej służy do wstępnego ładowania elementów. Podstawa Twojej strony internetowej powinna znajdować się tutaj, więc biały ekran nie wita użytkownika podczas ładowania strony internetowej. Chociaż osadzony CSS jest w porządku, powinieneś unikać umieszczania tutaj JavaScript.

Po zoptymalizowaniu sekcji głowy musisz zoptymalizować ciało. Większość przeglądarek internetowych renderuje strony internetowe od góry do dołu. Musisz uporządkować wywołania skryptów według ich ważności i złożoności. Powinieneś wywołać skrypty, które nie są kluczowe dla ostatniego renderowania strony internetowej, a także złożone skrypty, które wymagają czasu.

2. Zminimalizuj kod

Minimalizowanie kodu polega na przepisaniu go i usunięciu niepotrzebnych znaków, takich jak spacje, komentarze, przecinki, podziały wierszy itp. Dzięki temu kod jest bardziej zwięzły i kompaktowy, co ostatecznie zmniejsza rozmiar skryptu i wydłuża czas ładowania strony internetowej.

Wtyczki i narzędzia, takie jak W3TC, mają moduły, które minimalizują JavaScript i CSS w Twoich motywach. Alternatywnie możesz ręcznie zminimalizować kod skryptu za pomocą bezpłatnego narzędzia online, takiego jak JavaScript Minifier.

3. Używaj odroczonego i asynchronicznego ładowania JavaScript

Przeglądarki internetowe odczytują kod od góry do dołu. Gdy napotkają tag skryptu, przestają ładować stronę internetową i czytają plik skryptu. Spowalnia to renderowanie.

Możesz użyć atrybutu asynchronicznego , aby załadować skrypt równolegle ze stroną internetową i wykonać go, gdy tylko będzie dostępny. Alternatywnie możesz użyć atrybutu defer , aby odroczyć parsowanie skryptów. Oznacza to, że załaduje również skrypt równolegle do strony internetowej, ale wykona go tylko wtedy, gdy przeglądarka przeanalizuje stronę internetową.

Radzimy, aby nie używać atrybutów asynchronicznych ani odroczonych w skryptach używanych do renderowania i wyświetlania elementów wizualnych. Odpowiedniki słów kluczowych JavaScript do tych atrybutów to słowa kluczowe asynchroniczne i await . Możesz ich użyć do bardziej asynchronicznego ładowania kodu JavaScript bez edytowania tagów HTML na swojej stronie internetowej.

4. Zastąp elementy wizualne JavaScript kodem CSS3

W przeszłości CSS nie był tak wszechstronny jak dzisiaj. Na przykład CSS 1.0 i 2.0 były pozbawione narzędzi interfejsu użytkownika, takich jak podstawowe kontrolki i suwaki.

Potem pojawił się CSS 3. Przedstawiał nowe kolory, cienie, krycie itp. JavaScript świetnie nadaje się do dodawania złożonych kontrolek interfejsu użytkownika. Jednak JavaScript jest cięższy w zasobach niż CSS.

Dlatego używanie nadmiernej ilości JavaScriptu znacznie spowalnia Twoją witrynę. Jeśli zauważysz, że Twoja strona internetowa korzysta z JavaScript, aby podnieść luz w miejscu, w którym poprzednie wersje CSS nie działały, powinieneś to zmienić i zastąpić cały niepotrzebny JavaScript CSS – tam, gdzie możesz. Umożliwi to szybsze ładowanie stron internetowych.

5. Wyeliminuj wszystkie niepotrzebne skrypty

Celem JS i CSS jest rozszerzenie funkcjonalności na strony internetowe i dodanie logiki tam, gdzie HTML nie może. Jednak pojawił się HTML 5.3 z nowymi tagami, które sprawiły, że niektóre operacje CSS i JS były niepotrzebne. Używanie HTML zamiast skryptów naturalnie przyspiesza ładowanie stron internetowych.

Dlatego najlepszym sposobem na zoptymalizowanie szybkości witryny jest wyeliminowanie wszystkich niewykorzystanych skryptów. Musisz przeanalizować, które skrypty są całkowicie niepotrzebne i usunąć je. Ponownie możesz użyć karty Coverage Chrome DevTools lub GTmetrix, aby znaleźć najczęściej wykorzystywane skrypty na swojej stronie internetowej, a następnie je usunąć.

Po usunięciu wszystkich niepotrzebnych funkcji lub tagów możesz łączyć skrypty o podobnych funkcjach. Jeśli już wiesz, jak poruszać się po kodzie źródłowym swojej strony internetowej, nie powinno to być dla Ciebie trudne zadanie. Jednak użytkownicy, którzy nie są tak doświadczeni lub kompetentni w projektowaniu stron internetowych, nie powinni się martwić. WordPress ułatwia identyfikowanie skryptów na Twojej stronie i edycję ich za pomocą różnych wtyczek optymalizacyjnych. Zajmiemy się nimi w następnej kolejności.

6. Używanie wtyczek do optymalizacji witryny WordPress

Ponownie, nie potrzebujesz praktycznej wiedzy na temat programowania, aby zoptymalizować swoją witrynę WP. Chociaż trochę doświadczenia by pomogło. Niemniej jednak istnieje szereg wtyczek nastawionych na optymalizację skryptów. Niektóre z nich wykorzystują sztuczną inteligencję do minimalizacji kodu, zmiany kolejności ładowania i zastępowania niewykorzystanych skryptów bardziej wydajnym kodem i skryptami.

Niektóre z najlepszych wtyczek do optymalizacji skryptów to:

• WP Rocket : Jest to jedna z najpopularniejszych wtyczek do optymalizacji sieci. Może automatycznie wykryć, które skrypty są problematyczne i naprawić je za Ciebie. Możesz go używać do szybkiego buforowania, szacunku, kompresji i minifikacji.
• Autooptymalizacja : może opóźnić i wyeliminować niepotrzebne skrypty, zintegrować wbudowany CSS i zminimalizować skrypty, HTML i obrazy. Autoptimize jest wysoce konfigurowalny dzięki otwartemu interfejsowi API i zaawansowanym opcjom.
• W3 Total Cache : Ta wtyczka wymaga trochę pracy. Będziesz musiał ręcznie śledzić i identyfikować skrypty przed ich usunięciem lub edycją. W większości przypadków ta wtyczka jest już dostępna w pakiecie WordPress.
• Async Javascript : wtyczka typu open source prezentowana przez WordPress. Pozwala wykryć blokujący renderowanie JavaScript, a następnie odroczyć go lub asynchronicznie go załadować.

Dlaczego więc po prostu nie poleciliśmy wtyczek? Niestety, niektóre z tych wtyczek będą Cię kosztować. Na przykład Autoptimize kosztuje 49 USD rocznie. Chociaż jest to rozsądna opłata, może być nieidealna dla osób, które już płacą dużą część pieniędzy za hosting oraz inne aplikacje i wtyczki.

Niemniej jednak, niezależnie od tego, czy używasz wtyczek, czy ręcznie wyszukujesz skrypty, musisz zrozumieć takie pojęcia, jak minifikacja, asynchroniczne ładowanie i kolejność ładowania. Ułatwi Ci to rozwiązywanie problemów z ładowaniem w przypadku awarii jednego z Twoich skryptów.