Где подключать скрипты HTML: лучшие практики для быстрой загрузки сайта
Где правильно подключать скрипты HTML: перед закрытием body, с defer или async. Узнайте, как избежать блокировки отрисовки и ускорить загрузку сайта.
Когда вы открываете сайт, браузер сначала загружает HTML, потом CSS, а потом — загрузка скриптов, процесс подключения и выполнения JavaScript-кода на веб-странице. Также известен как подключение JavaScript, он определяет, будет ли сайт мгновенно отзываться или тормозить, пока не загрузятся все скрипты. Без правильной загрузки скриптов даже самый красивый сайт может висеть как тяжелый груз — и пользователи уходят.
Всё зависит от того, где вы размещаете тег script, место в HTML-документе, где подключается JavaScript-файл. Также известен как размещение скриптов, оно влияет на то, когда пользователь увидит контент, а когда — кнопки, анимации и формы. Если поставить скрипт в <head> без атрибутов — браузер остановит загрузку страницы, пока скрипт не загрузится и не выполнится. Это как поставить стражника у входа: пока он не проверит всех, никто не войдёт. Но если вы используете async, атрибут, который позволяет загружать скрипт параллельно с HTML, не блокируя отображение страницы или defer, атрибут, который откладывает выполнение скрипта до полной загрузки HTML — вы даёте браузеру свободу работать быстрее. Async — для скриптов, которые не зависят от DOM, например, аналитики. Defer — для тех, что работают с кнопками, формами и меню.
Многие думают, что важно только, чтобы скрипт работал. Но на деле важно, когда он работает. Сайт Apple, например, использует сложные схемы загрузки, чтобы пользователь видел контент за доли секунды, даже если скриптов сотни. Если вы ставите скрипты в конец <body> — это уже лучше, чем в <head>. Но если вы добавите defer — это станет ещё лучше. И да, вы можете загружать скрипты извне — через CDN, через модули, через динамическую подгрузку. Главное — не мешать браузеру показывать контент.
В этом сборнике статей вы найдёте всё, что нужно знать о загрузке скриптов: от простого вопроса «куда вставить script» до продвинутых техник с async и defer. Узнаете, как проверить, не тормозит ли ваш сайт из-за скриптов, как найти, какой скрипт тормозит загрузку, и как правильно настроить загрузку для мобильных устройств. Без воды, без теории — только то, что работает на практике.
Где правильно подключать скрипты HTML: перед закрытием body, с defer или async. Узнайте, как избежать блокировки отрисовки и ускорить загрузку сайта.