Wsparcie » Wtyczki » Poprawa szybkości – Wyeliminuj blokujący renderowanie kod JavaScript i CSS z czę

  • Witam.
    tematy nie jest nowy, ale przez wiele godzin nie znalazłam rozwiązania, ani podpowiedzi na żadnym z forów”

    Standard z Google Insings:

    Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

    Nadaj priorytet widocznej treści.

    Wiem, że chodzi o przeniesienie części skrtyptów do fotera, ale jak to zrobić? A może jeszcze coś innego należy zrobić, aby zadowoli Googla?

    Próbowałam taki kod dodać do functions.php, ale wywalał mi wygląd strony głównej (rozsypywała się).

    // Begin Custom Scripting to Move JavaScript from the Head to the Footer
    
    function remove_head_scripts() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
    }
    add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
    
    // END Custom Scripting to Move JavaScript
Viewing 3 replies - 1 through 3 (of 3 total)
  • Problem z google insights jest taki, że nie jest zbyt dokładny jeżeli chodzi o udzielanie wskazówek.

    Polecałbym Ci sprawdzić gtmetrix.com, oraz http://tools.pingdom.com/fpt/ tam, po analizie strony masz nieco więcej wskazówek.

    Generalnie możesz to poprawić poprzez stosowanie wtyczki, która połączy wszystkie pliki css w jeden, podobnie skrypty js, idąc dalej usunie z nich białe znaki (zbędne spacje, taby i entery), skrypty o ile to możliwe przenieść do footera. Największy problem to czcionki, jeżeli masz ich dużo na stronie to bardzo zaniżają Twój ranking i są dość problematyczne, bo przecież nie połączysz plików czcionek w jeden plik, możesz co najwyżej wczytywać je w jednym pliku ale i tak to nie jest do końca to, inne podejście to ich asynchroniczne wczytywanie.

    Thread Starter Kate.Novitzky

    (@katenovitzky)

    Dzięki. Próbowałam z wtyczkami – są średnio skuteczne. Zupełnie nie kapuje przenoszenia do fotera – tu też eksperymentowałam z wtyczkami, średni efekt.

    Nikodemsky

    (@nikodemsky)

    Są wtyczki, które robią to efektywnie, np.:
    https://wordpress.org/plugins/rs-head-cleaner/
    – jednak w bardzo wielu przypadkach posypie się strona, skórka, jej pojedyncze elementy lub niektóre wtyczki przestaną działać, ponieważ nie są przystosowane do ładowania w ten sposób.

    Możesz pomyśleć o ładowaniu asynchronicznym, dodając do skryptów atrybut async lub defer, jednak w przypadku cięższych skryptów mogą się one po prostu nie załadować. Są wtyczki automatyzujące ten proces:
    https://wordpress.org/plugins/async-javascript/

    W teorii ładowanie asynchroniczne powinno załatwić kwestię kodu javascript, który blokuje ładowanie strony ale tak naprawdę rzadko kiedy jest sens to stosować.

    Poza tym usunięcie wspomnianego kodu wcale nie oznacza, że punkty nagle magicznie podskoczą do 80/90/100, ewentualnie w przypadku, kiedy został przeniesiony cięższy skrypt.

    W praktyce lepiej wychodzi szukanie alternatyw, np. zoptymizowanie bazy danych, wyłączenie niepotrzebnych funkcji/wtyczek lub eliminacja ciężkich elementów.

    Poza tym proponuję GI brać jako odniesienie, nie jako wzór/podstawę. Większy wynik w GI w żaden sposób nie gwarantuje lepszych wyników w pozycji strony.

    Obszerniejszy artykuł na temat uzyskiwania maxymalnej ilości punktów w GI możesz znaleźć tutaj:
    https://wpzen.pl/jak-uzyskac-100-punktow-w-google-pagespeed-insights/
    – autor również korzystał z asynchronicznego ładowania, korzystając z atrybutu defer.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Temat ‘Poprawa szybkości – Wyeliminuj blokujący renderowanie kod JavaScript i CSS z czę’ jest zamknięty na nowe odpowiedzi.