Что такое Preload, Prefetch, Preconnect и Prerender и зачем они нужны?
Preload, Prefetch, Prerender, Preconnect и DNS-Prefetch - это методы оптимизации загрузки веб-страниц, которые позволяют ускорить загрузку и улучшить производительность сайта.
Preload - это метод предварительной загрузки ресурсов, таких как изображения, скрипты и стили. Это позволяет ускорить загрузку страницы, поскольку ресурсы уже находятся в кэше браузера и не нужно загружать их заново.
Пример использования:
<link rel="preload" href="/style.css">
<link rel="preload" href="/script.js">
Prefetch - это предварительная выборка ресурсов, которые могут понадобиться в будущем. Это может быть информация о доставке, оплате или другие страницы сайта. Prefetch позволяет ускорить переход к этим ресурсам, поскольку они уже загружены в кэш браузера.
Пример использования:
<link rel="prefetch" href="/shipping-methods.html">
<link rel="prefetch" href="/checkout.html">
Prerender - это предварительный рендеринг страниц, которые еще не были запрошены пользователем. Это позволяет улучшить производительность, поскольку страница уже готова к отображению, когда пользователь нажимает на ссылку.
Пример использования:
// JavaScript
const prerender = document.querySelector('#prerender');
prerender.addEventListener('click', () => {
fetch('/page.html')
.then(response => response.text())
.then((html) => {
document.body.innerHTML = html;
});
});
Preconnect - это предварительное установление соединения с удаленными серверами для ускорения загрузки ресурсов. Это особенно полезно, если на сайте есть несколько внешних ресурсов (шрифты, стили, изображения), которые загружаются с разных серверов.
Пример использования:
<head>
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css" media="all">
</head>