CodeWatchers

Как использовать отложенный анализ JavaScript для улучшения вашего сайта

Muneeb Учебные пособия по WordPress Jun 30, 2021

Скорость страницы - один из самых важных аспектов вашего сайта. Независимо от того, сколько предложений на вашем сайте, никто не любит ждать несколько минут, прежде чем ваш сайт загрузится. В то же время, если ваш сайт загружается быстрее, он с большей вероятностью удержит посетителей.

Как использовать отложенный анализ JavaScript для улучшения вашего сайта

Кроме того, Page Speed также учитывает рейтинг вашего сайта в поисковых системах. Это помогает сканерам понять, насколько эффективен и поддерживается ваш сайт. В этом руководстве мы увидим, как отложить анализ JavaScript в WordPress.

Почему важно отложить разбор JavaScript?

Чтобы полностью понять концепцию отложенного анализа JavaScript, вам необходимо понять, как браузер отображает веб-страницу. Когда ваш браузер запрашивает страницу, ваш веб-сервер отправляет ее обратно, которая загружается в виде HTML-документа.

Документ HTML содержит несколько элементов и ресурсов, которые браузер считывает элементы, пока загружаются дополнительные ресурсы. И, наконец, страница отображается только после загрузки всех ресурсов.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Ресурсы большего размера загружаются гораздо дольше. Изображения составляют большую часть этих ресурсов, поэтому важно оптимизировать ваши изображения. Кроме того, вы можете отложить загрузку ненужных скриптов, определив их и ускорив работу своей веб-страницы.

Как определить, какие сценарии отложить?

Для минималистичного веб-сайта, который не использует много JavaScript, может не быть скриптов, жизненно важных для загрузки страницы. Напротив, для довольно сложного веб-сайта важно иметь подробный анализ всех скриптов, чтобы понять, какие из них необходимы для загрузки страницы.

Первый метод удаления ненужных сценариев - это удаление сценариев по одному и одновременная проверка любых ошибок в консоли JavaScript. В то же время этот метод требует значительных усилий и знаний JavaScript.

Другой метод - использовать инструмент проверки скорости, чтобы оценить, какие скрипты необходимы для загрузки страницы. Один из этих инструментов включает GTmetrix , где все, что вам нужно, это ввести URL-адрес вашего веб-сайта и отобразить результаты. На вкладке «Скорость страницы» вы найдете раздел «Отложить синтаксический анализ для JavaScript», в котором будет отображаться список ненужных скриптов, загружаемых во время рендеринга вашей страницы при расширении.

Используя эту информацию, вы можете удалить скрипты, не учитывающие отрисовку вашей страницы.

Отложенные или асинхронные атрибуты

Есть два способа предотвратить загрузку скриптов при рендеринге страниц.

Во-первых, добавив атрибут Defer к тегу скрипта, вы можете гарантировать, что браузер не загружает ресурсы, пока не будет выполнен синтаксический анализ страницы. После завершения рендеринга и анализа страницы браузер может загрузить все отложенные скрипты. Ниже приведен пример тега сценария, который показывает, как добавить атрибут defer на страницу HTML. 

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

С другой стороны, вы можете добавить асинхронный атрибут к тегу скрипта. Это поможет браузеру загрузить скрипт отдельно. Это означает, что браузер начнет загрузку ресурсов, когда он встретит код, одновременно анализируя HTML отдельно. В приведенном ниже примере сценария показано, как добавить атрибут async.

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

Оба эти атрибута различаются способом загрузки ресурсов. Для минималистичного веб-сайта нелегко заметить различия между атрибутами async и defer. В то же время для более сложного веб-приложения рекомендуется использовать технику отсрочки.

Отложить анализ JavaScript

Вот два метода, которые вы можете использовать для отложенного анализа JavaScript.

1. Настройте файл functions.php.

Если вы привыкли к разработке WordPress, вы должны знать, что не рекомендуется создавать сценарии dd непосредственно для HTML-разметки. Но вы можете использовать встроенные функции WordPress для запроса ресурсов.

Чтобы добавить атрибут async или defer к вашим скриптам, вы должны добавить следующую функцию в файл functions.php вашей темы 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;
 }

Перед добавлением атрибутов defer и async к тегам сценария обязательно ставьте каждый сценарий в очередь.

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. Плагины для отложенного анализа JavaScript

Понятно, что не у всех есть значительные знания и навыки, чтобы следовать описанному выше методу. Следовательно, для новичков можно использовать некоторые плагины для отложенного анализа JavaScript.

Асинхронный JavaScript

Async JavaScript - это бесплатный плагин WordPress, который вы можете установить на свой WordPress для выполнения этой задачи.

После того, как вы установили и активировали плагин, перейдите к настройкам плагина и отметьте опцию Enable Async JavaScript .

Прокрутите вниз, чтобы выбрать асинхронный или отложенный метод.

Прокрутите вниз, чтобы увидеть дополнительные параметры, где вы можете отдельно добавлять или удалять сценарии для асинхронной и отложенной обработки. Кроме того, вы можете исключить плагины и темы из изменений, которые этот плагин собирается внести.

Автоматическая оптимизация

Autoptimize - еще один плагин, который позволяет отложить анализ сценариев JavaScripts.

После установки и активации плагина отметьте опцию Оптимизировать код JavaScript на странице настроек . Это отложит все ненужные скрипты и переместит их в нижний колонтитул.

Вы также можете добавить скрипты для атрибута async на вкладке Extra .

Вы можете отредактировать файл functions.php или использовать плагины, такие как Autoptimize и Async JavaScript . Это два надежных метода добавления атрибутов async и defer в теги скрипта.

Мы надеемся, что эти методы помогут вам ускорить работу вашего сайта. Не стесняйтесь присоединяться к нам на наших Facebook и Twitter, чтобы быть в курсе наших публикаций.

Divi WordPress Theme