Как добавить rel=preconnect к тегам, отличным от ссылки?

Я использую Chrome Dev Tools для аудита домашней страницы моего сайта. И это дает одну из возможностей «Предварительно подключиться к требуемым источникам» для кнопок Facebook, Twitter и LinkedIn Share на моей домашней странице.

Я прочитал статью Google о preconnect и dns-prefetch по адресу https://developers.google.com/web/fundamentals/performance/resource-prioritization , но найдите синтаксис только для тега ссылки, как показано ниже:

But in my home page, the share buttons that will connect to the social sites are looks like this:

<div class="fb-like" data-href="https://www.facebook.com/xxxx" data- 
send="false" data-layout="button_count" data-width="90" data-show- 
faces="true"></div>

или это:

<a href="https://twitter.com/share" class="twitter-share-button" data- 
 count="none">Tweet</a>

или это:

<script src="https://platform.linkedin.com/in.js" type="text/javascript"> 
</script>
                        <script type="IN/Share"></script>

Как в таких случаях добавить подсказки preconnect или dns-prefetch в html-код? Кажется, что эти подсказки действительны только для тега ссылки?

Спасибо


html google-chrome-devtools hint
person alancc    schedule 27.02.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я предполагаю, что вы проверяете свою страницу с помощью панели «Аудит» и просматриваете Предварительная загрузка ключевых запросов аудит.

Если вы нажмете на аудит Предварительная загрузка ключевых запросов, вы должны увидеть расширенную таблицу с точными URL-адресами, которые предлагается предварительно загрузить.

Возьмите эти URL-адреса и добавьте теги <link> к <head> вашего HTML-кода, которые предварительно загружают эти запросы.

<!doctype html>
<html>
  <head>
    <link rel="preload" as="script" href="facebook.js">
    <link rel="preload" as="script" href="linkedin.js">

Вам необходимо обратить внимание на типы файлов каждого ресурса и соответствующим образом обновить свойство as. Если файл представляет собой таблицу стилей, вам необходимо установить as="style". Если это скрипт, вам нужно установить as="script".

person Kayce Basques    schedule 27.02.2019