Jak używać odroczonego parsowania JavaScript, aby zwiększyć swoją witrynę?

Page Speed to jeden z najważniejszych aspektów Twojej witryny. Bez względu na to, jak wiele ma do zaoferowania Twoja witryna, nikt nie lubi czekać minut, zanim Twoja witryna się załaduje. Jednocześnie, jeśli Twoja witryna ładuje się szybciej, jest bardziej prawdopodobne, że zatrzyma odwiedzających.

Poza tym Page Speed uwzględnia również pozycję Twojej witryny w wyszukiwarkach. Pomaga robotom indeksującym zrozumieć, jak skuteczna i utrzymana jest Twoja witryna. W tym samouczku zobaczymy, jak odroczyć analizowanie kodu JavaScript w WordPress.

Dlaczego odroczenie parsowania JavaScript jest ważne?

Aby w pełni zrozumieć koncepcję odroczonego analizowania kodu JavaScript, musisz zrozumieć, w jaki sposób przeglądarka renderuje stronę internetową. Gdy przeglądarka żąda strony, serwer sieciowy odsyła ją z powrotem, która jest pobierana w formie dokumentu HTML.

Dokument HTML zawiera kilka elementów i zasobów, które przeglądarka odczytuje podczas pobierania dodatkowych zasobów. I wreszcie, strona jest renderowana dopiero po pobraniu wszystkich zasobów.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Zasoby o większym rozmiarze wymagają znacznie więcej czasu na pobranie. Obrazy stanowią większość tych zasobów, dlatego tak ważna jest optymalizacja obrazów. Poza tym możesz opóźnić pobieranie niepotrzebnych skryptów, identyfikując je i przyspieszając swoją stronę internetową.

Jak zidentyfikować skrypty do odroczenia?

W przypadku minimalnej witryny, która nie używa dużo JavaScript, może nie być żadnych skryptów niezbędnych do załadowania strony. Wręcz przeciwnie, w przypadku dość złożonej strony internetowej ważna jest szczegółowa analiza wszystkich skryptów, aby zrozumieć, które z nich są niezbędne do załadowania strony.

Pierwszą metodą eliminacji zbędnych skryptów jest usuwanie skryptów jeden po drugim i jednoczesne sprawdzanie ewentualnych błędów w konsoli JavaScript. Jednocześnie ta metoda wymaga sporego wysiłku i wiedzy o JavaScript.

Drugą metodą jest użycie narzędzia do testowania prędkości, aby ocenić, które skrypty są niezbędne do załadowania strony. Jednym z tych narzędzi jest GTmetrix , gdzie wystarczy wpisać adres URL swojej witryny, pokazując wyniki. W zakładce Page Speed znajdziesz sekcję Defer Parsing For JavaScript, która pokaże listę niepotrzebnych skryptów ładowanych podczas renderowania Twojej strony po rozwinięciu.

Korzystając z tych informacji, możesz usunąć skrypty, które nie uwzględniają renderowania Twojej strony.

Atrybuty odroczone lub asynchroniczne

Istnieją dwa sposoby na wyeliminowanie pobierania skryptów podczas renderowania stron.

Po pierwsze, dodając atrybut Defer do tagu skryptu, możesz upewnić się, że przeglądarka nie będzie pobierać zasobów, dopóki nie zostanie przeprowadzona analiza strony. Po zakończeniu renderowania i analizowania strony przeglądarka może pobrać wszystkie odroczone skrypty. Poniżej podano przykładowy tag skryptu, który pokazuje, jak dodać atrybut odroczenia do strony HTML.

>script src="path/to/script" defer/script

Z drugiej strony możesz dodać atrybut asynchroniczny do tagu skryptu. To poprowadzi przeglądarkę do osobnego załadowania skryptu. Oznacza to, że przeglądarka rozpocznie pobieranie zasobów, gdy napotka kod, jednocześnie osobno analizując kod HTML. Poniżej podany przykładowy skrypt pokazuje, jak dodać atrybut asynchroniczny.

>script src="path/to/script" async/script

Oba te atrybuty różnią się sposobem pobierania zasobów. W przypadku minimalnej witryny nie jest łatwo zauważyć różnice między atrybutami asynchronicznymi i odroczonymi. Jednocześnie w przypadku bardziej złożonej aplikacji webowej zalecane jest zastosowanie techniki odroczenia.

Przerwij analizę JavaScript

Oto dwie metody, których możesz użyć do odroczenia analizy kodu JavaScript.

1. Dostosuj plik functions.php

Jeśli przyzwyczaiłeś się do programowania WordPress, musisz wiedzieć, że nie jest dobrym pomysłem dodawanie skryptów bezpośrednio do znaczników HTML. Ale możesz użyć wbudowanych funkcji WordPress, aby zażądać zasobów.

Aby dodać do skryptów atrybut async lub defer, należy dodać następującą funkcję do pliku functions.php motywu WordPress.

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

Pamiętaj, aby umieścić każdy skrypt w kolejce przed dodaniem atrybutów odroczenia i async do tagów skryptu.

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. Wtyczki do odroczenia parsowania JavaScript

Zrozumiałe jest, że nie każdy ma znaczną wiedzę i umiejętności, aby zastosować powyższą metodę. Dlatego dla początkujących niektóre wtyczki mogą być używane do odroczonego analizowania JavaScript.

Asynchroniczny JavaScript

Async JavaScript to darmowa wtyczka WordPress, którą możesz zainstalować na swoim WordPressie, aby wykonać zadanie.

Po zainstalowaniu i aktywacji wtyczki przejdź do ustawień wtyczki i zaznacz opcję Włącz Async JavaScript .

Przewiń w dół, aby wybrać metodę asynchroniczną lub odroczoną .

Przewiń w dół, aby uzyskać bardziej zaawansowane opcje, w których możesz osobno dodawać lub usuwać skrypty w celu asynchronizacji i odroczenia. Poza tym możesz wyeliminować wtyczki i motywy ze zmian, które ta wtyczka będzie wprowadzać.

Autooptymalizacja

Autoptimize to kolejna wtyczka, która umożliwia odroczenie analizowania skryptów JavaScript.

Po zainstalowaniu i aktywacji wtyczki zaznacz opcję Optymalizuj kod JavaScript na stronie ustawień . Odroczy to wszystkie niepotrzebne skrypty i przeniesie je do stopki.

Możesz również dodać skrypty dla atrybutu asynchronicznego na karcie Dodatkowe .

Możesz edytować plik functions.php lub użyć wtyczek, takich jak Autoptimize i Async JavaScript . Są to dwie niezawodne metody dodawania atrybutów async i defer do tagów skryptu.

Mamy nadzieję, że te techniki pomogą Ci przyspieszyć działanie Twojej witryny. Dołącz do nas na Facebooku i Twitterze, aby być na bieżąco z naszymi postami.