Швидкість Високий вплив Просте 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.

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