Как добавить rel = "preconnect" к тегам, отличным от ссылки? - PullRequest
Новая
       61

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

0 голосов
/ 27 февраля 2019

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

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

Но на моей домашней странице кнопки общего доступа, которые будут подключаться к социальным сайтам, выглядят так: 

<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-код?Кажется, что эти подсказки действительны только для тега ссылки?

Спасибо

1 Ответ

0 голосов
/ 27 февраля 2019

Я предполагаю, что вы проверяете свою страницу с помощью панели Аудит и смотрите Запросы ключей предварительной загрузки * Аудит 1002 *.

Если вы нажмете Предварительная загрузкаключевые запросы ревизия, вы должны увидеть расширенную таблицу с точными 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".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...