Jeśli prowadzisz swoją witrynę za pośrednictwem Lighthouse, być może zauważyłeś sugestię usunięcia zasobów blokujących renderowanie.
Opóźniając JavaScript i umieszczając ważne style CSS w tekście, możesz pozbyć się zasobów WordPress, które spowalniają renderowanie. Jest to obsługiwane przez większość wtyczek pamięci podręcznej, Autoptimize i Async JavaScript. Zarówno Elementor , jak i Divi mają wbudowane sposoby pozbycia się zasobów, które powstrzymują renderowanie strony, przy użyciu odroczonego i wbudowanego CSS. Usunięcie niepotrzebnego kodu CSS, JavaScript i kodu innej firmy również może pomóc w rozwiązaniu problemu.
W tym artykule zdefiniujemy zasoby blokujące renderowanie i omówimy zalety pozbycia się ich ze swojej witryny. Następnie zademonstrujemy Ci pięć alternatywnych sposobów pozbycia się ich.
Czym są zasoby blokujące renderowanie ?
Zrozumienie typowego procesu ładowania strony internetowej jest kluczowe, zanim przyjrzymy się bliżej zasobom blokującym renderowanie. Cała zawartość Twojej witryny musi zostać zrenderowana (lub pobrana) przez przeglądarkę odwiedzającego po kliknięciu łącza do niej. Odczytuje cały kod HTML, CSS i JavaScript w Twojej witrynie od góry do dołu. Twoja witryna nie będzie widoczna dla odwiedzających, dopóki przeglądarka nie skończy czytać tej kolejki skryptów. Być może będą musieli długo czekać, jeśli istnieją zasoby blokujące renderowanie. Zasadniczo plik CSS lub JavaScript, który uniemożliwia przeglądarce ładowanie innych treści podczas ich przetwarzania, jest zasobem blokującym renderowanie. Może to zatrzymać proces renderowania i sprawić, że strona będzie wyglądać na niedokończoną lub pustą.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć terazJeśli w Twojej witrynie znajdują się zasoby blokujące renderowanie, dodatkowe pliki są ładowane u góry kodu. Przed wyświetleniem witryny użytkownicy muszą poczekać na przetworzenie tych plików. Zasoby blokujące renderowanie mogą potencjalnie wpłynąć na kilka wskaźników wydajności witryny. Na przykład największa zawartość treści mierzy, ile czasu zajmuje załadowanie głównej zawartości strony. Pierwsze renderowanie przez przeglądarkę materiału z DOM (Document Object Model) Twojej witryny jest znane jako pierwsze malowanie zawartości. Całkowity czas blokowania to czas między pierwszym malowaniem treści a czasem interakcji (ile czasu potrzeba, aby strona stała się w pełni interaktywna).
Chociaż nie są one niezbędne do ładowania, zasoby blokujące renderowanie mogą utrudniać renderowanie. W rezultacie może ucierpieć doświadczenie użytkownika Twojej witryny (UX). Dlatego ważne jest, aby się ich pozbyć, aby uniemożliwić odwiedzającym opuszczanie Twoich stron.
Korzyści z wyeliminowania zasobów blokujących renderowanie
Internauci na ogół nie lubią czekać na załadowanie się stron internetowych. Szybka witryna internetowa może zachęcić użytkowników do zapoznania się z Twoimi materiałami i powstrzymać ich przed odwiedzeniem konkurencji. Usuwając elementy blokujące renderowanie, maksymalnie upraszczasz kod swojej witryny, co może być sekretem zwiększania szybkości strony. Ponieważ wydajność witryny i zaangażowanie użytkowników to dwa czynniki, które giganci wyszukiwarek, tacy jak Google, biorą pod uwagę podczas oceny witryn, usunięcie plików blokujących renderowanie może pomóc w podniesieniu pozycji witryny w wyszukiwarkach.
Jak wyeliminować zasoby blokujące renderowanie w WordPress
Być może zastanawiasz się, jak usunąć elementy blokujące renderowanie ze swojej witryny, teraz, gdy wiesz, jak je wykryć w WordPress. Na szczęście stworzyliśmy listę wielu podejść, które możesz zastosować, aby to osiągnąć, zaczynając od najprostszych.
Zoptymalizuj ładowanie CSS
Zwiększenie szybkości ładowania CSS w Twojej witrynie to jedna z technik pozbycia się zasobów blokujących renderowanie. Przeglądarka ładuje twoją stronę internetową od góry do dołu, jak wspomniano wcześniej. Może to spowodować wydłużenie procesu ładowania, gdy niektóre pliki wymagają przetworzenia. Bardzo ważne jest, aby pamiętać, że tylko niektóre pliki CSS muszą zostać załadowane, aby strona została wyświetlona. Dlatego podczas optymalizacji ładowania CSS możesz najpierw wyświetlić najważniejsze pliki. CSS blokujący renderowanie można usunąć ręcznie, ale możesz też zainstalować wtyczkę, aby to ułatwić. Możesz zoptymalizować swoją witrynę bezpośrednio z pulpitu nawigacyjnego WordPress za pomocą Jetpack Boost. Ta wtyczka ułatwia wdrożenie leniwego ładowania, odroczenie nieistotnego kodu JavaScript i usprawnienie ładowania CSS. Jednym z najprostszych sposobów na pozbycie się zasobów blokujących renderowanie w WordPressie jest zrobienie tego.
Zacznij od wyszukania Jetpack Boost w obszarze Wtyczki Dodaj nowy na pulpicie nawigacyjnym WordPress. Zainstaluj, a następnie włącz wtyczkę na swojej stronie internetowej.
Możesz przejść do Jetpack Mój Jetpack, jeśli masz już załadowany Jetpack. Poszukaj Boost i wybierz Aktywuj z listy towarów Jetpack.
Po aktywacji wtyczki kliknij zakładkę Jetpack Boost i wybierz Rozpocznij.
Twoja witryna natychmiast otrzyma ocenę wydajności od Jetpack. Zobaczysz ocenę literową wraz z informacjami o wynikach na komputerze i urządzeniu mobilnym.
Następnie aktywuj tę funkcję, przewijając w dół do Optymalizuj ładowanie CSS. Po aktywacji Jetpack Boost podniesie kluczowe CSS dla Twojej witryny, aby ładowała się szybciej.
Odłóż nieistotny JavaScript
Możesz podjąć więcej działań, aby pozbyć się zasobów blokujących renderowanie w WordPressie, poza optymalizacją ładowania CSS. Nieistotny JavaScript można również odłożyć, aby jeszcze bardziej przyspieszyć ładowanie witryny. Nieistotny JavaScript można opóźnić, aby opóźnić niektóre procesy do czasu załadowania treści. Możesz uniemożliwić przeglądarce wykonywanie plików JavaScript, jeśli nie są one wymagane do załadowania strony. Na szczęście użycie wtyczki Jetpack Boost sprawia, że jest to proste. Możesz łatwo odłożyć nieistotny JavaScript po zoptymalizowaniu procesu ładowania CSS. Włącz przełącznik w obszarze Odrocz nieistotny JavaScript. Ta sekcja znajduje się pod sekcją Optymalizuj ładowanie CSS.
Wtyczka zaktualizuje swoją ocenę ogólnej wydajności strony po włączeniu tego ustawienia. Twój wynik zarówno przed, jak i po użyciu Jetpack Boost zostanie wyświetlony.
Spójrz na wyniki na zrzutach ekranu zrobionych zarówno przed, jak i po zakończeniu tego procesu. Zauważysz, że zwiększenie szybkości strony osiągnięto dzięki opóźnieniu nieistotnego kodu JavaScript i wydajniejszemu ładowaniu CSS. Przeglądarki mogą ładować Twoje treści szybciej, ponieważ nie muszą wykonywać dużych skryptów.
Odłóż obrazy poza ekranem
Chociaż obrazy nie są zasobem, który uniemożliwia renderowanie stron, warto pomyśleć o przyspieszeniu ich ładowania. Witryny często zawierają obrazy poza ekranem, które nie są wyświetlane, dopóki użytkownik nie wejdzie w interakcję ze stroną, na przykład podczas przewijania. Możesz je opóźnić za pomocą leniwego ładowania, ponieważ nie są one konieczne do załadowania strony internetowej. Tylko obrazy, które widzą odwiedzający, są ładowane w leniwy sposób. Te zdjęcia zostaną załadowane tuż przed wyświetleniem na stronie po przewinięciu przez użytkownika. Przeglądarka spróbuje załadować wszystkie obrazy na stronie jednocześnie, jeśli leniwe ładowanie nie jest włączone. Im dłużej trwa ładowanie materiału, tym bardziej prawdopodobne jest, że odwiedzający opuszczą Twoją witrynę.
Regularne ładowanie może nie stanowić problemu, jeśli użytkownik korzysta z komputera stacjonarnego. Z drugiej strony smartfony i tablety mają mniejsze ekrany i mniejszą przepustowość. Twoja witryna może zużywać więcej przepustowości i dłużej wczytywać się użytkownikom telefonów komórkowych, jeśli wszystkie zdjęcia wczytują się jednocześnie. Ten problem został rozwiązany przez leniwe ładowanie.
Aby włączyć leniwe ładowanie na swojej stronie, użyj Jetpack Boost. Po prostu poszukaj opcji Lazy Image Loading i włącz ją.
Jeśli to zrobisz, widz zobaczy ładowanie obrazów w Twojej witrynie tylko wtedy, gdy przewinie stronę w dół. Chociaż zdjęcia nie są zasobem, który renderuje bloki, włączenie leniwego ładowania może przyspieszyć twoją stronę.
Wyeliminuj zasoby blokujące renderowanie dzięki Elementor/Divi
Zarówno Elementor , jak i Divi zawierają opcje usuwania zasobów utrudniających renderowanie.
Włącz Ulepszone ładowanie CSS i Font-Awesome Inline w ustawieniach Eksperymentów Elementor , aby ładować CSS i czcionki inline, dzięki czemu nie będą blokować renderowania. Ulepszone ładowanie zasobów eliminuje niepotrzebne CSS/JavaScript, co poprawia podstawowe parametry sieciowe na różne sposoby.
Stosując kluczowy CSS, opóźniając CSS/JavaScript i ładując czcionki w tekście, opcje wydajności Divi mogą również zmniejszyć zasoby blokujące renderowanie.
Ręcznie usuń JavaScript blokujący renderowanie
Możesz także ręcznie usunąć zasoby blokujące renderowanie, chociaż instalacja wtyczki optymalizacyjnej jest znacznie łatwiejszą opcją. Idealnie, powinieneś pomyśleć o tym wyborze tylko wtedy, gdy jesteś doświadczonym programistą. Jeśli chcesz ograniczyć liczbę wtyczek w swojej witrynie, ta procedura może być również pomocna. Możesz nadać swoim plikom właściwość async lub defer, aby JavaScript działał wydajniej. Przeglądarka zostanie poinstruowana, aby oddzielnie renderować niekrytyczne skrypty, oznaczając je jako takie. Obie cechy można wykorzystać do przyspieszenia ładowania informacji HTML.
Plik HTML jest analizowany w typowy sposób, dopóki nie napotka pliku skryptu. Analiza zostanie zatrzymana na czas zlokalizowania skryptu. Po pobraniu i uruchomieniu analizowanie jest kontynuowane.
Podczas przetwarzania pozostałego HTML przeglądarka może pobrać JavaScript dzięki funkcji asynchronicznej. Po pobraniu może zatrzymać przetwarzanie HTML i uruchomić skrypt.
Atrybut defer działa podobnie, umożliwiając przeglądarce pobranie skryptu podczas analizowania kodu HTML. Różnica polega na tym, że opóźnia również uruchomienie skryptu do czasu zakończenia parsowania HTML.
Aby zaimplementować którąkolwiek z tych właściwości, musisz dołączyć fragment kodu do swojego pliku functions.php. Najpierw należy zlokalizować znacznik script> zasobu blokującego renderowanie. następujące jako atrybut asynchroniczny:
<script src="resource.js" async></script>Alternatywnie, zastanów się, jak może wyglądać skrypt, gdy używana jest właściwość odroczenia:
http://resource.jsChociaż wtyczka może zadbać o te atrybuty za Ciebie, zrobienie tego samodzielnie może lepiej odpowiadać Twoim preferencjom. Jeśli tak, ważne jest, aby zrozumieć, kiedy zastosować każdy atrybut. Należy użyć właściwości odroczenia dla nieistotnych skryptów, które zależą od innego skryptu. Opcja async jest odpowiednia dla wszystkich innych skryptów.
Zastosuj atrybuty asynchroniczne lub odroczone za pomocą wtyczki
Użyj wtyczki, takiej jak Async JavaScript, jeśli masz problemy z ręczną edycją skryptów. Dzięki temu narzędziu masz pełną kontrolę nad tym, które skrypty mają właściwość async lub defer.
Po zainstalowaniu wtyczki wybierz opcję Włącz asynchroniczny JavaScript w Ustawieniach Asynchroniczny JavaScript.
Następnie przejdź do sekcji zatytułowanej Async JavaScript Method. Tutaj możesz wybrać, czy włączyć atrybuty asynchroniczne, czy odroczone.
Dobrym pomysłem jest wykluczenie tych skryptów, ponieważ wiele wtyczek jest zależnych od jQuery. Zastosowanie właściwości asynchronicznych do jQuery może spowodować uszkodzenie witryny.
W razie wątpliwości możesz użyć atrybutu defer, ale całkowite wykluczenie jQuery jest najlepszym rozwiązaniem.
Możesz teraz określić, które skrypty chcesz uruchamiać asynchronicznie lub z opóźnieniem. Musisz uważać, aby umieścić każdy skrypt w odpowiedniej sekcji.
Możesz wymienić wszystkie skrypty, które chcesz wykluczyć z tej procedury w sekcji Wykluczenia skryptów.
Istnieją również opcje wykluczania wtyczek i motywów na dole strony. Skrypty dla jakichkolwiek wspomnianych tutaj motywów lub wtyczek nie będą miały zastosowania do cech asynchronicznych lub odroczonych.
Po dokonaniu niezbędnych zmian możesz kliknąć Zapisz ustawienia. Takie podejście może być użytecznym kompromisem między ręczną zmianą skryptów a użyciem wtyczki do wykonania zadania za Ciebie. Alternatywnie możesz wyeliminować te dodatkowe kroki, używając uniwersalnej aplikacji, takiej jak Jetpack Boost.
Podsumowanie
Zmuszając przeglądarki odwiedzających do odkładania renderowania treści widocznej na ekranie podczas pobierania zasobów, które nie są natychmiast potrzebne, zasoby blokujące renderowanie wydłużają postrzegany czas ładowania strony w Twojej witrynie WordPress. Należy opóźnić ładowanie zasobów, które nie są natychmiast potrzebne, aby pomóc odwiedzającym w szybszym ładowaniu widocznego obszaru strony. Użyj gotowych wtyczek, aby pozbyć się zasobów blokujących renderowanie w WordPress. Możesz połączyć Autoptimize i Async JavaScript, dwie wtyczki stworzone przez tego samego programistę, aby uzyskać bezpłatne rozwiązanie. Możesz skorzystać z WP Rocket, który oferuje szczególną interakcję z Kinsta i może pomóc w wielu dodatkowych ulepszeniach wydajności WordPress, jeśli jesteś gotowy za to zapłacić.
