Podczas tworzenia strony internetowej jest kilka aspektów, które są najważniejsze, aby zapewnić użytkownikom płynne wrażenia. Jednym z tych aspektów jest czas ładowania. Witryna , która szybko się ładuje, jest zawsze doceniana przez odwiedzających, którzy chcą jak najszybciej znaleźć to, czego szukają. Aby uzyskać szybki czas ładowania, powinieneś dowiedzieć się, jak wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie.

Na szybkość działania strony internetowej może wpływać wiele czynników, ale największy wpływ mają czynniki omówione w tym artykule. Idealne równanie strony internetowej może być trudne do rozwiązania, ponieważ niektóre elementy nie zależą od twoich działań. Są one podyktowane każdą sytuacją w szczególności (np. położenie geograficzne, prędkość Internetu). Możesz jednak zoptymalizować dostarczanie CSS, modyfikując elementy, nad którymi masz pełną kontrolę. Dowiedz się więcej na ten temat poniżej w tym artykule stworzonym przez nasz zespół w wpDataTables.

Definiowanie treści blokujących renderowanie i treści w części strony widocznej na ekranie

Blokowanie renderowania

Blokowanie renderowania odnosi się do elementów, które uniemożliwiają wczytanie kluczowej treści witryny (np. głównego tekstu artykułu) przed załadowaniem całej strony. Dobrym przykładem takiego elementu jest dowolny dodatkowy JavaScript lub CSS dodany do strony internetowej. Ten kod może uniemożliwić użytkownikowi zobaczenie czegokolwiek w przeglądarce, dopóki kod nie zostanie w pełni wykonany, przez co blokuje renderowanie.

Zawartość strony widocznej na ekranie

Kiedy odwiedzający wchodzi na stronę internetową, jest witany przez określoną część witryny – tj. część najwyższą. Aby zobaczyć resztę, użytkownik będzie musiał przewinąć w dół lub wykonać inne czynności na stronie. Treść, którą odwiedzający widzą natychmiast po uzyskaniu do niej dostępu, nazywana jest treścią w części strony widocznej na ekranie.

O blokowaniu renderowania w JavaScript i CSS

Przeglądarki odczytują kod HTML w celu wyświetlenia witryny. Jest to proces wieloetapowy. Jeśli przeglądarka natknie się na elementy, które odwołują się do skryptu/arkusza stylów, wymagane są dodatkowe kroki, aby odczytać kod. Przeglądarka będzie musiała zażądać pliku, poczekać na odpowiedź, pobrać plik z serwera, a następnie wykonać plik.

Oczywiście te dodatkowe kroki mogą spowolnić czas ładowania. Pamiętaj, że niektóre motywy WordPress zawierają więcej niż jeden plik CSS lub jeden plik JavaScript. Z powodu tych plików czas ładowania może zostać znacznie spowolniony. To jest powód, dla którego musisz wyeliminować ze swojej witryny zasoby blokujące renderowanie. Najczęściej nie są to pliki krytyczne, więc możesz odroczyć parsowanie JavaScript, aby zmniejszyć blokowanie renderowania strony, poprawiając w ten sposób szybkość działania Twojej witryny.

Identyfikowanie blokującego renderowanie kodu JavaScript i CSS

Aby wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie, musisz określić, czym są te elementy. Jednym z najłatwiejszych sposobów ich identyfikacji jest otwarcie witryny za pomocą narzędzia szybkości strony, które informuje, jakie problemy napotyka podczas ładowania. Google PageSpeed Insights to jedno z takich narzędzi, które powinno pomóc Ci znaleźć pliki, które blokują renderowanie w Twojej witrynie. Gdy już zorientujesz się, jakie są pliki, możesz przystąpić do usunięcia lub zmiany kolejności kodu JavaScript blokującego renderowanie.

Jak wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie?

W tej sytuacji masz dwie możliwości: dowiedz się, jak samodzielnie wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie lub użyj wtyczki, aby to zrobić. Jeśli znasz się na technologii i chcesz dowiedzieć się, jak eliminowane są zasoby blokujące renderowanie, zastosuj jedną z tych metod:

Usuń JavaScript z krytycznej ścieżki renderowania

Krytyczna ścieżka renderowania powinna zawierać tylko te elementy, które są niezbędne dla witryny. Możesz usunąć niepotrzebne zasoby JavaScript z tej ścieżki. Odbywa się to poprzez dodanie pewnych atrybutów, w których wymagany jest JavaScript. Atrybuty to:

Async: ten atrybut informuje przeglądarkę, że powinna natychmiast rozpocząć pobieranie zasobów, aby uniknąć powolnego ładowania. Gdy zasoby są dostępne, analizowanie kodu HTML jest tymczasowo wstrzymywane, a zasoby są ładowane.
Defer: ten atrybut informuje przeglądarkę o odroczeniu pobierania zasobów do czasu zakończenia procesu parsowania HTML. Po zakończeniu przeglądarka pobierze i wyrenderuje skrypty w kolejności ich pojawiania się na stronie.

Sprawdź, jak dostarczane są zasoby CSS i zoptymalizuj je

Aby wyeliminować zasoby blokujące renderowanie w CSS, musisz:

Zidentyfikuj zasoby wymagane do zawartości strony widocznej na ekranie i umieść style CSS w HTML.
Użyj innego atrybutu, aby zidentyfikować zasoby CSS, które są absolutnie wymagane (atrybut media).
Załaduj zasoby CSS asynchronicznie (używając atrybutów omówionych powyżej).

Lista wtyczek, które mogą pomóc w łatwiejszym wyeliminowaniu kodu JavaScript blokującego renderowanie

Autooptymalizacja

Aby wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie z WordPressa, możesz użyć wtyczek, takich jak Autoptimize. Ta wtyczka poprawia czas ładowania witryny WordPress, łącząc fragmenty kodu, zmniejszając bloki kodu poprzez usuwanie niepotrzebnych znaków (kompresja) i tak dalej. Wprowadzając te zmiany, kod jest łatwiejszy do odczytania, a rozmiar pliku zostaje zmniejszony, co skraca czas ładowania o kilkaset milisekund, a nawet sekund.

Aby zainstalować tę wtyczkę, wystarczy uzyskać dostęp do pulpitu WordPress i przejść do zakładki Wtyczki. Następnie wybierz opcję Dodaj nowy, która znajduje się w górnej części okna. Następnie możesz poszukać Autoptimize lub innych wtyczek na pasku wyszukiwania. Kliknij Zainstaluj teraz, aktywuj go dla wybranej witryny i gotowe.

W3 Całkowita pamięć podręczna

Autoptimize ma wiele innych alternatyw, których możesz użyć do usunięcia zasobów blokujących renderowanie z WordPress. Wtyczka W3 Total Cache jest jedną z lepszych. Interesujące w tej wtyczce jest to, że zawiera wiele dodatkowych funkcji optymalizacji WordPress. Buforowanie oznacza proces, w którym określone pliki są przechowywane na komputerze użytkownika, aby poprawić jego wrażenia z korzystania ze strony internetowej. Wizyty w kolejnych sekwencjach będą łatwiejsze, a czasy ładowania ulegną poprawie.

Pakiet przyspieszający prędkość

Inną opcją jest Speed Booster Pack. Po zainstalowaniu możesz uzyskać dostęp do ustawień i wybrać opcje, które odpowiadają Twoim potrzebom. Wtyczka oferuje kilka opcji konfiguracyjnych, takich jak przenoszenie skryptów do stopki lub wyłączanie plików JavaScript z parsowania. Wybierając je, możesz usunąć blokujące renderowanie kody JavaScript i CSS z treści w części strony widocznej na ekranie za pomocą zaledwie kilku kliknięć.

Optymalizacja JCH

JCH Optimize to wtyczka, która łączy JavaScript i CSS, jednocześnie zmniejszając rozmiar plików. Ma wiele innych funkcji, które mogą być przydatne na dłuższą metę, ale świetnie nadaje się do eliminowania zasobów blokujących renderowanie. Poruszaj się po jego ustawieniach i aktywuj funkcje, które wydają się istotne dla Twojej witryny.

Mimo że wymaga to trochę uwagi, rozwiązanie tego problemu będzie miało ogromny wpływ na Twoją witrynę. Gdy już nauczysz się, jak usunąć blokujący renderowanie kod JavaScript i CSS z treści w części strony widocznej na ekranie, upewnij się, że jak najszybciej wykorzeniłeś wszelkie elementy, które mogą spowolnić działanie Twojej witryny.

Jeśli podobał Ci się ten artykuł o tym, jak wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie, powinieneś zapoznać się z tym artykułem o tym, jak zmieniać czcionki w WordPressie.

Pisaliśmy również o kilku powiązanych tematach, takich jak jak osadzić iframe WordPress, jak znaleźć identyfikator strony w WordPressie, jak pobrać bibliotekę multimediów WordPress, jak zatrzymać atak DDoS i jak ukryć tytuł strony w WordPressie.

Źródło nagrywania: wpdatatables.com