Используем Lazy Load для загрузки Disqus

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

Скорость загрузки страницы можно легко увеличить с помощью Lazy Load. Технология Lazy Load представляет собой JavaScript-функцию для отложенной загрузки содержимого сайта. Таким образом, элементы страницы, которые не попадают в поле зрения пользователя, не будут загружаться до тех пор, пока пользователь не прокрутит страницу вниз.

Потратив около часа на реализацию поддержки технологии Lazy Load, можно значительно ускорить загрузку сайта, уменьшить трафик и количество запросов, а главное снизить нагрузку на сервер. В данной статье речь пойдет о использовании технологии Lazy Load для отложенной загрузки блока комментариев Disqus.

Используем Lazy Load для загрузки Disqus

На данный момент существует множество готовых Lazy Load скриптов для разных популярных фреймворков. Чтобы избежать подключения дополнительных JavaScript-библиотек, для загрузки комментариев Disqus с помощью функции Lazy Load, я буду использовать библиотеку jQuery.

Если вы ранее не использовали jQuery, необходимо подключить библиотеку в шаблоне вашего сайта:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=1.11.1'></script>

Для WordPress будет правильнее выполнить подключение скрипта через файл шаблона functions.php, для этого необходимо добавить в содержимое файла следующую функцию:

function wpdocs_dequeue_script() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"), false, '1.11.3');
    wp_enqueue_script('jquery');
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

Непосредственно сам скрипт, отвечающий за загрузку комментариев Disqus при при скроллинге страницы браузера:

<script type="text/javascript">
var disqus_identifier = window.location.url;
var ds_loaded = false;

function loadDisqus()
{
    var disqus_div = $("#disqus_thread");
    var top = disqus_div.offset().top;
    var disqus_data = disqus_div.data();
    if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) 
    {
        ds_loaded = true;
        for (var key in disqus_data) 
        {
            if (key.substr(0,6) == 'disqus') 
            {
                window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
            }
        }
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }  
}

$(function () 
{
    var disqus_div = $("#disqus_thread");
    if (disqus_div.size() > 0) 
    {
        $(window).scroll(loadDisqus);      
    }  
}
);
</script>

Скрипт лучше вынести в отдельный файл, а затем подключить его в functions.php:

function disqus_lazyload_script() {
    wp_enqueue_script('disqus', get_stylesheet_directory_uri() . '/disqusLazyLoad.js', array('jquery'), false, true); 
}
add_action( 'wp_enqueue_scripts', 'disqus_lazyload_script', 30 );

В месте отображения блока комментариев Disqus необходимо добавить строку ниже, в которой необходимо заменить значение параметра data-disqus-shortname на ваш идентификатор.

<div id="disqus_thread" data-disqus-shortname="DISQUS_SHORTNAME"></div>