Preload и Prefetch

Preload и Prefetch — опции загрузки контента, которые позволяют улучшить пользовательский опыт и просто загружать все ресурсы значительно быстрее.

Preload — это механизм HTML, который позволяет вам указать браузеру загружать ресурсы (скрипты, стили, шрифты и изображения) ещё до того, как они будут использованы на странице. Это особенно полезно для ресурсов, которые будут запрошены в будущем в результате действий пользователя, таких как навигация по страницам или выполнение каких-либо действий:

<link rel="preload" href="styles.css" as="style">

В этом примере браузер будет предварительно загружать файл styles.css, как только он обнаружит этот тег <link> в HTML-документе, даже до того, как он встретит место, где эти стили используются

Prefetch — предназначен для загрузки ресурсов, которые будут использоваться на последующих страницах, а не на текущей. Он сообщает браузеру о том, какие ресурсы необходимо предварительно загрузить в фоновом режиме для улучшения скорости загрузки последующих страниц. С каким-нибудь реактом такой фокус не прокатит, однако это точно можно применять, например, со статически-генерируемыми сайтами через что-то типа 11ty.

<link rel="prefetch" href="next-page.html">

Можем просто загрузить следующую страничку в фоне и, если пользователь захочет на нее перейти, она откроется сильно быстрее.

В целом, preload и prefetch — это одни из самых базовых способов оптимизировать загрузку фронтенда, которыми точно не стоит пренебрегать. Не одним же реактом едины.

Спасибо за прочтение, это важно для меня ❤️

#web #theory