Использую в верстке виджет вконтакте, проверил страницу на google page speed результат снизился значительно.
of your page —> VK.init(); VK.Widgets.Like(«vk_like», );
Подскажите, как можно осуществить его загрузку отложенно, после загрузки страницы или до прокрутки до кнопки вк.
Отслеживать
задан 21 янв 2020 в 11:19
Илья Адаменко Илья Адаменко
11 1 1 серебряный знак 4 4 бронзовых знака
в футер их, на самое дно. там им и место.
21 янв 2020 в 11:50
они итак в футере, на дне, это мало на что влияет в данном случае
21 янв 2020 в 13:45
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Переместите тэг скрипта в футер сайта, а js код оберните в $(document).ready().
Тогда скрипт не будет блокировать отрисовку html и при этом не будет ошибок из-за позднего подключения кода.
Для работы требуется jQuery
$(document).ready(function()< VK.init(); >); $(document).ready(function()< VK.Widgets.Like(«vk_like», ); >);
Полный рабочий код:
ТЕМЫ ДЛЯ ВКОНТАКТЕ | Стилизация ВК через расширения VK styles
// вам может быть не нужен jQuery $(document).ready(function()< VK.init(); /* проверьте appid, я поставил свой для своего сайта. */ >); $(document).ready(function()< VK.Widgets.Like(«vk_like», ); >);
Отслеживать
ответ дан 21 янв 2020 в 11:55
2,190 1 1 золотой знак 8 8 серебряных знаков 20 20 бронзовых знаков
спасибо за ответ, но не загружается виджет
21 янв 2020 в 13:41
21 янв 2020 в 13:46
21 янв 2020 в 14:01
Вставила код для вк like на сайт, по вашему примеру. Скорость для компьютеров показывает 98%, а вот для мобильных у меня упала на 10%. Хотелось бы поставить виджет группы вк на сайт, но при этом сильно падают значения скорости. Подскажите, что можно сделать, нигде не могу найти ответ на этот вопрос.
Источник: ru.stackoverflow.com
VK оптимизация нового ВКонтакте
Увеличина ширина новостной ленты.
Фокус на основном контенте.
Убран графический «мусор».
Контент по центру, меню по бокам.
Фотографии по центру, а комментарии внизу.
В чатах список пользователей справа. Сама переписка по центру.
Статичная шапка.
Левая колонка зафиксирована.
Белый фон, спокойные оттенки.
Это HE старый дизайн ВКонтакте — весь функционал нового дизайна vk.com сохраняется.
ОБРАЩАЮ ВАШЕ ВНИМАНИЕ:
Для тех кому не подходит светлое цветовое оформление
есть возможность выбрать оформление в классических цветах (в выпадающем меню ниже)
First install FreeStyler to use this style.
If you already installed it, please, make sure this site is allowed to run JavaScript.
MS Edge doesn’t support add-ons at the moment, so FreeStyler is unavailable for it.
But you can download Freestyler for other browsers and apply styles there!
Reinstall Style Failed to install
Uninstall style Open styles manager Style is installed in FreeStyler.
Update Uninstall style Open styles manager Style was installed in FreeStyler, but a newer version is available.
Please, try to update again Update failed
Update Uninstall style Open styles manager Updates are available for your style in FreeStyler. Please set new parameters manually and apply changes.
Apply new parameters Uninstall style Open styles manager To change style parameters, select new values and press Apply
Источник: freestyler.ws
Оптимизация асинхронной загрузки кода виджетов социальных сетей
Оптимизация асинхронной загрузки кода виджетов социальных сетей, пожалуй, самая первая и больная тема, при тестировании на скорость отрисовки страниц сайта сервисом PageSpeed Insights. Возьмем любую социальную сеть: русскоязычную ВКонтакте, или же Facebook. Обязательно PageSpeed предупредит — сторонний код заблокировал основной поток.
Мало того, что в инструкциях по подключению виджетов на сайт, эти сети предлагают часть кода JavaScript вставлять сразу после открытия тега . Так он еще и генерирует энное количество ссылок на дополнительные их сервисы. Можно подумать, что главное не шапка сайта, заголовок страницы или ее контент, а виджеты социальных сетей. Оптимизацией асинхронной загрузки своих виджетов представители социальных сервисов не спешат.
Для них это не проблема. Использовать оптимизированный код у себя на сайте можно, никто и внимания не обратит. Но, если внести изменения (отличные от официальной версии) в оригинал и предоставить его открыто для других, можно и в немилость попасть.
Сколько уже об этом писалось, а воз и ныне там.
Хотя, будем объективными, некоторые сервисы сдвинулись с места.
Оптимизация асинхронной загрузки виджета ВКонтакте.
Рассмотрим оптимизацию асинхронной загрузки виджета ВКонтакте — одной из самых популярных социальных сетей в русскоязычном сегменте интернета.
Здесь предоставлен пример кода виджета для сообществ VK, который дает сам сервис ВКонтакте. Как это происходит в стандартном коде?
Код подгружается синхронно. Выполняется последовательно. Пока не будет загружена и выполнена библиотека VK, загрузка страницы сайта останавливается.
// Скрипт, который подгружает библиотеку ВК, которая будет выполнять ваш код:
Код инициализации виджета:
// Код div, куда будет добавлен виджет: VK.Widgets.Group(«vk_groups», , 122647882);
ВКонтакте его предлагают поместить в начале содержания страницы (после открытия тега ).
Вся проблема в том, что скрипт грузится синхронно. То есть, сначала загрузится этот скрипт, загрузка страницы прервется на этом скрипте, вообще отрисовываться не будет. Будет запрос к внешнему ресурсу, последует его ответ. Лишь после того как выполниться (интерпретируется) весь код, продолжится загрузка страницы сайта. Но и это еще полбеды.
Сам блок инициализации виджета состоит из кода в теге и скрипта, который, в свою очередь, и съедает скорость загрузки страницы.
При тестировании в PageSpeed Insights, увидите еще массу ссылок на всевозможные сервисы от соцсети ВКонтакте. Если мы этот скрипт сделаем асинхронным — добавим параметр async, загрузка страницы продолжиться. Но в таком случае нарушится порядок выполнения скриптов, потому как будет сначала подгружаться скрипт инициализации, без кода .
Браузер будет загружать то, что ему легче. Первым — сам код инициализации, только после этого — библиотеку VK. Есть еще параметр defer (отложенная загрузка). Он позволяет выполнять код отложено, но соблюдая порядок загрузки скрипта.
В таком случае, мы получим правильное выполнение данного скрипта. Но, не сможем с ним ничего сделать — отложить по времени.
Скрипт для асинхронной загрузки виджета ВКонтакте.
Чтобы решить проблему синхронной загрузки, А.Белогородцев (один из учредителей сайта LOADING.express) предложил подключать не через тег async или defer, а, непосредственно, через скрипт с функцией onload:
Убирается версионность библиотек 168.
Создается переменная, объект скрипт, и внедряется в DOM тогда, когда это необходимо:
setTimeout(function()< // создаем элемент script и добавляем его асинхронно в DOM var VKO = document.createElement(«script»); VKO.src = ‘https://vk.com/js/api/openapi.js’; VKO.async = true; document.getElementsByTagName(‘head’)[0].appendChild(VKO);
Добавляется функция тайм-аут (setTimeout) — загрузку скрипта можно откладывать по времени, которое вам необходимо — 3сек.(3000м/сек) или 10сек.(10000м/сек). Значение времени подбирается индивидуально для каждого сайта, в зависимости от взаимодействия с пользователями и местом расположения виджета.
Вряд ли, виджет на сайте будет расположен на первом экране, при загрузке страницы.
Хотя, бывают и исключения:
// подгружаем инициализацию виджета на загрузку VKO.onload = function()< // код, который дает сам виджет ВК VK.Widgets.CommunityMessages(«vk_community_messages», 122647882, ); >; >,5000); // здесь указывается время в миллисекундах 5000 мс = 5 секунд
В итоге — в самом коде страницы (в WordPress — боковая колонка виджетов), вставляется только код , который предоставляет соцсеть ВКонтакте, для вывода (отображения) самого виджета:
Вставляется он после открывающего тега (у меня все внешние скрипты стоят перед закрывающим тегом ). Этим скриптом можно инициализировать несколько разных виджетов от VK, добавляя коды инициализации в скрипт (пример, каждый с новой строки):
VK.Widgets.Group(«vk_groups», , 122647882);
и вставляя необходимый в виджетах или странице.
Полную версию этого скрипта можно скачать в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog. Регистрация платная, но во много раз дешевле стоимости полного комплекта самих скриптов. Учебный раздел для тех, кто хочет профессионально подойти к созданию своего личного блога или тематического сайта, подписных и продающих страниц — Landing Page. Используя при этом уникальные Премиум-шаблоны и Плагины, на самом популярном и востребованном движке WordPress.
Виджет группы в Одноклассниках.
Оптимизировать асинхронную загрузку виджета группы в Одноклассниках нет необходимости.
Хоть эта социальная сеть и уступает по популярности самым именитым, но программисты здесь не поленились. Создали код виджета, который отвечает всем требованиям PageSpeed Insights при тестировании на скорость загрузки страниц сайта.
Что скажешь — молодцы! Первая часть кода в теге ставиться туда, где будет отображаться сам виджет:
Все просто. Если у Вас есть группа в Одноклассниках, создаете и настраиваете виджет — ширину и высоту. ID группы. Копируете и вставляете код на сайт.
При необходимости, можно отложить загрузку виджета на определенное время в м/секундах (заменяя 0 на нужное значение).
Нужно тестировать в PageSpeed Insights и смотреть рекомендации по оптимизации и производительности страниц сайта.
Оптимизация асинхронной загрузки виджета Facebook.
Над оптимизацией асинхронной загрузки самого скрипта виджета от Facebook пришлось немного повозиться.
Разработчики из LOADING.express предоставили вебмастерам только виджет для VK. Сам принцип построения скрипта для самописного сайта.
Для CMS WordPress пришлось вносить небольшие дополнения. Используя его, нужно было самому реконструировать и оптимизировать сам код, предоставляемый Facebook.
Все разработки LOADING.express предназначены для подготовленных людей.
После некоторых консультаций, мне удалось сформировать нужный код скрипта. Код инициализации виджета на странице (в боковой колонке виджетов WordPress), можно смело копировать и вставлять из того, что дает Facebook.
Сам код заключен в тег (пример моего виджета):
SDK JavaScript, предоставленный Facebook для вставки на сайт перед тегом , необходимо было переписать по принципу скрипта VK, заменив все значения от сервисов социальной сети Facebook. В связи с тем, что после Нового Года, у меня был полностью закрыт доступ к аккаунту Facebook, по необъяснимым для меня причинам, не будем рисковать.
Сначала заставили включить двухфакторную аутентификацию (в обязательном порядке). Потом перестали приходить коды подтверждения. Странные объяснения — людей не хватает. Причем тут люди? Потом, подтверждение личности. Что-то странное творилось.
Только в конце января получил доступ.
Эту же статью мне придется постить и на своей бизнес-странице в Facebook. В результате вышеизложенных фактов, оптимизированный скрипт виджета можете скачать в Учебном разделе Centr-Sit-Info Уровень Profi-bizblog. Сокращенная видеоверсия урока из учебного раздела сайта Centr-Sit-Info Уровень Profi-bizblog:
Источник: sit-info.ru