Задать вопрос
Kozack
@Kozack
Thinking about a11y
html

Есть ли смысл использовать link[rel="preload"]?

Предположим у меня вот такая страница
<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- много контента -->

  <script src="main.js"></script>
</body>


Стоит ли мне в шапку добавлять 
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">


Есть ли смысл вставлять <link rel="preload" href="style.css" as="style"> ведь сам тег скрипта идёт не намного позже?

Есть ли смысл вставлять <link rel="preload" href="main.js" as="script"> ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?
  • Вопрос задан
  • 1876 просмотров
4 комментария
Подписаться 8 Средний 4 комментария
Решения вопроса 2
@BorisKorobkov
Web developer
rel="preload" имеет смысл использовать только для файлов (css, js, fonts, video, img), которые загружаются не из html-кода, а позже из других css/js-файлов или по ajax/socket. Чтобы браузер не ждал, когда обнаружится потребность в этом файле, а заранее загрузил его.
Для обычных style.css/main.js используйте обычную загрузку.

ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?

Они в подвале, чтобы не блокировали построение DOM (так юзер быстрее увидит страницу в браузере).
Ответ написан
Комментировать
Комментировать
Martovitskiy
@Martovitskiy
"preload" служит для загрузки поздно-обнаруживаемых ресурсов. Например шрифты долго грузятся или какой то важный скрипт, вот их нужно отрисовать быстрее.
Указывая link rel="preload" вы говорите браузеру, что это файл важный и его нужно загрузить быстрее.
Так что да, использовать "preload" нужно!
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Tomasina
@Tomasina
Инженер-разработчик
Там не только preload, зависит от ситуации:
https://habr.com/ru/post/445264/
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать проект Площадки для дизайнеров интерьеров
22 нояб. 2024, в 10:19
10000 руб./за проект
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Ещё заказы