Проверка defer JavaScript

Что делает проверка defer JavaScript

Инструмент сканирует веб-страницу на наличие элементов script и сообщает, какие из них используют атрибуты defer или async, какие загружаются без этих атрибутов и какие встроены inline. Это помогает понять, как загружается JavaScript и может ли он блокировать рендеринг.

По умолчанию элемент script блокирует разбор HTML до загрузки и выполнения скрипта. Атрибут defer говорит браузеру загружать скрипт параллельно и выполнить его после разбора документа. Атрибут async загружает параллельно и выполняет сразу, как только скрипт готов, что может прерывать разбор.

Почему загрузка скриптов важна

Блокирующие рендеринг скрипты задерживают момент, когда пользователь может увидеть страницу и взаимодействовать с ней. Перевод некритичных скриптов на отложенную загрузку может улучшить воспринимаемую производительность и ключевые веб-метрики. Это одно из более значимых изменений производительности, доступных на страницах с обилием скриптов.

Выбор между defer и async зависит от скрипта. Скрипты, зависящие от DOM или от других скриптов, обычно нуждаются в defer для сохранения порядка выполнения. Независимые скрипты, например аналитика, могут использовать async. Встроенные скрипты нельзя отложить, поэтому их следует минимизировать и размещать продуманно.

Как интерпретировать результат

Отчёт показывает инвентаризацию скриптов и подсвечивает те, что без атрибутов defer или async. Не каждому скрипту нужен атрибут: некоторые должны выполняться немедленно, а встроенные скрипты не могут их использовать. Но большое число внешних скриптов без defer — сигнал пересмотреть стратегию загрузки.

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

Частые проблемы с загрузкой скриптов

• Блокирующие рендеринг сторонние скрипты. Аналитика и виджеты, размещённые в head без defer или async.
• Слишком много скриптов. Каждый запрос добавляет накладные расходы; объединение может помочь.
• Неверный выбор атрибута. Async используется там, где важен порядок выполнения.
• Большие встроенные скрипты. Встроенный код нельзя кэшировать, и он задерживает разбор.
• Скрипты в head. Перенос некритичных скриптов в конец body или их отложенная загрузка могут помочь.

Практический сценарий

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

Ограничения

Проверка сообщает атрибуты скриптов в HTML-ответе. Она не измеряет фактическую производительность загрузки, а скрипты, внедрённые другими скриптами, могут отсутствовать в исходной разметке.