Динамические кнопки социальных сетей - сокращение количества запросов HTTP и ошибок проверки - PullRequest
Новая
       20

Динамические кнопки социальных сетей - сокращение количества запросов HTTP и ошибок проверки

2 голосов
/ 05 марта 2012

Я использую следующий код на нескольких сайтах, которым мне удается добавлять динамические кнопки социальных сетей.

Между ними они добавляют три http-запроса javascript и недопустимый код на каждую страницу.Хотя я ценю, что все они загружаются из CDN, они увеличивают и без того большую нагрузку на одной из страниц сайта, и это делает меня недействительным.

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

<div id="fb-root"></div>
<script type="text/javascript">(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div>
<ul> 
    <li> 
        <div class="fb-like" data-href="http://www.facebook.com/username" data-send="true" data-layout="button_count" data-width="100" data-show-faces="false"></div>
    </li>
    <li>
        <a style="color: #777;" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="twittername">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </li>
    <li>
        <a href="https://twitter.com/justicecampaign" class="twitter-follow-button" data-show-count="true">Follow @twittername</a>
    </li>
    <li>
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="medium"></g:plusone>
    </li>
</ul>   
</div>

1 Ответ

1 голос
/ 05 марта 2012

Лучшее, что вы можете сделать - переместить эти сценарии в конец <body> или добавить атрибут defer в теги script для Twitter и Google+. Браузеры останавливают синтаксический анализ и рендеринг страницы, когда она загружает и выполняет JavaScript, поэтому не рекомендуется иметь сторонние скрипты в середине HTML-кода, поскольку ваша страница будет зависеть от сторонних сетей. Если какой-либо из них испытывает задержки, ваша страница это почувствует. Перемещение этих сценариев в нижнюю часть гарантирует, что ваш контент, который является наиболее важным, анализируется и обрабатывается первым.

Что касается сокращения запросов, вы можете попробовать загрузить и объединить эти сторонние сценарии в один сценарий, исключив два запроса. Недостатком является то, что вы не получите последние версии скриптов по мере их обновления, если вы не будете активно отслеживать и повторно объединять их.

Я не могу говорить о недействительности, так как не особо разбираюсь в этих конкретных сценариях.

...