Привет!
Я очень рад появлению этой новой функции. Я давно ждал решения такого рода, и первоначальные отзывы наших читателей на Tecnoblog были отличными — им нравится, что сообщество интегрировано.
Однако после некоторых тестов в реальных условиях я обнаружил несколько технических препятствий, которые нам нужно преодолеть, чтобы система комментариев ощущалась по-настоящему нативной и, что более важно, чтобы она была устойчивой для сайтов с высоким трафиком.
Вот что я пока обнаружил:
1. Производительность и нагрузка на сервер
Нагрузка на наш сервер значительно возросла после того, как мы внедрили полное приложение. Судя по Cloudflare, объем наших запросов увеличился в 10 раз. Вот несколько идей по оптимизации:
- Ленивая загрузка: Внедрение ленивой загрузки для JS очень помогает (я уже использую обходной путь для этого).
<script type="text/javascript">
DiscourseEmbed = {
discourseUrl: '<?php echo esc_url($discourse_url); ?>',
<?php if ($use_topic_id): ?>
// Режим ID: Тема сохранена в базе, не подвержена изменениям URL
topicId: <?php echo intval($topic_id); ?>,
<?php else: ?>
// Режим URL: Резервный вариант при сбое создания через API
discourseEmbedUrl: '<?php echo esc_url($permalink); ?>',
<?php endif; ?>
fullApp: true,
embedHeight: '800px',
};
(function() {
var container = document.getElementById('discourse-comments');
// Проверяет, поддерживает ли браузер IntersectionObserver
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// Когда div появляется на экране, загружает скрипт
loadDiscourse();
observer.unobserve(entry.target);
}
});
}, { rootMargin: "1500px" }); // Загружает за 1500px до появления div
observer.observe(container);
} else {
// Резервный вариант для старых браузеров
loadDiscourse();
}
function loadDiscourse() {
var d = document.createElement('script');
d.type = 'text/javascript';
d.async = true;
d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
}
})();
</script>
Здесь вы можете увидеть снижение количества запросов после внедрения ленивой загрузки (и некоторые части сайта всё ещё кэшировались, так что это не окончательный результат):
-
Сокращение полезной нагрузки: Можем ли мы уменьшить ресурсы, загружаемые внутри встраиваемого элемента? Например, я заметил запросы к URL чата и проверкам кредитов ИИ — нужны ли они для встраиваемого представления?
-
Частота запросов: Реальные POST-запросы в реальном времени немного агрессивны. Может быть, мы можем снизить частоту опроса для встраиваемой версии?
-
Кэш: Улучшенное управление кэшем для встраиваемых тем для обработки пиков трафика.
2. Проблемы с аналитикой
В данный момент встраиваемый элемент запускает скрипты Google Analytics/GTM. Это удваивает количество просмотров наших страниц (один хит для поста, другой для iframe), что искажает наши данные. Было бы идеально, если бы система могла определить, что находится в iframe, и автоматически отключить любые скрипты отслеживания (включая аналитику Discourse).
3. Проблема с высотой iFrame
Это, вероятно, самое большое препятствие для UX. Если у поста нет комментариев, появляется странная пустая область. Если же ветка комментариев длинная, iframe обрезается после первых 2-3 комментариев, заставляя пользователя прокручивать содержимое внутри прокручиваемой области, что очень плохо, особенно на мобильных устройствах.
Чтобы действительно конкурировать с чем-то вроде Disqus, нам нужна динамическая высота (в зависимости от количества комментариев) и кнопка «Читать далее», которая раскрывает ветку после определённого количества ответов.
4. Конфликты плагинов
Поскольку встраиваемый элемент загружает все активные плагины, мы наблюдаем некоторое странное поведение. Например, «Google One Tap» появляется внутри поста блога. Когда пользователь входит в систему, iframe обновляется и перенаправляет его на домашнюю страницу сообщества вместо ветки комментариев. Возможность вручную отключать определённые плагины для встраиваемого представления была бы спасением.
5. Трение при входе в систему
Текущий процесс немного убивает конверсию: пользователь нажимает вход —> открывается новая вкладка —> происходит вход —> пользователь остаётся на домашней странице сообщества. Назад в посте блога iframe по-прежнему выглядит как неавторизованный, пока пользователь вручную не обновит всю страницу. Это запутанный цикл, из-за которого люди сдаются и уходят, прежде чем оставить комментарий.
После активации нового встраиваемого элемента наши ежедневные регистрации более чем удвоились, что здорово. Однако наши метрики вовлечённости не изменились. На самом деле, наши DAU/MAU упали — у нас больше пользователей, вошедших в систему, но они не взаимодействуют. Метрики вроде «Ежедневные вовлечённые пользователи», «Новые участники» и «Публикации» не показали никакого роста.
Это доказывает, что люди хотят присоединиться к разговору, но они теряются в цикле входа и бросают пост, прежде чем смогут фактически оставить комментарий.
6. Мобильный интерфейс
На мобильных устройствах окно ответа занимает весь экран, поэтому вы теряете весь контекст разговора, на который отвечаете. Это ощущается немного стеснённо — всё, что мы можем сделать, чтобы сделать его более компактным, было бы огромным успехом.
Я действительно хочу сделать эту систему системой по умолчанию для Tecnoblog (и также для другого сайта, которым мы владеем). Дайте мне знать, если вы хотите глубже погрузиться в любой из этих пунктов!
