Code.Beer

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

Скорость загрузки страницы можно легко увеличить с помощью 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>

Многие шаблоны, плагины и компоненты сайта используют для своей работы библиотеку скриптов jQuery. По умолчанию в WordPress скрипты загружаются из папки wp-includes. Первоначальный размер библиотеки jQuery составляет порядка 300KB, после минимизации его можно уменьшить до 90KB. Дополнительно количество передаваемых данных можно снизить за счет использования сжатия GZIP.

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

Ситуация кардинально меняется если посетители запросят миллион страниц с пустым кэшем браузера, в этом случае используя CDN вы экономите до 76GB трафика. А при использовании популярного Google CDN, есть большая вероятность, что необходимая библиотека jQuery уже лежит внутри кэша браузера. В добавок, если сравнить скорости загрузки с CDN и обычного хостинга, то разница во времени может отличаться в несколько раз в пользу CDN.

Таким образом, используя CDN для загрузки jQuery, мы без труда убираем один лишний запрос к серверу и немного уменьшаем время загрузки страниц сайта. Так зачем игнорировать такую возможность?

Вместо того чтобы использовать платные CDN-сервисы, мы можем свободно загружать jQuery с серверов крупных компаний. Для jQuery есть несколько популярных общедоступных CDN:

• jQuery CDN
• Google CDN
• Microsoft CDN
• CDNJS CDN
• Яндекс CDN

Подробней о использовании указанных CDN-сервисов вы можете прочитать на официальном сайте jQuery. Что касается меня, для своих нужд я предпочитаю использовать Google CDN — наиболее популярный среди всех бесплатных CDN-сервисов, 89% от загрузок которого приходится на библиотеку jQuery. Поэтому, далее речь пойдет о использовании именного этого сервиса.

Особенности использования Google CDN

При использовании Google CDN, вы можете прямо указать версию (1.11.1) загружаемой библиотеки или с помощью модификации фрагмента ссылки, указать необходимые параметры для загрузки jQuery.

Пример подключения jQuery с использованием точной версии библиотеки:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Для загрузки последней актуальной версии jQuery используем код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Следует отметить, что время жизни файла в кэше браузера, напрямую зависит от ссылки, которую мы будем использовать для подключения библиотеки. При использовании ссылки содержащей точную версию библиотеки, время хранение файла в кэше будет ограничено сроком равным одному году max-age=31536000. Если вы используете ссылку для последней актуальной версии jQuery, файл будет храниться в кэше в течении часа max-age=3600.

Используем Google CDN для загрузки jQuery в WordPress

Для загрузки jQuery с Google CDN на сайте использующем WordPress, для начала необходимо выяснить необходимую версию библиотеки. Для этого достаточно заглянуть в содержимое HTML-документа вашего сайта. Для правильного подключения jQuery в 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.1');
    wp_enqueue_script('jquery');
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

Данная функция удалит из очереди на подключение библиотеку из каталога wp-includes и заменяет ее на jQuery с сайта Google CDN.