Лінива завантаження коментарів Disqus

32

Від автора: у продуманих макетах коментарі, як правило, відіграють другорядну роль. У безлічі випадків відвідувачі так і не долистывают сторінку до коментарів. Але я вам відкрию очі, за замовчуванням коментарі завантажуються на сайт, що може викликати проблеми на поганому з’єднанні.

Давайте розберемо код вставки від Disqus:

(function() {
var d = document, s = d.createElement(‘script’);
s.src = ‘//username.disqus.com/embed.js’;
s.setAttribute(‘data-timestamp’, +new Date());
(d.head || d.body).appendChild(s);
})();

Вони кажуть: «Вставте наступний код в тому місці, де хочете помістити коментарі Disqus». Припустимо, що ви хороший розробник і підключаєте всі скрипти перед закриваючим тегом body. В один прекрасний день ви захотіли підключити коментарі Disqus на свій сайт і вставили код вище десь в середині документа в тому місці, де повинен розташовуватися блок коментарів.

Що тоді відбудеться? Тоді першим JS файлом, який почне завантажуватися, стане username.disqus.com/embed.js. Не факт, що він завантажиться першим, але він перший з лінійки JS файлів, який приверне увагу браузера. Не варто перше місце відвести під головний JS файл сайту? Якщо головний JS файл завантажиться не вчасно, багато чого може піти не так (наприклад, «сплячі» button тощо). Особливо якщо під час розробки ви не дотримувалися технік прогресивного поліпшення або витонченої деградації.

Це також впливає на роботу інших зовнішніх файлів, таких як зображення і CSS файли. Уявіть, що ви на смартфоні з 2G з’єднанням чекаєте, коли завантажиться віджет коментарів, щоб подивитися фото кошеня.

Я провів тестування і з’ясував, що віджет Disqus без самих коментарів важить 2.49 Мб! Це купа запитів JS, CSS, зображень і файлів шрифтів, які в багатьох випадках сильно уповільнюють роботу інших, більш критичних частин або функціонал вашого сайту.

Ленивая загрузка комментариев Disqus

Коментарі Disqus: без ледачою завантаження

Рішення: крихітний JavaScript плагін

Для ледачої завантаження коментарів Disqus я написав крихітний JS плагін. Неважливо де розташовується зона коментарів, вище або нижче області перегляду, вона не довантажити, поки на це не з’явиться причина:

Ленивая загрузка комментариев Disqus

Коментарі Disqus: з ледачою завантаженням

Сам плагін представляє собою буквально пару рядків JS. Я зробив дві версії: на чистому JS і на JQuery. Плагін називається disqusLoader, можете завантажити файли:

disqusloader.js; незалежний (IE 9+). 779 байт в минифицированном і стислому вигляді.

jquery.disqusloader.js; потрібен jQuery. 569 байт в минифицированном і стислому вигляді.

Як його встановити. Спершу необхідно вставити в HTML-тег в тому місці, де повинна бути область коментарів:

Після необхідно ініціалізувати плагін, ось так:

// звичайний JS
disqusLoader( ‘.disqus’, { scriptUrl: ‘//username.disqus.com/embed.js’ });
// jQuery
$.disqusLoader( ‘.disqus’, { scriptUrl: ‘//username.disqus.com/embed.js’ });

«Ну гаразд, а що робити з налаштуваннями Disqus» — запитаєте ви. Є ще один аргумент, який приймає значення Disqus. Також є ще парочка опцій в плагіні:

var options =
{
scriptUrl: ‘//username.disqus.com/embed.js’,
/*
@type: string (url)
@default: none
@required
URL виконуваного JS файлу Disqus. Значення запам’ятовується при першому виклику функції і далі ігнорується, так як Disqus дозволяє тільки один примірник на сторінці.
.
*/
laziness: 1,
/*
@type: int (>=0)
@default: 1
Встановлює ступінь ледачою завантаження віджета: (viewport height) * laziness . Наприклад:
0 – віджет починає завантажуватися, як тільки незначна його частина потрапила в область перегляду;
1 – віджет починає завантажуватися, коли відстань від елемента до кордону області перегляду менше висоти області перегляду;
2 — 2x від області перегляду і т. д.
*/
throttle: 250,
/*
@type: int (milliseconds)
@default: 250
Задає частоту обчислень, який буде проводити плагін під час різних процесів, таких як зміна розміру вікна браузера або прокрутка екрану
.
250 = 4 times in a second.
*/
/*
@type: function
@default: none
Рідна опція Disqus. Більш детально дивіться в посібнику користувача Disqus.
*/
disqusConfig: function()
{
this.page.title = ‘Page Title’;
this.page.url = ‘http://url.to/your-website’;
this.page.identifier = ‘unique-identifier’;
}
};
// звичайний JS
disqusLoader( ‘.disqus’, options );
// jQuery
$.disqusLoader( ‘.disqus’, options );

Спробуйте плагін самі, подивіться демо. Можете приєднатися до проекту або стежити за ним на GitHub.

Колбек-функції Disqus

Колбек-функції – відмінна штука, з їх допомогою можна реагувати на дії користувача. В Disqus є всього один вид офіційно задокументованих колбек-функцій. Якщо ж відкрити код файлу embed.js можна знайти додаткові види зумовлених колбек-функцій:

Ленивая загрузка комментариев Disqus

Коментарі Disqus: список колбек-функцій у вихідному коді embed.js

Схоже, що тільки два види активні: onNewComment і onReady. Цього цілком достатньо для невеликого, але помітного поліпшення – індикатора завантаження.

Індикатор завантаження

Зазвичай завантаження віджета Disqus складається з двох частин:

завантаження файлу `embed.js`;

завантаження внутрішніх файлів і виконання запитів іншого типу.

Disqus сам піклується про другому етапі, показуючи анімоване зображення завантаження. А перший етап? Існує маса причин, чому завантаження зовнішніх JS файлів може тривати десятки секунд. Підступ у тому, що незалежно від мережі, в якій знаходиться користувач, він буде знати, що на сайті передбачена функція коментарів. Користувальницький досвід криється в деталях!

Ленивая загрузка комментариев Disqus

Коментарі Disqus: індикатор завантаження

Технічна частина проста: новий HTML тег і JS колбек-функція, яка буде його ховати:

Loading comments…

// звичайний JS
disqusConfig: function()
{
this.callbacks.onReady = [function()
{
var el = document.querySelector( ‘.disqus-placeholder’ );
if( el.classList )
el.classList.add( ‘is-hidden’ ); // IE 10+
else
el.className += » + ‘is-hidden’; // IE 8-9
}];
}
// jQuery
disqusConfig: function()
{
this.callbacks.onReady = [function()
{
$( ‘.disqus-placeholder’ ).addClass( ‘is-hidden’ );
}];
}
.disqus-placeholder.is-hidden { display: none; }

На сторінці демо можна побачити все це у дії. Але спершу почистіть кеш браузера і сповільніть швидкість з’єднання.

Кілька примірників або сайтів за раз?

Працюючи над цією технікою, я виявив кілька серйозних обмежень, які є на даний момент…

Неможливо мати декілька скриптів на одній сторінці

Після завантаження скрипта (наприклад, //username.disqus.com/embed.js) створюється глобальна змінна window.DISQUS, але тільки в тому випадку, якщо вона не була оголошена раніше (поганий знак). Я провів тестування. Я ініціалізував віджет в исходнике А. Потім звільнив місце під майбутню змінну window.DISQUS = undefined і ініціалізував видежт в исходнике Ст. Результат був гнітючий: колбек-функції запускалися по кілька разів, коментарі дублювалися і т. д. Очевидно, що поточний код Disqus не підтримує кілька змінних і не створений для роздільної роботи з екземплярами віджета.

Неможливо помістити на одну сторінку кілька віджетів

В об’єкті DISUQS є публічний JS метод reset(). Якщо ви працювали з Disqus, то повинні знати, що віджет вставляється в тег з ідентифікатором disqus_thread. Я протестував віджет з двома тегами: завантажив віджет в перший тег, видалив ID атрибут і вставив віджет у другий елемент. Після я викликав функцію reset, очікуючи, що з’явиться другий примірник нижче першого. Однак виклик функції на завантаження нового примірника знищує всі попередні инициализированные віджети. На жаль, на даний момент Disqus спроектований для вставки одного примірника.

Віджет можна перезавантажувати в реальному часі

Але є і плюси! Не можна мати кілька поштових міні-програм за один раз, проте ви можете знищити старі екземпляри і завантажити нові. Переведемо теорію в практику в самій типової ситуації – вкладки. Потрібно лише викликати плагін кожен раз, коли активується нова вкладка:

// викликайте цю функцію при кожному натисканні на вкладку:
var initDisqus = function( content )
{
disqusLoader( content,
{
scriptUrl: ‘//username.disqus.com/embed.js’,
disqusConfig: function()
{
this.page.identifier = content.getAttribute( ‘data-disqus-id’ );
this.page.title = content.getAttribute( ‘data-disqus-title’ );
}
});
}

На сторінці демо можна подивитися код в дії, а також подивитися весь код.

Заключні думки

Цей пост не про недоліки Disqus. Він про помилки, які ми, розробники здійснюємо. У нашому світі повно інструментів, і тільки від нас залежить, як ми ними скористаємося. Навіть якщо ці інструменти вирішують якісь конкретні проблеми, вони можуть принести нові, якщо неправильно їх використовувати. Кожен раз, коли ви вибираєте простий шлях, ви втрачаєте користувачів, падає конверсія, а відсоток відмови збільшується. Вже зараз можна використовувати ліниву завантаження для Disqus, Google Adsense, Google Maps, кнопок соціальних мереж, а також можна розробити і поділитися власними техніками. Будьте відповідальними розробниками!