Hi!
Ich bin wirklich begeistert von dieser neuen Funktion. Ich habe lange auf eine solche Lösung gewartet, und das erste Feedback unserer Leser bei Tecnoblog war großartig – sie lieben es, die Community integriert zu haben.
Allerdings habe ich nach einigen Tests in der Praxis ein paar technische Hürden entdeckt, die wir beseitigen müssen, damit sich das wie ein wirklich natives Kommentarsystem anfühlt und, was noch wichtiger ist, damit es für Websites mit hohem Traffic nachhaltig ist.
Hier ist, was ich bisher festgestellt habe:
1. Leistung & Serverlast
Unsere Serverlast ist deutlich angestiegen, nachdem wir die vollständige App eingebettet haben. Laut Cloudflare hat sich unser Anfragevolumen verzehnfacht. Hier ein paar Ideen zur Optimierung:
- Lazy Loading: Die Implementierung von Lazy Loading für das JS hilft sehr (ich verwende bereits einen Workaround dafür).
<script type="text/javascript">
DiscourseEmbed = {
discourseUrl: '<?php echo esc_url($discourse_url); ?>',
<?php if ($use_topic_id): ?>
// ID-Modus: Thema in der Datenbank gespeichert, immun gegen URL-Änderungen
topicId: <?php echo intval($topic_id); ?>,
<?php else: ?>
// URL-Modus: Fallback, wenn die Erstellung über die API fehlschlägt
discourseEmbedUrl: '<?php echo esc_url($permalink); ?>',
<?php endif; ?>
fullApp: true,
embedHeight: '800px',
};
(function() {
var container = document.getElementById('discourse-comments');
// Prüft, ob der Browser IntersectionObserver unterstützt
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// Wenn das div in den sichtbaren Bereich kommt, wird das Skript geladen
loadDiscourse();
observer.unobserve(entry.target);
}
});
}, { rootMargin: "1500px" }); // Lädt 1500px vor Erreichen des div
observer.observe(container);
} else {
// Fallback für ältere Browser
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>
Hier kannst du sehen, wie die Anzahl der Anfragen nach der Implementierung von Lazy Loading gesunken ist (und einige Teile der Website waren noch im Cache, also ist dies nicht das Endergebnis):
-
Payload reduzieren: Können wir die innerhalb des Embeds geladenen Ressourcen reduzieren? Z. B. habe ich Abfragen für Chat-URLs und AI-Credit-Checks bemerkt – sind diese für die Embed-Ansicht notwendig?
-
Anfragehäufigkeit: Die Echtzeit-POST-Anfragen sind etwas aggressiv. Vielleicht können wir die Abfragehäufigkeit für die Embed-Version reduzieren?
-
Cache: Verbessertes Cache-Management für eingebettete Themen, um Traffic-Spitzen zu bewältigen.
2. Analytics-Chaos
Aktuell löst das Embed Google Analytics/GTM-Skripte aus. Dies verdoppelt unsere Seitenaufrufe (ein Hit für den Beitrag, ein anderer für den iframe), was unsere Daten verfälscht. Es wäre ideal, wenn das System erkennen könnte, dass es sich in einem iframe befindet, und alle Tracking-Skripte automatisch deaktivieren würde (einschließlich der Discourse-Analytics).
3. Das iFrame-Höhenproblem
Das ist wahrscheinlich die größte Hürde für die UX. Wenn ein Beitrag keine Kommentare hat, entsteht eine seltsame leere Lücke. Wenn es einen langen Thread gibt, wird der iframe nach den ersten 2 oder 3 Kommentaren abgeschnitten, was zu einem „Scrollen-im-Scrollen“ führt, was ziemlich schlecht ist, besonders auf Mobilgeräten.
Um wirklich mit etwas wie Disqus mithalten zu können, muss die Höhe dynamisch sein (je nach Anzahl der Kommentare) und außerdem einen „Mehr anzeigen“-Button haben, der den Thread nach einer bestimmten Anzahl von Antworten erweitert.
4. Plugin-Konflikte
Da das Embed alle aktiven Plugins lädt, beobachten wir einige seltsames Verhalten. Zum Beispiel弹出t „Google One Tap“ innerhalb des Blogbeitrags auf. Wenn sich ein Benutzer anmeldet, wird der iframe aktualisiert und leitet ihn zur Community-Startseite weiter, anstatt im Kommentar-Thread zu bleiben. Die Möglichkeit, bestimmte Plugins für die Embed-Ansicht manuell zu deaktivieren, wäre ein Segen.
5. Login-Reibung
Der aktuelle Ablauf ist ein echter Konversions-Killer: Benutzer klickt auf Anmelden → Neuer Tab öffnet sich → Anmeldung erfolgt → Benutzer landet auf der Community-Startseite. Zurück im Blogbeitrag sieht der iframe immer noch so aus, als wäre der Benutzer nicht angemeldet, bis der Benutzer die gesamte Seite manuell aktualisiert. Es ist ein verwirrender Kreislauf, der dazu führt, dass die Leute aufgeben und gehen, bevor sie kommentieren können.
Seit wir das neue Embed aktiviert haben, haben sich unsere täglichen Registrierungen mehr als verdoppelt, was großartig ist. Unsere Engagement-Metriken haben sich jedoch überhaupt nicht verbessert. Tatsächlich sind unsere DAU/MAU gesunken – wir haben mehr angemeldete Benutzer, aber sie interagieren nicht. Metriken wie „Täglich aktive Benutzer“, „Neue Mitwirkende“ und „Beiträge“ haben keine Zunahme verzeichnet.
Dies beweist, dass die Leute mitmachen wollen, aber sie verirren sich im Login-Kreislauf und brechen den Beitrag ab, bevor sie tatsächlich kommentieren können.
6. Mobile UI
Auf Mobilgeräten nimmt das Antwortfenster den gesamten Bildschirm ein, sodass man den Kontext der Konversation verliert, auf die man antwortet. Es fühlt sich etwas beengend an – alles, was wir tun können, um es kompakter zu gestalten, wäre ein großer Gewinn.
Ich möchte wirklich, dass dies das Standardsystem für Tecnoblog (und auch für eine andere Website, die wir besitzen) wird. Sag mir Bescheid, wenn du tiefer in einen dieser Punkte einsteigen möchtest!
