Napraw Google PageSpeed ​​Wyeliminuj JavaScript i CSS z blokowaniem wyświetlania w części strony widocznej na ekranie

Rozwiąż renderowanie blokujące Javascript i CSS

Test  Google PageSpeed   ​​[1] Wyeliminuj blokujące renderowanie skrypty JavaScript i CSS w części strony widocznej na ekranie sugeruje dostarczanie plików JS i CSS witryny po pełnym załadowaniu HTML - i dlatego nie wstrzymuj ładowania HTML aby je pobrać.

Definicja skryptu blokującego renderowanie: skrypty ładowane przed przeanalizowaniem pełnego HTML DOM. Na przykład skrypty zawarte w nagłówku lub w treści, bez żadnych konkretnych instrukcji dla przeglądarek, aby opóźnić ładowanie skryptu do czasu zakończenia malowania HTML.

Wyeliminuj blokujące renderowanie JavaScript i CSS w części strony widocznej na ekranie: pokaż, jak to naprawić

1. Skorzystaj z zewnętrznego systemu, aby zoptymalizować Twoją witrynę
   
2. Użyj sieci CDN, która wykona wszystkie możliwe optymalizacje w Twoim imieniu, w tym trzy następujące optymalizacje niezbędne do wyeliminowania zasobów blokujących renderowanie:
   
3. Odłóż ładowanie plików Javascript
   
4. Załaduj CSS po załadowaniu HTML
   
5. Użyj wtyczki WordPress
   

Koniecznych jest wiele optymalizacji, aby wyeliminować zasoby blokujące renderowanie, a ich samodzielne wdrożenie może być żmudne - poza tym, wśród innych testów szybkości strony, będziesz musiał stale szukać nowych testów zawartych w Chrome LightHouse i Google PageSpeed.

Nie ma istniejącego rozwiązania, które wyeliminowałoby zasoby blokujące renderowanie w kodzie htaccess, ponieważ problem jest związany z DOM, czyli zawartością strony internetowej i kolejnością ładowania zawartych zasobów, takich jak JavaScript i CSS, ale nie tylko. Nie można ich uruchomić w Htaccess, ale tylko w treści HTML DOM.

Jeśli rozwiążesz te problemy na komputerach stacjonarnych, jednocześnie wyeliminujesz zasoby blokujące renderowanie dla urządzeń mobilnych, ponieważ oba są dokładnie takie same!

Did you know that you can even have all these steps executed automatically for you by using an external  Site Speed ​​Accelerator   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Odrocz ładowanie plików Javascript

Aby odłożyć obciążenie plików JS [2], możesz dodać instrukcję asynchroniczną lub odroczoną do linków skryptów. Async nie gwarantuje, że są one załadowane w tej samej sekwencji - dlatego jeśli masz kilka skryptów, które powinny być uruchamiane jeden po drugim, lepiej jest odroczyć sekwencję:

Załaduj CSS po załadowaniu HTML

Aby kod CSS był ładowany po przesłaniu całego HTML, Google proponuje [3] ten fragment kodu na końcu kodu HTML, na przykład po tagu zamykającym stopkę i przed tagiem zamykającym treść:

Aby zoptymalizować witrynę, to również dobry pomysł, aby usunąć nieużywany kod CSS, operację, która może być nudna, jeśli nie masz wiedzy w projekcie internetowym. Jeśli sam nie stworzyłeś swojego tematu, może być mądrzejszy, aby użyć systemu zewnętrznego, aby usunąć nieużywany kod CSS na stronach w imieniu, takich jak Ezoic Leap, na przykład, nowa (i całkowicie darmowa) wersja ich niesamowitej witryny Przyspieszenie prędkości.

Zdaj test szybkości witryny Google!

Pozwoliło mi to przejść test  Google PageSpeed   ​​[1] Wyeliminowanie blokowania wyświetlania JavaScript i CSS w części strony widocznej na ekranie (wraz z buforowaniem przeglądarki Leverage [4]) na stronie internetowej, zwiększając wynik z 51 na komórki ( Ryc. 1) do 72 (ryc. 2) i do 59 (ryc. 3) do 79 na pulpicie (ryc. 4).

Jak wyeliminować zasoby blokujące renderowanie w WordPressie

Aby wyeliminować zasoby blokujące renderowanie w WordPressie, konieczne jest zainstalowanie wtyczki, takiej jak JetPack.

Następnie przejdź do opcji, dla których musisz być administratorem, i przejdź do opcji JetPack> Pisanie> Wydajność i szybkość> zaznacz Włącz akcelerator witryny, przyspiesz czas ładowania obrazów, przyspiesz czas ładowania plików statycznych i włącz leniwe ładowanie dla obrazy.

Tworzenie witryny Master: Zapisz teraz!

Przekształć swoją obecność cyfrową dzięki naszemu kompleksowej kursie tworzenia stron internetowych - rozpocznij swoją podróż, aby zostać ekspertem od sieci już dziś!

Zapisz tutaj

Pozwoli to wyeliminować zasoby blokujące renderowanie w WordPressie i przyspieszyć ładowanie stron, umożliwiając JetPackowi optymalizację obrazów i wyświetlanie obrazów i plików statycznych (takich jak CSS i JavaScript) z ich globalnej sieci serwerów.

Ponadto nie zapomnij odroczyć ładowania zdjęć, używając leniwej funkcji obciążenia. Chociaż był to trudny i wymaga zewnętrznej biblioteki do odroczenia ładowania obrazów na ekranie, jest teraz możliwy natywnie w HTML5!

Aby wdrożyć leniwy ładowanie obrazów na stronach internetowych, po prostu dodać wartości leniwy do atrybutów Ładowanie zdjęć witryny, a ostatnie przeglądarze zrozumieją, że obrazy te powinny być wymagane i załadowane, jeśli są wyświetlane, co oznacza, czy użytkownik przewija się symbol zastępczy obrazu.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Ponadto leniwe ładowanie współpracuje z IFRZ i jest ważnym wdrożeniem wyeliminowania zasobów blokujących renderowania ze swoich stron internetowych.

Gdy zasoby blokujące renderowanie będą miały instrukcje do załadowania po głównej zawartości, co oznacza HTML DOM, zarabiasz już wiele punktów na teście Lighthouse Google, testu Speed ​​Weights lub The Google Core Web Vitals.

Poproś system zewnętrzny o zoptymalizowanie Twojej witryny

Czy wiesz, że faktycznie możesz rozwiązać wszystkie problemy związane z  Google PageSpeed   ​​w Twoim imieniu, bez większego wysiłku ze strony - z wyjątkiem rejestracji na bezpłatny okres próbny i zmiany DNS?

Korzystając z platformy Ezoic Site Site Accelerator, wszystkie zwykłe problemy z  Google PageSpeed   ​​zostaną rozwiązane przez ich system, który będzie pośrednikiem między Twoją witryną a odwiedzającymi. Zoptymalizują stronę internetową przed wyświetleniem jej użytkownikowi.

Stań się zielony, po prostu rejestrując się na darmowy okres próbny na platformie Ezoic i wypróbuj go sam - sprawią, że Twoja witryna osiągnie najwyższe standardy optymalizacji szybkości strony w ciągu kilku dni: renderuj obrazy webp nowej generacji, optymalizuj CSS i JavaScript, usuwając nieużywane CSS i JS, leniwe ładowanie obrazów, zmiana rozmiaru obrazów, buforowanie stron witryny, optymalizacja czcionek, wstępne połączenie ze wszystkimi zawartymi witrynami i wiele więcej.

Karta kredytowa nie jest wymagana - wystarczy zarejestrować się za darmo i spróbować. Ponadto, jeśli Twoja witryna zarabia na reklamach displayowych, poza tym, że znacznie przyspiesza, może również sprawić, że zarobisz kilka razy więcej pieniędzy niż w przypadku Google AdSense, optymalizując reklamy dzięki uczeniu maszynowemu i zaawansowanej sztucznej inteligencji.

Często Zadawane Pytania

Jak wyeliminować JavaScript blokujące renderowanie i CSS w treści powyżej?

Aby wyeliminować blokujące renderowanie JavaScript i CSS dla zawartości powyżej, należy upewnić się, że pliki JS i CSS w witrynie są ładowane po pełnym załadowaniu HTML. Oznacza to, że nie przerywając procesu ładowania HTML w celu pobrania tych plików. Możesz odłożyć pliki JavaScript atrybutem async lub defer, a dla CSS możesz użyć określonego kodu, aby załadować go po HTML. Zewnętrzny system optymalizacji, taki jak Ezoic, może to również automatycznie obsługiwać.

Jak twórcy stron internetowych mogą zająć się zaleceniem Google Pagespeed w celu wyeliminowania blokującego renderowanie JavaScript i CSS?

Twórcy stron internetowych mogą zoptymalizować swoją witrynę, minifikując pliki JavaScript i CSS, używając asynchronicznego ładowania dla JavaScript, ukierunkowanie krytycznego CSS bezpośrednio do HTML i odłożenie ładowania niekrytycznych plików CSS i JavaScript. Wdrożenie tych strategii może znacznie poprawić czas ładowania i wyniki Pagespeed.

Perfect Chrome Lighthouse Score: Co się stanie?