Главная » HTML5 » Значения » Метатеги для предзагрузки
349 0  

Метатеги для предзагрузки

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

winked Смотреть стандартные <meta>

======

Вариант:

<link rel="dns-prefetch preconnect" href="//www.google-analytics.com">
<link rel="dns-prefetch preconnect" href="//www.googletagmanager.com">
<link rel="dns-prefetch preconnect" href="//cdn.epoq.de">
<link rel="dns-prefetch preconnect" href="//youtube.com">

<link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="/custom/module/public/fxxl1/fonts/Roboto/Roboto-Light-webfont.woff2">

* Объединение процессов  "dns-prefetch" и "preconnect" включает в себя разрешение DNS, а также установление соединения TCP и выполнение квитирования TLS, если сайт обслуживается по HTTPS то это еще более ускорит загрузку внешних ресурсов.

Более подробно:

1.Preload - позволяет предварительно загрузить ресурсы, инициированные CSS и jаvascript, а также описать, когда нужно использовать каждый ресурс.

Значение -as:

  • as="style"
  • as="image"
  • as="font"
  • as="document"

Пример предварительной загрузки таблицы стилей, используя HTML разметку и jаvascript.

<!-- Via markup -->
<link rel="preload" href="https://layout.rullan.in.ua/css/mystyles.css" as="style">
<!-- Via jаvascript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style";
res.href = "css/mystyles.css";
appendChild(res);
</script>

Какая поддержка браузерами PRELOAD?
PRELOAD 
 

2.Prefetch — это низкоприоритетная ресурсная подсказка, позволяющая браузеру выбирать в фоновом режиме (в свободное время) те ресурсы, которые могут пригодиться позже, и сохранять их в кэше браузера. Как только страница закончит загружаться, prefetch загружает некоторые дополнительные ресурсы. Когда пользователь жмет на prefetch-ссылку, prefetch немедленно загружает контекст.

Как правило используэтся для гугл сервисов и статистики:

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//opensource.keycdn.com">
<link rel="dns-prefetch" href="//cdn.domain.com">

2.Preconnect —  позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сервер. Эта процедура включает поиски DNS, «переговоры» TLS и «рукопожатие» TCP. Что в свою очередь устраняет круговые задержки и экономит время пользователя.

crossorigin - ссылки с ресурсами с поддержкой CORS.

<link href='https://fonts.gstatic.com' rel='preconnect' crossorigin>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700|Open+Sans' rel='stylesheet'>
<script>
function preconnectTo(url) {
    var hint = document.createElement("link");
    hint.rel = "preconnect";
    hint.href = url;
    document.head.appendChild(hint);
}
</script>

Поддержка Preconnect современными браузерами:

Поддержка Preconnect 
 


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020