Ответ
- JS файлы – блокируют отрисовку страницы, если загружаются синхронно (
<script>безasync/defer). - CSS файлы – блокируют рендеринг, так как браузер ждёт построения CSSOM.
- Шрифты – могут вызвать FOIT (Flash of Invisible Text), если
font-display: blockили не указан.
Не блокируют:
- Картинки – загружаются асинхронно, не влияют на отображение DOM.
- Favicon – кэшируется и не блокирует рендеринг.
Пример блокировки JS:
<script src="app.js"></script> <!-- Блокирует -->
<script src="app.js" defer></script> <!-- Не блокирует -->Оптимизация: минимизируйте критический CSS, используйте async/defer для JS, font-display: swap для шрифтов.
Ответ 18+ 🔞
А, ну это ж классика, блядь! Сейчас разберём, что у нас там в браузере тормозит, как телега с дровами в грязи.
Смотри, есть ресурсы, которые ведут себя как упоротые родственники на пороге — пока их не пропустишь, нихуя дальше не двинешься. А есть те, что тихо сами по себе загружаются, как кот под диваном.
Вот кто главные тормозные козлы, блядь:
- JS-файлы — если их впихнуть обычным
<script>, то браузер тупо встанет колом, пока весь скрипт не скачает и не выполнит. Представь, ты везешь диван через дверь, а за ним вся очередь стоит. Пиздец. - CSS-файлы — о, эти хитрожопые ублюдки! Браузер без них боится даже пиксель показать, чтобы не выглядеть, как сайт 90-х. Ждёт, пока все стили построит в свою CSSOM-блядомину.
- Шрифты — вот тут вообще цирк. Если накосячить с настройками, текст может просто исчезнуть на пару секунд, будто его хуем стёрли. FOIT называется, Flash of Invisible Text, ёпта. Пользователь думает, что он ослеп, нахуй.
А вот кто молодцы, загружаются по-тихому, не отсвечивая:
- Картинки — им похуй. DOM уже отрисован, они подтянутся, когда смогут. Как гости, которые приходят к десерту.
- Favicon — эта мелкая иконка обычно уже в кэше сидит, её вообще не видно и не слышно.
Смотри, как JS может всё просрать:
<script src="app.js"></script> <!-- Вот этот уёбок всё заблокирует! -->
<script src="app.js" defer></script> <!-- А этот умный, подождёт своего часа. -->Что делать, чтобы не быть лохом?
Выкинь критический CSS прямо в <style> в голове, JS-файлам навешай async или defer, а шрифтам пропиши font-display: swap, чтобы текст не прятался, как трус. Всё просто, как три копейки, но почему-то все об этом забывают, а потом удивляются, что сайт грузится, как последняя мартышлюшка.