Задать вопрос
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"> ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?
  • Вопрос задан
  • 1962 просмотра
4 комментария
Подписаться 8 Средний 4 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 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 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
PHP-разработчик
FoodSoul • Калининград
от 180 000 до 250 000 ₽
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Frontend Developer (React + Node.js)
Alfabet Service
от 1 000 до 2 000 $
Ещё вакансии