Как загрузить виджеты социальных сетей условно

Автор:
Nurlan Kemelbekov

Такие виджеты, как кнопка Твиттера или кнопка «Нравится» от Facebook, увеличивают общий размер веб-страниц на несколько байтов.

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

Помните, мы не просто скрываем кнопки, а удаляем их полностью, так JavaScript и CSS файлы не будут загружаться на мобильном устройстве пользователя.

Это улучшает скорость загрузки веб-страницы, которая в настоящее время является фактором в рейтингах поисковых систем. Ниже Вы можете узнать способ загрузить виджеты социальных сетей условно, чтобы повысить производительность сайта на мобильных устройствах.

Как загрузить социальные виджеты условно

Техника проста. Мы рассчитываем ширину экрана / браузера пользователя и если ширина превышает определенное значение (скажем, 480 пикселей), загружаем социальные виджеты.

Для реализации условной нагрузку на блог / сайт, сначала добавьте все необходимые социальные виджеты с помощью обычной процедуры. Например, вы можете посетить facebook.com, чтобы сгенерировать код для кнопки Like.twitter.com обеспечит кодами на виджеты Twitter.

Снимите наличие этих сгенерированных кодов — все между тегами <script> — и добавьте все остальное в шаблон сайта. Затем скопируйте и вставьте следующий фрагмент перед закрывающим </ BODY> тегом шаблона сайта.
Скрипт:

(function(doc, script, minimum) {

// Рассчитать ширину экрана пользователя
var browserWidth = window.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;

// Загрузите если сайт в настоящее время рассматривается на широком (не мобильный) экран
if (browserWidth > minimum) {

var js, frag = doc.createDocumentFragment(),


js_queue = function(url, id) {
if ( ! doc.getElementById(id) ) {
js = doc.createElement(script);
js.src = url; js.id = id;
frag.appendChild(js);
}
};

//Это наиболее распространенные социальные виджеты, удалить те, которые вам не нужны
js_queue ("https://apis.google.com/js/plusone.js", "googleplus-js");
js_queue ("//platform.twitter.com/widgets.js", "twitter-wjs");
js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
js_queue ("//platform.linkedin.com/in.js", "linkedin-js");
js_queue ("//assets.pinterest.com/js/pinit.js", "pinterest-js");

var fjs = doc.getElementsByTagName(script)[0];
fjs.parentNode.insertBefore(frag, fjs);
}

// Установить минимальную ширину здесь (По умолчанию 480 пикселей)
} ( document, 'script', 480 ) );

Этот JavaScript код асинхронно загружает все популярные социальные виджеты — Twitter, Facebook, Google + и т.д. — но вы можете удалить js_queue призывы, которые не планируете использовать на своем сайте.

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



Вам также может понравиться:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

10 − два =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!