Работа с внешними скриптами — одна из частых причин замедления WordPress-сайтов. Часто подключаемые сторонние сервисы, такие как аналитика, виджеты, шрифты и рекламные сети, добавляют дополнительные задержки, которые ухудшают пользовательский опыт и SEO-показатели. В этой статье рассмотрим, как именно выявить и устранить эти задержки, а также приведём практические примеры и готовый код для оптимизации подключения внешних скриптов.
Почему внешние скрипты замедляют загрузку сайта
Внешние скрипты загружаются с удалённых серверов, что добавляет время ожидания ответа. Если сервер стороннего сервиса медленный или временно недоступен, это приводит к блокировке рендеринга страницы. Особенно это критично для скриптов, подключаемых в <head>, так как браузер ждёт их загрузки перед отрисовкой.
Кроме того, некоторые скрипты блокируют выполнение других задач на странице, например, рендеринг или выполнение JS-кода, что влияет на скорость отображения контента.
Именно поэтому важно оптимизировать загрузку внешних скриптов, чтобы минимизировать влияние на скорость и отзывчивость сайта.
Как выявить проблемные внешние скрипты
Первым шагом будет диагностика. Используйте инструменты разработчика в браузере (Chrome DevTools) на вкладке Network и Performance, чтобы увидеть, какие скрипты грузятся дольше всего и вызывают задержки.
Также полезно воспользоваться специализированными сервисами, например, Google PageSpeed Insights или GTmetrix. Они покажут, какие внешние ресурсы тормозят загрузку.
После выявления проблемных скриптов важно оценить, действительно ли они нужны на всех страницах или их можно загружать выборочно.
Методы удаления задержек при подключении внешних скриптов
1. Отложенная загрузка (defer и async)
Два атрибута для тега <script> — defer и async — позволяют загружать скрипты без блокировки рендеринга страницы.
- async — загружает скрипт параллельно с парсингом HTML, но выполняет сразу после загрузки, не гарантируя порядок.
- defer — загружает скрипт параллельно, но выполняет только после полной загрузки документа, сохраняя порядок.
В WordPress для подключения скриптов с этими атрибутами можно использовать хук script_loader_tag. Например, добавим defer для внешнего скрипта:
function wpspeed_add_defer_attribute( $tag, $handle ) {
if ( 'external-script' === $handle ) {
return str_replace( '<script ', '<script defer ', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'wpspeed_add_defer_attribute', 10, 2 );А сам скрипт регистрируем так:
wp_enqueue_script( 'external-script', 'https://example.com/script.js', array(), null, true );Обратите внимание на последний параметр true — скрипт будет подключён в футере, что также помогает ускорить рендеринг.
2. Условная загрузка скриптов
Часто внешние скрипты нужны не на всех страницах. Например, виджет обратного звонка или аналитика — только на главной или страницах контактов. Чтобы не грузить их на всех страницах, используйте условные теги WordPress:
function wpspeed_conditional_enqueue_scripts() {
if ( is_front_page() || is_page( 'contacts' ) ) {
wp_enqueue_script( 'external-widget', 'https://example.com/widget.js', array(), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'wpspeed_conditional_enqueue_scripts' );3. Локальное кэширование и замена внешних скриптов
Если политика лицензирования и обновления позволяет, можно скачать внешний скрипт и хранить его локально на вашем сервере, уменьшая время загрузки за счёт отсутствия DNS-запроса и ускоренного кэширования. Но этот метод требует контроля обновлений скрипта.
Для автоматизации можно использовать плагины, например, Clearfy Pro, который умеет оптимизировать загрузку скриптов и управлять локальным кэшированием.
4. Использование плагинов для оптимизации загрузки внешних скриптов
Существуют плагины, которые автоматизируют оптимизацию загрузки внешних скриптов, например:
- WPSpeed Async JS — позволяет добавлять атрибуты async/defer и управлять порядком загрузки;
- Clearfy Pro — комплексные инструменты для оптимизации скорости, включая работу с внешними скриптами;
- WP Rocket — популярный плагин с функционалом отложенной загрузки JS;
- Asset CleanUp — позволяет отключать ненужные скрипты на выбранных страницах.
Использование таких инструментов значительно упрощает процесс, особенно для сайтов с множеством внешних интеграций.
Практический пример: отложенная загрузка Google Analytics с defer
Рассмотрим, как подключить Google Analytics с атрибутом defer и загрузкой в футере, чтобы минимизировать влияние на скорость:
function wpspeed_enqueue_ga_with_defer() {
wp_enqueue_script( 'google-analytics', 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'wpspeed_enqueue_ga_with_defer' );
function wpspeed_add_defer_to_ga( $tag, $handle ) {
if ( 'google-analytics' === $handle ) {
return str_replace( '<script ', '<script defer ', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'wpspeed_add_defer_to_ga', 10, 2 );
function wpspeed_ga_inline_script() {
?>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>
<?php
}
add_action( 'wp_footer', 'wpspeed_ga_inline_script' );Такой подход минимизирует влияние скрипта на загрузку страницы и сохраняет корректную работу аналитики.
Советы по дополнительной оптимизации внешних скриптов
Помимо описанных методов, обратите внимание на следующие рекомендации:
- Минимизируйте количество внешних скриптов — объединяйте, если возможно;
- Используйте HTTP/2 — он позволяет параллельную загрузку нескольких ресурсов с одного домена;
- Активируйте кэширование на сервере и CDN для внешних ресурсов, если это поддерживается;
- Регулярно проверяйте актуальность и необходимость сторонних скриптов.
Для комплексной оптимизации можно рассмотреть использование плагина WPSpeed Async JS, который разработан специально для ускорения загрузки JS на WordPress.