Гарри Робертс делится интересным способом добавления эффекта «мгновенности» при переходе по ссылкам.
Сразу покажу его сниппет:
<script type=speculationrules>
{
"prefetch": [
{
"where": {
"selector_matches": "[data-prefetch]"
},
"eagerness": "immediate"
},
{
"where": {
"href_matches": "/*"
},
"eagerness": "moderate"
}
],
"prerender": [
{
"where": {
"selector_matches": "[data-prefetch=prerender]"
},
"eagerness": "immediate"
},
{
"where": {
"selector_matches": "[data-prefetch]"
},
"eagerness": "moderate"
}
]
}
</script>
Итак, что здесь происходит.
-
<script type=speculationrules> — это подсказка браузеру, что на странице нужно применять Speculation Rules. Если ещё не сталкивались с такими, можете почитать про них тут: https://developer.chrome.com/docs/web-platform/prerender-pages.- Вместо того, чтобы размечать конкретные ссылки, Гарри предлагает использовать атрибут
[data-prefetch]. Если он есть у ссылки, тогда сработает оптимизация.- Для всех внутренних ссылок без атрибута всё равно включается оптимизация, ресурсы начнут скачиваться по задержке курсора на ссылке или в начале нажатия на ссылку.
- Если атрибут выставлен как
[data-prefetch=prerender], то это просьба браузеру отрендерить контент по ссылке заранее, как только он найдёт это правило.Таким образом можно разметить супер-важные для быстрого отображения страницы, чтобы они рендерились ещё до того, как пользователь подумал о том, что он туда перейдёт. Для всяких лендингов с единственной кнопкой-переходом — отлично.
Разумеется, помните, что такие оптимизации не бесплатны. Пререндеринг и префетчинг — это запросы на сервер. Можно неаккуратно задудосить самих себя, если настроить правила криво. Но если вы всё-таки понимаете, как разменять серверное время на прибыль бизнесу и удобство пользователей — дерзайте, подход интересный.
https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/
