Вы беспокоитесь о скорости вашего сайта. JavaScript может привести к низкой скорости. Вы можете попробовать отложить синтаксический анализ JavaScript в WordPress. Это позволяет браузеру отображать JavaScript только после того, как он завершит загрузку основного контента сайта. Мы делаем это без плагина, просто какой-то строчный код.
Зачем нужно использовать отложенный анализ JavaScript?
HTML-документ содержит текст, код, отображающий различные элементы DOM, и ресурсы, такие как изображения, таблицы стилей и сценарии.
Браузер читает эту HTML-разметку построчно. Кроме того, ресурсы, представленные на странице, необходимо загрузить. По умолчанию браузер последовательно загружает эти ресурсы по мере их нахождения в документе. Рендеринг веб-страницы возобновляется только после загрузки ресурса.
Главное — это SEO. Потому что медленный сайт не ранжируется в SEO. Ваш веб-сайт не загружается полностью, пока не завершит загрузку всего кода JavaScript. Вы можете использовать так много плагинов для этой проблемы. С другой стороны, если посетитель увидит, что страница загружается медленно, он может расстроиться.
Чтобы решить эту проблему, мы можем использовать атрибут defer в теге скрипта, чтобы отложить выполнение файла JavaScript.
Пример HTML:
<script defer src=”your-file-name.js”></script>Отложить синтаксический анализ JavaScript в WordPress:
Это так просто, нам нужно загрузить атрибут defer в тег script с помощью php в WordPress. Так много способов загрузить теги сценария атрибута отсрочки, но я люблю использовать "script_loader_tag"hook и измененный тег сценария.
Используйте этот код:
add_filter( 'script_loader_tag', 'wpk_add_id_to_script', 10, 3 ); function wpk_add_id_to_script( $tag, $handle, $source ) { if ( 'bootstrap' === $handle ) { $tag = '<script type="text/javascript" defer src="' . $source . '" id="'.$handle.'"></script>'; }return $tag; }
Описание :
ловушка WordPress по умолчанию "script_loader_tag", мы загружаем 3 параметра $tag $handle, $source .
Тег : это означает полный тег скрипта html .
Идентификатор: это имя файла. пример :
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() .'/assets/js/bootstrap.min.js', array('jquery'),’5.0.0’, true);В данном случае «бутстраповый» дескриптор.
Источник: это путь к файлу.
Вывод:
Вы хотите увеличить скорость вашего сайта. вам нужно использовать плагины оптимизатора. Но вам нужно знать, что разработчики подключаемых модулей динамически используют атрибуты defer. Я хочу показать вам, как использовать его в обычном режиме.
Примечание: я буду рад, если вы поймете мои ошибки.
