Подключение ресурсов

link и script: подключение CSS и JS, defer/async, preconnect, preload, кеширование и порядок загрузки.

Уровень: средний 9 разделов 1,5 часа

1. Подключение CSS

Стили подключаются через <link rel="stylesheet" href="css/style.css"> в head. Это блокирующий ресурс: пока стили не загружены, страница не рисуется — поэтому важно держать CSS лёгким.

<head>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/components.css">
</head>

несколько link перечисляются в порядке каскада;
media="print" — стили печати грузятся отдельно;
минифицируйте и склеивайте — меньше запросов.

2. Подключение JS

Скрипты по умолчанию блокируют парсинг HTML в точке вставки. defer — выполняться после парсинга, в порядке появления. async — сразу как загрузится. Оба советуют не блокировать рендеринг.

<script src="js/main.js" defer></script>
<script src="js/analytics.js" async></script>
<script src="js/widget.js"></script>   <!-- не блокируй! -->

Правило: свой скрипт, зависящий от DOM, — с defer в head. Сторонний, не зависящий ни от чего, — async.

3. preconnect: нагреть соединение

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

preconnect заранее открывает TLS-соединение к стороннему домену — экономит RTT при загрузке шрифтов/скриптов. Держите для 1–3 главных доменов, не спамуйте.

4. preload и prefetch

<link rel="preload" href="fonts/hero.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page.html">

preload — важный ресурс текущей страницы загрузить срочно (шрифт, герой-изображение);
prefetch — заботься о следующем переходе (фоновая подгрузка);
preload недоброе: перегружает сеть без пользы — только для приоритетных.

5. Порядок и каскад

Порядок имеет значение: последний подключённый CSS перекрывает при равной специфичности; порядок script-defer сохраняется, async — приход в любой момент.

<link rel="stylesheet" href="reset.css">   <!-- сброс -->
<link rel="stylesheet" href="app.css">      <!-- потом ваше -->
<script src="vendor.js" defer></script>
<script src="app.js" defer></script>

6. Кеширование

HTTP-кеш отвечает за повторные посещения (Cache-Control);
имя версии файла (app.1f2a3.css) → новый кеш при релизе;
локально жмёте контроль: cache busting через строку запроса — тоже вариант;
шрифты и иконки — долгосрочный кеш (immutable).

<link rel="stylesheet" href="css/app.1f2a3c.css">

Имя с хэшем содержимого — чистый паттерн: кеш 1 год, обновление — новый файл, устаревание — само.

7. Шрифты

<link rel="preload" href="fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
<style>@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter.woff2') format('woff2');
}</style>

preload-шрифт + @font-face со woff2 делает первый экран быстрее: текст не ждёт шрифт со скрытой загрузки. details крестным — in fonts lab (см. шрифты раздел типографики).

8. favicon и метатаги

<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="apple-touch-icon" href="icon-180.png">

svg-фавикон — иконка и цвет. Для iOS — apple-touch-icon PNG 180×180 (без прозрачности, с углами). Плюс метатаги description/OG для соцсетей.

9. Чек-лист подключения ресурсов

CSS в head блок-парсером не грузится поздно;
JS с defer/async — не блокирует рендеринг;
preconnect к 1–3 сторонним доменам;
preload — только критичные ресурсы;
кеш с хэш-именами;
шрифты woff2 с корректным crossorigin.

Что дальше

Курс завершён.

← Вернуться к курсам