Script Loading Time
Script Loading Time (время загрузки скрипта) - это метрика производительности веб-страницы, измеряющая время от начала запроса скрипта до момента, когда его содержимое полностью загружено и готово к парсингу и компиляции, включая сетевую задержку (DNS, TCP, SSL) и передачу данных.
Эта метрика используется в веб-разработке и техническом SEO для диагностики проблем с загрузкой JavaScript, влияющих на Core Web Vitals (LCP, FCP). Например, браузер обнаруживает тег <script src="app.js">, выполняет DNS-запрос (50 мс), устанавливает TCP-соединение (100 мс), загружает 500 КБ данных (200 мс) - общее время загрузки составит 350 мс.
Script Loading Time является критическим фактором для пользовательского опыта, особенно на мобильных устройствах и медленных сетях. Оптимизация этого этапа - одна из ключевых задач при работе с Core Web Vitals.
Кратко
[править]Script Loading Time - это время загрузки скрипта по сети, включающее DNS, SSL, ожидание и передачу данных. Долгая загрузка блокирует отрисовку страницы (для синхронных скриптов) и ухудшает LCP и FCP.
Как работает Script Loading Time
[править]Script Loading Time - это часть жизненного цикла скрипта, которая происходит до того, как код начнёт парситься и выполняться.
Процесс загрузки:
- Браузер обнаруживает тег
<script>(или динамическую загрузку). - Выполняется DNS-запрос (если домен не разрешён ранее).
- Устанавливается TCP-соединение (SYN, SYN-ACK, ACK).
- При использовании HTTPS выполняется TLS/SSL handshake.
- Браузер отправляет HTTP-запрос GET на сервер.
- Сервер отвечает с данными скрипта.
- Данные передаются по сети.
Время загрузки = DNS + TCP + SSL + Waiting (TTFB) + Content Download.
Сравнение методов загрузки
[править]| Атрибут | Загрузка | Выполнение | Блокировка отрисовки |
|---|---|---|---|
| Синхронный | Немедленно | Сразу после загрузки | Да |
async
|
Параллельно с парсингом | Сразу после загрузки | Нет (но может прервать парсинг) |
defer
|
Параллельно с парсингом | После полной загрузки DOM | Нет |
| Динамический | По запросу (JS) | После загрузки | Нет |
Где используется
[править]| Сфера | Применение |
|---|---|
| Веб-производительность | Диагностика причин медленной загрузки страниц |
| Core Web Vitals | Влияет на LCP и FCP |
| Техническое SEO | Выявление страниц с блокирующими скриптами |
| Frontend-оптимизация | Настройка стратегий загрузки скриптов |
Как измерить Script Loading Time
[править]- Chrome DevTools → Network. На вкладке Timing отображаются все этапы загрузки (DNS, TCP, SSL, TTFB, Content Download).
- Lighthouse. В отчёте указывает на скрипты, блокирующие отрисовку.
- Performance API. Использование
performance.getEntriesByType('resource')для получения детальных метрик. - Real User Monitoring (RUM). Сбор данных о загрузке от реальных пользователей.
Как оптимизировать
[править]| Метод | Описание |
|---|---|
| Уменьшение размера | Минификация, сжатие (gzip, brotli), удаление неиспользуемого кода (tree shaking) |
| CDN | Раздача скриптов через Content Delivery Network для сокращения времени доставки |
async / defer
|
Использование async для независимых скриптов, defer - для зависящих от DOM
|
| Отложенная загрузка | Загрузка некритических скриптов после загрузки страницы (onload, requestIdleCallback) |
preconnect / dns-prefetch
|
Предварительное открытие соединений с доменами сторонних скриптов |
Часто задаваемые вопросы
[править]Чем отличается время загрузки от времени выполнения?
[править]Время загрузки (Script Loading Time) - это сколько времени занимает скачивание файла по сети. Время выполнения (Script Execution Time) - сколько потом работает код. Оба показателя важны для общей производительности страницы.
Как сократить время загрузки скриптов?
[править]Необходимо использовать CDN для ускорения доставки, сжимать файлы (gzip, brotli), минифицировать код, загружать некритичные скрипты асинхронно (async/defer), а также использовать предварительное соединение (preconnect) для доменов сторонних скриптов.
Влияет ли время загрузки скриптов на SEO?
[править]Да. Google учитывает скорость загрузки страницы (LCP, FCP) при ранжировании. Долгая загрузка скриптов ухудшает эти метрики, особенно если скрипты блокируют отрисовку.
В чём разница между async и defer?
[править]Оба атрибута загружают скрипты параллельно с парсингом HTML. async выполняет скрипт сразу после загрузки (может прервать парсинг). defer выполняет скрипт только после полной загрузки DOM, сохраняя порядок выполнения.
