Как отложить загрузку этих JS файлов?

Question

Как отложить загрузку этих JS файлов?

19 дек. 2018 г., 09:06:39

Просмотры: 3.19K

Голосов: 1

На моем сайте после проверки в GTmetrix я получил ошибку, связанную с отложенной загрузкой JS для следующих двух файлов.

92.5KiB JavaScript кода парсится при первоначальной загрузке страницы. Отложите парсинг JavaScript, чтобы уменьшить блокировку отображения страницы.

http://mysite.url/wp-includes/js/jquery/jquery.js?ver=1.12.4 (87.0KiB)

http://mysite.url/ (5.5KiB inline JavaScript)

В моем файле functions.php есть следующий код для отложенной загрузки JS, но он не работает для файлов вне папки темы.

Вот мой код в файле functions.php:

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // возвращаем URL с атрибутом defer
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Как мне избавиться от этой ошибки и отложить парсинг указанных элементов?

Vishwa

376

кастомизация разработка тем jquery include

Все ответы на вопрос

vikrant zilpe 478 · Accepted Answer · 2018-12-28T07:51:13Z

Что такое атрибуты Async и Defer?

Вот что делают атрибуты async и defer:

Атрибут Async: Атрибут async загружает скрипт асинхронно. Другими словами, он гарантирует, что скрипт загружается асинхронно вместе с остальным содержимым страницы, после чего выполняется.

Атрибут Defer: Атрибут defer откладывает загрузку скрипта. Он гарантирует, что скрипт выполняется только после того, как все содержимое страницы завершит загрузку.

Оба этих атрибута хорошо поддерживаются всеми современными браузерами, включая Firefox, Chrome и Internet Explorer. Internet Explorer добавил поддержку этих атрибутов начиная с IE10.

Пример тега script с атрибутами async и defer выглядит следующим образом:

<script src='http://sitename.com/js/scripts.js' async='async' type='text/javascript'> 
</script>
<script src='http://sitename.com/js/scripts.js' defer='defer' type='text/javascript'> 
</script>

Функция для добавления атрибутов 'Async/Defer' к блокирующим рендеринг скриптам В этой статье мы рассмотрим три различных метода добавления этих атрибутов к вашим блокирующим рендеринг JavaScript-скриптам. Эти методы следующие:

Метод 1: Добавление defer/async ко всем скриптам без исключений. Метод 2: Добавление defer/async ко всем скриптам с исключением некоторых. Метод 3: Добавление defer/async только к выбранным скриптам. (Самый гибкий метод, так как позволяет добавить async к одним скриптам и defer к другим.) Вы можете использовать любой метод, который соответствует вашим потребностям. Вы можете использовать любой метод, который соответствует вашим потребностям.

Метод 1: Добавление Async или Defer ко всем скриптам

Если вы хотите добавить атрибут async или defer ко всем скриптам без исключений, то можете использовать следующий код.

Откройте файл functions.php вашей темы и добавьте этот код в конец файла.

/*функция для добавления async ко всем скриптам*/
    function js_async_attr($tag){

# Добавляем async ко всем оставшимся скриптам
    return str_replace( ' src', ' async="async" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Для дополнительной информации, пожалуйста, проверьте ссылку https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/