Откладываем загрузку группы ВК до момента, когда её должен будет увидеть пользователь

Почему стоит откладывать загрузку группы?
Во-первых, не все пользователи долистывают страницу до блока с группой (в моем примере лишь около 50%) 
Во-вторых, виджет группы сообщества в ВК это:
http://vk.com/js/api/openapi.js - 19,6 КБ 
http://vk.com/images/upload.gif - 265 Б 
http://vk.com/widget_community.php - 3 КБ 
http://vk.com/js/loader_nav - 3 КБ 
http://vk.com/css/al/lite.css - 6,2 КБ 
http://vk.com/js/al/lite.js - 37,2 КБ 
http://vk.com/js/lang3_0.js - 8,5 КБ 
http://vk.com/images/camera_50.gif - 774Б 
Итого 8 системных GET запроса и 78 КБ трафика, а еще само содержимое - HTML код iframe-а и фотографии пользователей. В итоге получается около 100 КБ данных как минимум. 
На моем реальном проекте: 110КБ и 23 GET-запроса.

Как отложить загрузку компонента?

Небольшое отступление: в моем примере будет показана отложенная загрузка компонента "Элементы раздела", т.к. на самом сайте группа с блоком ВК определяется внешним фильтром arrFilter, а сами группы загружены в инфоблоках.

1. С помощью jQuery плагина isInViewport.min.js (1,71 КБ) определяем, что пользователь долистал страницу, до блока с группой ВК; 
2. Отправляем AJAX запрос на подгрузку передавая необходимые данные; 
3. Подгружаем openapi.js для обработки служебного скрипта; 
4. Вставляем данные из результата AJAX-запроса в тело страницы. 

Код

В теле страницы (например, footer.php шаблона сайта) располагаем такой код:

<div id="vk-under-schedule" data-filter='<?=json_encode($arrFilter)?>' data-request='<?=json_encode($_REQUEST)?>'></div>

В JS загрузим openapi.js и сам компонент:

(function($) {
      $(document).ready(function() {
         var vkLoaded = false;

         $(window).scroll(function() {
            if(vkLoaded === false) {
               $('#vk:in-viewport').do(function(){
                  vkLoaded = true;
                  
                  $.ajax({
                     dataType: "script",
                     type: "GET",
                     url: "//vk.com/js/api/openapi.js?96",
                     success: function(data){
                        $.ajax({
                           type: "POST",
                           url: "/ajax/ajax-vk-under-schedule.php",
                           data: ({
                              R : $("#vk-under-schedule").attr("data-request"),
                              arrFilterBars : $("#vk-under-schedule").attr("data-filter")
                           }),
                           success: function(data){
                              $("#vk-under-schedule").html(data);
                           }
                        });
                     }
                  });
               });
            }
         });
      });
   }(jQuery));

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

Файл с компонентом, подгружаемым AJAX-ом:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

if($_POST["R"]) {
   $_REQUEST = (array) json_decode($_POST["R"]);
}

if($_POST["arrFilter"])   {
   global $arrFilter;
   $arrFilter = (array) json_decode($_POST["arrFilter"]);
}

?><?$APPLICATION->IncludeComponent("bitrix:catalog.section", "vk", array(...

А шаблон компонента должен вывести примерно такой HTML:

<div id="vk_groups"></div>
<sc ript type="text/javascript">VK.Widgets.Group("vk_groups", {mode: 0, width: "100", height: "100", color1: '000', color2: '000', color3: '000'}, 111);</sc ript>

Все это ради того, что бы посетитель увидел сайт раньше. В моем случае до 2 секунд быстрее! 
Конечно, пролистав страницу загрузится и виджет ВК и суммарный объем данных станет даже чуть больше на несколько КБ, но первое впечатление сайт произведет раньше, посетитель может раньше взаимодействовать с интерфейсом и т.д.