Швидкість Високий вплив Просте 5–15 хв

Defer / async на скриптах

Синхронний <script> блокує рендеринг — відкладіть його.

Що це

Коли браузер натрапляє на звичайний <script>, він зупиняє рендеринг сторінки, завантажує й виконує скрипт, і лише потім продовжує. Це називається «render-blocking» (блокуючий) скрипт. Атрибути defer та async змінюють цю поведінку.

Чому це важливо

Кожен блокуючий скрипт у заголовку відкладає момент, коли користувач побачить контент (погіршує LCP та First Paint). За кількох скриптів затримка сумується. На мобільному й повільному з'єднанні це означає секунди порожньої білої сторінки — і вищий показник відмов.

Як це зробити

1Скрипти, не потрібні для першого рендерингу, позначте атрибутом defer — вони завантажаться у фоні й виконаються після збирання сторінки, у тому порядку, в якому розташовані.
2Для незалежних скриптів (аналітика, чат) використовуйте async — вони виконаються одразу після завантаження, незалежно від порядку.
3Критичні скрипти тримайте мінімальними; решту завантажуйте в кінці <body> або з defer.
4Правило: defer = залежить від DOM або від порядку; async = самостійний, ні від чого не залежить.

Приклад

Погано

<head>
  <script src="/js/app.js"></script>   <!-- блокує рендеринг -->
</head>

Правильно

<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Висновок

Defer/async — одна з найдешевших і найдієвіших оптимізацій швидкості — часто достатньо дописати одне слово до тегу. Для більшості скриптів правильний вибір — defer. Після впровадження перевірте, що нічого не перестало працювати (особливо скрипти, залежні від порядку), та виміряйте покращення LCP.

Повʼязані теми