Атрибут as тега <link>
Описание
Атрибут as для тега <link> указывает тип содержимого, загружаемого через rel="preload" или rel="prefetch". Это помогает браузеру правильно оптимизировать загрузку ресурсов.
<!-- Предзагрузка шрифта -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Предзагрузка скрипта -->
<link rel="preload" href="script.js" as="script">
<!-- Предзагрузка стилей -->
<link rel="preload" href="styles.css" as="style">
<!-- Предзагрузка изображения -->
<link rel="preload" href="image.webp" as="image" type="image/webp">
Допустимые значения:
| Значение | Тип ресурса | Пример использования |
|---|---|---|
script |
JavaScript файл | <link as="script" href="app.js"> |
style |
CSS файл | <link as="style" href="theme.css"> |
font |
Файл шрифта | <link as="font" href="font.woff2" crossorigin> |
image |
Изображение | <link as="image" href="logo.webp"> |
document |
HTML документ | <link as="document" href="page.html"> |
fetch |
Запрос данных (XHR/fetch) | <link as="fetch" href="data.json"> |
Особенности работы:
- Обязателен для
rel="preload"- без него предзагрузка не сработает - Позволяет браузеру:
- Устанавливать правильные заголовки запроса
- Приоритизировать загрузку ресурсов
- Применять корректную политику безопасности
- Для шрифтов требуется атрибут
crossorigin
Пример с медиа-запросами:
<!-- Предзагрузка адаптивного изображения -->
<link rel="preload" as="image" href="large.jpg" media="(min-width: 1024px)">
<link rel="preload" as="image" href="small.jpg" media="(max-width: 1023px)">
Рекомендации по использованию:
- Используйте для критически важных ресурсов
- Указывайте точный тип контента
- Для шрифтов всегда добавляйте
crossorigin - Сочетайте с
typeдля более точного указания формата - Не злоупотребляйте - предзагружайте только самое необходимое
Ошибки и проверка:
<!-- Неправильно: отсутствует as -->
<link rel="preload" href="script.js">
<!-- Неправильно: несоответствие типа -->
<link rel="preload" href="styles.css" as="script">
<!-- Правильно -->
<link rel="preload" href="styles.css" as="style">
Оптимизация производительности:
- Предзагрузка сокращает время загрузки критических ресурсов
- Позволяет избежать "водопада" загрузок
- Улучшает показатели Lighthouse и Web Vitals
Примечание: Атрибут as - важная часть современной стратегии оптимизации загрузки ресурсов. Для сложных сценариев предзагрузки рассмотрите использование Resource Hints API или специализированных инструментов сборки.