Обычно мы используем кнопки социальных сетей на нашем сайте, чтобы делиться контентом нашего сайта на различных платформах социальных сетей. Эти кнопки социальных сетей добавляют вашим веб-страницам несколько дополнительных байтов. Если кто-то просматривает эту конкретную веб-страницу с медленным подключением к Интернету, это вызовет беспорядок. Чтобы избежать этого, особенно в адаптивных дизайнах, вы можете условно загружать кнопки социальных сетей и останавливать их загрузку на мобильных устройствах, чтобы избежать беспорядка.
Как загрузить социальные виджеты по условию:
Ниже приведен простой метод, с помощью которого мы вычисляем ширину браузера, и если ширина превышает определенную ширину, скажем, 480 пикселей, то появятся кнопки совместного использования в социальных сетях.
Здесь самое лучшее, что мы не скрываем их с помощью css, а вместо этого полностью избегаем их загрузки, что сэкономит много времени на загрузку, когда кто-то просматривает с мобильных устройств.
Чтобы реализовать условную загрузку в своем блоге / веб-сайте, сначала добавьте в свой блог все необходимые социальные виджеты, используя обычную процедуру. Например, вы можете посетить facebook.com чтобы сгенерировать код для кнопки Like, пока dev.twitter.com будет предоставлять коды для виджетов Twitter и Follow.
Удалите JavaScript из этих сгенерированных кодов - все, что находится между tags – and add everything else to your website template. Then copy-paste the following snippet before the closing tag of your website template.
(function(doc, script, minimum) {
// Calculate the width of the user's screen
var browserWidth = window.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
// Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
if (browserWidth > minimum) {
var js, frag = doc.createDocumentFragment(),
// Credit : Stoyan Stefanov of phpied.com
js_queue = function(url, id) {
if ( ! doc.getElementById(id) ) {
js = doc.createElement(script);
js.src = url; js.id = id;
frag.appendChild(js);
}
};
// These are the most common social widgets, remove the ones you don't need
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);
}
// Set the minimum width here (default is 480 pixels)
} ( document, 'script', 480 ) );
Приведенный выше код JavaScript асинхронно загружает все популярные социальные виджеты - Twitter, Facebook, LinkedIn, Google+ и Pinterest - но вы можете удалить вызовы js_queue для виджетов, которые вы не планируете использовать на своем веб-сайте. Сохраните изменения, и все готово.
Это оно! Вы медленно и успешно перешли к продвинутым стратегиям ведения блогов и SEO. Эта глава определенно поможет вам сократить время загрузки блога, что является одним из важнейших аспектов SEO на странице.
