Размещение скриптов: как правильно подключать JavaScript без замедления сайта
Скрипты делают сайт интерактивным, но если их разместить неправильно, страница грузится медленно, а поисковики ругаются. Давайте разберём, где ставить <script>, какие атрибуты использовать и как не испортить пользователю опыт.
Где лучше размещать теги <script>
Самый простой способ – вставить скрипт в конец <body>. В этом месте HTML уже отрисован, и браузер не останавливает построение страницы, пока ждёт загрузку кода. Если скрипт нужен только для аналитики или рекламных пикселей, именно туда его кладут.
Если скрипт критически важен для первого рендеринга (например, меняет структуру DOM до того, как пользователь увидит страницу), его помещают в <head>. Но в этом случае обязательно добавить атрибуты async или defer, иначе загрузка будет блокировать всё остальное.
Атрибуты async и defer: в чём разница
async заставляет браузер загрузить файл параллельно, а выполнить сразу, как только он готов. Это удобно для независимых скриптов – аналитика, чаты, соц‑кнопки. Если скрипт меняет DOM до его полной загрузки, async может вызвать ошибки.
defer также загружает файл параллельно, но откладывает исполнение до готовности всего DOM. Это идеальный вариант для большинства библиотек и собственного кода, который влияет на структуру страницы.
Запомните правило: если скрипт нужен после полной загрузки HTML, ставьте defer. Если он работает сам по себе, без доступа к DOM, используйте async.
Пример правильного подключения:
<script src="/js/main.js" defer></script>
<script src="https://www.google-analytics.com/analytics.js" async></script>Еще один лайфхак – объединять несколько небольших файлов в один. Меньше HTTP‑запросов = быстрее. Если объединять нельзя, включайте кэш‑заголовки, чтобы браузер хранил скрипт между визитами.
Не забывайте проверять, какие скрипты действительно нужны. Часто на страницах находятся “мертвые” коды, оставшиеся после экспериментов. Удалите их – уменьшите размер страницы и ускорите загрузку.
Если вы используете модульный загрузчик (например, RequireJS или ES‑модули), разместите их в head без атрибутов, а сами модули будут загружаться асинхронно.
Наконец, проверяйте результат в инструментах браузера: вкладка «Network» покажет, сколько времени тратит каждый скрипт. Если какой‑то файл грузится слишком долго, подумайте о переносе его в конец body или о использовании CDN.
Следуя этим простым правилам, вы избавитесь от “тормозных” скриптов, улучшите SEO и сделаете сайт приятнее для пользователей.
